/*
 * Divert Cell 1.1.4 — Viewport-sized homepage hero.
 * Scoped to the front-page hero. No shop, product or WooCommerce selectors.
 * The JS helper supplies the real (announcement + header) height when available;
 * CSS-only fallbacks work even without JavaScript.
 */
.dc-home .dc-hero--viewport {
  --dc-hero-chrome-height: 116px;
  --dc-hero-screen-height: max(620px, calc(100vh - var(--dc-hero-chrome-height)));
  --dc-hero-screen-height: max(620px, calc(100svh - var(--dc-hero-chrome-height)));
  min-height: var(--dc-hero-screen-height);
}
.dc-home .dc-hero--viewport .dc-hero-wrap,
.dc-home .dc-hero--viewport .dc-hero-slider,
.dc-home .dc-hero--viewport .dc-hero-slide {
  min-height: var(--dc-hero-screen-height);
}
.dc-home .dc-hero--viewport .dc-hero-slide {
  align-items: center;
}
.dc-home .dc-hero--viewport .dc-hero-copy {
  padding-top: clamp(50px, 7vh, 100px);
  padding-bottom: clamp(65px, 8vh, 115px);
}
.dc-home .dc-hero--viewport .dc-hero-visual {
  height: clamp(500px, calc(var(--dc-hero-screen-height) - 75px), 760px);
}
.dc-home .dc-hero--viewport .dc-hero-visual img {
  width: min(114%, 960px);
  max-width: none;
  max-height: calc(var(--dc-hero-screen-height) - 70px);
}
.dc-home .dc-hero--viewport .dc-hero-pagination {
  bottom: 34px;
}
.dc-home .dc-hero--viewport .dc-hero-scroll {
  position: absolute;
  z-index: 7;
  bottom: 21px;
  right: max(20px, calc((100vw - 1360px) / 2));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(149, 193, 236, .65);
  padding: 9px 14px;
  border-radius: 999px;
  color: #285c91;
  background: rgba(255, 255, 255, .83);
  box-shadow: 0 12px 30px rgba(9, 68, 124, .08);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .025em;
  cursor: pointer;
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.dc-home .dc-hero--viewport .dc-hero-scroll:hover {
  background: #fff;
  box-shadow: 0 15px 34px rgba(9, 68, 124, .15);
  transform: translateY(-3px);
}
.dc-home .dc-hero--viewport .dc-hero-scroll:focus-visible {
  outline: 3px solid #2478d5;
  outline-offset: 3px;
}
.dc-home .dc-hero--viewport .dc-hero-scroll svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  animation: dc-hero-down 2.4s ease-in-out infinite;
}
@keyframes dc-hero-down {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}

/* Tablet: keep both columns, but don't clip titles or the image. */
@media (min-width: 651px) and (max-width: 1100px) {
  .dc-home .dc-hero--viewport {
    --dc-hero-chrome-height: 145px;
    --dc-hero-screen-height: max(600px, calc(100vh - var(--dc-hero-chrome-height)));
    --dc-hero-screen-height: max(600px, calc(100svh - var(--dc-hero-chrome-height)));
  }
  .dc-home .dc-hero--viewport .dc-hero-copy {
    padding-top: 50px;
    padding-bottom: 70px;
  }
  .dc-home .dc-hero--viewport .dc-hero-visual {
    height: clamp(390px, calc(var(--dc-hero-screen-height) - 65px), 680px);
  }
  .dc-home .dc-hero--viewport .dc-hero-visual img {
    width: min(109%, 800px);
  }
}

/* Phone: a full first screen, with text first and product art below it. */
@media (max-width: 650px) {
  .dc-home .dc-hero--viewport {
    --dc-hero-chrome-height: 144px;
    --dc-hero-screen-height: max(650px, calc(100vh - var(--dc-hero-chrome-height)));
    --dc-hero-screen-height: max(650px, calc(100svh - var(--dc-hero-chrome-height)));
  }
  .dc-home .dc-hero--viewport .dc-hero-slide {
    justify-content: space-between;
    padding-bottom: 59px;
  }
  .dc-home .dc-hero--viewport .dc-hero-copy {
    padding: 28px 2px 8px;
  }
  .dc-home .dc-hero--viewport .dc-hero-visual {
    flex: 0 0 auto;
    height: clamp(255px, 37svh, 370px);
    width: auto;
    margin: 0 -22px;
    align-items: center;
  }
  .dc-home .dc-hero--viewport .dc-hero-visual img {
    width: 100%;
    max-height: 100%;
  }
  .dc-home .dc-hero--viewport .dc-hero-pagination {
    bottom: 28px;
  }
  .dc-home .dc-hero--viewport .dc-hero-scroll {
    bottom: 19px;
    right: 16px;
    padding: 10px;
    min-width: 42px;
    min-height: 42px;
  }
  .dc-home .dc-hero--viewport .dc-hero-scroll span { display: none; }
}
@media (max-width: 380px) {
  .dc-home .dc-hero--viewport {
    --dc-hero-screen-height: max(610px, calc(100svh - var(--dc-hero-chrome-height)));
  }
  .dc-home .dc-hero--viewport .dc-hero-copy { padding-top: 22px; }
  .dc-home .dc-hero--viewport .dc-hero-visual { height: clamp(238px, 35svh, 295px); }
}
@media (prefers-reduced-motion: reduce) {
  .dc-home .dc-hero--viewport .dc-hero-scroll svg { animation: none; }
}