/* ==========================================================================
   WFL — Info (info.html) · brief §5.13
   Eerste keer · Huisregels (paper) · Regels & formats (paper) · FAQ
   Page-scoped under body.page-info.
   ========================================================================== */


/* ---- 1. Hero: crowd → pyro (second clip on scroll) -------------------------- */
.page-info .info-hero__screen.has-overlay { aspect-ratio: 4 / 5; }
@media (min-width: 600px) { .page-info .info-hero__screen.has-overlay { aspect-ratio: 16 / 10; } }
@media (min-width: 1024px) {
  .page-info .info-hero__screen.has-overlay { aspect-ratio: auto; height: min(calc(100svh - var(--header-h) - 72px), 820px); min-height: 540px; }
}
.page-info .info-hero__screen .screen__fx {
  background: linear-gradient(to top, rgba(7, 7, 10, .9) 0%, rgba(7, 7, 10, .55) 34%, rgba(7, 7, 10, 0) 62%), var(--tekstveilig-links), var(--vignet);
}
.page-info .info-clip { position: absolute; inset: 0; }
.page-info .info-clip--b { display: none; opacity: 0; transition: opacity 700ms var(--ease-out); }
.page-info .is-b .info-clip--b { display: block; }
.page-info .is-b-on .info-clip--b { opacity: 1; }
.page-info .is-b-done .info-clip--a { display: none; }
.page-info .info-hero__copy { gap: clamp(12px, 1.6vw, 20px); max-width: 1100px; }
.page-info .info-hero__title { font-size: clamp(2.6rem, 11.6vw, 10rem); line-height: .84; max-width: 11ch; text-wrap: balance; }
@media (min-width: 768px) { .page-info .info-hero__title { font-size: clamp(3.75rem, 9.6vw, 10rem); max-width: none; } }

/* sub-nav */
.page-info .info-subnav { margin-top: var(--s-5); }
.page-info .info-subnav ul { align-items: center; }
.page-info .info-subnav__cta { margin-left: auto; }
.page-info .info-subnav__cta a { display: inline-flex; align-items: center; gap: 6px; color: var(--bot); }

/* ---- 2. Een avond in zes scènes ------------------------------------------- */
.page-info .avond__head { margin-bottom: clamp(var(--s-6), 4vw, var(--s-8)); }
.page-info .avond__head .section__head { margin-bottom: 0; }
/* Storyboard: six frames on ONE ring-light rail (red → blue, the night from doors to the last bell).
   < 1024: vertical rail on the left, one lit dot per scene on the line (no numbers).
   ≥ 1024: six portrait frames in a row, the rail runs horizontally through the dots. */
.page-info .scenes-rail { position: relative; }
.page-info .scenes-rail__note { margin-bottom: var(--s-5); }
.page-info .scenes { --node: 44px; --rail-g: linear-gradient(to bottom, var(--rood), var(--blauw)); position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(36px, 7vw, 56px); grid-template-columns: minmax(0, 1fr); }
.page-info .scenes::before { content: ""; position: absolute; left: calc(var(--node) / 2 - 1px); top: 8px; bottom: 8px; width: 2px; background: var(--rail-g); box-shadow: 0 0 14px rgba(234, 0, 23, .35); }
.page-info .scene { position: relative; display: grid; grid-template-columns: var(--node) minmax(0, 1fr); grid-template-areas: "node frame" "node body"; column-gap: 16px; row-gap: 16px; align-content: start; }
.page-info .scene__node { grid-area: node; align-self: start; display: flex; justify-content: center; margin: 0; }
.page-info .scene__dot { display: block; width: 14px; height: 14px; margin-top: 8px; border-radius: 50%; background: var(--nacht); box-shadow: inset 0 0 0 2px var(--bot), 0 0 0 5px var(--nacht), 0 0 14px rgba(241, 238, 232, .35); }
.page-info .scene__frame { grid-area: frame; position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: var(--r-card); overflow: hidden; background: var(--zaal); isolation: isolate; }
.page-info .scene__frame .media, .page-info .scene__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos-m); }
.page-info .scene__frame img { filter: grayscale(1) contrast(1.08) brightness(.9); transition: filter 600ms var(--ease-out), transform 900ms var(--ease-licht); }
.page-info .scene:hover .scene__frame img, .page-info .scene:focus-within .scene__frame img { filter: contrast(1.04) brightness(1); transform: scale(1.03); }
.page-info .scene__fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(7, 7, 10, .45), rgba(7, 7, 10, 0) 45%), var(--vignet); }
.page-info .scene__fx::before, .page-info .scene__fx::after { content: ""; position: absolute; inset: 0; mix-blend-mode: screen; opacity: .15; transition: opacity 600ms var(--ease-out); }
.page-info .scene__fx::before { background: var(--licht-rood); }
.page-info .scene__fx::after { background: var(--licht-blauw); }
.page-info .scene:hover .scene__fx::before, .page-info .scene:hover .scene__fx::after { opacity: .32; }
.page-info .scene__body { grid-area: body; display: grid; gap: 10px; justify-items: start; }
.page-info .scene__title { font: 900 clamp(1.75rem, 7vw, 2.5rem) / .9 var(--font-display); text-transform: uppercase; }
.page-info .scene__text { color: var(--bot-80); max-width: 42ch; }
@media (min-width: 640px) {
  .page-info .scenes { --node: 64px; }
}
@media (min-width: 1024px) {
  .page-info .scenes { --gap: clamp(14px, 1.4vw, 22px); --frame-to-node: 26px; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gap); }
  .page-info .scenes::before { display: none; }
  .page-info .scene { grid-template-columns: minmax(0, 1fr); grid-template-areas: "frame" "node" "body"; row-gap: 0; }
  .page-info .scene__frame { aspect-ratio: 3 / 4; }
  .page-info .scene__frame .media, .page-info .scene__frame img { object-position: var(--pos-d); }
  /* the rail: each node draws its segment (incl. the gap); one gradient spread over six segments */
  .page-info .scene__node { position: relative; justify-content: flex-start; align-items: center; height: 56px; margin-top: 4px; }
  .page-info .scene__node::before {
    content: ""; position: absolute; left: 0; right: calc(-1 * var(--gap)); top: 50%; height: 2px; transform: translateY(-50%);
    background: linear-gradient(to right, var(--rood), var(--blauw)); background-size: 600% 100%; background-position: calc(var(--i) * 20%) 0;
    box-shadow: 0 0 14px rgba(234, 0, 23, .28);
  }
  .page-info .scene:last-child .scene__node::before { right: 0; }
  .page-info .scene__dot { position: relative; margin-top: 0; }
  .page-info .scene__body { gap: 10px; padding-right: 6px; }
  .page-info .scene__title { font-size: clamp(1.5rem, 1.9vw, 2.125rem); overflow-wrap: anywhere; }
  .page-info .scene__text { font-size: 15px; line-height: 1.5; }
}

/* ---- 3/4. Paper sections ---------------------------------------------------- */
.page-info .rules-paper { --bot-80: #2D2C29; --muted-ink: #5E5B55; }
.page-info .rules-paper + .rules-paper { padding-top: 0; }
/* one hairline between the two sheets, the same 1px ink rule the paper uses under its block heads */
.page-info .rules-paper--regels .container { border-top: 1px solid var(--inkt); padding-top: clamp(56px, 8vw, 112px); }
.page-info .paper .link, .page-info .paper .btn--text { color: var(--blauw); }
.page-info .paper .volgt { color: var(--muted-ink); }
.page-info .paper-grid { display: grid; gap: clamp(32px, 5vw, 64px); }
.page-info .paper-grid__aside { display: grid; gap: var(--s-4); align-content: start; justify-items: start; }
.page-info .paper-lead { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.5; color: var(--inkt); max-width: 40ch; }
.page-info .paper-note { color: var(--muted-ink); }
.page-info .paper-h3 { color: var(--muted-ink); padding-bottom: 12px; border-bottom: 1px solid var(--inkt); margin-bottom: 4px; }
.page-info .paper-grid__main { display: grid; gap: clamp(32px, 4vw, 48px); }
.page-info .paper-grid__main > .paper-h3 + * { margin-top: calc(-1 * clamp(32px, 4vw, 48px) + 16px); }
@media (min-width: 1024px) {
  .page-info .paper-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-9); }
  .page-info .paper-grid__aside { position: sticky; top: calc(var(--header-h) + 72px); align-self: start; }
}

/* in het kort */
.page-info .kort { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .page-info .kort { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page-info .kort__item { padding: 16px 18px; border-radius: var(--r-panel); background: var(--bot-2); box-shadow: inset 3px 0 0 var(--rood); font-weight: 500; line-height: 1.4; }

/* full list: one click away (accordion), so the summary above is the only list on screen */
.page-info .regels-acc .acc__a { padding-right: 0; }
.page-info .regels { list-style: none; margin: 0; padding: 0; }
.page-info .regels__item { position: relative; padding: 18px 0 18px 26px; border-bottom: 1px solid var(--touw); }
.page-info .regels__item::before { content: ""; position: absolute; left: 0; top: calc(18px + .7em); width: 12px; height: 2px; background: var(--rood); transform: skewX(-18deg); }
.page-info .regels__item p { max-width: 62ch; line-height: 1.55; }
@media (min-width: 768px) { .page-info .regels__item { padding-block: 22px; } .page-info .regels__item::before { top: calc(22px + .75em); } .page-info .regels__item p { font-size: 1.0625rem; } }

/* regels & formats blocks */
.page-info .rblock { display: grid; gap: 16px; }
.page-info .rblock--split { gap: clamp(32px, 4vw, 48px); }
@media (min-width: 768px) { .page-info .rblock--split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page-info .rblock--split > div { display: grid; gap: 16px; align-content: start; }

.page-info .klassen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .page-info .klassen { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; } }
.page-info .klassen__item { position: relative; display: grid; gap: 8px; align-content: space-between; min-height: 132px; padding: 14px 14px 16px; border-radius: var(--r-panel); background: var(--bot-2); }
.page-info .klassen__key { font: 900 clamp(3.25rem, 6vw, 4.75rem) / .8 var(--font-display); color: var(--inkt); }
.page-info .klassen__name { font-weight: 500; color: var(--inkt); line-height: 1.25; }
.page-info .klassen__item--titel { background: var(--inkt); }
.page-info .klassen__item--titel .klassen__name { color: var(--bot); }
.page-info .klassen__key--titel { display: flex; align-items: flex-end; height: calc(clamp(3.25rem, 6vw, 4.75rem) * .8); font-size: clamp(1.75rem, 2.7vw, 2.6rem); line-height: .8; color: var(--bot); text-transform: uppercase; }
.page-info .klassen__belt { width: 18px; height: 18px; color: var(--zilver); vertical-align: -.3em; margin-right: 2px; }
.page-info .klassen__item--titel { box-shadow: inset 0 2px 0 var(--rood); }
.page-info .klassen__item--titel .klassen__name { display: inline-flex; align-items: center; gap: 4px; }
/* the progression: a chevron centred in every gap, on the letters' baseline */
@media (min-width: 640px) {
  .page-info .klassen__item:not(:last-child)::after {
    content: ""; position: absolute; z-index: 1; top: 34px; right: -15px; width: 8px; height: 8px;
    border-top: 2px solid var(--inkt); border-right: 2px solid var(--inkt); transform: rotate(45deg);
  }
}

.page-info .gewichten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--touw); border-left: 1px solid var(--touw); }
@media (min-width: 640px) { .page-info .gewichten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.page-info .gewichten__item { display: flex; align-items: baseline; gap: 8px; padding: 18px 16px; border-right: 1px solid var(--touw); border-bottom: 1px solid var(--touw); }
.page-info .gewichten__item .stencil { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: .9; }
.page-info .gewichten__item .mono { color: var(--muted-ink); }

.page-info .rondes { display: grid; gap: 8px; }
.page-info .ronde { display: grid; gap: 6px; padding: 16px 18px; border-radius: var(--r-panel); background: var(--bot-2); }
.page-info .ronde__n { font-size: clamp(2.75rem, 5vw, 3.75rem); line-height: .85; color: var(--inkt); }
.page-info .ronde .mono { color: var(--muted-ink); }
.page-info .scoring { list-style: none; margin: 0; padding: 0; display: grid; }
.page-info .scoring li { position: relative; padding: 14px 0 14px 24px; border-bottom: 1px solid var(--touw); font-weight: 500; }
.page-info .scoring li::before { content: ""; position: absolute; left: 0; top: calc(14px + .7em); width: 12px; height: 2px; background: var(--rood); transform: skewX(-18deg); }

.page-info .disc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.page-info .disc li { padding: 8px 14px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--inkt); font-weight: 500; font-size: 15px; }

.page-info .formats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .page-info .formats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page-info .format { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--r-panel); background: var(--bot-2); }
@media (min-width: 640px) { .page-info .format--wide { grid-column: 1 / -1; } }
.page-info .format__name { font: 900 1.625rem / .95 var(--font-display); color: var(--inkt); }
.page-info .format p { color: var(--bot-80); line-height: 1.5; }

/* ---- 5. FAQ ----------------------------------------------------------------- */
.page-info .info-faq__grid { display: grid; gap: var(--s-6); }
.page-info .info-faq__head { display: grid; gap: var(--s-4); align-content: start; }
.page-info .info-faq__head .section__head { margin-bottom: 0; }
@media (min-width: 1024px) {
  /* same 4 | 8 columns as the paper sheets above, so the answers start on their line */
  .page-info .info-faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-9); }
  .page-info .info-faq__head { position: sticky; top: calc(var(--header-h) + 72px); align-self: start; }
}