/**
 * Home hero.
 *
 * Full-viewport video with the headline and search panel over it. Uses svh so
 * the mobile browser chrome appearing or hiding does not resize the hero
 * mid-scroll, which vh does.
 */

.deka-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  /* stretch, so the content column can own the full height and push its
     children to the bottom edge */
  align-items: stretch;
  justify-content: center;
  /* Not clipped: the search pickers open out of the hero, down over the next
     section when there is room there. The footage clips in its own frame. */
  background: var(--deka-oxblood-900);
  color: var(--deka-white);
  /* Sits under the fixed header, which starts transparent over it. */
  padding-block: var(--deka-header-height) clamp(1.25rem, 0.75rem + 1.5vw, 2.5rem);
}

.deka-hero__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.deka-hero__media {
  position: absolute;
  inset: 0;
  /* hero.js drifts this down as the page scrolls (parallax); the frame clips it. */
  will-change: transform;
}

.deka-hero__video {
  width: 100%;
  height: 100%;
  /* The element renders its own poster until playback begins, so there is
     never an empty frame — and no opacity trick, which would hide the poster
     along with the video. */
  object-fit: cover;
  background: var(--deka-oxblood-900);
}

.deka-hero__scrim {
  position: absolute;
  inset: 0;
  /* An even dim over the whole footage, for the centred headline, plus a
     little more at the top for the transparent header and at the bottom for
     the search bar. */
  background:
    linear-gradient(to bottom, rgb(0 0 0 / 28%) 0%, rgb(0 0 0 / 0%) 22%, rgb(0 0 0 / 0%) 55%, rgb(0 0 0 / 38%) 100%),
    rgb(0 0 0 / 20%);
}

.deka-hero__content {
  position: relative;
  /* Above the following section too, which an open picker can reach over. */
  z-index: var(--deka-z-dropdown);
  /* Full viewport width — no centred container cap. */
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--deka-gutter);
  display: flex;
  flex-direction: column;
  /* Headline and search sit at the bottom of the viewport, full width. */
  justify-content: flex-end;
  align-items: stretch;
  gap: clamp(1rem, 0.5rem + 1vw, 1.5rem);
}

.deka-hero__title {
  /* Centred, both ways: in the space between the header and the search bar,
     which stays at the foot of the screen. The auto margins split the free
     space; the column's gap under the headline would leave it that much
     high, so it moves down by half the gap. */
  position: relative;
  top: calc(clamp(1rem, 0.5rem + 1vw, 1.5rem) / 2);
  margin: auto 0;
  text-align: center;
  font-family: var(--deka-font-display);
  font-size: 3.125rem;   /* 50px */
  font-weight: var(--deka-weight-bold);
  line-height: 3.75rem;  /* 60px */
  letter-spacing: var(--deka-tracking-tight);
  text-wrap: balance;
  text-shadow: 0 2px 24px rgb(0 0 0 / 22%);
}

.deka-hero__title strong {
  font-weight: var(--deka-weight-bold);
}

.deka-hero__search {
  width: 100%;
}

/* The search panel's own styles live in smart-search.css, which loads with
   that component. */

/* ==========================================================================
   Responsive
   ========================================================================== */

/*
 * Phones, as on the live site: the video takes 75% of the screen, the headline
 * sits over its lower edge, and the search panel hangs 275px off the bottom
 * onto a dark band — instead of squeezing both into one screen of footage.
 * Measured there at 375×667: 500px of video, 30/32 headline 20px above the
 * panel, panel overlapping the video by 123px, 25px of band below it.
 * 767px is the live phone breakpoint; at 768 a tablet keeps the full-height hero.
 */
@media (max-width: 47.9375rem) {
  .deka-hero {
    display: block;
    min-height: 0;
    padding: 0 0 1.5625rem; /* 25 */
    background: #181818;
  }

  .deka-hero__frame { position: relative; }

  .deka-hero__media {
    position: relative;
    height: 75vh;
    /* The floor keeps room for the headline on a phone held sideways. */
    height: max(75svh, 25rem);
  }

  .deka-hero__content {
    margin-top: -7.6875rem; /* 123 */
    padding-inline: 1.25rem; /* 20 */
  }

  /* Out of the flow, so the panel keeps its place however many lines the
     headline takes. Centred in the footage left visible: between the header
     and the panel, which overlaps the video's last 123px. (Positioned from
     this column, whose top sits 123px above the video's foot.) The padding
     keeps the live ~310px measure, which breaks the line after each phrase. */
  .deka-hero__title {
    position: absolute;
    inset-inline: 1.25rem;
    top: calc((var(--deka-header-height) + 7.6875rem - 75vh) / 2);
    top: calc((var(--deka-header-height) + 7.6875rem - max(75svh, 25rem)) / 2);
    margin: 0;
    transform: translateY(-50%);
    padding-inline: 0.75rem;
    font-size: 1.875rem; /* 30 */
    line-height: 2rem;   /* 32 */
  }
}

/* Reduced motion keeps the video element — and therefore its poster — but the
   script never gives it a source, so nothing moves. */