/* Michal Kašpar — Horizontal scroll section
   Sits between Services and FAQ. Vertical scroll inside .reels drives a
   horizontal translate of a 4-block track. Section is 400vh tall so the
   user covers 3 viewports of vertical scroll to traverse 3 horizontal moves.
   On mobile (≤760px), the section collapses to a single 100vh strip with
   native horizontal touch scroll + snap. */

.horizontal-scroll {
  position: relative;
  width: 100%;
  /* Block 01 is 50vw (intro), blocks 02-05 are 100vw each → track = 450vw.
     Horizontal travel = 450vw - 100vw (viewport) = 350vw = 3.5 viewports.
     Section height = 1 viewport pin + 3.5 viewports of scroll = 450vh. */
  /* dvh (not vh): on touch devices with dynamic browser chrome the
     large-viewport vh overshoots the visible area, dropping the
     bottom-anchored headline below the fold. dvh tracks the visible
     viewport and matches the .reels scroll host (which is 100dvh). */
  height: 450dvh;
  /* Don't participate in scroll-snap — let scroll pass through. */
  scroll-snap-align: none;
  background: var(--bg);
}

/* Hidden kicker — only read by the nav-kicker sync logic in index.html. */
.horizontal-scroll > .kicker {
  display: none;
}

/* The pin: sticky to the top of the .reels scroll container, exactly one
   viewport tall, clips the horizontal track. */
.horizontal-scroll .hs-pin {
  position: sticky;
  top: 0;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
}

/* Horizontal track — block 01 is 50vw (intro/teaching), blocks 02-05
   are 100vw each. Total = 50 + 100 + 100 + 100 + 100 = 450vw. */
.horizontal-scroll .hs-track {
  display: flex;
  height: 100%;
  width: 450vw;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Each block is a full viewport. Visible overflow so the intro headline
   can bleed past block 01 onto block 02. */
.horizontal-scroll .hs-block {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100dvh;
  overflow: visible;
}

/* Block 01 — intro, half-viewport wide */
.horizontal-scroll .hs-block.hs-block-01 {
  flex: 0 0 50vw;
  width: 50vw;
  z-index: 3; /* Above blocks 02–04 so the headline tail overlays them. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(80px, 11vh, 140px) var(--edge-x) clamp(40px, 5vh, 64px);
}
.hs-intro-top {
  display: flex;
  gap: clamp(20px, 2.4vw, 36px);
  align-items: flex-start;
  max-width: 640px;
}
.hs-intro-image {
  width: clamp(96px, 9vw, 140px);
  height: clamp(96px, 9vw, 140px);
  flex: 0 0 auto;
}
.hs-intro-text {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text-soft);
  max-width: 38ch;
  padding-top: 4px;
}
.hs-intro-text .hs-intro-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.hs-headline {
  /* Match big-claim — 2xl scale, medium weight, accent on the year. */
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--fg);
  white-space: nowrap;
  margin-bottom: -0.06em;
  pointer-events: none;
}
.hs-headline .hs-em {
  /* Accent colour on the year — mirrors .closer-claim .em. */
  color: var(--accent);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-left: 0;
}

/* Blocks 02-05 — full-bleed media (image or click-to-play video), no text. */
.horizontal-scroll .hs-image {
  position: absolute;
  inset: 0;
}
/* Media stretches to cover the block fully so frames sit edge-to-edge
   like the designed full-bleed layout. Applies to both <img> and the
   <video> in the click-to-play campaign slots. */
.horizontal-scroll .hs-image img,
.horizontal-scroll .hs-image video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Click-to-play campaign blocks. An optional muted autoplay LOOP preview
   (.hs-preview) plays as a silent teaser by default. The full, with-sound
   video (.hs-full) stays hidden until the play button is pressed, then it
   covers the preview and the looping teaser is paused + faded out. Blocks
   without a preview simply show the .hs-full poster behind the button. */
.horizontal-scroll .hs-video .hs-full {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease;
}
.horizontal-scroll .hs-video .hs-preview {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.horizontal-scroll .hs-video.is-playing .hs-full {
  z-index: 3;
  opacity: 1;
  visibility: visible;
}
.horizontal-scroll .hs-video.is-playing .hs-preview {
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease;
}

/* Side-edge dividers between blocks — subtle vertical hairline like the
   rest of the site's chrome. Sits on the block's left edge so it shows up
   the moment a new block enters the viewport. */
.hs-block + .hs-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
  z-index: 4;
  pointer-events: none;
}

/* Mono index label at the top-right of each image block, mirrors the
   timecode treatment on .reel sections. Keeps the section feeling like
   part of the site, without adding any captions. */
.hs-block .hs-tag {
  position: absolute;
  top: clamp(20px, 2.4vh, 36px);
  right: clamp(28px, 3vw, 56px);
  z-index: 4;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-primary) 55%, transparent);
  pointer-events: none;
  /* Hidden — retained in the markup but design moved away from
     per-block tags. Re-show by removing this rule. */
  display: none;
}

/* ─── Mobile: native horizontal swipe ─────────────────────────── */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  .horizontal-scroll {
    /* No scroll hijack — the section is a single viewport tall and uses
       the browser's native horizontal touch scroll. */
    height: 100dvh;
  }
  .horizontal-scroll .hs-pin {
    position: relative;
    top: auto;
    height: 100dvh;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
    /* Keep the horizontal swipe inside this strip — don't let it
       chain out to the page (the sideways "drift" the page felt). */
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .horizontal-scroll .hs-pin::-webkit-scrollbar { display: none; }
  .horizontal-scroll .hs-track {
    /* Native scroll drives position; clear any JS transform.
       Mobile keeps a 100vw-per-block track: block 01 reverts to 100vw
       below, plus four 100vw media blocks = 500vw. */
    transform: none !important;
    width: 500vw;
    will-change: auto;
  }
  .horizontal-scroll .hs-block {
    height: 100dvh;
  }
  .horizontal-scroll .hs-block.hs-block-01 {
    /* Mobile: first block keeps full viewport width — 50vw is too narrow
       on small screens to host the headline + intro paragraph. */
    flex: 0 0 100vw;
    width: 100vw;
    padding: 88px 22px 28px;
  }
  .hs-intro-top {
    gap: 16px;
  }
  .hs-intro-image {
    width: 72px;
    height: 72px;
  }
  .hs-intro-text {
    font-size: 13px;
  }
  .hs-headline {
    font-size: var(--text-2xl);
    line-height: 0.9;
    letter-spacing: -0.035em;
  }
  .hs-block .hs-tag {
    top: 18px;
    right: 18px;
    font-size: var(--text-xs);
  }
}