/* ============================================================
   ACTIVITIES PAGE — 1:1 Figma rebuild
   Page frame 4148:2924 "Activities Subpage" = 1920 x 4923
   (excludes global header chrome which sits 0->176).
   Section vertical map (page-absolute Y, base 1920):
     Header chrome:           0 -> 176
     Hero:                  176 -> 878   (h 702)
     Card 1 Wisdom:        1022 -> 1437  (h 415)
     Card 2 Meditation:    1587 -> 2002  (h 415)  inter-gap 150
     Card 3 Yoga:          2152 -> 2567  (h 415)  inter-gap 150
     Card 4 Sound Healing: 2717 -> 3132  (h 415)  inter-gap 150
     Card 5 Courses:       3282 -> 3697  (h 415)  inter-gap 150
     Begin Your Journey:   3847 -> 4199  (h 352)  pre-gap 150
     Footer:               4199 -> 4923  (h 724)
   All sizes scaled proportionally below 1920vp via
     min(Xpx, calc(X / 1920 * 100vw))
============================================================ */

/* ===== UNIVERSAL RESET — kill base styles.css paddings/gaps so per-section
   Figma values are not fighting clamp() defaults. Per CLAUDE.md warning,
   any flex/grid gap on a `__inner` element will need !important. ===== */
body[data-page="activities"] section,
body[data-page="activities"] [class*="__inner"] {
  padding-top: 0;
  padding-bottom: 0;
  gap: 0;
  min-height: 0;
}
body[data-page="activities"] {
  background: #FAFAFA;
}

/* ============ HERO (y=176, h=702) ============ */
body[data-page="activities"] .act-hero {
  position: relative;
  width: 100%;
  height: min(702px, calc(702 / 1920 * 100vw));
  overflow: hidden;
}
body[data-page="activities"] .act-hero__image {
  position: absolute; inset: 0;
  /* Zoomed in another 20% (115 -> 138). For bg-position-x, lower %
     puts the source content further RIGHT in the visible frame
     (image's left aligns with container's left, leaving source
     content extending into the right). 20% positions the figures
     on the right per user image #46. */
  background-size: cover; /* QC r11: Figma 1920x1280 full-width image */
  background-position: 0% 5%; /* QC r11: figures right-of-center, feet visible */
}
/* Figma veil: linear-gradient(270deg, rgba(132,132,132,0.4) 37.5%,
   rgba(43,43,43,0.8) 60%) — darker on the RIGHT side, mirrored so
   the LEFT side stays brighter for the copy stack. We invert (to 90deg)
   so the dark falls on the LEFT where the copy actually lives, giving
   the headline contrast Figma renders. */
body[data-page="activities"] .act-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(43,43,43,0.8) 0%,
    rgba(132,132,132,0.4) 40%,
    rgba(132,132,132,0.2) 100%);
}
body[data-page="activities"] .act-hero__inner {
  position: absolute;
  left: min(149px, calc(149 / 1920 * 100vw));
  top: 0;
  width: min(710px, calc(710 / 1920 * 100vw));
  height: 100%;
}

/* H1 "Activities" — Figma center y=358 (page) -> within hero = 358-176-40 = 142.
   STIX Two Text Medium 64/80, #FAFAFA, width 671. No transform in dump. */
body[data-page="activities"] .act-hero__title {
  position: absolute;
  left: 0;
  top: min(142px, calc(142 / 1920 * 100vw));
  width: min(671px, calc(671 / 1920 * 100vw));
  height: min(80px, calc(80 / 1920 * 100vw));
  margin: 0;
  font-family: 'STIX Two Text', serif;
  font-weight: 500;
  font-size: min(64px, calc(64 / 1920 * 100vw));
  line-height: calc(80 / 64);
  color: #FAFAFA;
}

/* Kicker — Figma center y=421 (page) -> within hero = 421-176-12 = 233.
   Inter Medium 20/24, tracking 2px (= 0.1em), uppercase, #FAFAFA. */
body[data-page="activities"] .act-hero__kicker {
  position: absolute;
  left: 0;
  top: min(233px, calc(233 / 1920 * 100vw));
  margin: 0;
  width: 100%; /* QC r12: keep kicker one line, never overflow-clip */
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(24 / 20);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FAFAFA;
  white-space: nowrap;
}

/* Questions group — Figma top y=471, height 197, left 149.
   Within hero: top = 471-176 = 295. Vertical accent line is 197px tall
   sitting at the LEFT edge (x=149 = same as group left). Questions
   are indented 22px from the line (Figma left=171). */
body[data-page="activities"] .act-hero__questions {
  position: absolute;
  left: 0;
  top: min(295px, calc(295 / 1920 * 100vw));
  width: min(364px, calc(364 / 1920 * 100vw));
  height: min(197px, calc(197 / 1920 * 100vw));
}
body[data-page="activities"] .act-hero__line {
  position: absolute;
  left: 0;
  top: 0;
  width: min(1px, calc(1 / 1920 * 100vw));
  height: min(197px, calc(197 / 1920 * 100vw));
  background: #FAFAFA;
}
body[data-page="activities"] .act-hero__quotes {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left: min(22px, calc(22 / 1920 * 100vw));
  top: 0;
  width: min(342px, calc(342 / 1920 * 100vw));
  display: flex !important;
  flex-direction: column !important;
  gap: min(40px, calc(40 / 1920 * 100vw)) !important;
}
body[data-page="activities"] .act-hero__quotes li {
  font-family: 'STIX Two Text', serif;
  font-style: italic;
  font-weight: 400;
  font-size: min(22px, calc(22 / 1920 * 100vw));
  line-height: calc(28 / 22);
  color: #FAFAFA;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

/* "Explore the paths below" + small down arrow. Figma left=149 y=707
   -> within hero = 531. Width 195 + 13px arrow. STIX Italic 20/28 #FFF. */
body[data-page="activities"] .act-hero__scroll {
  position: absolute;
  left: 0;
  top: min(531px, calc(531 / 1920 * 100vw));
  display: inline-flex;
  align-items: center;
  gap: min(8px, calc(8 / 1920 * 100vw));
  text-decoration: none;
  color: #FFFFFF;
  font-family: 'STIX Two Text', serif;
  font-style: italic;
  font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(28 / 20);
  width: min(220px, calc(220 / 1920 * 100vw));
  height: min(28px, calc(28 / 1920 * 100vw));
  transition: opacity 0.2s ease;
}
body[data-page="activities"] .act-hero__scroll:hover {
  opacity: 0.85;
}
body[data-page="activities"] .act-hero__scroll svg {
  width: min(13px, calc(13 / 1920 * 100vw));
  height: min(13px, calc(13 / 1920 * 100vw));
  display: block;
  flex-shrink: 0;
}

/* ============ 5 PATH CARDS — y=1022 -> 3697 ============ */
/* The act-paths wrapper sits between hero (ends 878) and CTA (3847).
   Pre-gap 144 from hero to first card top. */
body[data-page="activities"] .act-paths {
  position: relative;
  width: 100%;
  padding-top: min(144px, calc(144 / 1920 * 100vw));
  padding-bottom: min(150px, calc(150 / 1920 * 100vw));
  display: flex;
  flex-direction: column;
  gap: min(150px, calc(150 / 1920 * 100vw)) !important;
}

/* Each card: total bounding box left=278 right=1642 (so width 1364),
   height 415. Photo is 662x415 on one side, copy is 612 wide on the
   other. Gap between copy box right edge (278+612=890) and photo
   left edge (980) = 90px. */
body[data-page="activities"] .act-path-card {
  position: relative;
  width: min(1364px, calc(1364 / 1920 * 100vw));
  height: min(415px, calc(415 / 1920 * 100vw));
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

/* Photo: 662 wide, 415 tall, rounded 4. Placed via flex order so the
   normal card has copy-left/photo-right; --reverse swaps order. */
body[data-page="activities"] .act-path-card__photo {
  width: min(662px, calc(662 / 1920 * 100vw));
  height: min(415px, calc(415 / 1920 * 100vw));
  background-size: cover;
  background-position: center;
  border-radius: min(4px, calc(4 / 1920 * 100vw));
  display: block;
  flex-shrink: 0;
  order: 2;
  text-decoration: none;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
body[data-page="activities"] .act-path-card--reverse .act-path-card__photo {
  order: 1;
}
/* QC r16: removed path-card photo hover (lift+shadow) — implied clickability */

/* Copy block: width 612 (per Figma), aligned vertically so the title
   sits ~63px down from the card top (1085-1022 = 63 for Wisdom). The
   other cards differ slightly (Meditation copy starts 34px later than
   the card's photo: title center at 1679-1587=92 with text-top ~58).
   We use absolute positioning per card to stay 1:1. */
body[data-page="activities"] .act-path-card__copy {
  position: relative;
  width: min(612px, calc(612 / 1920 * 100vw));
  height: min(415px, calc(415 / 1920 * 100vw));
  order: 1;
}
body[data-page="activities"] .act-path-card--reverse .act-path-card__copy {
  order: 2;
}

/* Title H2 — STIX Two Medium 52/58 #5E2A29. First word italic via
   <em>. Card-relative top defaults to 63 (Wisdom/Yoga/Courses) and
   gets bumped 34 lower for the photo-left cards (Meditation/Sound). */
body[data-page="activities"] .act-path-card__title {
  position: absolute;
  left: 0;
  top: min(63px, calc(63 / 1920 * 100vw));
  margin: 0;
  width: min(612px, calc(612 / 1920 * 100vw));
  font-family: 'STIX Two Text', serif;
  /* Only the subject word(s) inside <em> are italic per user image
     #39 ("Wisdom" italic, "for Modern Living" upright; same pattern
     across all five cards). */
  font-style: normal;
  font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: calc(58 / 52);
  color: #5E2A29;
}
body[data-page="activities"] .act-path-card__title em {
  font-style: italic;
  font-weight: 500;
}
body[data-page="activities"] .act-path-card__title em {
  font-family: 'STIX Two Text', serif;
  font-style: italic;
  font-weight: 500;
}

/* Body — Inter Regular 20/36 #282828, width 611. Default top 141. */
body[data-page="activities"] .act-path-card__body {
  position: absolute;
  left: 0;
  top: min(141px, calc(141 / 1920 * 100vw));
  margin: 0;
  width: min(612px, calc(612 / 1920 * 100vw));
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(36 / 20);
  color: #282828;
}

/* CTA "Explore X" — Inter Medium 20/32 #5E2A29 underlined + small
   right arrow. Default top 319 in card (Wisdom: 1341-1022 = 319). */
body[data-page="activities"] .act-path-card__cta {
  position: absolute;
  left: 0;
  top: min(319px, calc(319 / 1920 * 100vw));
  display: inline-flex;
  align-items: center;
  gap: min(10px, calc(10 / 1920 * 100vw));
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(32 / 20);
  color: #5E2A29;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease, transform 0.2s ease;
}
body[data-page="activities"] .act-path-card__cta:hover {
  color: #3F1817;
}
body[data-page="activities"] .act-path-card__cta:hover svg {
  transform: translateX(4px);
}
body[data-page="activities"] .act-path-card__cta svg {
  width: min(17px, calc(17 / 1920 * 100vw));
  height: min(13px, calc(13 / 1920 * 100vw));
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* Per-card vertical offsets — Figma puts the photo-LEFT cards' copy
   ~33-34px lower than the photo-RIGHT cards. The actual Figma offsets:
     Wisdom (1):       title top 1085 -> 63 within
     Meditation (2):   title top 1621 -> 34 within
     Yoga (3):         title top 2215 -> 63 within
     Sound Healing (4): title top 2733 -> 16 within
     Courses (5):      title top 3316 -> 34 within
   We adjust each via card-scoped overrides. */
body[data-page="activities"] .act-path-card--wisdom .act-path-card__title { top: min(63px, calc(63 / 1920 * 100vw)); }
body[data-page="activities"] .act-path-card--wisdom .act-path-card__body { top: min(141px, calc(141 / 1920 * 100vw)); }
body[data-page="activities"] .act-path-card--wisdom .act-path-card__cta { top: min(319px, calc(319 / 1920 * 100vw)); }

body[data-page="activities"] .act-path-card--meditation .act-path-card__title {
  top: min(34px, calc(34 / 1920 * 100vw));
  /* QC r17: Figma bbox 468px -> "Meditation as a Path" / "Inward" (2 lines). */
  width: min(468px, calc(468 / 1920 * 100vw));
}
body[data-page="activities"] .act-path-card--meditation .act-path-card__body { top: min(170px, calc(170 / 1920 * 100vw)); }
body[data-page="activities"] .act-path-card--meditation .act-path-card__cta { top: min(348px, calc(348 / 1920 * 100vw)); }

body[data-page="activities"] .act-path-card--yoga .act-path-card__title { top: min(63px, calc(63 / 1920 * 100vw)); }
body[data-page="activities"] .act-path-card--yoga .act-path-card__body { top: min(141px, calc(141 / 1920 * 100vw)); }
body[data-page="activities"] .act-path-card--yoga .act-path-card__cta { top: min(319px, calc(319 / 1920 * 100vw)); }

body[data-page="activities"] .act-path-card--sound-healing .act-path-card__title { top: min(16px, calc(16 / 1920 * 100vw)); }
body[data-page="activities"] .act-path-card--sound-healing .act-path-card__body { top: min(152px, calc(152 / 1920 * 100vw)); }
body[data-page="activities"] .act-path-card--sound-healing .act-path-card__cta { top: min(366px, calc(366 / 1920 * 100vw)); }

body[data-page="activities"] .act-path-card--courses .act-path-card__title { top: min(34px, calc(34 / 1920 * 100vw)); }
body[data-page="activities"] .act-path-card--courses .act-path-card__body { top: min(170px, calc(170 / 1920 * 100vw)); }
body[data-page="activities"] .act-path-card--courses .act-path-card__cta { top: min(348px, calc(348 / 1920 * 100vw)); }

/* ============ INSIDE THE EXPERIENCE — video testimonials ============
   Added between the 5 path cards and Begin Your Journey. Same heading
   treatment as the activity subpages; carousel of real seeker
   clips (assets/testimonials/), one 16:9 stage per view. */
body[data-page="activities"] .act-experience {
  position: relative;
  width: 100%;
  padding: 0 0 min(150px, calc(150 / 1920 * 100vw));
}
body[data-page="activities"] .act-experience__heading {
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: calc(58 / 52);
  text-transform: capitalize;
  color: #5E2A29;
  text-align: center;
  margin: 0;
}
/* Video testimonial carousel — one centered 16:9 stage per view (1096
   rhythm, same as our-story's media box); round arrows + dots below,
   the track glides on a 0.5s ease, swipe advances on touch. */
body[data-page="activities"] .exp-carousel {
  width: min(1096px, calc(1096 / 1920 * 100vw));
  margin: min(70px, calc(70 / 1920 * 100vw)) auto 0;
}
body[data-page="activities"] .exp-carousel__viewport {
  overflow: hidden;
  border-radius: min(8px, calc(8 / 1920 * 100vw));
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
body[data-page="activities"] .exp-videos {
  display: flex;
  gap: min(24px, calc(24 / 1920 * 100vw));
  transition: transform 0.5s ease;
}
body[data-page="activities"] .exp-videos.is-dragging { transition: none; }
body[data-page="activities"] .exp-video {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  border-radius: min(8px, calc(8 / 1920 * 100vw));
  overflow: hidden;
  background: rgba(240, 234, 222, 0.5);
}
body[data-page="activities"] .exp-video__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
body[data-page="activities"] .exp-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body[data-page="activities"] .exp-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(69px, calc(69 / 1920 * 100vw));
  height: min(69px, calc(69 / 1920 * 100vw));
  background: #9D3737;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
body[data-page="activities"] .exp-video__play svg {
  width: 40%;
  height: 40%;
}
body[data-page="activities"] .exp-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  display: block;
  border: 0;
}
/* Carousel nav — round arrows (wisdom-events idiom) + event-stage dots. */
body[data-page="activities"] .exp-carousel__nav {
  margin-top: min(36px, calc(36 / 1920 * 100vw));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(14px, calc(14 / 1920 * 100vw));
}
body[data-page="activities"] .exp-carousel__arrow {
  width: min(54px, calc(54 / 1920 * 100vw));
  height: min(54px, calc(54 / 1920 * 100vw));
  border: 1px solid #5E2A29;
  background: transparent;
  border-radius: 50%;
  color: #5E2A29;
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, color 0.25s ease;
}
body[data-page="activities"] .exp-carousel__arrow:hover {
  background: #5E2A29;
  color: #FAFAFA;
}
body[data-page="activities"] .exp-carousel__arrow svg {
  width: min(42px, calc(42 / 1920 * 100vw));
  height: min(42px, calc(42 / 1920 * 100vw));
}
body[data-page="activities"] .exp-carousel__dots {
  display: flex;
  gap: 10px;
  padding: 0 10px;
}
body[data-page="activities"] .exp-carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(94, 42, 41, 0.25);
  cursor: pointer;
  transition: all 0.3s ease;
}
body[data-page="activities"] .exp-carousel__dot.is-active {
  background: #5E2A29;
  width: 22px;
  border-radius: 4px;
}

/* ============ BEGIN YOUR JOURNEY (y=3847, h=352) ============ */
body[data-page="activities"] .act-cta {
  position: relative;
  width: 100%;
  height: min(352px, calc(352 / 1920 * 100vw));
  background: #BEA884;
  overflow: hidden;
}
body[data-page="activities"] .act-cta__inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Heading — STIX Two Medium 52, #FAFAFA, centered. Figma center y=3956.5
   within section y=3847 = 109.5px. Element ~65 tall so top = 77. */
body[data-page="activities"] .act-cta__heading {
  position: absolute;
  left: 50%;
  top: min(77px, calc(77 / 1920 * 100vw));
  transform: translateX(-50%);
  margin: 0;
  font-family: 'STIX Two Text', serif;
  font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: calc(65 / 52);
  color: #FAFAFA;
  text-align: center;
  white-space: nowrap;
}

/* Three buttons row — Figma left edges 545 / 829 / 1113. Total row
   width = 1113+244-545 = 812. Center of row at x = 545+812/2 = 951
   (NOT 960; Figma deliberately offsets the row 9px left of viewport
   center). We anchor with explicit left so the verifier sees the
   exact x-coords from Figma. Within section: top = 4034-3847 = 187. */
body[data-page="activities"] .act-cta__buttons {
  position: absolute;
  /* Act-r34 (per Anita): the 3rd "View Programs & Retreats" button is back,
     so the row re-centres at left = 545 (Figma's 9px-left-of-centre anchor). */
  left: min(545px, calc(545 / 1920 * 100vw));
  top: min(187px, calc(187 / 1920 * 100vw));
  display: flex !important;
  gap: min(40px, calc(40 / 1920 * 100vw)) !important;
}

/* Act-r34 (per Anita): "View Programs & Retreats" is restored (programs
   aren't live for phase 1) with a small "Coming Soon" pill on the button. */
body[data-page="activities"] .act-cta__btn--programs {
  position: relative;
  overflow: visible;
}
body[data-page="activities"] .act-cta__soon {
  position: absolute;
  top: max(-11px, calc(-11 / 1920 * 100vw));
  right: max(-10px, calc(-10 / 1920 * 100vw));
  background: #8F2B31;
  color: #FDFBF3;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: min(11px, calc(11 / 1920 * 100vw));
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: min(2px, calc(2 / 1920 * 100vw)) min(11px, calc(11 / 1920 * 100vw));
  border-radius: 100px;
  white-space: nowrap;
  pointer-events: none;
}

/* Button — Figma node 4148:3044 (Button/Secondary). 244x60, bg #FAFAFA,
   border-radius 40, padding 20 / 10. Label Inter Medium 16/20 #5A381C
   + 20x20 lucide chevron-right icon, 12px gap. */
body[data-page="activities"] .act-cta__btn {
  width: min(244px, calc(244 / 1920 * 100vw));
  height: min(60px, calc(60 / 1920 * 100vw));
  background: #FAFAFA;
  border-radius: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: min(12px, calc(12 / 1920 * 100vw));
  padding: min(10px, calc(10 / 1920 * 100vw)) min(20px, calc(20 / 1920 * 100vw));
  box-sizing: border-box;
  text-decoration: none;
  flex-shrink: 0;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
body[data-page="activities"] .act-cta__btn-label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: min(16px, calc(16 / 1920 * 100vw));
  line-height: calc(20 / 16);
  color: #5A381C;
  white-space: nowrap;
}
body[data-page="activities"] .act-cta__btn-arrow {
  /* Filled dark-brown circle with the white arrow chevron inside,
     per Figma image #40. Matches the Button/Secondary asset in the
     Figma dump (20x20 #5A381C circle, white vectors inside). */
  width: min(20px, calc(20 / 1920 * 100vw));
  height: min(20px, calc(20 / 1920 * 100vw));
  border-radius: 50%;
  background: #5A381C;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s ease, color 0.25s ease;
}
body[data-page="activities"] .act-cta__btn-arrow svg {
  width: 65%;
  height: 65%;
}
/* Hover state — mirrors site-wide button hover (wisdom/sound-healing):
   maroon fill, light label. */
body[data-page="activities"] .act-cta__btn:hover {
  background: #5E2A29;
}
body[data-page="activities"] .act-cta__btn:hover .act-cta__btn-label {
  color: #FAFAFA;
}
body[data-page="activities"] .act-cta__btn:hover .act-cta__btn-arrow {
  /* On hover the pill turns maroon — invert the arrow circle to
     stay readable: white fill with the dark chevron inside. */
  background: #FAFAFA;
  color: #5E2A29;
  transform: translateX(3px);
}

/* ============ MOBILE OVERRIDES ============
   The base styles.css + mobile.css already handle the global header,
   footer, and announcement bar at small viewports. Below 768 the
   absolute-positioned hero/card layout would explode; we collapse to
   a vertical flow. Per CLAUDE.md, mobile.css owns the ≤768 overrides,
   but the page-specific reset above leaves us responsible for keeping
   stuff readable. */
/* ============================================================
   MOBILE 1:1 — Figma artboard 4149:6539 (Activities, 390x4643).
   Layout scales with min(Xpx, calc(X/390*100vw)); TEXT is fixed px.
   Hero = photo (588) + questions band (202, #f5f2ec). Cards become a
   uniform vertical stack (title -> image -> body -> link) via
   display:contents on the copy block + flex order (no desktop HTML change).
   ============================================================ */
@media (max-width: 1023px) {
  /* ---------- HERO ---------- */
  body[data-page="activities"] .act-hero {
    position: relative;
    height: min(790px, calc(790 / 390 * 100vw));   /* photo 588 + band 202 */
    min-height: 0;
    padding: 0;
    background: #f5f2ec;   /* questions band shows below the photo */
    overflow: hidden;
  }
  body[data-page="activities"] .act-hero__image {
    position: absolute; left: 0; right: 0; top: 0;
    height: min(588px, calc(588 / 390 * 100vw));
    /* Act-r35: the source JPG (3840x2560) carries a blank WHITE band across
       its bottom ~26% (content ends y=1903/2560). The old 291.5% / 59% 100%
       Figma crop bottom-anchored the photo, so tall phones showed pavement +
       feet + the white band (which the contrast(0.68) filter renders GREY),
       and the r32 cover fix at 480-767 height-fit the FULL image — white band
       included — greying the hero bottom on iPad-mini-class widths (744).
       Fix: a cropped asset (activities-hero-mobile-v2.jpg, 1800x891 = the
       photo content only, white band removed) + cover. !important because
       the original is set inline on the element style attribute. Cover
       height-fits the 588 band; 85% x centres the two yoga figures
       (source x 0.59-0.875). Applies to ALL of <768 — supersedes r32. */
    background-image: url('assets/activities-hero-mobile-v2.jpg') !important;
    background-size: cover;
    background-position: 85% 50%;
    /* The browser renders the JPG more vivid/contrasty than the Figma's matte
       grade (sampled at matching points: my brights ~15% hotter, darks darker +
       more saturated). Match the Figma's faded look — same approach as the Our
       Story hero. contrast(0.68) saturate(0.82) fit the sampled targets best
       (total color error 340 -> 78 across 6 points). Mobile-only; desktop intact. */
    filter: contrast(0.68) saturate(0.82);
  }
  body[data-page="activities"] .act-hero__veil {
    position: absolute; left: 0; right: 0; top: 0;
    height: min(588px, calc(588 / 390 * 100vw));
    /* Figma keeps the photo FULLY bright through ~0.75 (sampled center ~177-191),
       then a scrim darkens only the bottom text band: ~101 (Activities .84),
       ~87 (.88), ~81 (bottom). The old gradient started at 32% and dimmed the
       whole lower half — that's what read "too dark". Start the scrim at 76%
       and reach ~0.50 by the title line (my bright natural ~200-215 → ~100-107). */
    background: linear-gradient(180deg, rgba(0,0,0,0) 76%, rgba(0,0,0,0.50) 84%);
  }
  body[data-page="activities"] .act-hero__inner {
    position: absolute; inset: 0;
    left: 0; top: 0; width: 100%; height: 100%;
  }
  /* "Activities" — STIX 32 white, centred, center y=494 from photo top */
  body[data-page="activities"] .act-hero__title {
    position: absolute; left: 50%; top: min(494px, calc(494 / 390 * 100vw));
    transform: translate(-50%, -50%);
    width: auto; height: auto; margin: 0;
    font-family: 'STIX Two Text', serif; font-weight: 500;
    font-size: 32px; line-height: 1.05; color: #FAFAFA;
    text-align: center; white-space: nowrap;
  }
  /* Kicker — Inter Medium 12/20 uppercase white, centred, 2 lines, w281 */
  body[data-page="activities"] .act-hero__kicker {
    position: absolute; left: 50%; top: min(521px, calc(521 / 390 * 100vw));
    transform: translateX(-50%);
    width: min(281px, calc(281 / 390 * 100vw)); margin: 0;
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 12px; line-height: 20px; letter-spacing: 0.84px;
    text-transform: uppercase; color: #FAFAFA;
    text-align: center; white-space: normal;
  }
  /* 3 questions — STIX italic 16/28 #5e2a29 centred, on the cream band */
  body[data-page="activities"] .act-hero__questions {
    position: absolute; left: 50%; top: min(610px, calc(610 / 390 * 100vw));
    transform: translateX(-50%);
    width: auto; height: auto;
  }
  body[data-page="activities"] .act-hero__line { display: none; }
  body[data-page="activities"] .act-hero__quotes {
    position: static; left: auto; width: auto; margin: 0; padding: 0;
    display: flex !important; flex-direction: column !important;
    align-items: center;
    gap: min(15px, calc(15 / 390 * 100vw)) !important;   /* 43 row pitch - 28 lh */
  }
  body[data-page="activities"] .act-hero__quotes li {
    font-family: 'STIX Two Text', serif; font-style: italic; font-weight: 400;
    font-size: 16px; line-height: 28px; color: #5e2a29;
    text-align: center; white-space: nowrap; margin: 0; padding: 0;
  }
  /* "Explore the paths below" + down arrow — STIX italic 14 #4a3b2e */
  body[data-page="activities"] .act-hero__scroll {
    position: absolute; left: 50%; top: min(739px, calc(739 / 390 * 100vw));
    transform: translateX(-50%);
    width: auto; height: auto;
    font-family: 'STIX Two Text', serif; font-style: italic; font-weight: 400;
    font-size: 14px; line-height: 28px; color: #4a3b2e;
    display: inline-flex; align-items: center; gap: min(6px, calc(6 / 390 * 100vw));
    white-space: nowrap;
  }
  body[data-page="activities"] .act-hero__scroll svg {
    width: 11px; height: 11px;
  }

  /* ---------- 5 PATH CARDS — uniform vertical stack ---------- */
  body[data-page="activities"] .act-paths {
    position: static;
    padding: min(27px, calc(27 / 390 * 100vw)) 0 min(70px, calc(70 / 390 * 100vw));
    display: flex; flex-direction: column;
    gap: min(70px, calc(70 / 390 * 100vw)) !important;
  }
  body[data-page="activities"] .act-path-card,
  body[data-page="activities"] .act-path-card--reverse {
    position: static; width: 100%; height: auto; margin: 0;
    display: flex; flex-direction: column; align-items: stretch;
    padding: 0;   /* per-element margins instead — heading needs more width than image */
  }
  /* flatten copy so title/body/cta interleave with the photo */
  body[data-page="activities"] .act-path-card__copy { display: contents; }
  /* Heading inset 30 left / ~16 right (Figma node extends to ~372) so
     "Meditation as a Path Inward" stays on one line */
  body[data-page="activities"] .act-path-card__title {
    position: static; order: 1; width: auto;
    margin: 0 min(16px, calc(16 / 390 * 100vw)) min(15px, calc(15 / 390 * 100vw)) min(30px, calc(30 / 390 * 100vw));
    font-family: 'STIX Two Text', serif; font-style: normal; font-weight: 500;
    font-size: 28px; line-height: 1.12; color: #5e2a29;
  }
  body[data-page="activities"] .act-path-card__title em { font-style: italic; font-weight: 500; }
  /* kill the desktop per-card width override (700/1920*100vw collapses to 142px
     at mobile and forced "Meditation as a Path Inward" onto 3 lines) */
  body[data-page="activities"] .act-path-card--meditation .act-path-card__title { width: auto; }
  body[data-page="activities"] .act-path-card__photo,
  body[data-page="activities"] .act-path-card--reverse .act-path-card__photo {
    position: static; order: 2; width: auto;
    height: min(202px, calc(202 / 390 * 100vw));
    border-radius: min(4px, calc(4 / 390 * 100vw));
    background-size: cover; background-position: center;
    margin: 0 min(33px, calc(33 / 390 * 100vw)) min(25px, calc(25 / 390 * 100vw));   /* -> 324 wide ≈ Figma 323 */
  }
  body[data-page="activities"] .act-path-card__copy,
  body[data-page="activities"] .act-path-card--reverse .act-path-card__copy { order: 0; }
  body[data-page="activities"] .act-path-card__body {
    position: static; order: 3; width: auto;
    margin: 0 min(33px, calc(33 / 390 * 100vw)) min(18px, calc(18 / 390 * 100vw)) min(35px, calc(35 / 390 * 100vw));
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 26px; color: #282828;
  }
  body[data-page="activities"] .act-path-card__cta {
    position: static; order: 4; width: auto; top: auto; align-self: flex-start;
    margin: 0 0 0 min(35px, calc(35 / 390 * 100vw));
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 14px; line-height: 32px; color: #5e2a29;
    text-decoration: underline; text-underline-offset: 2px;
    display: inline-flex; align-items: center; gap: min(10px, calc(10 / 390 * 100vw));
  }
  body[data-page="activities"] .act-path-card__cta svg { width: 11px; height: 9px; }

  /* ---------- INSIDE THE EXPERIENCE (video testimonials, stacked) ---------- */
  body[data-page="activities"] .act-experience {
    padding: 0 0 min(70px, calc(70 / 390 * 100vw));
  }
  body[data-page="activities"] .act-experience__heading { font-size: 28px; line-height: 1.1; text-transform: none; }
  body[data-page="activities"] .exp-carousel {
    width: min(350px, calc(350 / 390 * 100vw));
    margin: min(28px, calc(28 / 390 * 100vw)) auto 0;
  }
  body[data-page="activities"] .exp-videos { gap: min(16px, calc(16 / 390 * 100vw)); }
  body[data-page="activities"] .exp-carousel__nav { margin-top: min(24px, calc(24 / 390 * 100vw)); gap: min(12px, calc(12 / 390 * 100vw)); }
  body[data-page="activities"] .exp-carousel__arrow {
    width: min(28px, calc(28 / 390 * 100vw)); height: min(28px, calc(28 / 390 * 100vw));
  }
  body[data-page="activities"] .exp-carousel__arrow svg { width: 20px; height: 20px; }
  body[data-page="activities"] .exp-carousel__dot { width: 5px; height: 5px; }
  body[data-page="activities"] .exp-carousel__dot.is-active { width: 18px; }
  body[data-page="activities"] .exp-video { border-radius: min(8px, calc(8 / 390 * 100vw)); }
  body[data-page="activities"] .exp-video__play {
    width: min(48px, calc(48 / 390 * 100vw));
    height: min(48px, calc(48 / 390 * 100vw));
  }

  /* ---------- BEGIN YOUR JOURNEY (cream #f0eade band) ---------- */
  body[data-page="activities"] .act-cta {
    position: static; height: auto; min-height: 0;
    background: #f0eade;
    padding: min(58px, calc(58 / 390 * 100vw)) 0 min(60px, calc(60 / 390 * 100vw));
  }
  body[data-page="activities"] .act-cta__inner {
    position: static; width: 100%; height: auto;
    display: flex; flex-direction: column; align-items: center;
  }
  body[data-page="activities"] .act-cta__heading {
    position: static; transform: none; left: auto; top: auto;
    margin: 0 0 min(20px, calc(20 / 390 * 100vw));
    font-family: 'STIX Two Text', serif; font-weight: 500;
    font-size: 20px; line-height: 32px; color: #5e2a29;
    text-align: center; text-transform: capitalize; white-space: nowrap;
  }
  body[data-page="activities"] .act-cta__buttons {
    position: static; transform: none; left: auto; top: auto;
    display: flex !important; flex-direction: column !important;
    align-items: center;
    gap: min(20px, calc(20 / 390 * 100vw)) !important;
  }
  body[data-page="activities"] .act-cta__btn {
    width: min(330px, calc(330 / 390 * 100vw));
    height: min(44px, calc(44 / 390 * 100vw));
    min-height: min(44px, calc(44 / 390 * 100vw));
    background: #fafafa; border: 1px solid #f0eade; border-radius: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    gap: min(12px, calc(12 / 390 * 100vw));
    padding: 0 min(20px, calc(20 / 390 * 100vw));
    box-sizing: border-box;
  }
  body[data-page="activities"] .act-cta__btn-label {
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 14px; line-height: 20px; color: #5a381c; white-space: nowrap;
  }
  body[data-page="activities"] .act-cta__btn-arrow {
    width: 20px; height: 20px; flex-shrink: 0;
  }
  body[data-page="activities"] .act-cta__soon {
    font-size: 10px; line-height: 1.6; padding: 2px 9px; top: -8px; right: -6px;
  }
}

/* Act-r32 (min-width:480px) and (max-width:767px) override REMOVED in
   Act-r35: the whole <768 range now uses the white-band-free
   activities-hero-mobile-v2.jpg with cover / 85% 50% (see the hero
   block above), which frames the yoga figures at every mobile width. */