/* Homepage hero carousel on phones, tablets and small laptops (below 1280px).
   Desktop keeps the original layout: full-bleed photo, text over the left
   half. On a phone that layout crops a 2.2:1 photo down to a narrow slice
   and stacks the headline on top of the product, so instead the slide is
   restructured with CSS only: the photo becomes a wide band at the top
   (whole product visible), and the headline, copy and buttons sit below it
   on the dark panel. Loaded by index.html (baked) and by
   assets/vorp-configure-cta.js (runtime, for client-side navigation home).
   Dan, 2026-09-26. */
@media (max-width: 1279.98px) {
  section[aria-label="Product showcase"] {
    --vorp-band: min(60vw, 400px);   /* photo band height: ~1.67:1 on phones, capped so an iPad in landscape still fits */
  }
  /* prev/next arrows (tablets and up) sit mid-photo instead of mid-slide, where they hit the eyebrow */
  section[aria-label="Product showcase"] > button[aria-label="Previous slide"],
  section[aria-label="Product showcase"] > button[aria-label="Next slide"] {
    top: calc(5rem + var(--vorp-band) / 2) !important;
  }
  section[aria-label="Product showcase"] .overflow-hidden > .flex > div {
    display: block !important;
    height: auto !important;
    padding-top: 5rem;               /* clears the fixed transparent header */
    background: #0A0E14;
  }
  section[aria-label="Product showcase"] .overflow-hidden > .flex > div > picture {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    height: var(--vorp-band);        /* shows ~75% of a 2.2:1 photo */
  }
  section[aria-label="Product showcase"] .overflow-hidden > .flex > div > picture img {
    object-position: 50% 50% !important;
  }
  /* Per-slide horizontal crop for the widened photos, chosen so the whole
     product fits inside the band. Slides are in DOM order. */
  section[aria-label="Product showcase"] .overflow-hidden > .flex > div:nth-child(1) > picture img { object-position: 88% 50% !important; }
  section[aria-label="Product showcase"] .overflow-hidden > .flex > div:nth-child(3) > picture img { object-position: 96% 50% !important; }
  /* the left-to-right darkening overlay becomes a fade from the photo into the panel */
  section[aria-label="Product showcase"] .overflow-hidden > .flex > div > div.absolute.inset-0 {
    top: 5rem !important;
    bottom: auto !important;
    height: var(--vorp-band);
    background: linear-gradient(to bottom, rgba(10,14,20,0) 0%, rgba(10,14,20,0) 62%, #0A0E14 100%) !important;
  }
  section[aria-label="Product showcase"] .overflow-hidden > .flex > div > div.relative.z-10 {
    padding-top: 1.25rem !important;
    padding-bottom: 4.5rem !important;   /* room for the slide dots (bottom-8) */
  }
  section[aria-label="Product showcase"] .overflow-hidden > .flex > div > div.relative.z-10 h1,
  section[aria-label="Product showcase"] .overflow-hidden > .flex > div > div.relative.z-10 h2 {
    font-size: clamp(2.5rem, 6vw, 3.75rem) !important;
    margin-bottom: 1rem !important;
  }
  section[aria-label="Product showcase"] .overflow-hidden > .flex > div > div.relative.z-10 p {
    font-size: clamp(1rem, 2.2vw, 1.125rem) !important;
    margin-bottom: 1.25rem !important;
  }
  /* the two CTAs side by side instead of stacked */
  section[aria-label="Product showcase"] .overflow-hidden > .flex > div > div.relative.z-10 div.flex.flex-col {
    flex-direction: row !important;
    margin-bottom: 1.5rem !important;  /* stats grid follows on tablets */
  }
  section[aria-label="Product showcase"] .overflow-hidden > .flex > div > div.relative.z-10 div.flex.flex-col > a {
    flex: 1 1 0;
    min-width: 0;
  }
  section[aria-label="Product showcase"] .overflow-hidden > .flex > div > div.relative.z-10 div.flex.flex-col > a > button {
    width: 100% !important;
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }
}