/* Longevity Clinic — mobile adaptation layer.
   Targets the shared classes in site.css plus a small set of responsive hook
   classes added to the markup (.wrap, .grid-collapse, .carousel-card, .frame,
   .row-wrap …) and the data-lc attributes on page sections.
   Load AFTER site.css and the page sheet. */

img, svg, video, iframe { max-width: 100%; }
body { -webkit-text-size-adjust: 100%; }

/* burger drawer: markup lives in each page header, toggled by a hidden checkbox.
   On desktop the drawer is transparent and the burger hidden. */
.lc-drawer { display: contents; }
.lc-burger { display: none; }

/* ---------- burger header ---------- */
@media (max-width: 980px) {
  .lc-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0 11px;
    box-sizing: border-box;
    border: 1px solid rgba(44, 42, 40, .2);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
  }
  .lc-burger span { display: block; height: 2px; background: var(--navy); border-radius: 2px; transition: background-color .3s ease; }
  .lc-mob-toggle:checked + .lc-burger { background: var(--sand); }

  .lc-drawer {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 4px 0 12px;
  }
  .lc-mob-toggle:checked ~ .lc-drawer { display: flex; }

  header nav {
    flex-direction: column !important;
    gap: 0 !important;
    width: 100%;
    font-size: 16px !important;
  }
  header nav > a,
  header nav > details > summary {
    padding: 13px 2px !important;
    font-size: 16px !important;
  }
  header nav > a,
  header nav > details { border-bottom: 1px solid rgba(44, 42, 40, .1); }
  header nav details.nav-dd > .nav-panel {
    position: static !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 0 8px 10px !important;
  }
  header .lc-drawer > div {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  header .lc-drawer a[class*="btn"] {
    text-align: center;
    padding: 14px 18px !important;
  }
  header img[alt="Longevity Clinic"] { height: 54px !important; }
}

/* ---------- tablet / small laptop ---------- */
@media (max-width: 1080px) {
  .wrap {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .grid-2up {
    grid-template-columns: repeat(2, minmax(0px, 1fr)) !important;
  }

  /* full-bleed carousels match the reduced container padding */
  .carousel-bleed {
    margin-left: -32px !important;
    margin-right: -32px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* ---------- tablet portrait and below: single column ---------- */
@media (max-width: 860px) {
  html, body { overflow-x: hidden; }

  .grid-collapse:not([data-lc-cols]) {
    grid-template-columns: minmax(0px, 1fr) !important;
  }
  /* widen the gap only where it was a single shorthand value for a multi-column grid */
  .grid-gap-wide:not([data-lc-cols]) { gap: 28px !important; }

  /* multi-column lists collapse to one column */
  .col-list { columns: 1 !important; }

  .card-pad.grid-collapse { gap: 20px !important; }

  /* a right-aligned CTA inside a stacked card spans the card instead */
  .grid-collapse > a.cta-end {
    place-self: center stretch !important;
    text-align: center;
  }

  /* horizontal connector line behind numbered step timelines */
  .grid-collapse > .step-line { display: none !important; }

  /* nav dropdowns flow inline instead of floating off-screen */
  details.nav-dd > .nav-panel {
    position: static !important;
    box-shadow: none !important;
    min-width: 0 !important;
    width: 100% !important;
    margin-top: 8px !important;
  }

  /* image frames with fixed desktop heights */
  .frame { height: 320px !important; }

  /* rows of inline items wrap rather than overflow — but not icon + text rows,
     where the label must stay beside its icon */
  div.row-wrap:not(.carousel):not(:has(> svg)) { flex-wrap: wrap !important; }

  /* sticky side headings / tables of contents flow normally once stacked
     (the blog's sticky category bar keeps its behaviour) */
  .stack-sticky {
    position: static !important;
    margin-bottom: 4px !important;
  }

  /* numbered process steps: number beside the title, joined by a vertical rail */
  .grid-collapse:has(> .step-rail):not([data-lc-keepgap]) { gap: 0 !important; }
  .grid-collapse > .step-rail {
    flex-direction: row !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 11px 0 !important;
  }
  .grid-collapse > .step-rail::before {
    content: "";
    position: absolute;
    left: 19.5px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(44, 42, 40, .15);
  }
  .grid-collapse > .step-rail > :first-child { position: relative; z-index: 1; }
  .step-line + .step-rail::before { top: 31px !important; }
  .grid-collapse > .step-rail:last-child::before { bottom: auto !important; height: 31px !important; }
}

/* ---------- phones ---------- */
@media (max-width: 620px) {
  .wrap {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .wrap-pad {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  h1 { font-size: clamp(30px, 8.6vw, 42px) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(24px, 6.6vw, 32px) !important; line-height: 1.2 !important; }
  h3 { font-size: clamp(18px, 4.8vw, 22px) !important; }

  a[class*="btn"] { white-space: normal !important; text-align: center; }

  /* card padding */
  .card-pad { padding: 24px 20px !important; }

  .frame { height: 250px !important; }

  /* hero photo overlays: the 3-up feature strip doesn't fit over a 250px frame */
  .frame > .abs-8 { display: none !important; }
  .frame > .abs-7 {
    bottom: 22px !important;
    left: 20px !important;
    right: 20px !important;
  }

  /* carousel cards narrower than the viewport */
  .carousel > .card-300 { flex: 0 0 240px !important; }
  .carousel > .card-340 { flex: 0 0 250px !important; }

  /* price tables: keep label/price on one row but tighten */
  .price-row {
    gap: 10px 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 14px !important;
  }

  .carousel-bleed {
    margin-left: -18px !important;
    margin-right: -18px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* top utility bar: keep only phone + email on phones */
  .topbar-inner { font-size: 12px !important; row-gap: 8px !important; }
  .topbar-inner > div:nth-child(2) { display: none !important; }
}

/* ---------- carousel start offset ----------
   Snap-to-start would otherwise pull the first card flush against the screen edge,
   swallowing the container padding. */
@media (max-width: 1080px) {
  .carousel { scroll-padding-left: 32px; }
}
@media (max-width: 620px) {
  .carousel { scroll-padding-left: 18px; }

  /* top bar: main phone + email only, so no dangling separator dots (matches the homepage) */
  [data-lc="topbar-main"] { width: 100%; justify-content: space-between; gap: 12px !important; }
  [data-lc="topbar-main"] > :nth-child(2),
  [data-lc="topbar-main"] > :nth-child(3),
  [data-lc="topbar-main"] > :nth-child(4) { display: none; }
}

/* ---------- back-to-top button (created by js/app.js, mobile/tablet only) ---------- */
.lc-totop { display: none; }
@media (max-width: 860px) {
  .lc-totop {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    box-shadow: 0 4px 14px rgba(30, 89, 121, .35);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    -webkit-tap-highlight-color: transparent;
  }
  .lc-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
  .lc-totop:active { background: var(--blue-mid); }
}

/* ---------- social links in the mobile nav drawer ---------- */
.lc-drawer-social { display: none; }
@media (max-width: 980px) {
  header .lc-drawer > div.lc-drawer-social {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center;
    gap: 14px !important;
    padding-top: 6px;
  }
  .lc-drawer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(30, 89, 121, .3);
    color: var(--navy);
    text-decoration: none;
  }
  .lc-drawer-social a:active { background: var(--blue-tint); }
}

/* Cookie-Script (loaded via GTM) is configured with the banner and badge at the top: pin them to the bottom */
#cookiescript_injected { top: auto !important; bottom: 0 !important; }
#cookiescript_badge { top: auto !important; bottom: 10px !important; }