/* ==========================================================================
   pages.css — page-scoped styles
   --------------------------------------------------------------------------
   Milestone 1 · Foundation scaffold

   Milestone 4 · holds the layout styles for the component showcase page
   (pages/components.html). These are page layout rules only — every button
   style lives in css/button.css (imported by components.css).

   Milestone 8 · gains the framed panel (.showcase-panel) used to preview
   the section & layout components.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section background texture (Visual Polish Pass 2) — subtle full-width
   background image on the intro section of the interior pages. The image is
   painted by a positioned ::before layer at 5% opacity over the warm
   background color (the Pass 2 3–8% band), so it blends with the page and
   never reduces readability. The per-page image is supplied via the
   `--section-bg-image` custom property in each page's own stylesheet.
   -------------------------------------------------------------------------- */
.section-bg {
  position: relative;
  isolation: isolate;
}

.section-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-background);
  background-image: var(--section-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.05;
}

/* --------------------------------------------------------------------------
   Showcase page — pages/components.html
   -------------------------------------------------------------------------- */
.showcase-header {
  padding-block: var(--space-48) var(--space-24);
  border-bottom: 1px solid var(--color-border);
}

.showcase-header__intro {
  margin-block-start: var(--space-8);
}

.showcase-section {
  padding-block: var(--space-32);
  border-bottom: 1px solid var(--color-border);
}

.showcase-section__intro {
  margin-block-start: var(--space-8);
}

.showcase-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24);
  margin-block-start: var(--space-24);
  padding: 0;
  list-style: none;
}

.showcase-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-8);
  min-width: 120px;
}

.showcase-cell__label {
  font-size: var(--text-caption-current);
  line-height: var(--lh-caption);
  color: var(--color-body);
}

/* Card showcase — grid stacking 3→2→1 across breakpoints */
.showcase-subsection {
  margin-block: var(--space-32) 0;
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  margin-block-start: var(--space-24);
}

@media (min-width: 768px) {
  .showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .showcase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Contact cards stack 4 → 2×2 → 2×2 (Phase 5 §6.1) */
.showcase-grid--contact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1024px) {
  .showcase-grid--contact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.showcase-cell--card {
  min-width: 0;
  align-items: stretch;
}

/* Hero showcase — full-width framed previews */
.showcase-hero {
  margin-block-start: var(--space-24);
  overflow: hidden;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Section & layout showcase — framed, padded previews of band, split, grid
   and state components. */
.showcase-panel {
  margin-block-start: var(--space-24);
  padding: var(--space-24);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}