/* Phone review fixes (23 Oct 2026, from the iPhone screenshots).
   1. Card photos run the full width of the card and show the whole picture.
      A max-height next to an aspect-ratio makes Safari cap the WIDTH as well
      (120px tall at 16:9 = a 213px-wide thumbnail, not full bleed), so the
      photo's height now comes from its ratio and nothing else.
   2. The founder's photo on the About page is a real portrait, not 96px.
   3. The home page's age groups are a swipe row on a phone, not a long scroll. */

html[data-o-calm] .class-card__media { aspect-ratio: 3 / 2; max-height: none; }
html[data-o-calm] .class-card__img { max-height: none; }
@media (min-width: 640px) {
  html[data-o-calm] .class-card__media { aspect-ratio: 16 / 10; }
}

html[data-o-calm] .collab-card__photo,
html[data-o-calm] #collaborations .teacher-cards .collab-card__photo,
html[data-o-calm] #collaborations .teacher-cards .collab-card:hover .collab-card__photo { aspect-ratio: 1 / 1; width: 100%; height: auto; max-height: none; }
html[data-o-calm] .collab-card__photo img { object-position: 50% 22%; }
/* Educator photos show the whole face: on a phone or small tablet the photo is 5:4 and
   the card is never wider than 300px, so a wide screen cannot stretch it into a strip; the photo is square, the whole face. */
@media (max-width: 767px) {
  html[data-o-calm] .collab-card__photo,
  html[data-o-calm] #collaborations .teacher-cards .collab-card__photo,
  html[data-o-calm] #collaborations .teacher-cards .collab-card:hover .collab-card__photo { aspect-ratio: 1 / 1; }
  html body .collab-grid { grid-auto-columns: min(300px, 80%) !important; }
}
html[data-o-calm] img.booking__photo { width: 100%; height: auto; max-height: none; }

@media (max-width: 639px) {
  html[data-o-about-story] .mm-page-about .story,
  html[data-o-about-story="1"] .mm-page-about .story,
  html[data-o-about-story="3"] .mm-page-about .story { grid-template-columns: 1fr; }
  html[data-o-about-story] .mm-page-about .story__media { width: min(100%, 300px); }
}

@media (max-width: 599px) {
  .hpx1__media { aspect-ratio: 3 / 2; }
}

/* Touch targets and readable sizes, phones and tablets.
   Links in the footer and the breadcrumb are 44px tall to tap; form fields are
   16px so iPhones do not zoom the page in when one is focused; the small labels
   under figures and in filters are never under 12px. */
@media (max-width: 1023px), (pointer: coarse) {
  html body .breadcrumb a,
  html body .footer__col li a,
  html body .footer__legal a,
  html body .is-text > a,
  html body .cf2__facts a,
  html body .pt-pills a,
  html body .blog-card__link,
  html body .collab-card__more { display: inline-flex; align-items: center; min-height: 44px !important; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
  select,
  textarea { font-size: 16px; }
}
@media (max-width: 639px) {
  .eyebrow,
  .filter-drop__label,
  .camps-filters__label,
  .ph__data li span,
  .ph-facts li span,
  .split-hero__facts li span,
  .is-text span,
  .site-footer small,
  .ph__side li span,
  .sticky-cta__price small,
  .hp-week dd b { font-size: 12px; }
}

/* Tablets: the team list keeps two columns instead of one long column, and the
   winter camps' door-shaped day tiles keep their knob clear of the numeral. */
@media (min-width: 640px) and (max-width: 1023px) {
  html body .tm--3 .tm__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
}
html[data-o-camps-design="2"] .camps-cal__day.is-camp::after { top: 32%; }

/* A phone held sideways: keep the sticky booking bar slim so the page still has room. */
@media (max-height: 500px) and (orientation: landscape) {
  html body .sticky-cta { padding-block: 6px; }
  html body .sticky-cta .btn { min-height: 40px; }
}

/* Touch screens of any width: fields are 16px so iOS does not zoom in on focus. */
@media (pointer: coarse), (max-width: 1023px) {
  html body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
  html body select,
  html body textarea { font-size: 16px; }
}
@media (pointer: coarse), (max-width: 1023px) {
  html body .blog-tools__sort select { font-size: 16px; }
}

/* "A learning experience made for your child": the photo was capped at 340px
   (260px on small screens), small beside its column. It now fills its column,
   up to 460px on a laptop and the full width of the page on a phone. */
html[data-o-calm] .why--split .why__media { max-width: 460px; }
@media (max-width: 1023px) {
  html[data-o-calm] .why--split .why__media { max-width: min(100%, 420px); }
}

/* Small labels and captions are never under 12px, on any screen. */
html body .eyebrow,
html body .ph__data li span,
html body .ph-facts li span,
html body .split-hero__facts li,
html body .is-text span,
html body .camps-filters__label,
html body .filter-drop__label,
html body .hp-week li b,
html body .hp-week li span,
html body .class-card__price small,
html body .booking__steps-title,
html body .pgx-when span,
html body .pgx-when em,
html body .blog-card__cat,
html body .blog-card__time,
html body .pt-facts__fee small,
html body .field .opt,
html body .hero__badge .pill,
html body .hpx-facts dt,
html body .hpx-term,
html body .cs__mins,
html body .lvr__age,
html body .mmo-k__lbl,
html body .camps-cal__count span,
html body .camps-cal__week span,
html body .camps-day__time,
html body .sticky-cta__price small,
html body .tp__fact dt,
html body .latest-item small,
html body .site-footer small { font-size: 12px !important; }

/* The booking section on a phone or small tablet: the form comes first, right under
   the heading; the summary of the program (photo, fee, what happens next) follows it. */
@media (max-width: 899px) {
  html body .booking-band .booking { display: flex; flex-direction: column; }
  html body .booking-band .booking__form { order: -1; }
  html body .booking-band .booking__summary { order: 1; }
}

/* SIS Saturday Clubs picker. Phones and small tablets: each club opens right under
   itself, with a chevron that says so, instead of far below the whole list. */
html body .cs__add { cursor: pointer; }
html body .cs__item.is-on .cs__add .cs__add-t::after { content: " \00d7"; font-weight: 700; }
html body .cs__item.is-on [data-add-club] span::after { content: " \00d7"; font-weight: 700; }
@media (max-width: 899px) {
  html body .cs__item { scroll-margin-top: 80px; }
  html body .cs__tab { position: relative; padding-right: 36px; }
  html body .cs__tab::after {
    content: ""; position: absolute; right: 12px; top: 50%; width: 9px; height: 9px;
    border-right: 2.5px solid var(--brand-dark); border-bottom: 2.5px solid var(--brand-dark);
    transform: translateY(-70%) rotate(45deg); transition: transform .2s;
  }
  html body .cs__item.is-view .cs__tab::after { transform: translateY(-30%) rotate(-135deg); }
  html body .cs__item > .cs__panel { grid-column: 1 / -1; margin: 4px 4px 10px; padding: 16px; box-shadow: none; border-radius: var(--r-md); background: var(--canvas-2, #f4f1e8); border-top-width: 4px; }
  html body .cs__item > .cs__panel[hidden] { display: none; }
}

/* Hero badge and card that link to a program (home, Harvard bootcamp). */
a.hero__badge--link { text-decoration: none; transition: box-shadow .2s, transform .2s; }
a.hero__badge--link:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
a.hero__badge--link b { text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 3px; }
a.hero__card--link { text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
a.hero__card--link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg, var(--shadow-md)); }
@media (max-width: 639px) { a.hero__badge--link { align-items: flex-start; border-radius: 18px; } }
.hero__badge .pill { flex: none; white-space: nowrap; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.hero__badges .hero__badge { margin-bottom: 0; }