/* ============================================================
   dt-hero.css — Home fullscreen photographic hero (Swiper).
   Horizontal slider; vertical scroll is never captured.
   ============================================================ */
.dt-hero {
  position: relative;
  /* Break out of Elementor's boxed column to true full-bleed (edge-to-edge),
     like the MOST demo hero — regardless of parent padding/max-width. */
  width: 100vw; max-width: 100vw;
  left: 50%; transform: translateX(-50%);
  /* Full viewport: the transparent header overlays the hero (no height offset).
     100svh avoids the iOS Safari URL-bar jump; dvh as progressive enhancement. */
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background: #111;
  /* Let the browser own vertical panning; JS/Swiper own horizontal drag. */
  touch-action: pan-y;
  /* Keep horizontal swipes inside the slider (block the browser back/forward gesture). */
  overscroll-behavior-x: contain;
}
@supports (height: 100dvh) {
  .dt-hero { height: 100dvh; }
}

.dt-hero__swiper, .dt-hero .swiper { position: absolute; inset: 0; height: 100%; }
.dt-hero .swiper-wrapper { height: 100%; }
.dt-hero .swiper-slide { position: relative; height: 100%; overflow: hidden; }

/* Media: cover + configurable focal point + gentle Ken Burns on the active slide */
.dt-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; }
.dt-hero__img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--focal, 50% 50%);
  transform: scale(1.06); transition: transform 6s var(--dt-ease);
  will-change: transform;
}
.dt-hero .swiper-slide-active .dt-hero__img { transform: scale(1); }
/* Optional distinct mobile crop */
.dt-hero__img--mobile { display: none; }
@media (max-width: 600px) {
  .dt-hero__img--desktop { display: none; }
  .dt-hero__img--mobile  { display: block; }
}

/* Legibility scrim — keeps text readable over any photo */
.dt-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 42%, rgba(0,0,0,0) 72%),
    linear-gradient(0deg,  rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 40%);
}

/* Text overlay — left-aligned to the site's content edge (matches header/menu) */
.dt-hero__content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding-inline: clamp(20px, 4.6vw, 72px);
  pointer-events: none;
}
/* pointer-events:none so wheel/drag pass through the text to the Swiper below
   (only the CTA + nav arrows stay interactive). Fixes horizontal scroll. */
.dt-hero__inner { pointer-events: none; max-width: 820px; margin-inline: 0; padding-inline: 0; }
.dt-hero__eyebrow { color: #fff; opacity: .92; }
.dt-hero__title {
  font-family: var(--dt-font); font-weight: var(--dt-fw-black);
  font-size: var(--dt-fs-hero); line-height: var(--dt-lh-tight);
  color: #fff; margin: 12px 0 8px; letter-spacing: -0.02em;
}
.dt-hero__role {
  font-family: var(--dt-font); font-weight: var(--dt-fw-bold);
  font-size: var(--dt-fs-h3); color: #fff; margin: 0 0 18px;
}
.dt-hero__desc {
  font-size: var(--dt-fs-lead); line-height: var(--dt-lh-body);
  color: rgba(255,255,255,.9); margin: 0 0 30px; max-width: 40ch;
}
.dt-hero__cta { pointer-events: auto; }

/* Entrance stagger (skipped under reduced-motion) */
.dt-hero__eyebrow, .dt-hero__title, .dt-hero__role, .dt-hero__desc, .dt-hero__cta {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dt-dur-slow) var(--dt-ease), transform var(--dt-dur-slow) var(--dt-ease);
}
.dt-hero.is-ready .dt-hero__eyebrow { opacity: 1; transform: none; transition-delay: 80ms; }
.dt-hero.is-ready .dt-hero__title   { opacity: 1; transform: none; transition-delay: 160ms; }
.dt-hero.is-ready .dt-hero__role    { opacity: 1; transform: none; transition-delay: 240ms; }
.dt-hero.is-ready .dt-hero__desc    { opacity: 1; transform: none; transition-delay: 320ms; }
.dt-hero.is-ready .dt-hero__cta     { opacity: 1; transform: none; transition-delay: 400ms; }

/* Navigation (MOST template layout): prev-arrow · 01 ———— 03 (centered) · next-arrow */
.dt-hero__nav {
  position: absolute; z-index: 3; left: var(--dt-gutter); right: var(--dt-gutter); bottom: clamp(20px, 4vh, 44px);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; pointer-events: none;
}
.dt-hero__count {
  pointer-events: auto; flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 28px);
  color: #fff; font-weight: var(--dt-fw-bold); font-variant-numeric: tabular-nums;
}
.dt-hero__current, .dt-hero__total { font-size: clamp(1.1rem, 0.8rem + 1.4vw, 1.75rem); opacity: .55; letter-spacing: .04em; }
.dt-hero__current { opacity: 1; }
.dt-hero__progress { position: relative; width: clamp(120px, 34vw, 460px); height: 2px; background: rgba(255,255,255,.35); overflow: hidden; border-radius: 2px; }
.dt-hero__progress > span { position: absolute; inset: 0 auto 0 0; width: 0; background: #fff; transition: width var(--dt-dur-mid) var(--dt-ease); }
.dt-hero__arrow {
  pointer-events: auto;
  width: 48px; height: 48px; border-radius: var(--dt-radius-pill);
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); color: #fff;
  transition: background var(--dt-dur-fast) var(--dt-ease), transform var(--dt-dur-fast) var(--dt-ease);
  backdrop-filter: blur(4px);
}
.dt-hero__arrow:hover { background: rgba(255,255,255,.28); transform: translateY(-2px); }
.dt-hero__arrow:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.dt-hero__arrow svg { width: 20px; height: 20px; }

@media (max-width: 600px) {
  .dt-hero__nav { gap: 12px; }
  .dt-hero__arrow { width: 42px; height: 42px; }
  .dt-hero__count { font-size: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dt-hero__img { transform: none !important; transition: none !important; }
  .dt-hero__eyebrow, .dt-hero__title, .dt-hero__role, .dt-hero__desc, .dt-hero__cta {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}