/* Kutsekoda's look: white page, their blue, Inter, rectangular outlined buttons. */
:root {
  --paper: #ffffff;
  --ink: #1a1a1a;
  --muted: #5c6470;
  --blue: #0072c6;
  --blue-deep: #00538d;
  --yellow: #ffd520;
  --line: #cfd8e3;
  --focus: #00538d;
  /* The switch above the video and the heading above Slido share this height, so both frames start level. */
  --head: 56px;
  --switch: 44px;
  --slido-w: 340px;
  color-scheme: light;
  font-family: "Inter", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { color: var(--ink); background: var(--paper); font-size: 1rem; line-height: 1.5; }
[hidden] { display: none !important; }
a { color: var(--blue-deep); text-underline-offset: .15em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
h1, h2, p { margin: 0; }

.masthead, .layout, .site-footer { width: min(100% - 32px, 1240px); margin-inline: auto; }

/* Standalone page only; hidden when embedded */
.masthead { padding: clamp(28px, 5vw, 56px) 0 clamp(20px, 3vw, 32px); }
.masthead h1 { color: var(--blue-deep); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.when { margin-top: 6px; color: var(--muted); font-size: 1.0625rem; }
.site-footer { padding: 28px 0 36px; color: var(--muted); font-size: .875rem; }

/* Video on the left, Slido on the right; the two rows keep the frames level. */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--slido-w);
  grid-template-areas: "switch qahead" "video slido";
  column-gap: 24px;
  align-items: start;
}
.no-slido .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "switch" "video"; }
.no-slido .qa-head, .no-slido .slido { display: none; }

.switch { grid-area: switch; display: flex; gap: 8px; height: var(--switch); margin-bottom: calc(var(--head) - var(--switch)); }
.switch-btn { display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 18px; border: 1px solid var(--ink); border-radius: 2px; color: var(--ink); background: var(--paper); font: inherit; font-size: .9375rem; cursor: pointer; touch-action: manipulation; }
.switch-btn:hover { border-color: var(--blue); color: var(--blue); }
.switch-btn.is-selected { border-color: var(--blue); color: #fff; background: var(--blue); }
.code { font-weight: 700; letter-spacing: .02em; }

.video { grid-area: video; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--blue); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.note, .countdown { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(18px, 3.5vw, 40px); color: #fff; }
.note p { font-size: clamp(1.125rem, 2.4vw, 1.5rem); font-weight: 500; }
.countdown > p { font-size: clamp(1rem, 2vw, 1.25rem); }
.clock { display: flex; gap: clamp(18px, 3.5vw, 40px); margin-top: 6px; }
.clock span { display: flex; flex-direction: column; }
.clock b { font-size: clamp(2.25rem, 7vw, 4.5rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.clock small { margin-top: 6px; font-size: clamp(.8125rem, 1.4vw, .9375rem); opacity: .85; }

.qa-head { grid-area: qahead; display: flex; flex-direction: column; justify-content: center; height: var(--head); padding: 0 14px; color: #fff; background: var(--blue-deep); }
.qa-head h2 { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.qa-head p { font-size: .8125rem; line-height: 1.35; opacity: .9; }
/* Slido is exactly as tall as the video beside it; below 1000px the two stack instead. */
.slido { grid-area: slido; align-self: stretch; border: 1px solid var(--line); border-top: 0; }
.slido iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "switch" "video" "qahead" "slido"; }
  .switch { margin-bottom: 12px; }
  .qa-head { height: auto; margin-top: 24px; padding-block: 12px; }
  .slido { height: 600px; min-height: 0; }
}
@media (max-width: 480px) {
  .switch-btn { flex: 1; justify-content: center; padding-inline: 8px; }
  .slido { height: 540px; }
}

/* Embedded: no title or footer, transparent, and the layout fills the frame exactly.
   The embed code gives the frame a fixed shape (aspect-ratio 2.35; on screens under 1000px at least 760px tall),
   so no script is needed to size it. A wide frame puts Slido beside the video, a tall one stacks them. */
.is-embed body { background: transparent; }
.is-embed .masthead, .is-embed .site-footer { display: none; }
.is-embed .layout { width: 100%; height: 100vh; overflow: hidden; }
.is-embed .slido { height: auto; min-height: 0; align-self: stretch; }
.is-embed .video { width: auto; max-width: 100%; justify-self: start; }

@media (min-aspect-ratio: 8/5) {
  /* The video column is as wide as the video; Slido takes whatever is left, so there is never a gap between them. */
  .is-embed .layout { grid-template-columns: auto minmax(280px, 1fr); grid-template-rows: var(--head) minmax(0, 1fr); grid-template-areas: "switch qahead" "video slido"; }
  .is-embed .switch { margin-bottom: 0; align-self: start; }
  .is-embed .qa-head { height: var(--head); margin-top: 0; padding-block: 0; }
  /* As tall as the frame allows, as long as Slido keeps at least 280px of width */
  .is-embed .video { height: min(calc(100vh - var(--head)), calc((100vw - 280px - 24px) * 9 / 16)); }
}
@media (max-aspect-ratio: 8/5) {
  .is-embed .layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--head) auto auto minmax(0, 1fr); grid-template-areas: "switch" "video" "qahead" "slido"; }
  .is-embed .switch { margin-bottom: 0; align-self: start; }
  .is-embed .qa-head { height: var(--head); margin-top: 16px; padding-block: 0; }
  /* Leave Slido at least 220px below the video */
  .is-embed .video { height: min(calc(100vw * 9 / 16), calc(100vh - 2 * var(--head) - 16px - 220px)); }
}