/* ============================================================
   O Eyecare — 2026 UI Renewal · HOME page only
   New file. Loaded by layout_home.jsp IN ADDITION TO the shared
   design system (oeyecare-2026.css), AFTER it so these rules win.

   ★ Everything here is used ONLY by home.jsp. Edit home layout / spacing
     / section rhythm HERE — do NOT touch oeyecare-2026.css for home tweaks.

   NOT here (stays shared in oeyecare-2026.css, do not duplicate):
     - .oe-card-grid / .oe-service-card  (also used by the myopia page)
     - .oe-review (bare)                 (also used by appointment/review.jsp)
     - .oe-center / .oe-mt48             (utility, also used by myopia)
     - header, footer, drawer, buttons, headings, tokens, back-to-top
   Design source: _delivery/ui_kits/website/home.html · home-page.jsx
   ============================================================ */

/* Home section rhythm. Stacked white sections double this value between them
   (bottom + top), so keep it modest. Was 96 in the shared file; lives here now. */
:root { --section-y: 32px; }

/* ============================================================
   Hero
   ============================================================ */
.oe-hero {
  position: relative;
  height: 780px;
  background: var(--ink-900);
  overflow: hidden;
}
.oe-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
}
.oe-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,16,12,.62) 0%, rgba(20,16,12,.08) 34%, rgba(20,16,12,.74) 100%);
}
.oe-hero__inner {
  position: absolute;
  left: 0; right: 0; top: 80px; bottom: 0;
  display: flex;
  align-items: center;
  color: #fff;
}
.oe-hero__eyebrow {
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity: .85;
  margin: 0 0 22px;
}
.oe-hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 58px;
  line-height: 1.0;
  letter-spacing: -.02em;
  margin: 0;
  max-width: 900px;
}
.oe-hero__title em { font-style: italic; }
.oe-hero__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  margin-top: 30px;
}
.oe-hero__lead {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  opacity: .92;
  max-width: 640px;
  margin: 0;
}
/* mobile-only hero quick-link pills: hidden on desktop, shown in the mobile
   media query below. Declared here so the class exists before the breakpoint. */
.oe-hero-quick { display: none; }

/* ============================================================
   Content sections
   ============================================================ */
.oe-section { padding: var(--section-y) 0; background: var(--surface-card); }
.oe-section--cream { background: var(--surface-cream); padding: 0; }
.oe-rule { border-bottom: 1px solid var(--border-subtle); }

/* Intro */
.oe-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.oe-intro__grid p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 18px;
}
.oe-intro__grid p:last-child { color: var(--text-muted); margin-bottom: 0; }
.oe-intro__rule { margin-top: var(--section-y); border-bottom: 1px solid var(--border-subtle); }

/* Myopia section shell (the cards themselves use the shared .oe-card-grid /
   .oe-service-card in oeyecare-2026.css) */
.oe-myopia { padding: 48px 0; background: var(--surface-card); }

/* Doctor */
.oe-doctor__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  padding: var(--section-y) 40px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.oe-doctor__photo { border-radius: var(--radius-md); overflow: hidden; }
.oe-doctor__photo img { width: 100%; height: auto; display: block; }
/* direct-child only: must not restyle the nested .oe-section-heading > .oe-eyebrow
   (that <p> would otherwise inherit body font/size and lose its Space Grotesk label look). */
.oe-doctor__body > p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 24px 0 0;
}
.oe-doctor__body > p + p { color: var(--text-muted); }
.oe-doctor__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 28px;
}

/* Services */
.oe-services__head { margin-bottom: 44px; }
.oe-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.oe-service-tile__img {
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper-400);
}
.oe-service-tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oe-service-tile__title {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 22px 0 12px;
  color: var(--text-primary);
}
.oe-service-tile__desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0 0 18px;
}

/* Locations */
.oe-locations { padding: 40px 0 var(--section-y); background: var(--surface-card); }
.oe-locations__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 52px;
}
.oe-location { display: block; color: inherit; }
.oe-location__img { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-md); }
.oe-location__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oe-location__row { display: flex; gap: 14px; margin-top: 22px; }
.oe-location__pin { flex-shrink: 0; margin-top: 2px; }
.oe-location__city {
  font-family: var(--font-label);
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 10px;
}
.oe-location__line {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Reviews (home patient reviews. NOTE: the bare .oe-review rule is shared with
   appointment/review.jsp and stays in oeyecare-2026.css.) */
.oe-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 52px;
}
.oe-review__quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 21px;
  line-height: 1.45;
  color: var(--text-primary);
  margin: 0 0 22px;
}
.oe-review__author {
  font-family: var(--font-label);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-primary);
}
.oe-review__source { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); }
.oe-reviews__inner { border-top: 1px solid var(--border-subtle); padding-top: 44px; }

/* ============================================================
   Responsive — mobile ( <= 760px )
   ============================================================ */
@media (max-width: 760px) {
  :root { --section-y: 56px; }

  /* hero */
  .oe-hero { height: 620px; }
  .oe-hero__title { font-size: 38px; }
  .oe-hero__inner { top: auto; bottom: 40px; align-items: flex-end; }
  .oe-hero__cta { align-items: stretch; }
  /* hero primary CTA: transparent + content-width, centered below the copy */
  .oe-hero__cta .oe-btn--inverse {
    align-self: center;
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.6);
  }
  .oe-hero__cta .oe-btn--inverse:hover { background: rgba(255,255,255,.14); color: #fff; }
  .oe-hero__lead { max-width: none; }

  /* mobile-only hero quick-link pills — direct shortcuts below the header,
     independent of the hamburger drawer (design ref: hero screenshot). */
  .oe-hero-quick {
    display: block;
    position: absolute;
    left: 0; right: 0;
    top: 92px;
    z-index: 5;
  }
  .oe-hero-quick__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .oe-hero-quick__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 11px 18px;
    border-radius: var(--radius-pill);
    background: transparent;
    border: 1px solid rgba(255,255,255,.45);
    color: #fff;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    transition: background var(--dur-fast) var(--ease-out);
  }
  .oe-hero-quick__btn:hover { background: rgba(255,255,255,.28); color: #fff; }

  /* collapse grids */
  .oe-intro__grid { grid-template-columns: 1fr; gap: 28px; }
  .oe-doctor__grid { grid-template-columns: 1fr; gap: 28px; padding: var(--section-y) 20px; }
  .oe-doctor__photo img { height: auto; }

  /* horizontal swipe carousels (the shared .oe-card-grid carousel stays in
     oeyecare-2026.css so the myopia page keeps it too) */
  .oe-services__grid,
  .oe-locations__grid,
  .oe-reviews__grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding-bottom: 10px;
    scrollbar-width: none;
  }
  .oe-services__grid::-webkit-scrollbar,
  .oe-locations__grid::-webkit-scrollbar,
  .oe-reviews__grid::-webkit-scrollbar { display: none; }
  .oe-services__grid > *,
  .oe-locations__grid > *,
  .oe-reviews__grid > * {
    flex: 0 0 300px;
    width: 300px;
    max-width: 82vw;
    scroll-snap-align: start;
  }
}