/* ============================================================
   Mobile compaction for the 6 individual course pages.

   Matches the homepage / courses-index / contact mobile rhythm:
   tighter hero, 24px section tops, 44px tap targets.
   Desktop layout unchanged — all rules are @media (max-width: 768px)
   and every selector is scoped to body.page-course so nothing leaks.

   The one structural change is the shop gallery. Its base grid is
   repeat(auto-fill, minmax(320px, 1fr)), so on a ~354px phone container
   only ONE column fits: 8 photos stacked 2,210px tall, roughly a third
   of the whole page. It becomes a swipeable scroll-snap row here, which
   keeps the photos large (Crawford asked for bigger course images in
   August) instead of shrinking them into a thumbnail grid.
   ============================================================ */

@media (max-width: 768px) {

  /* ---------- Hero ---------- */

  body.page-course .course-hero {
    margin-top: 72px;
    min-height: 0;
  }

  body.page-course .course-hero__content {
    padding: 20px 18px 26px;
  }

  body.page-course .course-hero__eyebrows {
    gap: 6px;
    margin-bottom: 10px;
  }

  body.page-course .course-tag--hero,
  body.page-course .course-code-chip {
    font-size: 0.66rem;
    padding: 4px 10px;
    letter-spacing: 0.08em;
  }

  body.page-course .course-hero__content h1 {
    font-size: clamp(1.45rem, 6.2vw, 1.85rem);
    line-height: 1.18;
    margin-bottom: 10px;
  }

  body.page-course .course-hero__content .lead {
    font-size: 0.92rem;
    line-height: 1.45;
    max-width: 36ch;
  }

  /* The at-a-glance strip stacks to 4 full-width rows at the base 600px
     breakpoint. Two columns keeps all four facts but halves the height. */
  body.page-course .course-hero__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin: 16px auto 0;
    padding: 12px 14px;
    max-width: 100%;
  }

  body.page-course .course-hero__meta li {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: auto;
    min-width: 0;
    gap: 1px;
  }

  body.page-course .course-hero__meta li span {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-align: left;
  }

  body.page-course .course-hero__meta li strong,
  body.page-course .course-hero__meta li.is-price strong {
    font-size: 0.92rem;
    text-align: left;
    line-height: 1.25;
  }

  body.page-course .course-hero__content .hero-actions {
    margin-top: 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  body.page-course .course-hero__content .hero-actions .btn {
    width: 100%;
    max-width: none;
    min-height: 44px;
    justify-content: center;
  }

  body.page-course .course-hero__schedule-hint {
    margin-top: 10px;
    font-size: 0.86rem;
  }

  /* ---------- Upcoming sessions ---------- */

  body.page-course .course-upcoming {
    padding: 26px 0 30px;
  }

  body.page-course .course-upcoming__heading {
    font-size: 1.15rem;
  }

  body.page-course .course-upcoming__sub {
    font-size: 0.86rem;
    margin-bottom: 14px;
  }

  body.page-course .course-upcoming__hint {
    font-size: 0.85rem;
    margin-top: 14px;
  }

  /* ---------- Course details accordions ---------- */

  body.page-course .course-details {
    padding: 24px 0 32px;
  }

  body.page-course .course-details__heading {
    font-size: 1.2rem;
  }

  body.page-course .course-details__sub {
    font-size: 0.86rem;
    margin-bottom: 16px;
  }

  body.page-course .course-details__stack {
    gap: 8px;
  }

  body.page-course .course-details__stack summary {
    padding: 12px 16px;
    gap: 12px;
    min-height: 44px;
    font-size: 0.94rem;
  }

  body.page-course .course-details__panel {
    padding: 2px 16px 16px;
  }

  body.page-course .course-details__panel p,
  body.page-course .course-details__list li,
  body.page-course .course-details__panel .checklist li {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  /* ---------- Shop gallery: swipeable row ---------- */

  body.page-course .content-section.course-gallery-section {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  body.page-course .course-gallery-heading {
    font-size: 1.05rem;
    margin-bottom: 10px;
  }

  /* Swipe affordance. Generated rather than added to all 6 pages as markup,
     and paired with the 82% slide width below so the next photo peeks in. */
  body.page-course .course-gallery-heading::after {
    content: "Swipe for more photos \2192";
    display: block;
    margin-top: 3px;
    color: var(--gray-500);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0;
  }

  body.page-course .course-gallery {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 4px;
    margin-bottom: 4px;
  }

  body.page-course .course-gallery figure {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }

  body.page-course .course-gallery img {
    height: 220px;
  }

  body.page-course .course-gallery figcaption {
    font-size: 0.72rem;
    padding: 6px 9px;
  }

  /* ---------- Closing CTA ---------- */

  body.page-course .cta-band {
    padding: 20px 16px;
  }

  body.page-course .cta-band h2 {
    font-size: 1.12rem;
    margin-bottom: 8px;
  }

  body.page-course .cta-band p {
    font-size: 0.88rem;
    line-height: 1.45;
    margin-bottom: 14px;
  }

  body.page-course .cta-band .page-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.page-course .cta-band .page-actions .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  body.page-course .content-section {
    padding-top: 24px;
    padding-bottom: 32px;
  }

  body.page-course .crumb {
    font-size: 0.78rem;
    margin-bottom: 14px;
  }
}