/* =====================================================================================================================
   v9r3 film band (#elokuva, views/landing/v9/_film.php): "Alarmi minuutissa" large on a full-bleed deep Kuusi band.
   The real app floats on the green like a cinema screen: container-wide 16:9 film (4:5 cut under 768 px), 24 px
   corners, a deep soft shadow; the play/pause/replay button, a progress line and the length sit in a row UNDER it,
   and the trial button takes the line's place when the film has ended. Under the row: the six steps of the round as
   chapters (a list on phones, 3 x 2 from 1024 px); the playing one carries a mint top edge. No visible heading: the
   film's own title card is the headline. Motion: the poster gives way to the playing film (opacity 400 ms) and the
   progress line follows the film; nothing else moves. Behaviour: public/js/v9/film.js.

   Scoped colours (like talo.css and shell.css carry their own copies; values from public/css/app/tokens.css):
     band #1F4D47 = --color-brand-field (the pricer's .hn__calc field further down is the page's second Kuusi band)
     white on band 9.5   mint #A9D4C6 on band 5.8 (chapter numbers, progress)   soft #D5E6E0 on band 7.3 (chapter lines, length)
     list #DCEBE6 on band 7.7   focus ring #FFFFFF on band 9.5 (non-text, ≥ 3)   Kuusi #1F4D47 icon/text on white 9.5
     chapter edge: mint on band 5.8 (current), white 16 % on band (resting divider, decorative)
   ===================================================================================================================== */
.fm9 {
  --fm9-bg: #1F4D47; --fm9-ink: #FFFFFF; --fm9-mint: #A9D4C6; --fm9-soft: #D5E6E0; --fm9-list: #DCEBE6;
  --fm9-icon: #1F4D47; --fm9-disc: #FFFFFF; --fm9-well: #183E39; --fm9-track: rgb(255 255 255 / .2);
  --fm9-r: 24px;
  --fm9-shadow:
    0 0 0 1px rgb(255 255 255 / .07),
    0 2px 6px rgb(4 14 12 / .30),
    0 28px 64px -18px rgb(4 14 12 / .62),
    0 64px 128px -48px rgb(4 14 12 / .55);
  background: var(--fm9-bg); color: var(--fm9-ink);
  padding-block: 40px 40px;
}
@media (min-width: 48rem) { .fm9 { padding-block: 56px 48px; } }
@media (min-width: 64rem) { .fm9 { padding-block: 64px 56px; } }

.fm9__wrap { container-type: inline-size; }
/* short laptops (1366x768, 1280x720): the column narrows so the whole film and its row fit under the 72 px header */
@media (min-width: 64rem) {
  .fm9 .fm9__film, .fm9 .fm9__chs, .fm9 .fm9__text {
    max-width: max(56rem, calc((100vh - 160px) * 16 / 9)); max-width: max(56rem, calc((100svh - 160px) * 16 / 9));
    margin-left: auto; margin-right: auto;
  }
}
.fm9 :focus-visible { outline-color: var(--fm9-ink); outline-offset: 3px; }

/* ------------------------------------------------------------------------------------------------ the film */
.fm9__film { margin: 0; }
.fm9__frame {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: var(--fm9-r); background: var(--fm9-well); box-shadow: var(--fm9-shadow);
}
@media (max-width: 47.99rem) { .fm9__film[data-fm9-narrow] .fm9__frame { aspect-ratio: 4 / 5; } }
.fm9__poster, .fm9__poster picture, .fm9__poster img, .fm9__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.fm9__poster { display: block; border-radius: inherit; }
.fm9__poster img, .fm9__video { object-fit: cover; object-position: 50% 0; }
.fm9__video { opacity: 0; transition: opacity 400ms var(--ease-out); }
.fm9__film.is-live .fm9__video { opacity: 1; }
html.js .fm9__frame { cursor: pointer; }
.fm9__poster:focus-visible { outline-offset: -6px; }

/* ------------------------------------------------------------------------------------------------ the row under it */
/* the row and the transcript sit above the positioned frame, or its deep shadow greys them */
.fm9__row { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; margin-top: 20px; min-height: 44px; }
@media (min-width: 48rem) { .fm9__row { margin-top: 24px; gap: 20px; } }
.fm9__btn {
  display: inline-flex; align-items: center; gap: 12px; flex: none; min-height: 44px; padding: 0 12px 0 0; margin: 0;
  border: 0; border-radius: 22px; background: none; color: var(--fm9-ink);
  font-family: var(--font-ui); font-size: 17px; font-weight: 600; line-height: 1.2;
}
.fm9__disc {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--fm9-disc); color: var(--fm9-icon); box-shadow: 0 2px 8px rgb(4 14 12 / .35);
  transition: transform var(--dur-press) var(--ease-out);
}
.fm9__btn:active .fm9__disc { transform: scale(.94); }
.fm9__disc svg { width: 20px; height: 20px; }
.fm9__disc [data-i] { display: none; }
.fm9__film[data-state="idle"] [data-i="play"],
.fm9__film[data-state="paused"] [data-i="play"],
.fm9__film[data-state="playing"] [data-i="pause"],
.fm9__film[data-state="ended"] [data-i="replay"] { display: block; }
.fm9__track { position: relative; flex: 1 1 auto; min-width: 48px; height: 3px; border-radius: 2px; background: var(--fm9-track); overflow: hidden; }
.fm9__track i { position: absolute; inset: 0; background: var(--fm9-mint); transform: scaleX(0); transform-origin: 0 50%; }
.fm9__dur { flex: none; font-size: var(--v9-fs-small); font-weight: 600; line-height: 1.5; color: var(--fm9-soft); }
/* without JS: the row offers the MP4 instead of the button and the line */
.fm9__link {
  display: none; align-items: center; min-height: 44px; margin-right: auto; color: var(--fm9-ink); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; border-radius: 4px;
}
html:not(.js) .fm9__btn, html:not(.js) .fm9__track, html:not(.js) .fm9__dur { display: none; }
html:not(.js) .fm9__link { display: inline-flex; }

/* ------------------------------------------------------------------------------------------------ transcript */
.fm9__text { position: relative; z-index: 1; margin-top: 12px; }
.fm9__text summary {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding-right: 8px; border-radius: 6px;
  cursor: pointer; list-style: none; font-size: var(--v9-fs-small); font-weight: 600; color: var(--fm9-ink);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgb(255 255 255 / .4);
}
.fm9__text summary::-webkit-details-marker { display: none; }
.fm9__text summary::before {
  content: ""; width: 8px; height: 8px; margin-left: 4px; flex: none;
  border-right: 2.2px solid currentColor; border-bottom: 2.2px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--dur) var(--ease-out);
}
.fm9__text[open] summary::before { transform: rotate(45deg); }
.fm9__text summary:hover { text-decoration-color: currentColor; }
.fm9__text ol {
  margin: 12px 0 0; padding-left: 1.6em; max-width: 72rem; color: var(--fm9-list);
  font-size: var(--v9-fs-small); line-height: 1.55;
}
.fm9__text li { padding-left: .25em; margin-bottom: 8px; break-inside: avoid; }
.fm9__text li::marker { color: var(--fm9-mint); font-weight: 600; }
@media (min-width: 64rem) { .fm9__text ol { columns: 2; column-gap: 64px; } }

/* ------------------------------------------------------------------------------------------------ the end: trial button */
/* the film ends on its card; the row then offers the trial in the progress line's place (the length goes too) */
.fm9__row { flex-wrap: wrap; row-gap: 12px; }
.fm9__go {
  display: none; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 12px; background: var(--fm9-disc); color: var(--fm9-icon); text-decoration: none;
  font-family: var(--font-ui); font-size: 17px; font-weight: 700; line-height: 1.2;
  box-shadow: 0 2px 8px rgb(4 14 12 / .35); transition: transform var(--dur-press) var(--ease-out);
}
.fm9__go svg { width: 20px; height: 20px; flex: none; }
.fm9__go:active { transform: scale(.97); }
.fm9__film[data-state="ended"] .fm9__go { display: inline-flex; }
.fm9__film[data-state="ended"] .fm9__track, .fm9__film[data-state="ended"] .fm9__dur { display: none; }
@media (max-width: 47.99rem) { .fm9__film[data-state="ended"] .fm9__go { order: -1; flex: 1 1 100%; } }
@media (min-width: 48rem) { .fm9__go { margin-left: auto; } }

/* ------------------------------------------------------------------------------------------------ chapters */
.fm9__chs { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.fm9__ch {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-content: start;
  width: 100%; min-height: 44px; margin: 0; padding: 14px 0 16px; text-align: left;
  border: 0; border-top: 3px solid var(--fm9-track); border-radius: 0; background: none; color: var(--fm9-ink);
  font: inherit; cursor: pointer; transition: border-color var(--dur) linear;
}
.fm9__ch-no {
  grid-row: 1 / span 2; font-family: var(--font-display); font-stretch: var(--display-wdth); font-weight: 800;
  font-size: 20px; line-height: 1.25; color: var(--fm9-mint);
}
.fm9__ch-t { font-weight: 700; font-size: 18px; line-height: 1.3; }
.fm9__ch-l { font-size: 16px; line-height: 1.45; color: var(--fm9-soft); }
.fm9__ch:hover .fm9__ch-t { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.fm9__ch[aria-current] { border-top-color: var(--fm9-mint); }
.fm9__ch:focus-visible { outline-offset: 2px; border-radius: 4px; }
/* without JS the chapters are a plain list of the steps (the poster and the row link open the film) */
html:not(.js) .fm9__ch { cursor: default; pointer-events: none; }
@media (min-width: 48rem) {
  .fm9__chs { margin-top: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (min-width: 64rem) {
  .fm9__chs { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--v9-gap); }
  .fm9__ch { padding-bottom: 20px; }
}

/* ------------------------------------------------------------------------------------------------ #nain on home */
/* This band plays the same six steps, so on home #nain keeps only its "Alarmissa on myös" block and the link to
   /features (the steps with their own clips stay on /features). Stopgap from round 3: the clean version skips the
   head and the steps grid in views/landing/v9/_features.php when v9_film() exists; drop these lines then. */
.fm9 ~ #nain .f9__head, .fm9 ~ #nain .f9__grid { display: none; }
.fm9 ~ #nain .f9__more { margin-top: 0; }
/* the band's own edge already closes it: no divider line and a shorter gap before the block */
.fm9 + #nain { margin-top: clamp(48px, 6vw, 80px); }
.fm9 ~ #nain .f9__more { padding-top: 0; }
.fm9 ~ #nain .f9__more::before { display: none; }