/**
 * Showcase Page — Page-Specific Styles
 *
 * Styles for /showcase/ — the portfolio gallery page presenting Big Bang
 * Visibility's concept sites and landing pages.
 *
 * Layout: one section--dark starscape surface (Texture by surface rule —
 * 01-prd-marketing-restyle.md FR 9; the page has no dark↔light boundary, so
 * no .wave) containing an intro block (spark kicker, serif h1, body), a
 * Concept Sites group, and a Landing Pages group. Each group's label is an h2
 * carrying the baseline .section__eyebrow register (FR 18, task 14.5) above a
 * stack of full-width project rows — the linked image on one side, the copy
 * on the other, sides alternating by CSS grid placement only (the DOM order
 * is image → copy on every row, so reading and Tab order never flip); rows
 * stack image-first at 768px and below. The rows replaced a two-column card
 * grid on 2026-09-01 (restyle task 14.6): four long items read better as rows,
 * and the lone Landing Pages item stops being an orphan in a grid.
 *
 * Row image: 16:10, served at 760px (1×) and 1520px (2×). The row shows it at
 * ≈ 605px on a full desktop container and up to ≈ 728px stacked at tablet, so
 * 1520 keeps every size crisp at 2×. Sources are shot and encoded by
 * tools/visual/probes/showcase-images.js + showcase-images.py.
 * sizes: (max-width: 768px) calc(100vw - 40px), (max-width: 1199px) calc(55vw - 55px), 605px
 *
 * Responsive Breakpoints (Desktop-First — matches site.css):
 * - Desktop: 1025px+ (base styles)
 * - Tablet:  max-width: 768px
 * - Mobile:  max-width: 480px
 */

/**
 * Semi-transparent colors — none remain as raw literals: the group label's
 * #ffffff1a hairline underline retired with its label rule on 2026-09-01
 * (task 14.5). See css-conventions.md § Semi-Transparent Colors.
 *
 * The mockup edge and its hover tint are var(--border-hairline-light) /
 * var(--tint-primary-edge); the image shadows var(--shadow-image) /
 * var(--shadow-image-hover) — all from site.css, see the token comments there.
 */

/* ==========================================================================
   Showcase Section — Intro
   ========================================================================== */

/**
 * Intro block sits above the rows inside the same section container.
 * Bottom margin separates it from the first group without adding a second
 * section and doubling the section padding.
 */
.showcase__intro {
  margin-bottom: var(--space-2xl);
}

/**
 * Page heading (h1) — primary landmark for the page. DM Serif Display at its
 * single 400 weight: the Foundation serif register (01-prd-marketing-restyle.md
 * FR 5) landing on this page-scoped heading class in its Phase D parent (task
 * 14.2 — the baseline .section__heading reaches only the pages that use it).
 * The display size keeps its clamp(); the −0.02em tracking was tuned for the
 * bold sans and goes with it; color inherits var(--text) from the dark section
 * (css-conventions.md § Theming — Foreground Roles, authoring bucket 1).
 */
.showcase__heading {
  font-family: var(--font-accent);
  font-size: clamp(3rem, 4.9vw, 5rem);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: var(--space-md);
}

.showcase__body p {
  font-size: var(--font-size-large);
  font-weight: 400;
  line-height: 1.7;
}

.showcase__body p + p {
  margin-top: var(--space-sm);
}

/* ==========================================================================
   Showcase Groups
   ========================================================================== */

/**
 * Groups separate Concept Sites from Landing Pages. Each group contains
 * a label heading and a .showcase-rows stack.
 */
.showcase-group + .showcase-group {
  margin-top: var(--space-3xl);
}

/**
 * Group label — an h2 (the page's second heading tier: h1 → group → row h3)
 * carrying the baseline .section__eyebrow register from site.css (spark, tiny /
 * 700 / 0.14em on --text-accent). The label was already the group's kicker, so
 * FR 18's eyebrow rule reclasses it rather than adding a second line above it
 * (01-prd-marketing-restyle.md § 7, task 14.5). The former uppercase-sans rule
 * and its hairline underline retired with the reclass — the spark is the marker
 * now. This rule keeps only the gap to the rows: the eyebrow's own --space-sm
 * is the kicker→heading rhythm, and here the label heads a stack of rows.
 */
.showcase-group__heading {
  margin-bottom: var(--space-xl);
}

/* ==========================================================================
   Showcase Rows
   ========================================================================== */

/**
 * The rows of one group stack at the largest routine rhythm. Each row is a
 * whole project and the next row's image is the visual break, so nothing is
 * drawn between rows — no rule, no frame: a boxed row would chop the
 * starfield into panels, and the Texture tier wants the tile ambient behind
 * the content (design.md § Section Layout Patterns).
 */
.showcase-rows {
  display: grid;
  gap: var(--space-3xl);
}

/**
 * One project = one row: an <article> holding the linked image and the copy
 * side by side on a two-column grid (image ≈ 55 %, copy ≈ 45 %; minmax(0, …)
 * so a long word can never widen a column), the copy centred against the
 * image. The reverse modifier swaps the columns by grid placement only — the
 * DOM stays image → copy on every row — and flips the template with them, so
 * the wide column travels with the image (a first cut placed the image in the
 * unchanged 9fr column and rendered it 110px narrower on reverse rows; caught
 * by the 14.6 probe). Alternation is set per row in the markup rather than
 * by :nth-child, because it runs across the two groups (rows 1–3 in one,
 * row 4 in the next) and must not restart at a group.
 */
.showcase-row {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: var(--space-2xl);
  align-items: center;
}

.showcase-row--reverse {
  grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
}

.showcase-row--reverse .showcase-row__image {
  grid-column: 2;
  grid-row: 1;
}

.showcase-row--reverse .showcase-row__content {
  grid-column: 1;
  grid-row: 1;
}

/**
 * The image is the row's link (same destination as the CTA — its accessible
 * name is the img alt, which on a portfolio page is content) and the one
 * place the ghost line lands — as a MAT, not a border: the 1px cream hairline
 * sits --space-xs outside the picture with the starfield showing through the
 * gap, so the line reads on a light mockup as well as a dark one (flush to
 * the cream Aura + Earth shot it vanished; operator ask at the 14.6 review,
 * 2026-09-01 — home's gallery frames its images the same way, at a wider
 * mat). The frame is flat and transparent; the picture inside carries the
 * shadow and clips its own hover ease. Hover is the card response design.md
 * § Component Behavior prescribes, on the interactive element alone: the
 * edge warms to the brand tint, the shadow deepens, the picture eases 3 % —
 * the element itself never moves (01-prd-marketing-restyle.md FR 11).
 * Keyboard focus takes the site ring on the --focus role. The link holds no
 * visible text (only the new-tab cue on the live-page row, visually hidden),
 * so color: inherit is declared to satisfy css-conventions.md § Classed
 * Links Must Declare Color rather than left to the UA stylesheet.
 */
.showcase-row__image {
  display: block;
  padding: var(--space-xs);
  border: 1px solid var(--border-hairline-light);
  border-radius: 12px; /* the card radius; minus the 5px mat ≈ the picture's 8px, so the corners stay concentric */
  color: inherit;
  transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.showcase-row__image:hover,
.showcase-row__image:focus-visible {
  border-color: var(--tint-primary-edge);
}

.showcase-row__image:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/**
 * The picture inside the mat: 16:10 (matches the assets and home's gallery),
 * clipped at the image radius, a raised placeholder while it loads, and the
 * image shadow — the depth belongs to the mockup, not the frame.
 */
.showcase-row__image picture {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  background-color: var(--surface-raised); /* the role token, not the ink palette token (B5) */
  box-shadow: var(--shadow-image);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.showcase-row__image:hover picture,
.showcase-row__image:focus-visible picture {
  box-shadow: var(--shadow-image-hover);
}

/* object-position: top shows a site's nav and hero, not its footer */
.showcase-row__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top;
  transform-origin: top center;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.showcase-row__image:hover img,
.showcase-row__image:focus-visible img {
  transform: scale(1.03);
}

/**
 * Copy column — title, category, description, highlights, CTA in plain flow.
 * Text colours follow css-conventions.md § Theming — Foreground Roles: the
 * inheriting runs (title, description) set nothing and take var(--text) from
 * the dark section; the muted runs consume var(--text-muted) on their base
 * rule (authoring buckets 1 and 2 — the same rendered values the former
 * palette-token declarations produced on this fixed ink context).
 */

/* Project title (h3) — sans at component scale; the serif is the section register's */
.showcase-row__title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0.6rem;
}

/* Category subtitle — design rationale label, muted and italic */
.showcase-row__category {
  font-size: var(--font-size-small);
  font-weight: 400;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

/* Description — the expanded copy */
.showcase-row__description {
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

/* Quick-highlight bullets */
.showcase-row__highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.showcase-row__highlights li {
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted);
  padding-left: 2rem;
  position: relative;
}

/* The dash marker — the brand orange as a decorative glyph on ink (≈ 6:1) */
.showcase-row__highlights li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

/**
 * CTA link — the row's text link, in the site link colours (--link /
 * --link-hover), with an underline that draws in on hover. The draw is a
 * transform (scaleX from the left), not a width transition: design.md
 * § Cross-Cutting Motion Rules animates transform and opacity only. Keyboard
 * focus takes the site ring on the --focus role and the drawn underline.
 */
.showcase-row__cta {
  display: inline-block;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
  position: relative;
  transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.showcase-row__cta::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--link-hover);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.showcase-row__cta:hover {
  color: var(--link-hover);
}

.showcase-row__cta:hover::after,
.showcase-row__cta:focus-visible::after {
  transform: scaleX(1);
}

.showcase-row__cta:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* ==========================================================================
   Responsive — Tablet (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
  .showcase-rows {
    gap: var(--space-2xl);
  }

  /* One column: every row stacks image-first, the reverse placement released */
  .showcase-row {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .showcase-row--reverse .showcase-row__image,
  .showcase-row--reverse .showcase-row__content {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ==========================================================================
   Responsive — Mobile (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {
  .showcase-row__title {
    font-size: var(--font-size-2xl);
  }
}

/* ==========================================================================
   Exception — Reduced Motion
   ========================================================================== */

/**
 * Gated on the root motion-reduce class (design.md § Cross-Cutting Motion
 * Rules — the head include stamps it before first paint for the OS preference
 * and the site's toggle alike). The hover transitions above run 300–400ms,
 * over the ~200ms threshold html-conventions.md § Reduced Motion sets, so
 * here they end instantly and the picture never eases; the colour and edge
 * still change on hover — a response, not an absence. Replaced the page's
 * OS-query-only block with the row rewrite (task 14.6, 2026-09-01).
 */
html.motion-reduce .showcase-row__image,
html.motion-reduce .showcase-row__image picture,
html.motion-reduce .showcase-row__image img,
html.motion-reduce .showcase-row__cta,
html.motion-reduce .showcase-row__cta::after {
  transition: none;
}

html.motion-reduce .showcase-row__image:hover img,
html.motion-reduce .showcase-row__image:focus-visible img {
  transform: none;
}