/* One set of desktop/tablet measurements for the index and booking offers. */
@media (min-width: 768px) {
  html.responsive-index body.section3-preview main#main-content.responsive-index,
  html body.booking-page main#main-content.responsive-booking {
    & :is(.offer-list, .booking-offers) { column-gap: 16px; }
    & :is(.offer-row, .booking-offer),
    & .offer-list .offer-row.subscription-card {
      padding: 17.6px 9.6px; grid-template-rows: max-content 1fr; gap: 4.8px 16px;
    }
    & :is(.offer-title, .booking-offer h2) {
      min-height: 28.8px; font: 500 16px/1.35 var(--sans); letter-spacing: -.02em; white-space: nowrap;
    }
    & :is(.offer-description, .booking-offer p) {
      grid-column: 1; font: 300 14px/1.5 var(--sans);
    }
    & :is(.offer-price, .booking-offer-price) { font: 500 17.6px/1.3 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
    & :is(.offer-price, .booking-offer-price) small { font-size: 10.4px; font-weight: 300; }
    & :is(.offer-action, .booking-offer-action) {
      grid-row: 2; width: 118.4px; height: 32px;
      font: 300 16px/1.35 var(--sans); letter-spacing: -.02em;
    }
    & :is(.offer-heading, .booking-offer-heading) { display: flex; flex-wrap: nowrap; gap: 4px 12.8px; }
    & .offer-list .offer-row.subscription-card .offer-description { grid-column: 1; }
    & .offer-list .offer-row.subscription-card .frequency-switch,
    & .booking-frequency {
      grid-row: 1; align-self: center; height: 32px; min-height: 32px; margin-block: -2px; padding: 0;
    }
    & .offer-list .offer-row.subscription-card .frequency-switch label,
    & .booking-frequency label {
      display: flex; align-items: center; justify-content: center;
      height: 32px; min-height: 32px; padding: 0 11.2px;
      font: 300 16px/1.35 var(--sans); letter-spacing: -.02em;
    }
    & .offer-list .offer-row.subscription-card .frequency-switch::before { inset: 0 50% 0 0; }
    & .offer-list .offer-row.subscription-card .frequency-switch:has(#twice-weekly:checked)::before { inset: 0 0 0 50%; }
    & .lesson-stack { --offer-copy-size: 14px; --offer-text-inset: 9.6px; }
  }
}

/* Reflow both sets of cards at the same window widths. */
@media (width > 1000px) and (max-width: 1200px) {
  html.responsive-index body.section3-preview main#main-content.responsive-index,
  html body.booking-page main#main-content.responsive-booking {
    & :is(.offer-row, .booking-offer),
    & .offer-list .offer-row.subscription-card { grid-template-rows: max-content 1fr max-content; }
    & :is(.offer-heading, .booking-offer-heading) { display: contents; }
    & :is(.offer-description, .booking-offer p),
    & .offer-list .offer-row.subscription-card .offer-description { grid-column: 1 / -1; }
    & :is(.offer-action, .booking-offer-action, .booking-frequency),
    & .offer-list .offer-row.subscription-card .frequency-switch { grid-row: 3; }
  }
}

@media (width > 1000px) {
  html body.booking-page main#main-content.responsive-booking {
    & .booking-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    & .booking-good-to-know { grid-area: 1 / 2; height: 100%; contain: size; overflow-y: auto; margin-top: 0; }
  }
}

@media (min-width: 768px) and (any-pointer: coarse) {
  html.responsive-index body.section3-preview main#main-content.responsive-index,
  html body.booking-page main#main-content.responsive-booking {
    & :is(.offer-action, .booking-offer-action) { min-height: 44px; }
    & .offer-list .offer-row.subscription-card .frequency-switch,
    & .booking-frequency { height: 44px; min-height: 44px; margin-block: 0; }
    & .offer-list .offer-row.subscription-card .frequency-switch label,
    & .booking-frequency label { height: 44px; min-height: 44px; }
  }
}

/* Phone controls share a roomy slider and an equally tall circular action.
   Counter the index panel's fitting scale so both remain finger-sized. */
@media (max-width: 767px), (max-width: 1000px) and (max-height: 600px) and (pointer: coarse) {
  html.phone-deck:not(.tablet-portrait) body.section3-preview main#main-content,
  html:not(.tablet-portrait) body.booking-page main#main-content.responsive-booking {
    & :is(.offer-list, .booking-offers) {
      --mobile-offer-control-size: calc(var(--phone-action-height) * var(--phone-control-scale, 1));
      --mobile-offer-control-gap: calc(12px * var(--phone-control-scale, 1));
      --offer-copy-size: 12px;
      grid-template-columns: minmax(0, 1fr) max-content;
      grid-auto-rows: 1fr; column-gap: 9.6px;
    }
    & :is(.offer-row, .booking-offer),
    & .offer-list .offer-row.subscription-card {
      padding: 9.6px 0; grid-template-rows: max-content 1fr max-content; gap: 4.8px 8px;
    }
    & :is(.offer-title, .booking-offer h2) { min-height: 28.8px; font: 500 13.6px/1.35 var(--sans); }
    & :is(.offer-description, .booking-offer p),
    & .offer-list .offer-row.subscription-card .offer-description {
      grid-column: 1 / -1; font: 300 var(--offer-copy-size)/1.45 var(--sans); color: var(--muted);
    }
    & :is(.offer-price, .booking-offer-price) { font-size: 12.8px; }
    & :is(.offer-price, .booking-offer-price) small { font-size: 8px; }
    & :is(.offer-heading, .booking-offer-heading) { display: contents; }
    & .booking-menu-note { padding-inline: 0; font: 200 10px/1.45 var(--sans); }
    & :is(.offer-action, .booking-offer-action) {
      grid-column: 2; grid-row: 3; justify-self: end; align-self: center;
      width: var(--mobile-offer-control-size); height: var(--mobile-offer-control-size);
      min-width: 0; min-height: var(--mobile-offer-control-size);
      padding: 0; border-radius: 50%; font-size: 0;
    }
    & :is(.offer-action, .booking-offer-action)::after {
      content: '↗'; font: 300 calc(22px * var(--phone-control-scale, 1))/1 var(--sans);
    }
    & .offer-list .offer-row.subscription-card .frequency-switch,
    & .booking-frequency {
      grid-column: 1 / -1; grid-row: 3; align-self: center; justify-self: start;
      width: calc(100% - var(--mobile-offer-control-size) - var(--mobile-offer-control-gap));
      max-width: none; height: var(--mobile-offer-control-size); min-height: var(--mobile-offer-control-size);
      margin: 0; padding: 0; border-radius: 999px;
      grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr;
    }
    & .offer-list .offer-row.subscription-card .frequency-switch label,
    & .booking-frequency label {
      display: flex; align-items: center; justify-content: center;
      height: var(--mobile-offer-control-size); min-height: var(--mobile-offer-control-size);
      padding: 0 calc(10px * var(--phone-control-scale, 1));
      font: 300 calc(13px * var(--phone-control-scale, 1))/1.35 var(--sans);
      white-space: nowrap;
    }
    & .offer-list .offer-row.subscription-card .frequency-switch::before,
    & .booking-frequency::before { inset: 0 50% 0 0; width: auto; height: auto; transform: none; border-radius: inherit; }
    & .offer-list .offer-row.subscription-card .frequency-switch:has(#twice-weekly:checked)::before,
    & .booking-frequency:has(#booking-twice-weekly:checked)::before { inset: 0 0 0 50%; transform: none; }
  }
  /* Keep the Booking entry menu compact even when other actions are taller. */
  html:not(.tablet-portrait) body.booking-page main#main-content.responsive-booking .booking-offers {
    --mobile-offer-control-size: calc(35.2px * var(--phone-control-scale, 1));
  }
  /* Each section fits independently; match the cards' rendered height. */
  html.phone-deck.phone-index:not(.tablet-portrait) body.section3-preview main#main-content {
    & #intro .discovery-button,
    & #contact .send-button {
      height: calc(var(--phone-action-height) * var(--phone-control-scale, 1));
      min-height: calc(var(--phone-action-height) * var(--phone-control-scale, 1));
      padding-block: 0;
    }
    & #intro .discovery-button {
      display: flex; align-items: center; justify-content: center;
      width: 100%; max-width: none;
    }
  }
}