/* ============================================================
   Shared responsive layer — Dra. Clara Bustos
   Loaded on every page. Targets inline-style React markup via
   attribute selectors so no per-component changes are required.
   Breakpoint: 760px.
   ============================================================ */

@media (max-width: 760px) {

  html, body { overflow-x: hidden !important; }

  /* ---------- SCROLLBAR (minimalista y delgado) ---------- */
  /* Firefox */
  html { scrollbar-width: thin !important; scrollbar-color: rgba(28, 58, 84, 0.28) transparent !important; }
  /* WebKit / Chromium / Safari */
  *::-webkit-scrollbar { width: 4px !important; height: 4px !important; }
  *::-webkit-scrollbar-track { background: transparent !important; }
  *::-webkit-scrollbar-thumb {
    background: rgba(28, 58, 84, 0.28) !important;
    border-radius: 999px !important;
  }
  *::-webkit-scrollbar-thumb:active { background: rgba(28, 58, 84, 0.45) !important; }

  /* ---------- NAV ----------------------------------------- */
  /* Force a solid, legible bar on mobile (kills the transparent-
     over-photo invisibility) and hide the desktop link cluster.
     The hamburger + menu are injected by responsive.js. */
  nav {
    background: rgba(246, 242, 236, 0.97) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--cream-dk) !important;
    padding-left: 38px !important;
    padding-right: 62px !important;
  }
  nav > a {
    color: var(--blue-dark) !important;
    white-space: nowrap !important;
  }
  nav > div[style*="gap: 36px"] { display: none !important; }

  /* ---------- PAGE GUTTERS -------------------------------- */
  /* 72px is the page gutter everywhere; collapse it. Covers both
     <section>/<footer> and the div-based gutters (hero copy,
     blog breadcrumb/header) whose shorthand ends in "px 72px". */
  section, footer { padding-left: 22px !important; padding-right: 22px !important; }
  [style*="px 72px"] { padding-left: 22px !important; padding-right: 22px !important; }

  /* ---------- GRIDS --------------------------------------- */
  /* Stack any multi-column grid EXCEPT image strips (grids whose
     direct children are images — before/after, before/during/after). */
  [style*="grid-template-columns"]:not(:has(> img)):not(:has(> picture)) {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* When a split (text | image) grid stacks, give the image wrapper
     a real height so its height:100% image still shows. */
  [style*="grid-template-columns"]:not(:has(> img)) > div:has(> img) {
    min-height: 58vw;
  }

  /* Full-height hero sections shouldn't reserve a whole screen of
     empty space once stacked. */
  section[style*="min-height: 100vh"],
  section[style*="minHeight: 100vh"] { min-height: 0 !important; }

  /* ---------- TYPE ---------------------------------------- */
  h1 { font-size: clamp(36px, 10.5vw, 58px) !important; }
  h2 { font-size: clamp(30px, 8vw, 46px) !important; }

  /* ---------- TWEAKS PANEL -------------------------------- */
  /* Keep the in-page tweaks panel from overflowing small screens. */
  #tweaks-panel { width: calc(100vw - 32px) !important; right: 16px !important; bottom: 16px !important; }
}

/* ---------- SHARED MOBILE NAV (injected by responsive.js) -- */
#rsp-burger {
  position: fixed; top: 13px; right: 16px; z-index: 1000;
  width: 38px; height: 38px; padding: 9px 7px;
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer;
}
#rsp-burger span {
  display: block; height: 1.6px; width: 100%;
  background: var(--blue-dark, #1C3A54);
  transition: transform .25s ease, opacity .2s ease;
}
#rsp-burger.open span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
#rsp-burger.open span:nth-child(2) { opacity: 0; }
#rsp-burger.open span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

#rsp-menu {
  position: fixed; top: 64px; left: 0; right: 0; z-index: 999;
  background: var(--cream, #F6F2EC);
  border-bottom: 1px solid var(--cream-dk, #EDE8DF);
  box-shadow: 0 16px 40px rgba(28, 58, 84, 0.14);
  padding: 6px 0 14px;
  display: none;
  max-height: calc(100vh - 64px); overflow-y: auto;
  transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .2s ease, opacity .2s ease, visibility .2s ease;
  font-family: var(--sans, sans-serif);
}
#rsp-menu.open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
#rsp-menu a.rsp-link {
  display: block; padding: 15px 22px; text-decoration: none;
  font-size: 15px; color: var(--blue-dark, #1C3A54);
  border-bottom: 1px solid var(--cream-dk, #EDE8DF);
}
#rsp-menu a.rsp-sub {
  padding: 13px 22px 13px 34px; font-size: 14px;
  color: var(--ink-soft, #4A4A4A); font-weight: 300;
}
#rsp-menu .rsp-eyebrow {
  display: block; padding: 18px 22px 8px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue-mid, #5A89AC); font-weight: 600;
}
#rsp-menu a.rsp-cta {
  display: block; margin: 16px 22px 6px; text-align: center;
  background: var(--blue-dark, #1C3A54); color: #fff; text-decoration: none;
  padding: 15px; font-size: 13px; letter-spacing: 0.06em; font-weight: 500;
}
#rsp-menu a.rsp-toggle {
  display: inline-block; margin: 14px 22px 4px; text-decoration: none;
  font-size: 12px; letter-spacing: 0.1em; font-weight: 500;
  color: var(--ink-muted, #8A8A8A);
}

@media (max-width: 760px) {
  #rsp-burger { display: flex; }
  #rsp-menu.ready { display: block; }
}