/* GDC custom sections (video hero, why-choose features, how-we-work steps).
   Enqueued from functions.php; keep templates free of inline <style>. */

/* Video hero (homepage) */
/* Hero: the video is shown in FULL (object-fit:contain, never cropped) so
   faces/content are never zoomed or distorted; a blurred copy of the poster
   fills the letterbox space behind it for a premium, intentional look
   instead of plain bars. Fixed aspect-ratio (client spec: hero/banner
   ~16:6-16:7) instead of vh-based sizing, so the shape stays consistent
   regardless of window height, not just width. */
.gdc-hero{position:relative;overflow:hidden;aspect-ratio:16/6.5;min-height:280px;max-height:640px;display:flex;align-items:center;justify-content:center;background:#0b1c2c}
.gdc-hero::before{content:"";position:absolute;inset:-30px;background-image:inherit;background-size:cover;background-position:center;filter:blur(30px) brightness(.55);transform:scale(1.1);z-index:0}
.gdc-hero video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;display:block}
.gdc-hero .gdc-hero-inner{position:relative;z-index:3;text-align:center;color:#fff;padding:50px 20px}
.gdc-hero h1{color:#fff;font-size:44px;font-weight:300;margin:0 0 10px;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.gdc-hero p{color:#f2f6f9;font-size:18px;margin-bottom:20px;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.gdc-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,18,30,.2),rgba(6,18,30,.5));z-index:2}
.gdc-hero .gdc-hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:30px;padding:8px 18px;font-size:14px;margin-top:18px;text-decoration:none}
@media(max-width:767px){.gdc-hero{aspect-ratio:4/5;min-height:280px;max-height:420px}.gdc-hero h1{font-size:28px}.gdc-hero p{font-size:15px}}

/* Why Choose Us */
.gdc-features{padding:60px 0}
.gdc-features .gdc-feature{margin-bottom:26px}
.gdc-features h3{font-size:20px;margin-bottom:8px}
.gdc-features .gdc-clinic-photo{border-radius:10px;width:100%}

/* How We Work steps */
.gdc-steps{background:#f4f8fb;padding:60px 0}
.gdc-steps .gdc-step{background:#fff;border-radius:10px;padding:26px;height:100%;margin-bottom:24px;box-shadow:0 6px 18px rgba(16,49,74,.06)}
.gdc-steps .gdc-step-no{display:inline-block;width:38px;height:38px;line-height:38px;text-align:center;border-radius:50%;background:#0f8a5f;color:#fff;font-weight:700;margin-bottom:12px}

/* Homepage patient-video band */
.gdc-home-videos{padding:60px 0;background:#f8fafc}
.gdc-home-videos .gdc-see-all{text-align:center;margin-top:24px}

/* CMS banner behind page titles */
.page-title.gdc-banner{background-size:cover;background-position:center}

/* ---------- Compact single-row desktop header ----------
   Root cause of the wrapping/overlap: the theme's nav links use
   40px/30px padding, #navbar reserves an unused 150px right margin
   (leftover space from a cart/search icon this site never uses), and
   .container caps at 1170px on every viewport ≥1200px — so even a
   1920px screen was squeezed into the same 1170px column, forcing 7 nav
   items onto multiple lines and letting the hero's CTA button show
   through the overflow. Fixed at the source (padding/margin/width),
   not with extra overrides stacked on top. */
@media screen and (min-width:992px){
  .site-header .navigation > .container{width:100%;max-width:1600px}
  .site-header #navbar{margin-right:0}
  .site-header #navbar > ul > li > a{padding:26px 12px !important;white-space:nowrap}
  .site-header #navbar > ul > li.menu-item-has-children > a{padding-right:26px !important}
  .site-header .navbar-brand{margin-top:14px}
  .site-header .navbar-brand img{max-width:130px}
}
.site-header .topbar{padding:10px 0}

/* Team / treatment card grids ([gdc_team], [gdc_treatment_cards]): source
   photos vary wildly in native size (some doctor headshots are 1080x1080,
   some staff photos are uncropped phone portraits like 3510x6238) — without
   a fixed box the grid cards end up wildly different heights. Force a
   consistent box with object-fit:cover so every card matches. Team
   portraits use 4:5 (client spec); treatment cards use 4:3. */
.team-grids .grid .img-holder{overflow:hidden}
.team-grids .grid .img-holder img{width:100%;height:100%;object-fit:cover;display:block}
.gdc-team-grid .grid .img-holder{aspect-ratio:4/5}
.gdc-treatment-grid .grid .img-holder{aspect-ratio:4/3}