/* ──────────────────────────────────────────────────────────────
   Organizers site — Haus Vajbz. Shared by every templates/organizers/*
   page (chrome: templates/other/base_org.html). Page layouts live in
   hv/org-*.css; this sheet holds the sub-nav and the primitives they share.
   Tokens only (tokens.css + hv/theme.css): radius 0, no shadows, no
   gradients, rules instead of boxes. Surfaces come from data-surface.
   ────────────────────────────────────────────────────────────── */

/* ── Sub-nav: ruled mono strip under the HV bar ──────────────── */
.org-subnav { background: var(--bg); color: var(--text); border-bottom: 1px solid var(--line); }
.org-subnav__inner { display: flex; align-items: center; gap: 0.8rem 1.4rem; min-height: 46px; overflow-x: auto; scrollbar-width: none; }
.org-subnav__inner::-webkit-scrollbar { display: none; }
.org-subnav a { text-decoration: none; white-space: nowrap; }
.org-subnav__home { color: var(--text); font-weight: 600; }
.org-subnav__links { display: flex; gap: 1.2rem; }
.org-subnav__links a { color: var(--text-dim); padding-block: 0.9rem; border-bottom: 2px solid transparent; }
.org-subnav__links a:hover, .org-subnav__links a:focus-visible { color: var(--red); outline: none; }
.org-subnav a.is-active { color: var(--red); border-bottom-color: var(--red); }
.org-subnav__cta { margin-left: auto; flex: none; }

/* ── Entrance (the old animate-in classes, now the HV rise) ──── */
.animate-in { animation: hv-rise 0.6s var(--ease) both; }
.animate-in-d1 { animation-delay: 0.06s; }
.animate-in-d2 { animation-delay: 0.12s; }
.animate-in-d3 { animation-delay: 0.18s; }
.animate-in-d4 { animation-delay: 0.24s; }
.animate-in-d5 { animation-delay: 0.3s; }

/* ── Hero band: kicker, two-tone display, lead, actions ──────── */
.org-hero { background: var(--bg); color: var(--text); overflow: hidden; }
.org-hero__inner { padding-block: 2rem 2.4rem; display: grid; gap: 1.6rem; }
.org-hero__kicker { margin: 0; }
.org-hero__title { font-size: clamp(2.2rem, 9vw, 5.2rem); }
.org-hero__lead { margin: 0; max-width: 46ch; color: var(--text-dim); font-size: 1.02rem; line-height: 1.55; }
.org-hero__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.org-hero__actions .hv-btn { width: auto; }

/* ── Section: kicker + red title on a strong rule ────────────── */
.org-sec { padding-block: 2.6rem 0; }
.org-sec__head { display: grid; gap: 0.5rem; padding-bottom: 0.8rem; border-bottom: 2px solid var(--text); margin-bottom: 1.4rem; }
.org-sec__head .hv-mono { margin: 0; }
.org-sec__title { font-size: clamp(1.7rem, 7.5vw, 2.8rem); color: var(--red); }
[data-surface='red'] .org-sec__title, [data-surface='ink'] .org-sec__title { color: var(--text); }
.org-sec__lead { margin: 0; max-width: 58ch; color: var(--text-dim); }
.org-band { background: var(--bg); color: var(--text); margin-top: 2.6rem; padding-block: 0.2rem 2.6rem; }

/* ── Split: copy | figure ────────────────────────────────────── */
.org-split { display: grid; gap: 1.6rem; align-items: center; }
.org-split__copy { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.org-split__copy .hv-mono { margin: 0; }
.org-split__title { font-size: clamp(1.6rem, 7vw, 2.6rem); }
.org-split__body { margin: 0; max-width: 50ch; color: var(--text-dim); }

/* check list: ruled, → as the bullet */
.org-checks { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.org-checks > li { display: flex; gap: 0.7rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.org-checks > li:first-child { border-top: 1px solid var(--line); }
.org-checks > li::before { content: '→'; color: var(--red); font-family: var(--font-mono); flex: none; }
.org-checks > li > i:first-child { display: none; }   /* the old check icon; → replaces it */

/* ── Mock panel: the ink "dashboard" figures ─────────────────── */
.org-mock { background: var(--ink); color: var(--paper); border: 1px solid var(--ink-3); padding: 1rem; display: grid; gap: 0.9rem; min-width: 0; overflow: hidden; }
.org-mock__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--ink-3); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-3); }
.org-mock__stat { font-family: var(--font-hero); font-weight: 900; font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.org-mock__label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-3); }
.org-mock__row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--ink-3); font-size: 0.85rem; }
.org-mock__track { height: 6px; background: var(--ink-3); }
.org-mock__fill { height: 100%; background: var(--red); }
.org-live { display: inline-flex; align-items: center; gap: 0.4rem; }
.org-live::before { content: ''; width: 7px; height: 7px; background: var(--green); animation: org-blink 1.4s steps(2) infinite; }
@keyframes org-blink { 50% { opacity: 0.2; } }

/* ── Cells: card grid with rules instead of boxes ────────────── */
.org-cells { display: grid; }
.org-cell { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; padding: 1.1rem 0 1.3rem; border-bottom: 1px solid var(--line); }
.org-cell__title { font-size: 1.15rem; }
.org-cell__body { margin: 0; color: var(--text-dim); font-size: 0.92rem; line-height: 1.5; }

/* ── Icon tile: FontAwesome in a square block ────────────────── */
.org-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; background: var(--red); color: var(--paper); font-size: 1.05rem; }
.org-icon--ink { background: var(--ink); color: var(--paper); }
.org-icon--line { background: transparent; color: var(--red); box-shadow: inset 0 0 0 1.5px currentColor; }
[data-surface='red'] .org-icon { background: var(--paper); color: var(--red); }

/* ── FAQ: native <details>, ruled ────────────────────────────── */
.org-faq { border-top: 2px solid var(--text); }
.org-faq details { border-bottom: 1px solid var(--line); }
.org-faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0; cursor: pointer; list-style: none; font-family: var(--font-sub); font-weight: 600; font-size: 1.02rem; }
.org-faq summary::-webkit-details-marker { display: none; }
.org-faq summary::after { content: '+'; font-family: var(--font-mono); color: var(--red); font-size: 1.2rem; line-height: 1; }
.org-faq details[open] summary::after { content: '−'; }
.org-faq summary:hover { color: var(--red); }
.org-faq details > :not(summary) { margin: 0 0 1.1rem; max-width: 66ch; color: var(--text-dim); font-size: 0.95rem; line-height: 1.6; }

/* ── Closing CTA band ────────────────────────────────────────── */
.org-cta { margin-top: 3rem; background: var(--bg); color: var(--text); }
.org-cta__inner { padding-block: 2.6rem 2.8rem; display: grid; gap: 1.2rem; justify-items: center; text-align: center; }
.org-cta__title { font-size: clamp(2rem, 9vw, 3.6rem); }
.org-cta__lead { margin: 0; max-width: 46ch; color: var(--text-dim); }
.org-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.org-cta .hv-btn { width: auto; }

/* ── Tablet / desktop ────────────────────────────────────────── */
@media (min-width: 768px) {
  .org-hero__inner { padding-block: 3rem 3.4rem; }
  .org-sec { padding-top: 3.4rem; }
  .org-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--gutter) * 1.5); }
  .org-split--flip > :first-child { order: 2; }
  .org-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
  .org-cells--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .org-mock { padding: 1.3rem; }
  .org-cta__inner { padding-block: 3.4rem 3.6rem; }
}
@media (min-width: 1100px) {
  .org-hero__inner { padding-block: 3.8rem 4.2rem; }
  .org-cells--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .org-split { gap: calc(var(--gutter) * 2.2); }
}

@media (prefers-reduced-motion: reduce) {
  .animate-in, .org-live::before { animation: none; }
}

/* ── Staff app (organizers/_staff_app.html): ink block, App Store CTA ── */
.org-app { background: var(--bg); color: var(--text); padding: 1.4rem var(--gutter); display: grid; gap: 1.1rem; justify-items: start; border-top: 4px solid var(--red); }
.org-app__copy { display: grid; gap: 0.6rem; min-width: 0; }
.org-app__copy .hv-mono { margin: 0; }
.org-app__title { font-size: clamp(1.5rem, 6.5vw, 2.4rem); }
.org-app__body { margin: 0; max-width: 56ch; color: var(--text-dim); }
.org-app__cta { width: auto; }
.org-app__cta .fa-apple { font-size: 1.2rem; }
@media (min-width: 768px) {
  .org-app { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.6rem; padding: 1.8rem 2rem; }
}