/* ECHIVO /horeca — faq.css · OWNER: V4. Loaded by src/horeca/template.html in section order.
   New selectors: prefix with the section (#hx-hero / .hx-hero__*, #about, #groups, ...). See v7-notes/STRUCTURE.md. */
/* ============================================================ FAQ */
.hx-faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 6vw, 96px); align-items: start; }
.hx-faq__grid .hx-head { position: sticky; top: 120px; }
.hx-faq__list { display: flex; flex-direction: column; }
.hx-q { border-bottom: 1px solid var(--hairline); }
.hx-q summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 4px; cursor: pointer; font-size: clamp(1.05rem, 1.4vw, 1.3rem); font-weight: 700; }
.hx-q summary::-webkit-details-marker { display: none; }
.hx-q summary:hover { color: var(--gold); }
.hx-q summary i { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hairline); transition: transform .5s var(--ease-spring), background .3s; }
.hx-q summary i::before, .hx-q summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.75px; border-radius: 2px; background: currentColor; translate: -50% -50%; }
.hx-q summary i::after { rotate: 90deg; transition: rotate .4s var(--ease-out); }
.hx-q[open] summary i { background: rgba(245,200,130,.14); color: var(--gold); transform: rotate(180deg); }
.hx-q[open] summary i::after { rotate: 0deg; }
.hx-q__a { overflow: hidden; }
.hx-q__a p { margin: 0; padding: 0 4px 26px; color: var(--text-2); max-width: 60ch; }
@media (max-width: 900px) { .hx-faq__grid { grid-template-columns: 1fr; } .hx-faq__grid .hx-head { position: static; margin-bottom: 20px; } .hx-q summary { padding: 20px 2px; } }

/* ============================================================ V4 · v7 FAQ: numbered, tactile, gold rail on the open item */
#faq .hx-q { position: relative; transition: background .35s; border-radius: 4px; }
#faq .hx-q::before { content: ""; position: absolute; left: -18px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: var(--gold); transform: scaleY(0); transform-origin: 50% 0; transition: transform .5s var(--ease-out); }
#faq .hx-q[open]:not(.is-closing)::before { transform: scaleY(1); }
#faq .hx-q summary { justify-content: flex-start; min-height: 56px; -webkit-tap-highlight-color: transparent; transition: color .25s; }
#faq .hx-q summary > span { flex: 1; }
#faq .hx-q__n { flex: none; width: 2.2em; font-size: .78rem; font-weight: 800; letter-spacing: .08em; color: var(--text-3); font-variant-numeric: tabular-nums; transition: color .3s; }
#faq .hx-q[open] .hx-q__n, #faq .hx-q summary:hover .hx-q__n { color: var(--gold); }
#faq .hx-q[open] summary { color: var(--gold); }
#faq .hx-q.is-closing summary { color: inherit; }
#faq .hx-q summary:hover i { border-color: rgba(245,200,130,.5); }
#faq .hx-q summary:active i { transform: scale(.9); }
#faq .hx-q[open] summary:active i { transform: rotate(180deg) scale(.9); }
@media (min-width: 901px) { #faq .hx-q__a p { padding-left: 44px; } }
@media (max-width: 900px) { #faq .hx-q::before { left: -10px; } #faq .hx-q__a p { padding-left: 2px; } }
@media (prefers-reduced-motion: reduce) { #faq .hx-q::before, #faq .hx-q summary i { transition: none; } }

/* POLISH: the head sits in the .8fr column, so the global --t-h1 can be wider than it ("RÖVIDEN." was clipped by the
   SplitText line mask at ≥1600px in HU). Size the caps headline to its column; never break inside a word. */
.hx-faq__grid .hx-head { min-width: 0; container-type: inline-size; }
.hx-faq__grid .hx-head h2 { font-size: min(var(--t-h1), 12cqi); overflow-wrap: normal; word-break: normal; hyphens: manual; }

/* ============================================================ V8 · D3 · DESKTOP (≥1024): split with a visual
   Left (5 cols, sticky): the head + a gold ring that fills as you read down the list, the number and the question you
   are on. Right (7 cols): the questions, bigger. Phones: .fq-side is a plain wrapper, .fq-viz is not rendered. */
#faq .fq-viz { display: none; }
#faq .fq-side { min-width: 0; }
@media (max-width: 900px) { #faq .fq-side { display: contents; } }
@media (min-width: 1024px) {
  #faq .hx-faq__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hx-gap, clamp(20px, 1.8vw, 36px)); }
  #faq .fq-side { grid-column: 1 / span 5; position: sticky; top: clamp(96px, 13vh, 140px); }
  #faq .hx-faq__grid .fq-side .hx-head { position: static; margin-bottom: clamp(24px, 4vh, 48px); }
  #faq .hx-faq__grid .fq-side .hx-head h2 { font-size: min(var(--t-h1), 17cqi, 13vh); }
  #faq .hx-faq__list { grid-column: 7 / -1; }
  #faq .hx-q summary { font-size: clamp(1.15rem, 1.45vw, 1.55rem); padding: clamp(22px, 2.6vh, 30px) 6px; }
  #faq .hx-q__a p { font-size: clamp(1rem, 1.05vw, 1.15rem); max-width: 64ch; }
  #faq .fq-viz { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 2vw, 36px); }
  #faq .fq-viz__ring, #faq .fq-viz__core { grid-area: 1 / 1; width: clamp(220px, 19vw, 340px); aspect-ratio: 1; }
  #faq .fq-viz__ring { transform: rotate(-90deg); overflow: visible; }
  #faq .fq-viz__track { fill: rgba(245,200,130,.04); stroke: rgba(255,255,255,.08); stroke-width: 2; }
  #faq .fq-viz__tick { fill: none; stroke: rgba(245,200,130,.28); stroke-width: 1; stroke-dasharray: 2 9; }
  #faq .fq-viz__arc { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px rgba(245,200,130,.5)); }
  #faq .fq-viz__core { display: flex; align-items: baseline; justify-content: center; align-self: center; height: auto; aspect-ratio: auto; gap: 6px; }
  #faq .fq-viz__win { display: inline-block; overflow: hidden; height: 1em; line-height: 1; font-size: clamp(4.4rem, 6.4vw, 7.4rem); }
  #faq .fq-viz__n { display: block; font-weight: 850; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, #fff3da, var(--gold) 70%, var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  #faq .fq-viz__of { font-family: var(--mono); font-size: .9rem; font-weight: 700; color: var(--text-3); }
  #faq .fq-viz__q { grid-area: 1 / 2; margin: 0; font-size: clamp(1.2rem, 1.6vw, 1.75rem); font-weight: 750; line-height: 1.3; color: var(--text); max-width: 22ch; min-height: 2.7em; }
  .lp #faq .fq-viz__arc { filter: none; }
}

/* ============================================================ V10 · F6 · FAQ polish (v7-notes/V10-F6.md)
   One easing family (landing expo-out, no spring/bounce), press .97, hover lift <= 4 px, nothing loops.
   · atmosphere: a static low-alpha violet/gold wash (painted once, transparent at every edge) + a violet seam
   · rows: hairlines draw in left→right as the list arrives (faq.js adds .fq-live / .is-drawn; no JS = plain border)
   · hover: the question nudges 4 px, an underline sweeps in, the toggle disc warms; press .97
   · open: a pre-painted gold tint fades in behind the open row (opacity only) next to the gold rail
   Phones get the same CSS (one-shot transitions on tap / on arrival, no scroll-scrubbed work). */
#faq { isolation: isolate; --seam-rgb: 157,123,255; }
#faq::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background:
  radial-gradient(40% 40% at 18% 34%, rgba(157,123,255,.06), rgba(157,123,255,0) 72%),
  radial-gradient(44% 36% at 80% 70%, rgba(245,200,130,.05), rgba(245,200,130,0) 72%),
  linear-gradient(180deg, rgba(14,19,38,0), rgba(14,19,38,.5) 26%, rgba(14,19,38,.5) 74%, rgba(14,19,38,0)); }
@supports (animation-timeline: view()) {
  @media (min-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    #faq::before { animation: fq-wash linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes fq-wash { 0% { opacity: 0; transform: translate3d(0, 4%, 0); } 30%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate3d(0, -4%, 0); } }

/* row chrome */
#faq .hx-q summary { position: relative; outline: none; }
#faq .hx-q summary > span { transition: translate .5s var(--ease-out); }
#faq .hx-q summary::after { content: ""; position: absolute; left: 4px; right: 56px; bottom: 14px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(245,200,130,.55), rgba(245,200,130,0)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out); }
#faq .hx-q summary i { transition: transform .5s var(--ease-out), background .3s, border-color .3s, color .3s, box-shadow .4s var(--ease-out); }
#faq .hx-q summary:active { scale: .985; transition: scale .1s; }
#faq .hx-q summary:active i { transform: scale(.94); }
#faq .hx-q[open] summary:active i { transform: rotate(180deg) scale(.94); }
#faq .hx-q summary:focus-visible { border-radius: 10px; box-shadow: 0 0 0 2px var(--gold); }
@media (hover: hover) and (pointer: fine) {
  #faq .hx-q summary:hover > span { translate: 4px 0; }
  #faq .hx-q:not([open]) summary:hover::after { transform: scaleX(1); }
  #faq .hx-q summary:hover i { background: rgba(245,200,130,.08); box-shadow: 0 0 0 4px rgba(245,200,130,.06); }
}
/* open row: a soft gold tint behind it (background-color: one paint per toggle, nothing per scrolled frame) */
#faq .hx-q { border-radius: 12px; }
#faq .hx-q[open]:not(.is-closing) { background-color: rgba(245,200,130,.045); }
#faq .hx-q[open] summary i { box-shadow: 0 0 0 5px rgba(245,200,130,.08); }
/* answers: links get a gold underline that grows on hover */
#faq .hx-q__a a { color: var(--gold); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .4s var(--ease-out); padding-bottom: 1px; }
#faq .hx-q__a a:hover { background-size: 0 1px; background-position: 100% 100%; }

/* hairlines draw in once, left→right, 45 ms apart (only when faq.js runs: .fq-live; static border otherwise).
   A scaleX transform on a pseudo-element: compositor-only, so it costs nothing per scrolled frame on phones. */
#faq.fq-live .hx-q { border-bottom-color: transparent; }
#faq.fq-live .hx-q::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; background: var(--hairline);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease-out) calc(var(--i, 0) * 45ms); }
#faq.fq-live .hx-faq__list.is-drawn > .hx-q::after, #faq.hx-static .hx-q::after, html.hx-failsafe #faq .hx-q::after { transform: none; }

/* desktop visual: FABLE (V10-FABLE.md, F6 #3): the ring was bigger than any question. Half size, number at t-h2 scale,
   so the questions lead; the disc warms while an answer is open (.is-open from faq.js). */
@media (min-width: 1024px) {
  #faq .fq-viz__ring, #faq .fq-viz__core { width: clamp(124px, 10vw, 176px); }
  #faq .fq-viz__win { font-size: clamp(2.2rem, 3.1vw, 3.4rem); }
  #faq .fq-viz__of { font-size: .78rem; }
  #faq .fq-viz__q { font-size: clamp(1.05rem, 1.25vw, 1.35rem); color: var(--text-2); max-width: 26ch; }
  #faq .fq-viz__track { transition: fill .6s var(--ease-out); }
  #faq .fq-viz.is-open .fq-viz__track { fill: rgba(245,200,130,.07); }
}

@media (prefers-reduced-motion: reduce) {
  #faq .hx-q summary > span, #faq .hx-q summary::after, #faq .hx-q summary i, #faq .hx-q::after, #faq .hx-q { transition: none !important; }
}
.reduced-motion #faq .hx-q::after { transform: none; transition: none; }
/* /V10 · F6 */

/* G3 v10 · a11y: the desktop scrub (faq.js, x 32 / opacity .25 → 1) can leave a summary at .25 when Tab scrolls it in at the
   bottom edge. A focused question is always fully visible. */
#faq .hx-q:has(:focus-visible) { opacity: 1 !important; }