/* =====================================================================
   v5 „Канал“: съветът е ученическият телевизионен канал,
   а разделите са шкафчета в коридора. Mobile first, всички стойности от tokens.css.
   ===================================================================== */
@layer base, layout, parts, motion;

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + var(--s5)); -webkit-text-size-adjust: 100%; }
  body { margin: 0; background: var(--navy); color: var(--white); font: var(--w-text) var(--fs-body)/1.55 var(--f-text); -webkit-font-smoothing: antialiased; }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; text-underline-offset: 0.2em; }
  p { margin: 0 0 var(--s4); }
  ul, ol { margin: 0; padding: 0; }
  h1, h2, h3 { margin: 0; }
  :focus-visible { outline: 3px solid var(--sig); outline-offset: 3px; border-radius: 2px; }
  .on-blue :focus-visible { outline-color: var(--white); }
  .sheet :focus-visible, .programme .body :focus-visible { outline-color: var(--navy); outline-offset: 2px; }
  .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .skip { position: absolute; left: var(--s4); top: -100px; z-index: 50; background: var(--white); color: var(--navy); padding: var(--s3) var(--s4); border-radius: var(--r-s); font-weight: var(--w-bold); }
  .skip:focus { top: var(--s4); }
  .add { outline: 2px dashed currentColor; outline-offset: 2px; padding: 0 var(--s1); font-weight: var(--w-label); }
  [hidden] { display: none !important; }
}

@layer layout {
  .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
  .sec { padding: var(--s9) 0; position: relative; }
  .on-blue { background: var(--blue); color: var(--white); }
  /* a .screen section is a TV picture: screen blue with scanlines under the content */
  .screen { isolation: isolate; }
  .screen::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, var(--scanline) 3px 4px); }
  .h1 { font: 400 var(--fs-h1)/0.95 var(--f-display); letter-spacing: -0.02em; }
  .h2 { font: 400 var(--fs-h2)/1 var(--f-display); letter-spacing: -0.02em; }
  .h3 { font: var(--w-bold) var(--fs-h3)/1.15 var(--f-text); letter-spacing: -0.01em; }
  .h1 em, .h2 em { font-style: normal; color: var(--sig); }
  .lead { font-size: var(--fs-lead); line-height: 1.4; max-width: 34ch; }
  .label { font-size: var(--fs-s); font-weight: var(--w-label); color: var(--sig); margin: 0 0 var(--s3); }
  /* headings always sit above their content, never in a left column (split layouts read as templates) */
  .head-block { display: grid; gap: var(--s4); margin-bottom: var(--s7); }
  .head-block p { max-width: 52ch; margin: 0; }
  .split { display: grid; gap: var(--s6); }
  .split > :not(.h2) { max-width: 60rem; }
  /* section titles: plain text, the accent words in a caption block like "в ефир." in the hero */
  .lt { line-height: 1.15; }
  .lt > em { padding: 0 0.12em; border-radius: var(--r-s); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .lt > em { font-style: normal; background: var(--blue); color: var(--white); }
  .on-blue .lt > em { background: var(--navy); }
  .wrap:not(.split):not(.call) > .lt { margin-bottom: var(--s7); }
  .actions { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
}

@layer parts {
  /* ---------- Header ---------- */
  .head { position: sticky; top: 0; z-index: 20; background: var(--navy); border-bottom: var(--line) solid var(--blue); }
  .head-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s3) var(--s5); padding-block: var(--s3); }
  .brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; font-weight: var(--w-bold); line-height: 1.15; }
  .brand img { width: 2.5rem; height: 2.5rem; }
  .brand small { display: block; font-weight: var(--w-label); font-size: var(--fs-s); color: var(--sig); }
  .nav { grid-column: 1 / -1; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .nav ul { list-style: none; display: flex; gap: var(--s5); }
  .nav a { position: relative; display: inline-flex; align-items: baseline; gap: var(--s2); padding: var(--s2) 0; text-decoration: none; font-weight: var(--w-label); white-space: nowrap; }
  .nav .nav-no { font: 400 var(--fs-s)/1 var(--f-display); color: var(--sig); }
  .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--sig); transform: scaleX(0); transform-origin: right; transition: transform var(--t-ui) var(--ease); }
  .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
  .head-row > .key { grid-row: 1; grid-column: 2; }
  /* phones: the 4 links fit on one line without channel numbers */
  @media (max-width: 29.99rem) {
    .nav .nav-no, .brand small { display: none; }
    .nav ul { justify-content: space-between; gap: var(--s3); }
    .nav a { font-size: var(--fs-s); }
  }
  .progress { position: absolute; left: 0; right: 0; bottom: calc(var(--line) * -1); height: 3px; }
  .progress span { display: block; height: 100%; background: var(--sig); transform-origin: left; transform: scaleX(var(--p, 0)); }
  @media (min-width: 64rem) {
    .head-row { grid-template-columns: auto 1fr auto; }
    .head-row > .key { grid-column: 3; }
    .nav { grid-column: auto; justify-self: end; margin: 0; padding: 0; overflow: visible; }
    .nav ul { gap: var(--s6); }
  }

  /* ---------- Remote-key buttons (the one button language) ---------- */
  .key, .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s3); min-height: 3.25rem; padding: var(--s3) var(--s6); border: 0; border-radius: var(--r-m);
    font: var(--w-bold) var(--fs-body)/1.2 var(--f-text); text-decoration: none; cursor: pointer;
    background: var(--white); color: var(--navy); box-shadow: var(--hard-sig); transform: translateY(0);
    transition: transform 120ms var(--ease), box-shadow 120ms var(--ease), background var(--t-ui); }
  .key:hover, .btn:hover { transform: translateY(3px); box-shadow: 0 3px 0 var(--sig); }
  .key:active, .btn:active { transform: translateY(6px); box-shadow: 0 0 0 var(--sig); }
  .key--line { background: transparent; color: var(--white); box-shadow: inset 0 0 0 var(--line) var(--white), 0 6px 0 var(--blue); }
  .key--line:hover { box-shadow: inset 0 0 0 var(--line) var(--white), 0 3px 0 var(--blue); }
  .key--line:active { box-shadow: inset 0 0 0 var(--line) var(--white), 0 0 0 var(--blue); }
  .key--s { min-height: 2.75rem; padding: var(--s2) var(--s4); font-size: var(--fs-s); }
  .key--round { width: 3rem; height: 3rem; min-height: 0; padding: 0; border-radius: 50%; }
  .key--round svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }
  .on-blue .key { box-shadow: 0 6px 0 var(--navy); }
  .on-blue .key:hover { box-shadow: 0 3px 0 var(--navy); }
  .on-blue .key:active { box-shadow: 0 0 0 var(--navy); }
  .key .arr { transition: transform var(--t-ui) var(--ease); }
  .key:hover .arr { transform: translateX(4px); }
  .more { font-weight: var(--w-bold); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 3px no-repeat; padding-bottom: var(--s1); transition: background-size 300ms var(--ease); }
  .more:hover { background-size: 100% 3px; }

  /* ---------- Hero: the whole hero is one broadcast screen ---------- */
  .hero { padding: var(--s6) 0 var(--s8); }
  .tv { position: relative; border: 6px solid var(--white); border-radius: var(--r-l); background: var(--blue); box-shadow: var(--hard-tv); overflow: hidden; }
  .tv-inner { position: relative; padding: var(--s6) var(--s5) var(--s5); }
  .tv--hero .h1 { max-width: 15ch; }
  /* on the blue screen the accent words become an on-air caption block (light blue on blue is too weak) */
  .tv .h1 em { color: var(--white); background: var(--navy); padding: 0 0.12em; border-radius: var(--r-s); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .tv--hero .lead { margin: var(--s5) 0 var(--s7); max-width: 40ch; }
  /* channel logo, like the bug in the corner of a TV picture */
  .bug { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s5); font: var(--w-bold) var(--fs-s)/1.2 var(--f-text); }
  .bug b { font: 400 var(--fs-body)/1 var(--f-display); background: var(--white); color: var(--navy); padding: var(--s2) var(--s3); border-radius: var(--r-s); }
  /* the channels are lower thirds along the bottom of the screen */
  .tv-screen { position: relative; z-index: 1; container-type: inline-size; }
  .ch + .ch { margin-top: var(--s5); }
  .ch .bug { margin-bottom: var(--s3); }
  .third { display: flex; flex-wrap: wrap; border-radius: var(--r-s); overflow: hidden; background: var(--white); color: var(--navy); }
  .ch-big { display: flex; align-items: center; padding: var(--s3) var(--s5); background: var(--navy); color: var(--white); font: 400 var(--fs-tv)/1 var(--f-display); letter-spacing: -0.02em; }
  .ch-cap { flex: 1 1 10rem; align-self: center; margin: 0; padding: var(--s4) var(--s5); font-size: var(--fs-lead); font-weight: var(--w-bold); line-height: 1.25; }
  .ch-cap .cd { color: var(--blue); }
  .scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, var(--scanline) 3px 4px); }
  .js .tv-screen { display: grid; }
  .js .ch { grid-area: 1 / 1; align-self: end; visibility: hidden; }
  .js .ch + .ch { margin-top: 0; }
  .js .ch.is-on { visibility: visible; }
  /* the two main buttons and the remote sit under the screen */
  .hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s5); margin-top: var(--s7); }
  .remote { display: none; }
  .js .remote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
  .remote .i-play, .remote .is-paused .i-pause { display: none; }
  .remote .is-paused .i-play { display: block; }
  /* channel number keys on the remote */
  .chans { display: flex; flex-wrap: wrap; gap: var(--s2); margin-left: var(--s3); }
  .chans button { width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; border: var(--line) solid var(--white); background: transparent; color: var(--white); font: 400 var(--fs-body)/1 var(--f-display); cursor: pointer; transition: background var(--t-ui), color var(--t-ui), transform var(--t-ui) var(--spring); }
  .chans button:hover { transform: translateY(-2px); }
  .chans button[aria-current="true"] { background: var(--white); color: var(--navy); }
  @media (min-width: 48rem) { .tv { border-width: 12px; } .tv-inner { padding: var(--s8) var(--s7) var(--s7); } }

  /* ---------- Lockers: the section hub ---------- */
  /* a two-tier locker bank: short doors, hairline gaps, so it reads as one piece of furniture */
  .lockers { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); }
  .locker { height: 100%; }
  .locker a { position: relative; display: block; height: 100%; min-height: 9.5rem; border-radius: var(--r-s); background: var(--air); color: var(--navy); text-decoration: none; perspective: 1400px; overflow: hidden; }
  .locker .inside { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s3); padding-left: 2.25rem; overflow-wrap: break-word; }
  .locker .inside b { font: 400 var(--fs-lead)/1.05 var(--f-display); }
  .locker .inside span { font-weight: var(--w-label); font-size: var(--fs-s); line-height: 1.3; margin-top: var(--s2); }
  .door { position: absolute; inset: 0; border-radius: var(--r-s); background: var(--blue); color: var(--white); padding: var(--s4); transform-origin: left center; transform: rotateY(0); transition: transform var(--t-door) var(--spring); box-shadow: inset 0 0 0 var(--line) var(--sig); }
  .door .no { font: 400 var(--fs-lead)/1 var(--f-display); }
  .door .vents { position: absolute; left: var(--s4); right: var(--s6); top: 2.75rem; height: 2rem; background: repeating-linear-gradient(0deg, var(--navy) 0 4px, transparent 4px 10px); }
  .door .handle { position: absolute; right: var(--s3); top: 50%; width: 0.5rem; height: 3rem; margin-top: -1.5rem; border-radius: 4px; background: var(--white); }
  .door .lbl { position: absolute; left: var(--s4); right: var(--s5); bottom: var(--s4); font-weight: var(--w-bold); line-height: 1.2; }
  .locker--join a { background: var(--white); }
  .locker a:focus-visible { z-index: 2; outline-color: var(--white); outline-offset: 2px; }
  .locker a:focus-visible .door { transform: rotateY(-80deg); }
  /* mouse: doors open on hover and peek once when they scroll in */
  @media (hover: hover) {
    .locker a:hover .door { transform: rotateY(-80deg); }
    .locker.is-seen a:not(:hover):not(:focus-visible) .door { animation: peek 1100ms var(--ease) var(--d, 0ms); }
  }
  /* touch: no hover, so the doors swing open as they scroll in and stay open */
  @media (hover: none) {
    .locker.is-seen .door { transform: rotateY(-80deg); transition-delay: var(--d, 0ms); }
  }
  /* very narrow phones: one column, so open lockers never break words */
  @media (max-width: 22.49rem) {
    .lockers { grid-template-columns: 1fr; }
    .locker a { min-height: 8rem; }
  }
  .lockers--3 { grid-template-columns: 1fr; }
  .lockers--3 .locker a { min-height: 8rem; }
  @media (min-width: 48rem) {
    .lockers { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 11rem; }
    .lockers.lockers--3 { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 10rem; }
    .locker .inside { padding: var(--s5); padding-left: 3rem; }
    .locker .inside b { font-size: var(--fs-h3); }
  }

  /* ---------- Seat map ---------- */
  .seatboard { display: grid; gap: var(--s6); container-type: inline-size; }
  .seats { list-style: none; display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--s2); }
  .seats li { aspect-ratio: 1.1; border-radius: 10px 10px 4px 4px; background: var(--white); }
  .seats li.free { background: transparent; box-shadow: inset 0 0 0 var(--line) var(--white); }
  .legend { list-style: none; display: flex; gap: var(--s5); margin-top: var(--s4); font-weight: var(--w-label); font-size: var(--fs-s); }
  .legend i { display: inline-block; width: 1rem; height: 0.875rem; border-radius: 5px 5px 2px 2px; background: var(--white); vertical-align: -1px; margin-right: var(--s2); }
  .legend i.free { background: transparent; box-shadow: inset 0 0 0 var(--line) var(--white); }
  .count { width: fit-content; max-width: 100%; }
  @media (min-width: 48rem) { .seats { grid-template-columns: repeat(14, 1fr); gap: var(--s2); } .seats li { aspect-ratio: 1.6; } }

  /* ---------- Programme (events + news): a TV guide ---------- */
  .programme { list-style: none; display: grid; gap: var(--s3); }
  .programme > li { display: flex; flex-wrap: wrap; border-radius: var(--r-s); overflow: hidden; background: var(--white); color: var(--navy); }
  .programme .when { flex: 1 1 100%; margin: 0; padding: var(--s4) var(--s5); background: var(--blue); color: var(--white); font: 400 var(--fs-h3)/1.1 var(--f-display); }
  .on-blue .programme .when { background: var(--navy); }
  .programme .when small { display: block; font: var(--w-label) var(--fs-s)/1.3 var(--f-text); margin-top: var(--s1); }
  .programme .body { flex: 1 1 18rem; min-width: 0; padding: var(--s4) var(--s5); }
  .programme .body h3 { font: var(--w-bold) var(--fs-h3)/1.15 var(--f-text); margin-bottom: var(--s3); }
  .programme .body p, .programme .body li { max-width: 62ch; }
  .programme .body ul { padding-left: 1.2em; margin-bottom: var(--s4); }
  .programme .body > :last-child { margin-bottom: 0; }
  .programme .body .photo { display: block; width: 100%; max-width: 40rem; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-s); margin-bottom: var(--s4); background: var(--air); }
  @media (min-width: 48rem) { .programme .when { flex: 0 0 14rem; } }

  /* ---------- Idea call (blue) ---------- */
  .call { display: grid; gap: var(--s6); justify-items: start; }
  .call .h2 { font-size: var(--fs-h1); }

  /* ---------- Contact ---------- */
  .contact { display: grid; margin: 0; border-top: var(--line) solid var(--blue); }
  .contact > div { display: grid; gap: var(--s1); padding: var(--s4) 0; border-bottom: var(--line) solid var(--blue); }
  .contact dt { font-weight: var(--w-label); font-size: var(--fs-s); color: var(--sig); }
  .contact dd { margin: 0; font-weight: var(--w-bold); font-size: var(--fs-lead); overflow-wrap: anywhere; }
  @media (min-width: 48rem) { .contact > div { grid-template-columns: 12rem 1fr; align-items: baseline; } }

  /* ---------- Inner page title: a wide TV screen ---------- */
  .pagehead { padding: var(--s7) 0 var(--s8); }
  .pagehead + .sec:not(.on-blue) { padding-top: 0; }
  .pagehead .tv { padding: var(--s6); }
  .pagehead .lead { margin: var(--s5) 0 0; max-width: 46ch; }
  .pagehead .tv { padding: var(--s6) var(--s5); }
  @media (min-width: 48rem) { .pagehead .tv { padding: var(--s8) var(--s7); } }

  /* ---------- Members ---------- */
  .credits { list-style: none; border-top: var(--line) solid var(--blue); }
  .credits li { display: grid; gap: var(--s1); padding: var(--s4) 0; border-bottom: var(--line) solid var(--blue); }
  .credits .role { font-weight: var(--w-label); font-size: var(--fs-s); color: var(--sig); }
  .credits .name { font: 400 var(--fs-h3)/1.15 var(--f-display); }
  @media (min-width: 48rem) { .credits li { grid-template-columns: 14rem 1fr; align-items: baseline; } }
  .depts { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .depts > li > * { min-width: 0; overflow-wrap: break-word; }
  .depts > li { position: relative; display: grid; gap: var(--s3); padding: var(--s6) var(--s7) var(--s6) var(--s6); border-radius: var(--r-s); background: var(--blue); box-shadow: inset 0 0 0 var(--line) var(--sig); }
  .depts > li::after { content: ""; position: absolute; right: var(--s4); top: var(--s6); width: 0.5rem; height: 3rem; border-radius: 4px; background: var(--white); }
  .depts .num { font: 400 var(--fs-lead)/1 var(--f-display); color: var(--air); }
  .depts p { margin: 0; max-width: 60ch; }
  .depts dl { margin: var(--s3) 0 0; display: grid; gap: var(--s2); }
  .depts dl div { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline; padding-top: var(--s2); border-top: var(--line) solid var(--sig); }
  .depts dt { font-weight: var(--w-label); font-size: var(--fs-s); color: var(--air); min-width: 9rem; }
  .depts dd { margin: 0; font-weight: var(--w-bold); }
  @media (min-width: 64rem) { .depts > li { grid-template-columns: 4rem 1fr 1fr; column-gap: var(--s6); align-items: start; } .depts dl { margin: 0; } }

  /* ---------- Documents ---------- */
  .sheets { list-style: none; display: grid; gap: var(--s4); }
  .sheet { padding: var(--s6); border-radius: var(--r-m); background: var(--white); color: var(--navy); box-shadow: 8px 8px 0 var(--blue); }
  .sheet .h3 { margin-bottom: var(--s3); }
  .sheet > :last-child { margin-bottom: 0; }
  .sheet .label { color: var(--blue); }
  .sheet .btn { background: var(--navy); color: var(--white); box-shadow: 0 6px 0 var(--blue); }
  .sheet .btn:hover { box-shadow: 0 3px 0 var(--blue); }
  .on-blue .sheet { box-shadow: 8px 8px 0 var(--navy); }
  @media (min-width: 64rem) { .sheets { grid-template-columns: 1fr 1fr; } }

  /* ---------- Footer: giant wordmark ---------- */
  .foot { background: var(--navy); border-top: var(--line) solid var(--blue); padding: var(--s7) 0 var(--s6); overflow: hidden; }
  .foot-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); font-weight: var(--w-label); }
  .foot-links a { display: inline-block; padding: var(--s2) 0; }
  .foot-links a:hover { color: var(--sig); }
  .wordmark { margin: var(--s7) 0 var(--s5); font: 400 var(--fs-wordmark)/0.9 var(--f-display); letter-spacing: -0.03em; color: var(--white); }
  .wordmark em { font-style: normal; color: var(--sig); }
  .foot-base { display: flex; align-items: center; gap: var(--s3); font-size: var(--fs-s); font-weight: var(--w-label); }
  .foot-base img { width: 2.5rem; height: 2.5rem; }
  .foot-base p { margin: 0; }
}

@layer motion {
  /* Channel switch: the lower third wipes in like a TV graphic */
  .js .ch.is-on .third { animation: third-in 560ms var(--ease) both; }
  .js .ch.is-on .bug { animation: bug-in 400ms var(--ease) both; }
  @keyframes third-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes bug-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .js .lt.reveal { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path var(--t-move) var(--ease); }
  .js .reveal .lt { clip-path: inset(0 100% 0 0); transition: clip-path var(--t-move) var(--ease) 120ms; }
  .js .lt.reveal.in, .js .reveal.in .lt { clip-path: inset(0 0 0 0); }
  @keyframes peek { 0% { transform: rotateY(0); } 40% { transform: rotateY(-42deg); } 100% { transform: rotateY(0); } }


  /* Scroll reveals: only when JS is running, so content never depends on them */
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--t-move) var(--ease), transform var(--t-move) var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js #seat-map li { opacity: 0; transform: translateY(12px) scale(.6); transition: opacity 400ms var(--ease), transform 500ms var(--spring); }
  .js #seat-map.in li { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
    .js .reveal, .js #seat-map li { opacity: 1; transform: none; }
    .js .lt.reveal, .js .reveal .lt { clip-path: none; }
  }
}