/* winter-page.css: winter clinic page only (loaded after refresh.css). */

/* ---------- Hero with banner image ---------- */
.winter-hero__grid { display: grid; gap: 1.75rem; }
.winter-hero__copy { min-width: 0; }
.hero-banner { margin: 0; order: -1; border-radius: 20px; overflow: hidden; background: #0a2b45;
  box-shadow: 0 18px 40px rgba(0,0,0,.28); aspect-ratio: 16 / 9; }
.hero-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 960px) {
  .winter-hero__grid { grid-template-columns: 1fr 1.05fr; align-items: center; gap: 3rem; }
  .hero-banner { order: 0; }
}

/* ---------- Footer logo (same JSS crest as the header) ---------- */
.footer-brand { display: flex; align-items: center; gap: .6rem; }
.footer-brand__mark { width: 40px; height: 40px; border-radius: 50%; background: #fff; flex: none; }

/* ---------- What kids learn ---------- */
.learn-grid, .age-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.learn-grid .card h3 { margin-top: .25rem; }
@media (min-width: 640px) { .learn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .learn-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Age groups ---------- */
.age-card { background: #fff; border: 1px solid rgba(15,35,25,.08); border-radius: var(--r-card, 20px);
  box-shadow: var(--shadow-card); padding: 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .4rem; }
.age-card h3 { margin: 0; font-size: 1.2rem; }
.age-card__cta { margin: 0; }
.age-card__cta a { color: var(--winter, #0e3a5c); font-weight: 700; text-underline-offset: 3px; }
@media (min-width: 760px) { .age-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .75rem; }
.faq details { background: var(--cream, #fbf8f2); border: 1px solid var(--line, #e4ded1); border-radius: 14px; padding: 0 1.1rem; }
.faq summary { cursor: pointer; font-weight: 700; padding: 1rem 1.75rem 1rem 0; list-style: none; position: relative; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: .85rem; font-size: 1.3rem; line-height: 1; color: var(--winter, #0e3a5c); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:focus-visible { outline: 3px solid var(--winter, #0e3a5c); outline-offset: 3px; border-radius: 6px; }
.faq details p { margin: 0 0 1rem; color: var(--ink-700, #3d4a43); }
.faq a { color: var(--brand, #14532d); font-weight: 600; }

/* ---------- Sticky call button (mobile only) ---------- */
.sticky-call { display: none; }
@media (max-width: 759px) {
  .sticky-call { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.96); border-top: 1px solid rgba(15,35,25,.1); box-shadow: 0 -6px 18px rgba(15,35,25,.08); }
  .sticky-call .btn { width: 100%; justify-content: center; }
  body.page-winter { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Review fixes (Oct 17, 5:45 PM) ---------- */
/* Phone numbers never break mid-number. The form's error-message link is
   covered by selector because the form markup is kept byte-identical. */
.nowrap, .form-error a[href^="tel"] { white-space: nowrap; }
/* Sticky bar is ~85px tall (58-64px button + padding + border); reserve more
   than that so the footer's last line is never permanently covered, and keep
   in-page jumps (#interest) clear of the bar. */
@media (max-width: 759px) {
  body.page-winter { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
  html:has(body.page-winter) { scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
}