/* ============================================================================
 * Vayra — shared layout for the subpages (gallery, pricing, about, contact)
 *
 * Treat this file as read only when you are working on one page: what is here is shared
 * by all four, and page specific rules belong in the matching page-{name}.css. Editing
 * here to fix one page moves the other three, and nothing errors when it does.
 *
 * The blocks: hero, info bar, section container, value grid, showcase list, marquee and
 * the journal list. Colours and borders come from the bridge variables and easings and
 * durations from the motion tokens, with one deliberate exception noted at the marquee.
 * The 62ch body measure and the 48ch lede measure are locked: they are line length, not
 * decoration.
 * ============================================================================ */

/* ── Subpage base ─────────────────────────────────────────── */
.vy-leafview {
  --page-gutter: clamp(24px, 5.2vw, 96px);
  background: var(--vy-bg-primary);
  color: var(--vy-text-primary);
}

/* Make the hidden attribute actually hide, inside this scope only.
   The user agent rule for [hidden] has almost no specificity, so it loses to any class rule
   that sets display. The showcase row below is exactly that case: it sets display: grid and
   is declared later, so the gallery filter could set row.hidden and all sixteen rows stayed
   on screen while every indicator (the pressed state, the counter) updated correctly.
   The fix belongs here rather than in the filter, because the same trap catches any
   subpage that toggles the hidden property.
   It is not applied to [hidden] globally: index is deliberately outside this scope. */
.vy-leafview [hidden] { display: none !important; }

/* ── Hero (block 1) ─────────────────────────────────────────
   The quiet version of the index hero: no WebGL plane, carried by type. */
.vy-leaf-banner {
  min-height: 64vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(150px, 22vh, 240px) var(--page-gutter) clamp(48px, 7vh, 88px);
  border-bottom: 1px solid var(--color-line-soft);
}
.vy-leaf-kicker {
  font-family: var(--vy-font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: clamp(20px, 3vw, 34px);
}
.vy-leaf-head {
  font-family: var(--vy-font-display);
  font-weight: 600;
  font-size: var(--text-display-lg);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--vy-text-primary);
  margin: 0;
}
.vy-leaf-head span { display: block; }
.vy-leaf-head .vy-is-soft { color: var(--vy-text-secondary); }
.vy-leaf-brief {
  max-width: 48ch;                     /* Locked: line length */
  margin-top: clamp(24px, 3vw, 40px);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--vy-text-secondary);
  letter-spacing: var(--tracking-copy);
}

/* ── Info bar (block 2) ──────────────────────────────── */
.vy-leaf-statbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: clamp(28px, 4vh, 44px) var(--page-gutter);
  border-bottom: 1px solid var(--color-line-soft);
}
.vy-leaf-statbar span {
  font-family: var(--vy-font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--vy-text-secondary);
}
.vy-leaf-statbar span:nth-child(2) { text-align: center; }
.vy-leaf-statbar span:last-child { text-align: right; }

/* ── Section container ───────────────────────────────────── */
.vy-leaf-band { padding: clamp(64px, 10vh, 128px) var(--page-gutter); }
.vy-leaf-band--halves {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}
.vy-leaf-kickercap {
  font-family: var(--vy-font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--vy-text-secondary);
}
.vy-leaf-h2 {
  font-family: var(--vy-font-display);
  font-weight: 600;
  font-size: var(--text-display-sm);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--vy-text-primary);
  margin: 0 0 clamp(24px, 3vw, 40px);
}

/* This class has two jobs, because the page body container and the text block share it:
     · on a paragraph or div it is the text block, limited to the measure below
     · on <main> it is the page body container, and the rule after this one undoes the
       text constraint
   Do not reorder those two rules. */
.vy-leaf-stack {
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--vy-text-secondary);
  letter-spacing: var(--tracking-copy);
  max-width: 62ch;                     /* Locked: line length */
}
.vy-leaf-stack + .vy-leaf-stack { margin-top: 20px; }

main.vy-leaf-stack {
  display: block;
  max-width: none;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: normal;
}

/* ── Value grid (block 3) ─────────────────────────────────── */
.vy-amt-mesh {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px) clamp(40px, 5vw, 80px);
}
.vy-amt { border-top: 1px solid var(--color-line); padding-top: 24px; }
.vy-amt__num {
  font-family: var(--vy-font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  color: var(--color-accent);
  display: block;
  margin-bottom: 14px;
}
.vy-amt__head {
  font-family: var(--vy-font-display);
  font-size: var(--text-lg);
  color: var(--vy-text-primary);
  margin: 0 0 12px;
}
.vy-amt__blurb {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--vy-text-secondary);
}

/* ── Showcase list (block 4) ──────────── */
.vy-reel-stack { border-top: 1px solid var(--color-line); }
.vy-reel-cell {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 48px);
  align-items: baseline;
  padding: clamp(28px, 4vh, 44px) 0;
  border-bottom: 1px solid var(--color-line);
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--vy-dur-micro) var(--vy-ease);
}
.vy-reel-cell:hover { padding-left: clamp(8px, 1.5vw, 24px); }
.vy-reel-cell__idx {
  font-family: var(--vy-font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  letter-spacing: var(--tracking-label);
}
.vy-reel-cell__name {
  font-family: var(--vy-font-display);
  font-weight: 600;
  font-size: var(--text-display-xs);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  color: var(--vy-text-primary);
  transition: color var(--vy-dur-micro) var(--vy-ease);
}
.vy-reel-cell:hover .vy-reel-cell__name { color: var(--color-accent); }
.vy-reel-cell__group {
  display: block;
  margin-top: 10px;
  font-family: var(--vy-font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--vy-text-secondary);
}
.vy-reel-cell__spec {
  font-family: var(--vy-font-mono);
  font-size: var(--text-sm);
  color: var(--vy-text-secondary);
  text-align: right;
  white-space: nowrap;
}

/* ── Category filter labels ─────────────────────────── */
.vy-groups { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: clamp(28px, 4vw, 44px); }
.vy-groups span,
.vy-groups button {
  font-family: var(--vy-font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--vy-text-secondary);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color var(--vy-dur-micro) var(--vy-ease);
}
.vy-groups span:first-child { color: var(--vy-text-primary); }
.vy-groups button[aria-pressed="true"] { color: var(--vy-text-primary); }

/* ── Marquee (block 5) ─────────────────────────────────── */
.vy-leaf-belt {
  overflow: hidden;
  border-block: 1px solid var(--color-line-soft);
  padding: clamp(28px, 4vh, 48px) 0;
  white-space: nowrap;
}
.vy-leaf-belt__groove {
  display: inline-block;
  /* Deliberately linear rather than the signature easing. An endless marquee loops by
     joining the track to itself at the halfway point, and any curve makes the speed jump
     at that seam, which reads as a stutter. This is a behavioural requirement, not a
     styling choice, so it is exempt from the shared easing. */
  animation: avSubMarquee 32s linear infinite;
  will-change: transform;
}
.vy-leaf-belt__groove span {
  font-family: var(--vy-font-display);
  font-size: var(--text-display-xs);
  letter-spacing: var(--tracking-display);
  color: var(--vy-text-secondary);
  padding: 0 clamp(24px, 3vw, 48px);
}
.vy-leaf-belt__groove span b { color: var(--color-accent); font-weight: 600; }
@keyframes avSubMarquee { to { transform: translateX(-50%); } }

/* ── Journal and card list (block 6) ─────────────────────────── */
.vy-post-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 72px) clamp(40px, 5vw, 80px);
}
.vy-post-tile { text-decoration: none; color: inherit; display: block; }
.vy-post-tile__meta {
  display: flex;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--vy-font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--vy-text-secondary);
}
.vy-post-tile__head {
  font-family: var(--vy-font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.2;
  color: var(--vy-text-primary);
  margin: 22px 0 14px;
  transition: color var(--vy-dur-micro) var(--vy-ease);
}
.vy-post-tile:hover .vy-post-tile__head { color: var(--color-accent); }
.vy-post-tile__snippet {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--vy-text-secondary);
}

/* ── Responsive (900px break) ───────────────────── */
@media (max-width: 900px) {
  .vy-leaf-band--halves { grid-template-columns: 1fr; gap: clamp(40px, 8vw, 64px); }
  .vy-amt-mesh { grid-template-columns: 1fr; }
  .vy-post-stack { grid-template-columns: 1fr; }
  .vy-reel-cell { grid-template-columns: 40px 1fr; }
  .vy-reel-cell__spec { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vy-leaf-belt__groove { animation: none; }
  .vy-reel-cell,
  .vy-reel-cell__name,
  .vy-post-tile__head { transition: none; }
}