/* =============================================================
   PARASTUDIO — LAYOUTS
   /css/layouts.css

   Page-level layout patterns. Requires /css/theme.css loaded.

   HOW TO ADD A LAYOUT TO THE STYLEGUIDE
   ----------------------------------------
   1. Write your CSS below with a meaningful class name.
   2. Add an @sg-layout annotation directly above the rule:

      /* @sg-layout: .class-name | Label | Description | <preview HTML> */

   3. Reload /styleguide.html — it appears automatically.

   The preview HTML renders inside a padded box so you can
   show the layout in context with placeholder blocks.
   ============================================================= */


/* ── Container ──────────────────────────────────────────────── */

/* @sg-layout: .layout-container | Container | Max-width centered container with responsive horizontal padding. */
.layout-container {
  width: 100%;
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 5vw, var(--space-12));
}

.layout-container--wide {
  max-width: var(--content-wide);
}


/* ── Page section ───────────────────────────────────────────── */

/* @sg-layout: .layout-section | Page Section | Standard section block with responsive vertical padding. */
.layout-section {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
}

.layout-section--sm {
  padding-block: clamp(var(--space-10), 5vw, var(--space-16));
}


/* ── Two column ─────────────────────────────────────────────── */

/* @sg-layout: .layout-two-col | Two Column | Equal 50/50 grid. Stacks to single column below 768px. */
.layout-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

@media (max-width: 768px) {
  .layout-two-col { grid-template-columns: 1fr; }
}


/* ── Three column ───────────────────────────────────────────── */

/* @sg-layout: .layout-three-col | Three Column | Equal three-column grid. Stacks below 768px. */
.layout-three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 768px) {
  .layout-three-col { grid-template-columns: 1fr; }
}


/* ── Sidebar ────────────────────────────────────────────────── */

/* @sg-layout: .layout-sidebar | Sidebar | Wide main content with a narrower sidebar. Stacks below 768px. */
.layout-sidebar {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-12);
  align-items: start;
}

.layout-sidebar--left {
  grid-template-columns: 300px 1fr;
}

@media (max-width: 768px) {
  .layout-sidebar,
  .layout-sidebar--left { grid-template-columns: 1fr; }
}


/* ── Split ──────────────────────────────────────────────────── */

/* @sg-layout: .layout-split | Split (2/3 + 1/3) | Asymmetric two-column — wide left, narrow right. Stacks below 768px. */
.layout-split {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

.layout-split--reverse {
  grid-template-columns: 1fr 2fr;
}

@media (max-width: 768px) {
  .layout-split,
  .layout-split--reverse { grid-template-columns: 1fr; }
}


/* ── Auto grid ──────────────────────────────────────────────── */

/* @sg-layout: .layout-auto-grid | Auto Grid | Responsive auto-fill card grid — fills columns at 260px min. */
.layout-auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
}


/* ── Masonry-ish stack ──────────────────────────────────────── */

/* @sg-layout: .layout-stack | Stack | Vertical stack with consistent spacing between children. */
.layout-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.layout-stack--sm  { gap: var(--space-3); }
.layout-stack--lg  { gap: var(--space-10); }


/* ── Cluster (horizontal wrap) ──────────────────────────────── */

/* @sg-layout: .layout-cluster | Cluster | Horizontal wrapping row — useful for tags, pills, or inline groups. */
.layout-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}


/* ── Center ─────────────────────────────────────────────────── */

/* @sg-layout: .layout-center | Center | Flexbox center — both axes. Useful for hero placeholders or empty states. */
.layout-center {
  display: flex;
  align-items: center;
  justify-content: center;
}