/* app-video.css: pages.text-image with media "video" (owner request 29.09.2026).
   The real Epsis Mobil screen recording plays inside a phone drawn in CSS: a thin black bezel inside a
   titanium rim lit from the top left, the Dynamic Island and the side buttons. The recording carries its
   own status bar, so the frame adds nothing above the screen but the island. The phone stands on a navy
   stage with a soft light behind it and a floor shade under it (no glow). The round pause/play button sits
   in the band under the phone: centred on phones, in the stage's bottom right corner from 768 px
   (app-video.js shows it; WCAG 2.2.2).
   Sizes: --av-w is the phone's outer width (the phone and its stage fit the screen under the header where
   they can); everything in the phone follows it. */

/* ---------- Section layout with the video (owner request 30.09.2026) ----------
   One grid: head (H2), stage, feature rows, download row. Phones and tablets stack them in that order.
   From 1024 px the text column is exactly as tall as the stage: the H2 sits on its top edge, the download
   row (QR code, hint, store badges) on its bottom edge, and the rows share the height between them. */
.ti-v { display: flex; flex-direction: column; gap: var(--sp-8); }
.ti-v-head { display: flex; flex-direction: column; gap: var(--sp-5); }
.ti-v-media { display: flex; min-width: 0; }
.ti-v-media > .ti-media--video { flex: 1 1 auto; }

/* Feature rows: an icon tile (the mega menu's soft square, on a light ground) and the short line as the
   title, on hairlines. */
.ti-feats { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ti-feat {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 68px;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.ti-feat-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--bg-tint);
  box-shadow: inset 0 0 0 1px rgba(var(--shadow-tint), .06);
  color: var(--ink);
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.ti-feat-ico .i { width: 22px; height: 22px; }
.ti-feat-title { flex: 1 1 auto; min-width: 0; color: var(--ink); font-size: 1.0625rem; font-weight: var(--fw-semibold); line-height: 1.35; }
@media (min-width: 768px) { .ti-feat-title { font-size: var(--fs-h4); } }
/* A row that shows a part of the video: a small round play mark whose click area covers the whole row. */
.ti-feat-play {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line-hover);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.ti-feat-play::after { content: ""; position: absolute; inset: 0; }
.ti-feat-glyph { width: 10px; height: 11px; margin-left: 2px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ti-feat:has(.ti-feat-play:hover) .ti-feat-play { border-color: var(--ink); }
.ti-feat:has(.ti-feat-play:hover) .ti-feat-ico,
.ti-feat.is-active .ti-feat-ico { background: var(--band); box-shadow: none; color: var(--on-band); }
.ti-feat.is-active .ti-feat-play { border-color: var(--band); background: var(--band); color: var(--on-band); }
/* The part being played: a 2 px line grows along the row's bottom rule (app-video.js sets --feat-p). */
.ti-feat-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(var(--feat-p, 0));
  transform-origin: 0 50%;
  opacity: 0;
  pointer-events: none;
}
.ti-feat.is-active .ti-feat-bar { opacity: 1; }
/* Keyboard focus: the ring goes round the whole row, the click area it stands for. */
@supports selector(:has(*)) {
  .ti-feat-play:focus-visible { outline: none; }
  .ti-feat:has(.ti-feat-play:focus-visible) { outline: var(--bw-focus) solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-sm); }
}

/* Download row: store badges; from 1024 px the QR code tile with its hint above the badges. */
.ti-v-get { display: flex; align-items: center; gap: var(--sp-5); }
.ti-v-stores { display: flex; flex-direction: column; gap: var(--sp-3); }
.ti-v-qr, .ti-v-hint { display: none; }

@media (min-width: 768px) and (max-width: 1023.98px) {
  .ti-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); }
}
@media (min-width: 1024px) {
  .ti-v {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr auto;
    column-gap: var(--grid-gap);
    row-gap: var(--sp-8);
  }
  .ti-v > * { grid-column: 1 / span 6; }
  .ti-v-head { grid-row: 1; }
  .ti-feats { grid-row: 2; display: flex; flex-direction: column; }
  .ti-feat { flex: 1 1 0; }
  .ti-v-get { grid-row: 3; }
  .ti-v-media { grid-column: 7 / span 6; grid-row: 1 / span 3; }
  /* Ratio 7/5 and the stage on the left (block options). */
  .ti--wide .ti-v > * { grid-column: 1 / span 7; }
  .ti--wide .ti-v-media { grid-column: 8 / span 5; }
  .ti--left .ti-v > * { grid-column: 7 / span 6; }
  .ti--left .ti-v-media { grid-column: 1 / span 6; }
  .ti--left.ti--wide .ti-v > * { grid-column: 6 / span 7; }
  .ti--left.ti--wide .ti-v-media { grid-column: 1 / span 5; }
  .ti-v-qr { display: block; flex: none; }
  .ti-v-qr .qr-tile { display: block; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); }
  .ti-v-qr .qr-tile img { width: 104px; height: 104px; }
  .ti-v-hint { display: block; max-width: 30ch; color: var(--ink-2); font-size: .9375rem; line-height: 1.45; }
}
/* Short laptop screens (up to 820 px tall): tighter rows, so the text column is not taller than the stage
   and the stage still fits under the header. */
@media (min-width: 1024px) and (max-height: 820px) {
  .ti-v { row-gap: var(--sp-6); }
  .ti-feat { min-height: 56px; padding-block: var(--sp-2); }
  .ti-v-qr .qr-tile img { width: 88px; height: 88px; }
}

.ti-media--video {
  --av-w: clamp(200px, min(72vw, calc((100svh - 210px) / 2.1)), 290px);
  --av-pad: 72px;
  --av-rim: 2px;
  --av-bezel: calc(var(--av-w) * .03);
  --av-r: calc(var(--av-w) * .17);
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--av-pad) var(--sp-6);
  background: radial-gradient(ellipse 62% 50% at 50% 44%, var(--navy-600, #30395A), rgba(48, 57, 90, 0) 100%), var(--band);
  isolation: isolate;
}
@media (min-width: 768px) {
  .ti-media--video { --av-w: clamp(220px, calc((100svh - 210px) / 2.1), 300px); }
}
/* Desktop: the whole phone fits the screen under the glass header. */
@media (min-width: 1024px) {
  .ti-media--video {
    --av-w: clamp(240px, min(26vw, calc((100svh - 250px) / 2.1)), 350px);
    --av-pad: clamp(56px, 7svh, 72px);
  }
}

/* Floor shade: the phone stands on the stage. */
.ti-media--video::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: calc(var(--av-pad) - 22px);
  width: calc(var(--av-w) * 1.1);
  height: 44px;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(14, 19, 32, .6), rgba(14, 19, 32, 0));
}

.av-phone {
  position: relative;
  width: var(--av-w);
  padding: var(--av-bezel);
  border: var(--av-rim) solid transparent;
  border-radius: var(--av-r);
  /* Black glass in the padding, the titanium rim in the border, lit from the top left. */
  background:
    linear-gradient(#0E1320, #0E1320) padding-box,
    linear-gradient(150deg, #A9B3C6 0%, #4B566D 22%, #121826 48%, #3B4557 76%, #7B8597 100%) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 28px 48px -20px rgba(14, 19, 32, .75),
    0 10px 18px -10px rgba(14, 19, 32, .55);
}
/* Side buttons: power on the right, the two volume keys on the left. */
.av-phone::before,
.av-phone::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: var(--r-xs);
  background: linear-gradient(180deg, #7B8597, #3B4557);
}
.av-phone::before { right: calc(-1 * var(--av-rim) - 3px); top: 27%; height: 13%; border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.av-phone::after {
  left: calc(-1 * var(--av-rim) - 3px);
  top: 23%;
  height: 7.5%;
  border-radius: var(--r-xs) 0 0 var(--r-xs);
  box-shadow: 0 calc(var(--av-w) * .2) 0 #4B566D;
}

.av-screen {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 1556;
  object-fit: cover;
  border-radius: calc(var(--av-r) - var(--av-bezel) - var(--av-rim));
  background: var(--gray-50, #F3F5F9);
}
.av-island {
  position: absolute;
  top: calc(var(--av-bezel) + var(--av-w) * .026);
  left: 50%;
  width: calc(var(--av-w) * .3);
  height: calc(var(--av-w) * .086);
  translate: -50% 0;
  border-radius: var(--r-pill);
  background: #0E1320;
  pointer-events: none;
}

/* Pause / play: in the band under the phone, centred on phones, in the bottom right corner from 768 px. */
.av-toggle {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  bottom: calc((var(--av-pad) - 44px) / 2);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
@media (min-width: 768px) {
  .av-toggle { left: auto; right: var(--sp-4); translate: none; }
}
.av-toggle:hover { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .16); }
.av-toggle:focus-visible { outline: var(--bw-focus) solid var(--focus-ring-on-band); outline-offset: 2px; }
/* Playing: two bars (pause); paused: a triangle (play). */
.av-glyph { width: 12px; height: 14px; border-inline: 4px solid currentColor; }
.ti-media--video[data-state="paused"] .av-glyph { width: 13px; height: 15px; margin-left: 3px; border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }

@media (forced-colors: active) {
  .av-phone { border-color: CanvasText; }
  .av-toggle { border-color: ButtonText; }
  .av-glyph { forced-color-adjust: none; color: ButtonText; }
}