/* Mobile (<=767px): two card sets become horizontal scroll-snap sliders, matching the
   team carousel already used on this page. Loads after the section files so it wins. */

/* ---- Hero: the portrait becomes the backdrop, the medical cards sit over it ---- */
@media (max-width: 767px) {
  .hero__visual {
    position: relative;
    margin-top: 1.75rem;
    min-height: 27rem;
    display: flex;
    align-items: flex-end;
  }
  /* The photograph fills the block and sits behind, rather than stacking above the cards. */
  .hero__portrait {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 50% 18%;
    margin: 0;
    border-radius: var(--r-card, 18px);
  }
  /* A soft floor so the glass cards keep their contrast over a bright photograph. */
  .hero__visual::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 62%;
    border-radius: 0 0 var(--r-card, 18px) var(--r-card, 18px);
    background: linear-gradient(180deg, rgba(40, 12, 6, 0) 0%, rgba(40, 12, 6, .55) 70%, rgba(40, 12, 6, .72) 100%);
    pointer-events: none;
  }

  .hero__cards {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    gap: .625rem;
    margin: 0;
    padding: 0 .75rem .875rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: .75rem;
    scrollbar-width: none;
  }
  .hero__cards::-webkit-scrollbar { display: none; }
  .hero-card {
    scroll-snap-align: start;
    padding: .875rem;
    background: rgba(28, 10, 6, .42);          /* darker than the desktop glass: it is over a photo now */
    border-color: rgba(255, 255, 255, .26);
  }
  .hero-card--brain, .hero-card--stress { height: auto; min-height: 0; }
  .hero-card__gauge { max-width: 8rem; }
}

/* ---- "Some things a lab can't fix": six cards become a slider ---- */
@media (max-width: 767px) {
  .treat__list {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: .75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter);
    scrollbar-width: none;
    padding-bottom: .25rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .treat__list::-webkit-scrollbar { display: none; }
  .treat__list > .treat__item { scroll-snap-align: start; height: 100%; }
}

/* A slider is only discoverable if something moves. Nudge on first view, once. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .hero__cards, .treat__list { scroll-behavior: smooth; }
}