/* websites.css. Owner: S4. The Websites hub and its free builder, revamp and
   Personalize It pages (merge plan 3.3, "Websites hub and the three pages").
   Loaded after components.css and sections.css on those four pages only
   (shell.mjs, PAGES).

   Most of this page already runs on shared components (.page-hero,
   .website-options, .faq-section, .related, .statement-section, and the
   steps list in sections.css). What is styled here is what has no shared
   home: the page-hero's "NN / 04" counter row, the free builder's example
   carousel, the value statement's mark, and the revamp showcase (gated
   behind C1, held/revamp-showcase/).

   Contents
     1  page hero counter row (.page-hero-top, .page-hero-count)
     2  the value statement's mark (.statement-mark)
     3  the free builder's example carousel (.example-gallery ...)
     4  the revamp showcase (.transformations, .case, .shot ...)
*/

/* ── 1. page hero counter row ────────────────────────────────────────────
   The three sub-pages ("01 / 04" to "03 / 04") carry their counter beside
   the label instead of the retired corner-marks pattern (plan 3.4). Two
   grid items pinned to the label row: .page-hero > .label already gets
   grid-column: 1 / -1 (components.css #6); this wrapper needs the same rule
   restated, since once the counter joins it the label is no longer a direct
   child of .page-hero. The hub page has no counter and keeps the plain
   <p class="label"> direct child, so it never reaches this rule. */
.page-hero-top {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px 24px;
}
.page-hero-count {
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-weight: 800; font-size: 0.75rem; letter-spacing: 0.08em;
  color: var(--muted);
}

/* ── 2. the value statement's mark ───────────────────────────────────────
   The original site's four-bar mark (shell.mjs), sized small above the
   statement line. currentColor, so it just reads as the band's text colour. */
.statement-mark { display: block; width: 38px; height: 28px; margin-bottom: clamp(16px, 2.4vw, 24px); }
.statement-mark svg { width: 100%; height: 100%; }

/* ── 3. the free builder's example carousel ──────────────────────────────
   Ten framed sites drifting past behind a radial fade, one centred and at
   full size at a time. examples.js drives data-gallery-auto; this only
   draws it. Adapted from the retired site.js/site.css version (2.2
   deviation, now backups/O2/retired-public/root/) onto the token language. */
.example-gallery { margin-top: clamp(36px, 5vw, 64px); }
.gallery-frame { position: relative; }
.gallery-viewport {
  position: relative; overflow: hidden;
  padding-block: clamp(28px, 5vw, 56px);
  /* A soft glow behind the centred slide, so it reads as a spotlight rather
     than a flat row. ink-lift (base.css: "ink lifted toward white") is the
     only token lighter than ink that still reads as ink, which is what a
     glow on a .band-ink section needs: the original version of this used
     ink-on-ink and was invisible here (S4, 2026-09-25). */
  background: radial-gradient(circle farthest-side at center,
    var(--ink-lift) 0%, rgba(47, 45, 44, 0.55) 40%, rgba(47, 45, 44, 0) 100%);
}
.gallery-track { display: flex; align-items: center; gap: 3%; will-change: transform; }
:root[data-motion="full"] .gallery-track { transition: transform 0.6s ease; }
.gallery-slide {
  position: relative; flex: 0 0 30%; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--ink); opacity: 0.35; transform: scale(0.68);
}
:root[data-motion="full"] .gallery-slide { transition: opacity 0.6s ease, transform 0.6s ease; }
.gallery-slide.is-active { opacity: 1; transform: scale(1); z-index: 2; }
.gallery-slide iframe {
  position: absolute; top: 0; left: 0; width: 222%; height: 222%;
  transform: scale(0.45); transform-origin: 0 0; border: 0; pointer-events: none;
}
@media (max-width: 700px) { .gallery-slide { flex-basis: 72%; } }

.gallery-caption {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin: clamp(20px, 3vw, 32px) 0 0;
  font-size: 0.8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted-ink);
}

/* ── 4. the revamp showcase ───────────────────────────────────────────────
   Held out of the build until each business gives written permission (plan
   C1, websites.mjs showcaseAvailable). Product captures and customer sites
   keep their colour (brand-visual.md: black and white photography applies
   to Conner's own photos, not what a customer's site looks like). */
.transformations .lede { margin-bottom: clamp(40px, 5vw, 64px); }

.case { padding-block: clamp(40px, 5.5vw, 72px); border-top: 2px solid var(--ink); }
.case:last-of-type { border-bottom: 2px solid var(--ink); }
.case-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.case-index { font-weight: 800; font-size: 0.9375rem; letter-spacing: 0.04em; color: var(--red-700); }
.case-title h3 { margin-bottom: 4px; }
.case-title p { color: var(--muted); }
.case-story { max-width: var(--measure); margin-bottom: clamp(24px, 3vw, 40px); }

.case-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  background: var(--ink); border: 2px solid var(--ink);
}
.shot { margin: 0; background: var(--white); }
.shot img { width: 100%; height: auto; }
.shot figcaption {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--ground);
  border-bottom: 2px solid var(--ink);
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em;
}
.shot-tag { text-transform: uppercase; }
.shot-before .shot-tag { color: var(--red-700); }
.shot-after .shot-tag { color: var(--ink); }
.shot-where { margin-left: auto; color: var(--muted); font-weight: 400; letter-spacing: normal; text-transform: none; }
.shot-dots { display: inline-flex; gap: 4px; margin-right: 2px; }
.shot-dots i { display: block; width: 6px; height: 6px; background: var(--muted); }
@media (max-width: 700px) { .case-grid { grid-template-columns: 1fr; } }

.case-note { margin-top: clamp(32px, 4vw, 48px); color: var(--muted); font-size: 0.875rem; }