/* ════════════════════════════════════════════════════════════════════
   Fieldcraft (fieldcraft) — presentation.css
   ThemeForest live-preview landing page. Built ON TOP of the shared
   design/tokens.css + templates/html/assets/css/main.css. This file adds
   ONLY the sales-page-specific layout: preview bar, feature grid,
   pages showcase, mockup section, changelog list. Every value below is
   a token custom property — no hardcoded design values.

   NOTE on main.css: ../assets/css/main.css in this folder is a VERBATIM,
   byte-identical COPY of templates/html/assets/css/main.css (the canonical
   HTML master), not a symlink — the deploy/ pipeline (see deploy/README.md)
   copies themes/<slug>/presentation/ with a plain recursive copy that does
   not reliably dereference relative symlinks pointing outside this folder,
   so a symlink here would risk shipping a dangling link. Whenever
   templates/html/assets/css/main.css changes, re-run:
     cp templates/html/assets/css/main.css presentation/assets/css/main.css
   and verify with `diff` that the two files stay byte-identical. This has
   drifted out of sync multiple times before (QA Round 2, Round 16, Round 63)
   — treat any future diff between these two files as a BLOCKER.
   ════════════════════════════════════════════════════════════════════ */

/* Presentation-page-specific tokens (device-mockup frames only — these
   ratios don't belong in the shared design system, so they live here
   rather than forking design/tokens.css). */
:root {
  --aspect-mockup-desktop: 16 / 10;
  --aspect-mockup-tablet:  3 / 4;
  --aspect-mockup-mobile:  9 / 18;
}

/* ─────────────────────────── sticky preview bar ─────────────────────────── */
/* .previewbar is the outer flex row: label, scrollable link rail, CTA.
   Only .previewbar-wrap (the middle child) scrolls horizontally — .pb-label
   and .pb-cta are separate flex siblings with flex:0 0 auto, so the CTA is
   always on-screen and never clipped/scrolled out with the 16-link rail. */
.previewbar {
  position: sticky; inset-block-start: 0; z-index: var(--z-header);
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-3) var(--gutter);
  background: var(--scrim-header); backdrop-filter: blur(var(--blur-header));
  border-bottom: var(--rule-1) solid var(--hairline);
}
.previewbar .pb-label {
  flex: 0 0 auto;
  font-family: var(--fm); font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--amber);
}

/* Scrollable link rail. Scrollbar intentionally left visible (not hidden)
   so an overflowing 16-link row always has a visible affordance that more
   content sits off-screen — thin reads fine against the mono aesthetic. */
.previewbar-wrap {
  position: relative; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.previewbar-wrap::-webkit-scrollbar { height: var(--size-scrollbar-h); }
.previewbar-wrap::-webkit-scrollbar-track { background: transparent; }
.previewbar-wrap::-webkit-scrollbar-thumb {
  background: var(--hairline); border-radius: var(--radius-pill);
}
.previewbar-wrap::-webkit-scrollbar-thumb:hover { background: var(--mute); }

/* Edge fade: a second, guaranteed-visible cue (on top of the visible
   scrollbar above) that content continues off-screen. Positioned relative
   to .previewbar-wrap itself so the fade overlay never intercepts
   pointer/keyboard interaction with the links underneath. Shown by default
   (no-JS safe, and correct on first paint before JS has measured scroll
   position); presentation.js then narrows it to only the truly-overflowing,
   not-yet-scrolled-to-end state via .is-overflowing/.at-end once real
   scroll metrics are known. */
.previewbar-wrap::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-end: 0;
  width: var(--space-10); pointer-events: none; z-index: 1;
  background: linear-gradient(to left, var(--iron) 0%, transparent 100%);
  opacity: var(--opacity-overlay-fade); transition: opacity var(--duration-fast);
}
.previewbar-wrap.js-checked:not(.is-overflowing)::after { opacity: 0; }
.previewbar-wrap.at-end::after { opacity: 0; }
.previewbar .pb-links {
  display: flex; gap: var(--space-6); white-space: nowrap;
  font-family: var(--fm); font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
}
.previewbar .pb-links a {
  display: inline-flex; align-items: center; min-height: var(--size-tap-min);
  color: var(--mute); transition: color var(--duration-fast);
  scroll-snap-align: start;
}
.previewbar .pb-links a:hover { color: var(--bone); }
.previewbar .pb-cta {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: var(--size-tap-min);
  font-family: var(--fm); font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--iron); background: var(--amber);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  transition: background var(--duration-base);
}
.previewbar .pb-cta:hover { background: var(--amber-hot); }

/* ─────────────────────────── sales hero (extends .hero) ─────────────────────────── */
.sales-hero .kicker { color: var(--amber); }
.sales-hero .stack { display: flex; flex-direction: column; gap: var(--space-6); }
.hero-badges {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-8);
}
.hero-badges span {
  font-family: var(--fm); font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--bone-soft);
  border: var(--rule-1) solid var(--hairline); border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
}
.hero-badges span b { color: var(--amber); font-weight: var(--weight-mono-medium); }

/* ─────────────────────────── feature grid ─────────────────────────── */
.feature-grid { padding-block: 0; }
.fg-list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--rule-1); background: var(--hairline);
  border-top: var(--rule-1) solid var(--hairline);
  border-bottom: var(--rule-1) solid var(--hairline);
}
.fcard {
  background: var(--iron); padding: var(--space-10) var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-4);
  transition: background var(--duration-slower);
}
.fcard:hover { background: var(--iron-2); }
.fcard .no {
  font-family: var(--fm); font-size: var(--text-mono-xl);
  letter-spacing: var(--tracking-mono); color: var(--mute);
}
.fcard h3 {
  font-family: var(--fd); font-weight: var(--weight-heading-black);
  font-size: var(--text-display-step); text-transform: uppercase;
  line-height: var(--leading-tight); letter-spacing: var(--tracking-display);
}
.fcard p { color: var(--bone-soft); max-width: var(--measure-column); }

/* ─────────────────────────── demos grid ─────────────────────────── */
.demos-sec { border-top: var(--rule-1) solid var(--hairline); }
.demo-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--rule-1);
  background: var(--hairline); border-top: var(--rule-1) solid var(--hairline);
  border-bottom: var(--rule-1) solid var(--hairline); margin-top: var(--head-mb);
  list-style: none;
}
.demo-card {
  background: var(--iron); padding: var(--space-8) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2);
  transition: background var(--duration-slower);
}
.demo-card:hover { background: var(--iron-2); }
.demo-card .demo-no {
  font-family: var(--fm); font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono); color: var(--amber);
}
.demo-card b {
  font-family: var(--fd); font-weight: var(--weight-heading-bold);
  font-size: var(--text-body-lg); text-transform: uppercase;
  letter-spacing: var(--tracking-display); color: var(--bone);
}
.demo-card span:not(.demo-no) {
  font-family: var(--fm); font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--mute);
}

/* ─────────────────────────── customization options ─────────────────────────── */
.customize-sec { border-top: var(--rule-1) solid var(--hairline); }
.opt-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rule-1);
  background: var(--hairline); border-top: var(--rule-1) solid var(--hairline);
  border-bottom: var(--rule-1) solid var(--hairline); margin-top: var(--head-mb);
}
.opt-card {
  background: var(--iron); padding: var(--space-10) var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-4);
  transition: background var(--duration-slower);
}
.opt-card:hover { background: var(--iron-2); }
.opt-card .no {
  font-family: var(--fm); font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono); color: var(--mute);
}
.opt-card h3 {
  font-family: var(--fd); font-weight: var(--weight-heading-black);
  font-size: var(--text-display-step); text-transform: uppercase;
  line-height: var(--leading-tight); letter-spacing: var(--tracking-display);
}
.opt-card p { color: var(--bone-soft); max-width: var(--measure-column); }

/* ─────────────────────────── pages showcase ─────────────────────────── */
.pages-showcase { border-top: var(--rule-1) solid var(--hairline-p); }
.pg-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6);
  margin-top: var(--head-mb);
}
.pg-card {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--radius-md); background: var(--iron);
  border: var(--rule-1) solid var(--hairline-p);
  transition: transform var(--duration-slower) var(--ease-expo), border-color var(--duration-base);
}
.pg-card:hover { transform: var(--hover-lift); border-color: var(--amber); }
.pg-card .pg-frame {
  aspect-ratio: var(--aspect-frame-sm); background: var(--iron-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.pg-card .pg-frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  transform: var(--img-zoom-rest);
  transition: transform var(--duration-zoom) var(--ease-expo);
}
.pg-card:hover .pg-frame img { transform: var(--img-zoom-hover); }
.pg-card .pg-no {
  position: absolute; inset-block-start: var(--space-3); inset-inline-start: var(--space-3);
  font-family: var(--fm); font-size: var(--text-mono-xs); color: var(--bone);
  background: var(--scrim-stamp); border: var(--rule-1) solid var(--hairline);
  padding: var(--space-1) var(--space-3); backdrop-filter: blur(var(--blur-stamp));
}
.pg-card .pg-cap {
  padding: var(--space-4) var(--space-5);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
}
.pg-card .pg-cap b {
  font-family: var(--fd); font-weight: var(--weight-heading-bold);
  font-size: var(--text-body-lg); text-transform: uppercase;
  letter-spacing: var(--tracking-display); color: var(--bone);
}
.pg-card .pg-cap span {
  font-family: var(--fm); font-size: var(--text-mono-2xs);
  letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--mute);
  white-space: nowrap;
}

/* ─────────────────────────── mockup / responsive section ─────────────────────────── */
.mockups { border-top: var(--rule-1) solid var(--hairline); }
.mockup-row {
  display: grid; grid-template-columns: 2fr 1fr 0.6fr; gap: var(--space-8);
  align-items: end; margin-top: var(--head-mb);
}
.mockup-frame {
  border-radius: var(--radius-md); overflow: hidden;
  border: var(--rule-1) solid var(--hairline);
  background: var(--iron-2);
}
.mockup-frame.desktop { aspect-ratio: var(--aspect-mockup-desktop); }
.mockup-frame.tablet { aspect-ratio: var(--aspect-mockup-tablet); }
.mockup-frame.mobile { aspect-ratio: var(--aspect-mockup-mobile); }
.mockup-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.mockup-caps {
  display: flex; justify-content: space-between; margin-top: var(--space-6);
  font-family: var(--fm); font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--mute);
}

/* ─────────────────────────── stack strip (framework ports) ─────────────────────────── */
.stack-strip { padding-block: var(--space-16); border-top: var(--rule-1) solid var(--hairline-p); }
.stack-list {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-10);
  margin-top: var(--space-8); list-style: none;
}
.stack-list li {
  font-family: var(--fm); font-size: var(--text-mono-lg);
  letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--ink);
}
.stack-list li b { color: var(--amber-hot); }
.paper .stack-list li b { color: var(--mute-p); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: var(--focus-offset); }

/* ─────────────────────────── changelog ─────────────────────────── */
.changelog-list { max-width: var(--container-statement); margin-top: var(--head-mb); }
.cl-entry { padding-block: var(--space-8); border-bottom: var(--rule-1) solid var(--hairline); }
.cl-entry:first-child { padding-top: 0; }
.cl-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.cl-head .v {
  font-family: var(--fd); font-weight: var(--weight-heading-black);
  font-size: var(--text-display-step); text-transform: uppercase;
  letter-spacing: var(--tracking-display);
}
.cl-head .date {
  font-family: var(--fm); font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--mute);
}
.cl-entry ul { list-style: none; }
.cl-entry li {
  padding-block: var(--space-2); color: var(--bone-soft);
  font-size: var(--text-body-md);
}
.cl-entry li .tag {
  display: inline-block; font-family: var(--fm); font-size: var(--text-mono-2xs);
  letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--amber);
  border: var(--rule-1) solid var(--amber-outline); border-radius: var(--radius-sm);
  padding: var(--em-pad-tight) var(--space-2); margin-inline-end: var(--space-3);
}

/* ─────────────────────────── footer CTA band ─────────────────────────── */
.cta-band { text-align: center; }
.cta-band .d { max-width: var(--container-statement); margin-inline: auto; }
.cta-band .lede { max-width: var(--measure-lede); margin-inline: auto; margin-top: var(--space-6); }
.cta-band .ctas { justify-content: center; margin-top: var(--space-10); }

/* ─────────────────────────── responsive ─────────────────────────── */
@media (max-width: 1100px) {
  .fg-list { grid-template-columns: repeat(2, 1fr); }
  .demo-grid { grid-template-columns: repeat(2, 1fr); }
  .opt-grid { grid-template-columns: 1fr; }
  .pg-grid { grid-template-columns: repeat(3, 1fr); }
  .mockup-row { grid-template-columns: 1fr; }
  .mockup-frame.desktop, .mockup-frame.tablet, .mockup-frame.mobile { aspect-ratio: var(--aspect-mockup-desktop); }
}
@media (max-width: 860px) {
  .fg-list { grid-template-columns: 1fr; }
  .demo-grid { grid-template-columns: 1fr; }
  .pg-grid { grid-template-columns: repeat(2, 1fr); }
  .previewbar .pb-links { gap: var(--space-4); }
}
@media (max-width: 560px) {
  .pg-grid { grid-template-columns: 1fr; }
  /* Reclaim width for .previewbar-wrap (the scrollable link rail): the
     "Preview →" label is redundant at this width (the <nav> already carries
     aria-label="Demo page preview"), and the CTA drops its label copy for
     an icon-only arrow — same "collapse the non-essential chrome" approach
     .sitehead uses when it swaps its nav links for .menu-btn at 860px. */
  .previewbar { gap: var(--space-3); padding-inline: var(--space-4); }
  .previewbar .pb-label { display: none; }
  .previewbar .pb-cta { padding-inline: var(--space-3); }
  .previewbar .pb-cta .pb-cta-label { display: none; }
}