/* Poltsamaa study day — colours and shapes come from the Figma drawing */

/* Funnel, self-hosted: no third-party font requests from a public sector site. */
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/funnel-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/funnel-display-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Funnel Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/funnel-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Funnel Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/funnel-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #231f20;
  --ink-soft: #6b6466;
  --orange: #f7941d;
  --amber: #fbb040;
  --cyan: #00aeef;
  --green: #74aa90;
  --label: #354b56;
  --line: #e8e4e2;
  --backdrop: #f2efec;

  --shadow: 0 8px 26px rgba(35, 31, 32, 0.16);
  --font: "Funnel Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Funnel Display", "Funnel Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  color: var(--ink);
  background: var(--backdrop);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

.js body { overflow: hidden; overscroll-behavior: none; background: #969aa1; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

p { margin: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  left: 12px; top: -70px;
  z-index: 40;
  padding: 10px 14px;
  background: #fff;
  border-radius: 10px;
  color: var(--ink);
  box-shadow: var(--shadow);
}
.skip:focus-visible { top: 12px; }

:focus-visible { outline: 3px solid var(--label); outline-offset: 2px; }

/* The glow already marks a focused platform — no ring on top of the drawing. */
.pin:focus-visible { outline: none; }

/* --- full-bleed map --- */

.map { display: none; }

.js .map {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Fill the LARGE viewport, not the space above Safari's toolbar — the map
     then runs behind the bar like a tall page instead of ending at it. */
  height: 100vh;
  height: 100lvh;
  background: #969aa1;
  touch-action: none;
  cursor: grab;
  contain: layout paint;
}
.js .map:active { cursor: grabbing; }

/* The map: a flat image with the orange platforms as vector on top, both at
   1169x1134, moved as one layer. */
.map__view {
  position: absolute;
  left: 0;
  top: 0;
  width: 1169px;
  height: 1134px;
  transform-origin: 0 0;
}

.map__flat,
.map__marks {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.map__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* --- header over the map --- */

.hud, .hint, .zoom { display: none; }

.js .hud {
  display: grid;
  justify-items: start;
  gap: 4px;
  position: fixed;
  z-index: 10;
  left: calc(22px + env(safe-area-inset-left));
  bottom: calc(24px + env(safe-area-inset-bottom));
  max-width: min(26ch, calc(100% - 110px));
  text-align: left;
  color: #fff;
  /* Never eats a pan or pinch — touches fall straight through to the map. */
  pointer-events: none;
  user-select: none;
  transition: opacity 0.35s ease;
}

/* The card owns the screen while it is open — map chrome steps aside. */
.is-reading .hud { opacity: 0; }

.hud__kicker, .hud__meta {
  letter-spacing: 0.2em;
  color: #fff;
}

.hud__kicker {
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
}

.hud__meta {
  margin-top: 10px;
  font-size: 0.9rem;
  font-weight: 300;
}

.hud h1 {
  font-size: clamp(1.9rem, 8vw, 2.75rem);
  line-height: 0.85;
  color: #fff;
}

/* Subtitle sits under the title, about half its size. */
.hud__sub {
  display: block;
  margin-top: 0.5em;
  font-size: 0.56em;
  line-height: 1;
  letter-spacing: 0.06em;
}

/* Short, wide windows: keep the title from eating the map. */
@media (max-height: 620px) {
  .hud h1 { font-size: clamp(1.4rem, 4.2vh, 2rem); }
  .hud__kicker { font-size: 0.62rem; }
  .hud__meta { font-size: 0.78rem; margin-top: 8px; }
}

/* --- zoom buttons: desktop has no pinch, and they help on a phone too --- */

.js .zoom {
  display: grid;
  gap: 16px;
  position: fixed;
  z-index: 10;
  right: calc(22px + env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom));
  /* Only the two buttons are live — the gap around them lets a pan pass. */
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.is-reading .zoom { opacity: 0; pointer-events: none; }

.zoom .zoom__btn {
  position: relative;
  width: 23px;
  height: 23px;
  pointer-events: auto;
}

/* Small circle, thumb-sized target. */
.zoom .zoom__btn::after { inset: -8px; }

.zoom .zoom__btn[disabled] {
  opacity: 0.4;
  cursor: default;
}

.zoom .zoom__btn[disabled]:hover circle { fill: #d9d9d9; }

/* --- round buttons, same body as the card's close --- */

.knob {
  position: absolute;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Widens the touch area without growing the drawn circle. */
.knob::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.knob svg { display: block; width: 100%; height: 100%; }
.knob:focus-visible { outline: none; }
.knob:hover circle, .knob:focus-visible circle { fill: #c6c6c6; }

/* --- first-load hint: the map moves and scales --- */

.js .hint {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.hint svg {
  width: min(46vmin, 250px);
  filter: drop-shadow(0 2px 6px rgba(35, 31, 32, 0.35));
  animation: hint-breathe 1.9s ease-in-out infinite;
}

.hint.is-done { opacity: 0; }

@keyframes hint-breathe {
  0%, 100% { transform: scale(0.9); opacity: 0.75; }
  50% { transform: scale(1.06); opacity: 1; }
}

/* --- tap targets over the drawn platforms --- */

.pin {
  position: absolute;
  left: 0; top: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

/* --- programme list: only shown without JS --- */

.js #programm { display: none; }

#programm {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 20px 48px;
}

#programm > h2 { font-size: 2rem; margin-bottom: 16px; }

.spots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.spot {
  padding: 18px 20px;
  background: #fff;
  border-radius: 14px;
}

/* --- schedule card ---
   Every size below is the Figma card's own proportion (drawn 508 px wide),
   expressed in cqw so the card keeps its design at any width and stops
   growing once it reaches the drawn size. */

.layer {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* `display: flex` above would defeat the hidden attribute — restate it. */
.layer[hidden] { display: none; }

/* Built at load rather than on the first tap: creating this layer, laying out
   the card and rasterising its text is what cost a second and a half the first
   time it was needed. */
.layer:not(.is-open) { pointer-events: none; }
.layer:not(.is-open) .veil { opacity: 0; }
.layer:not(.is-open):not(.is-live) .sheet { visibility: hidden; }

.veil {
  position: absolute;
  inset: 0;
  background: rgba(35, 31, 32, 0.08);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.sheet {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(560px, 100% - 50px);
  max-height: 88svh;
  border-radius: clamp(32px, 9.84cqw, 50px);
  background: rgba(255, 255, 255, 0.9);
  color: var(--label);
  overflow: hidden;
  outline: none;
  opacity: 0;
}

/* One side inset, reused by the band and the body so their text lines up. */
.sheet { --pad: clamp(22px, 7.86cqw, 40px); }

/* Resting states only — the fade between them is run from app.js, so it never
   depends on a style change landing in the right frame. */
.layer.is-open .veil { opacity: 1; }

.sheet__close {
  /* Above the scrolling slot, which Safari promotes to its own layer. */
  z-index: 2;
  top: min(5.24cqw, 27px);
  right: min(5.24cqw, 27px);
  width: min(8.47cqw, 43px);
  height: min(8.47cqw, 43px);
}

.sheet__slot {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.spot__body { display: flex; flex-direction: column; }

/* Grey band across the top — stays put while the body scrolls under it. */
.card__head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--pad);
  padding-right: clamp(64px, 18cqw, 90px);
  background: rgba(136, 139, 146, 0.9);
}

.card__head h3 {
  font-size: clamp(30px, 9cqw, 46px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: #fff;
}

/* Icon beside the intro / short schedule. */
.card__main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(22px, 7cqw, 40px);
  padding: clamp(22px, 7cqw, 38px) var(--pad);
}

.card__icon {
  display: block;
  width: 90%;
  max-width: 135px;
  height: auto;
  margin: 0 auto;
}

.card__lines { align-self: center; }

.card__time {
  font-family: var(--font-display);
  font-size: clamp(19px, 5.6cqw, 29px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--orange);
}

.card__note {
  margin-top: clamp(8px, 2.4cqw, 12px);
  font-family: var(--font-display);
  font-size: clamp(15px, 4.3cqw, 22px);
  font-weight: 300;
  color: var(--label);
}

.card__note strong { font-weight: 800; }

/* Same hairline as the Pealava schedule, between two time blocks. */
.card__rule {
  height: 0;
  margin: clamp(14px, 4cqw, 20px) 0;
  border: 0;
  border-top: 1px solid var(--label);
}

.kava {
  margin: 0;
  padding: 0 var(--pad) clamp(22px, 7cqw, 38px);
}

.kava dt {
  font-family: var(--font-display);
  font-size: clamp(19px, 4.92cqw, 25px);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--orange);
}

.kava dd {
  margin: clamp(4px, 1.2cqw, 6px) 0 0;
  padding-bottom: clamp(8px, 2.4cqw, 12px);
  border-bottom: 1px solid var(--label);
  font-family: var(--font-display);
  font-size: clamp(15px, 3.94cqw, 20px);
  font-weight: 300;
  color: var(--label);
}

.kava dd + dt { margin-top: clamp(16px, 4.7cqw, 24px); }

/* Both Funnel Display weights from the mock, inside one paragraph. */
.kava dd strong { font-weight: 800; }

@media (min-width: 720px) {
  .hud h1 { font-size: 2.5rem; }

  .sheet { max-height: min(88svh, 900px); }
}

@media (prefers-reduced-motion: reduce) {
  .hint svg { animation: none; }

  /* app.js shortens the fade when this is on. */
}