/* ============================================================
   COURSES & WORKSHOPS — 1:1 Figma rebuild
   Page frame: 1920 x 6408, bg #FAFAFA
   Section vertical map (page-absolute Y):
     Hero:                      174 -> 877   (h 703)
     Learning at the Ashram:    877 -> 1622  (h 745 cream band)
     Ways to Learn:            1722 -> 2289  (heading + 3 cards)
     Holistic Wellness:        2389 -> 3369  (h 980 dark amber band)
     Inside Experience:        3469 -> 4517  (heading + card 786)
     Upcoming Courses & WS:    4617 -> 5584  (heading + 3 cards + nav)
     Footer:                   5684 -> 6408  (h 724)
   All sizes scale via min(Xpx, calc(X / 1920 * 100vw)).
============================================================ */

body[data-page="courses"] section,
body[data-page="courses"] [class*="__inner"]:not(.inner-hero__inner):not(.courses-holistic__inner) {
  padding-top: 0; padding-bottom: 0; gap: 0; min-height: 0;
}
body[data-page="courses"] { background: #FAFAFA; }

/* ============ HERO ============ */
body[data-page="courses"] .inner-hero {
  width: 100%;
  height: min(703px, calc(703 / 1920 * 100vw));
  position: relative;
  overflow: hidden;
}
body[data-page="courses"] .inner-hero__image {
  position: absolute; inset: 0;
  background-size: 106.8% auto; /* QC r11: Figma image 2051x983 in 1920 mask */
  background-position: 97.7% 25.3%; /* QC r11: top-right crop per Figma (x=-128 y=71) */
}
body[data-page="courses"] .inner-hero__veil {
  position: absolute; inset: 0;
  /* Rectangle 34624540 — 90deg gradient rotated 180 -> 270deg. */
  background: linear-gradient(270deg, rgba(132,132,132,0.1) 45%, rgba(42,42,42,0.5) 89.51%);
}
body[data-page="courses"] .inner-hero__inner {
  position: absolute;
  left: min(130px, calc(130 / 1920 * 100vw));
  top: min(529px, calc(529 / 1920 * 100vw)); /* 703 - 174 = 529 */
  width: min(900px, calc(900 / 1920 * 100vw));
  height: auto !important; min-height: 0 !important;
  padding: 0; margin: 0; text-align: left;
}
body[data-page="courses"] .inner-hero__kicker {
  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;
  margin: 0;
  white-space: nowrap;
}
body[data-page="courses"] .inner-hero__title {
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-size: min(64px, calc(64 / 1920 * 100vw));
  line-height: calc(80 / 64);
  color: #FAFAFA;
  margin: 0;
}
body[data-page="courses"] .courses-hero-cta {
  position: absolute;
  left: min(1462px, calc(1462 / 1920 * 100vw));
  top: min(569px, calc(569 / 1920 * 100vw)); /* 743 - 174 */
  width: min(341px, calc(341 / 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));
  text-decoration: none;
  padding: min(10px, calc(10 / 1920 * 100vw)) min(20px, calc(20 / 1920 * 100vw));
  box-sizing: border-box;
  z-index: 2;
  transition: background 0.25s ease, color 0.25s ease;
}
body[data-page="courses"] .courses-hero-cta__label {
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(16px, calc(16 / 1920 * 100vw));
  line-height: calc(20 / 16);
  color: #5E2A29;
  white-space: nowrap;
}
body[data-page="courses"] .courses-hero-cta__arrow {
  width: min(20px, calc(20 / 1920 * 100vw));
  height: min(20px, calc(20 / 1920 * 100vw));
  display: block; flex-shrink: 0; overflow: visible;
}
body[data-page="courses"] .courses-hero-cta:hover { background: #5E2A29; }
body[data-page="courses"] .courses-hero-cta:hover .courses-hero-cta__label { color: #FAFAFA; }
body[data-page="courses"] .courses-hero-cta:hover .courses-hero-cta__arrow rect { fill: #FAFAFA; }
body[data-page="courses"] .courses-hero-cta:hover .courses-hero-cta__arrow path { stroke: #5E2A29; }

/* ============ LEARNING AT THE ASHRAM — cream band 877 -> 1622 ============ */
body[data-page="courses"] .courses-learning {
  position: relative;
  width: 100%;
  height: min(745px, calc(745 / 1920 * 100vw));
  background: rgba(240, 234, 222, 0.5);
}
body[data-page="courses"] .courses-learning__video {
  position: absolute;
  left: min(131px, calc(131 / 1920 * 100vw));
  top: min(77px, calc(77 / 1920 * 100vw)); /* 954 - 877 */
  width: min(879px, calc(879 / 1920 * 100vw));
  height: min(591px, calc(591 / 1920 * 100vw));
  background-image: var(--courses-learning-bg);
  background-size: cover;
  background-position: center;
  border-radius: min(8px, calc(8 / 1920 * 100vw));
  display: block;
  overflow: hidden;
  cursor: pointer;
}
body[data-page="courses"] .courses-learning__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="courses"] .courses-learning__play svg {
  width: 40%; height: 40%;
}
/* Inline-play iframe keeps the .courses-learning__video class so it
   inherits the thumbnail's exact box (no reflow when playback starts). */
body[data-page="courses"] .courses-learning__iframe {
  border: 0;
  background: #000;
}
body[data-page="courses"] .courses-learning__copy {
  position: absolute;
  left: min(1085px, calc(1085 / 1920 * 100vw));
  top: min(255px, calc(255 / 1920 * 100vw)); /* 1132 - 877 */
  width: min(679px, calc(679 / 1920 * 100vw));
}
body[data-page="courses"] .courses-learning__copy h2 {
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: calc(58 / 52);
  color: #5E2A29;
  margin: 0;
}
body[data-page="courses"] .courses-learning__copy p {
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(38 / 20);
  color: #282828;
  width: min(663px, calc(663 / 1920 * 100vw));
  margin: min(25px, calc(25 / 1920 * 100vw)) 0 0;
}

/* ============ WAYS TO LEARN 1722 -> 2289 ============ */
body[data-page="courses"] .courses-ways {
  position: relative;
  width: 100%;
  padding: min(100px, calc(100 / 1920 * 100vw)) 0 0; /* 1722 - 1622 */
}
body[data-page="courses"] .courses-ways__head {
  display: grid;
  grid-template-columns: min(499px, calc(499 / 1920 * 100vw)) 1fr;
  column-gap: min(363px, calc(363 / 1920 * 100vw)); /* 990 - 128 - 499 = 363 */
  align-items: start;
  padding: 0 min(128px, calc(128 / 1920 * 100vw));
  margin-bottom: min(70px, calc(70 / 1920 * 100vw)); /* 1868 - 1722 - 76 */
}
body[data-page="courses"] .courses-ways__head h2 {
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: calc(58 / 52);
  color: #5E2A29;
  margin: 0;
}
body[data-page="courses"] .courses-ways__head p {
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(38 / 20);
  color: #282828;
  margin: 0;
  width: min(783px, calc(783 / 1920 * 100vw));
}
body[data-page="courses"] .courses-ways__grid {
  display: grid;
  grid-template-columns: repeat(3, min(530px, calc(530 / 1920 * 100vw)));
  gap: min(22px, calc(22 / 1920 * 100vw));
  padding-left: min(128px, calc(128 / 1920 * 100vw));
}
body[data-page="courses"] .courses-way-card {
  background: rgba(240, 234, 222, 0.5);
  border-radius: min(8px, calc(8 / 1920 * 100vw));
  padding: min(24px, calc(24 / 1920 * 100vw));
  display: flex; flex-direction: column;
  gap: min(50px, calc(50 / 1920 * 100vw));
  height: min(421px, calc(421 / 1920 * 100vw));
  box-sizing: border-box;
}
body[data-page="courses"] .courses-way-card__icon {
  width: min(121px, calc(121 / 1920 * 100vw));
  height: min(121px, calc(121 / 1920 * 100vw));
  display: block;
}
body[data-page="courses"] .courses-way-card__body {
  display: flex; flex-direction: column;
  gap: min(25px, calc(25 / 1920 * 100vw));
}
body[data-page="courses"] .courses-way-card__head {
  display: flex; flex-direction: column;
  gap: min(12px, calc(12 / 1920 * 100vw));
}
body[data-page="courses"] .courses-way-card__title {
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: min(24px, calc(24 / 1920 * 100vw));
  line-height: calc(35 / 24);
  color: #5E2A29;
  margin: 0;
  text-transform: uppercase; /* QC r14 */
}
body[data-page="courses"] .courses-way-card__tag {
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(16px, calc(16 / 1920 * 100vw));
  line-height: calc(24 / 16);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #282828;
  margin: 0;
}
body[data-page="courses"] .courses-way-card__desc {
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(32 / 20);
  color: #282828;
  margin: 0;
}

/* ============ HOLISTIC WELLNESS 2389 -> 3369 (h 980) ============ */
body[data-page="courses"] .courses-holistic {
  position: relative;
  width: 100%;
  height: min(980px, calc(980 / 1920 * 100vw));
  overflow: hidden;
  margin-top: min(100px, calc(100 / 1920 * 100vw)); /* 2389 - 2289 */
}
body[data-page="courses"] .courses-holistic__bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(0deg, rgba(124,92,27,0.2), rgba(124,92,27,0.2)),
    linear-gradient(0deg, #77531A, #77531A),
    var(--courses-holistic-bg);
  background-blend-mode: normal, overlay, normal;
  background-size: cover;
  background-position: center;
  filter: blur(5px);
  transform: scaleX(-1);
}
body[data-page="courses"] .courses-holistic__veil {
  position: absolute; inset: 0;
  background: linear-gradient(270deg, rgba(83,54,6,0) 0%, rgba(83,54,6,0.56) 70.67%, rgba(83,54,6,0.7) 100%);
}
body[data-page="courses"] .courses-holistic__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Copy column — Figma Frame 2147224182: left=95, width=725, vertically
   centered, gap 36 between heading group + body. */
body[data-page="courses"] .courses-holistic__copy {
  position: absolute;
  left: min(95px, calc(95 / 1920 * 100vw));
  top: 50%;
  transform: translateY(-50%);
  width: min(725px, calc(725 / 1920 * 100vw));
  display: flex; flex-direction: column;
  gap: min(16px, calc(16 / 1920 * 100vw));
}
body[data-page="courses"] .courses-holistic__title {
  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: #FAFAFA;
  margin: 0;
}
body[data-page="courses"] .courses-holistic__body {
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(28 / 20);
  color: #FAFAFA;
  margin: 0;
}
/* Cards column — Figma Frame 2147224234: left=1011.5, top=109.32,
   width=810 (but each card extends to 856 wide), height=767. */
body[data-page="courses"] .courses-holistic__cards {
  position: absolute;
  left: min(1011.5px, calc(1011.5 / 1920 * 100vw));
  top: min(109.32px, calc(109.32 / 1920 * 100vw));
  width: min(856px, calc(856 / 1920 * 100vw));
  display: flex; flex-direction: column;
  gap: min(24px, calc(24 / 1920 * 100vw));
}
body[data-page="courses"] .courses-health-card {
  display: flex; flex-direction: row;
  align-items: center;
  /* Tightened gap 33 -> 20 so the description column has room for
     "...reconnect to your inner peace." on a single line per Figma
     (description box is 707 wide at 20px Inter). */
  gap: min(20px, calc(20 / 1920 * 100vw));
  padding: min(32px, calc(32 / 1920 * 100vw)) min(24px, calc(24 / 1920 * 100vw));
  background: #F0EADE;
  border-radius: min(12px, calc(12 / 1920 * 100vw));
  /* Each card is fixed 856 wide regardless of column constraint. */
  width: 100%;
  box-sizing: border-box;
  min-height: min(133px, calc(133 / 1920 * 100vw));
}
/* Allow flex child to shrink BELOW its content size so the
   description line never wraps prematurely. */
body[data-page="courses"] .courses-health-card__body {
  min-width: 0;
}
body[data-page="courses"] .courses-health-card__icon {
  display: block;
  flex-shrink: 0;
  /* Fixed-width icon column so every card's title and description
     start at the same X regardless of the icon's natural aspect
     (user image #120). Width = widest icon (Mental = 82) rounded
     to 90 for a small breath. height: auto + object-fit: contain
     keeps each icon's natural proportions within the box, centered. */
  width: min(90px, calc(90 / 1920 * 100vw));
  height: min(78px, calc(78 / 1920 * 100vw));
  object-fit: contain;
  object-position: center;
}
/* Drop the Social-Health-specific override — now everyone uses the
   same 90x78 column with object-fit: contain. */
/* Stretch the body to give two paragraphs natural spacing. */
body[data-page="courses"] .courses-holistic__copy {
  gap: min(20px, calc(20 / 1920 * 100vw));
}
body[data-page="courses"] .courses-health-card__body {
  display: flex; flex-direction: column;
  gap: min(6px, calc(6 / 1920 * 100vw));
}
body[data-page="courses"] .courses-health-card__title {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: min(24px, calc(24 / 1920 * 100vw));
  line-height: calc(35 / 24);
  color: #4A3B2E;
  margin: 0;
}
body[data-page="courses"] .courses-health-card__desc {
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(28 / 20);
  color: #282828;
  margin: 0;
}

/* ============ INSIDE THE EXPERIENCE 3469 -> 4517 ============ */
body[data-page="courses"] .courses-experience {
  position: relative;
  width: 100%;
  /* 150 bottom keeps the video grid off the footer (user QC 7/2). */
  padding: min(100px, calc(100 / 1920 * 100vw)) 0 min(150px, calc(150 / 1920 * 100vw)); /* 3469 - 3369 */
}
body[data-page="courses"] .courses-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;
}
/* Written testimonial quote cards — no videos remain for this page, so
   the section is heading + quotes. Mirrors the original pre-video
   experience card (cream card, centered serif quote) in the site's
   STIX italic blockquote idiom. */
body[data-page="courses"] .exp-quotes {
  width: min(1096px, calc(1096 / 1920 * 100vw));
  margin: min(70px, calc(70 / 1920 * 100vw)) auto 0;
  display: flex;
  flex-direction: column;
  gap: min(40px, calc(40 / 1920 * 100vw));
}
body[data-page="courses"] .exp-quote-card {
  background: rgba(240, 234, 222, 0.5);
  border-radius: min(20px, calc(20 / 1920 * 100vw));
  padding: min(70px, calc(70 / 1920 * 100vw)) min(80px, calc(80 / 1920 * 100vw));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
body[data-page="courses"] .exp-quote-card__text {
  max-width: min(878px, calc(878 / 1920 * 100vw));
  margin: 0;
  font-family: 'STIX Two Text', serif; font-weight: 400; font-style: italic;
  font-size: min(36px, calc(36 / 1920 * 100vw));
  line-height: calc(48 / 36);
  letter-spacing: 0.02em;
  color: #282828;
}
body[data-page="courses"] .exp-quote-card__attribution {
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(24px, calc(24 / 1920 * 100vw));
  line-height: 1;
  color: #5E2A29;
  margin: min(40px, calc(40 / 1920 * 100vw)) 0 0;
}
body[data-page="courses"] .courses-events__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="courses"] .courses-events__arrow:hover {
  background: #5E2A29; color: #FAFAFA;
}
body[data-page="courses"] .courses-events__arrow svg {
  width: min(42px, calc(42 / 1920 * 100vw));
  height: min(42px, calc(42 / 1920 * 100vw));
}

/* ============ UPCOMING COURSES & WORKSHOPS 4617 -> 5584 ============
   Experience card ends at 4383; events heading expected at 4617.
   Gap = 234 (same pattern as wisdom). */
body[data-page="courses"] .courses-events {
  position: relative;
  width: 100%;
  padding: min(234px, calc(234 / 1920 * 100vw)) 0 min(100px, calc(100 / 1920 * 100vw));
}
body[data-page="courses"] .courses-events__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;
}
body[data-page="courses"] .courses-events__grid {
  display: grid;
  grid-template-columns: repeat(3, min(530px, calc(530 / 1920 * 100vw)));
  gap: min(23px, calc(23 / 1920 * 100vw));
  justify-content: center;
  margin: min(70px, calc(70 / 1920 * 100vw)) 0 0;
}
body[data-page="courses"] .courses-event-card {
  display: flex; flex-direction: column;
  background: rgba(240, 234, 222, 0.5);
  border-radius: min(12px, calc(12 / 1920 * 100vw));
  overflow: hidden;
  padding-bottom: min(24px, calc(24 / 1920 * 100vw));
  min-height: min(715px, calc(715 / 1920 * 100vw));
}
body[data-page="courses"] .courses-event-card__photo {
  position: relative;
  width: 100%;
  height: min(368px, calc(368 / 1920 * 100vw));
  background-size: cover;
  background-position: center;
}
body[data-page="courses"] .courses-event-card__tags {
  position: absolute;
  left: min(26px, calc(26 / 1920 * 100vw));
  bottom: min(20px, calc(20 / 1920 * 100vw));
  display: flex; gap: min(9px, calc(9 / 1920 * 100vw));
}
body[data-page="courses"] .courses-event-tag {
  background: #FFFFFF;
  border-radius: 20px;
  padding: min(4px, calc(4 / 1920 * 100vw)) min(20px, calc(20 / 1920 * 100vw));
  font-family: 'Open Sans', 'Inter', sans-serif;
  font-weight: 400;
  font-size: min(19px, calc(19 / 1920 * 100vw));
  line-height: calc(26 / 19);
  color: #46474B;
}
body[data-page="courses"] .courses-event-card__body {
  padding: min(24px, calc(24 / 1920 * 100vw)) min(36px, calc(36 / 1920 * 100vw)) 0;
  display: flex; flex-direction: column;
  gap: min(16px, calc(16 / 1920 * 100vw));
  flex: 1;
}
body[data-page="courses"] .courses-event-card__date {
  display: flex; align-items: center;
  gap: min(14px, calc(14 / 1920 * 100vw));
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(18px, calc(18 / 1920 * 100vw));
  line-height: calc(28 / 18);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5E2A29;
  margin: 0;
}
body[data-page="courses"] .courses-event-card__bullet {
  width: min(20px, calc(20 / 1920 * 100vw));
  height: min(20px, calc(20 / 1920 * 100vw));
  background: #5E2A29;
  display: inline-block;
  flex-shrink: 0;
  /* Figma date icon is a calendar, not a solid square — mask the brown box. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}
body[data-page="courses"] .courses-event-card__title {
  font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: min(28px, calc(28 / 1920 * 100vw));
  line-height: calc(42 / 28);
  color: #5E2A29;
  margin: 0;
}
body[data-page="courses"] .courses-event-card__desc {
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(30 / 20);
  color: #282828;
  margin: 0;
}
body[data-page="courses"] .courses-event-card__cta {
  display: flex;
  align-items: center; justify-content: center;
  background: #5E2A29;
  color: #FFFFFF;
  border-radius: 20px;
  padding: min(13px, calc(13 / 1920 * 100vw)) min(20px, calc(20 / 1920 * 100vw));
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(18px, calc(18 / 1920 * 100vw));
  line-height: calc(22 / 18);
  text-decoration: none;
  margin-top: auto;
}
body[data-page="courses"] .courses-events__nav {
  display: flex;
  justify-content: center;
  gap: min(33px, calc(33 / 1920 * 100vw));
  margin: min(70px, calc(70 / 1920 * 100vw)) 0 0;
}

/* ============================================================
   MOBILE 1:1 — Figma artboard 4149:5796 (Courses, 390x5411).
   Layout scales min(Xpx, calc(X/390*100vw)); TEXT fixed px.
   Hero (centred, matte via mobile.css) -> Learning (text + full-width
   video) -> Ways to Learn (heading + 3 cream icon cards) -> Holistic
   Wellness (dark amber band, white copy + 5 icon-left health cards) ->
   Inside the Experience (beige testimonial card) -> Upcoming events
   (single carousel card).
   ============================================================ */
/* ===== QC Phase-1 hides ===== */
body[data-page="courses"] .courses-hero-cta { display: none !important; } /* QC r31 */
body[data-page="courses"] .courses-events { display: none !important; }   /* QC r33: hide upcoming-events section */

@media (max-width: 1023px) {
  /* ---------- HERO (photo 588, centred white copy) ---------- */
  body[data-page="courses"] .inner-hero {
    height: min(588px, calc(588 / 390 * 100vw)); min-height: 0;
  }
  body[data-page="courses"] .inner-hero__image {
    background-size: cover; background-position: center 42%;
    transform: none;   /* defeat base scale(1.04) over-zoom (matte filter is in mobile.css) */
  }
  body[data-page="courses"] .inner-hero__veil {
    /* Figma keeps the photo bright through the kicker; only the very bottom
       darkens (sampled ~68 at the foot). Light bottom-only gradient. */
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 66%, rgba(0,0,0,0.30) 84%, rgba(0,0,0,0.50) 100%);
  }
  body[data-page="courses"] .inner-hero__inner {
    position: absolute; left: 50%; top: min(398px, calc(398 / 390 * 100vw));
    transform: translateX(-50%);
    width: min(340px, calc(340 / 390 * 100vw)); height: auto !important; min-height: 0 !important;
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  body[data-page="courses"] .inner-hero__kicker {
    font-size: 12px; line-height: 20px; letter-spacing: 0.84px;
    white-space: normal; text-align: center; color: #FFFFFF;
    width: 100%; max-width: none; margin: 0; text-shadow: 0 1px 10px rgba(0,0,0,0.75);
  }
  body[data-page="courses"] .inner-hero__title {
    font-size: 32px; line-height: 1.05; margin: min(10px, calc(10 / 390 * 100vw)) 0 0;
    text-align: center; white-space: nowrap; text-shadow: 0 2px 14px rgba(0,0,0,0.62);
  }
  body[data-page="courses"] .courses-hero-cta {
    position: absolute; left: 50%; top: min(517px, calc(517 / 390 * 100vw));
    transform: translateX(-50%);
    width: min(264px, calc(264 / 390 * 100vw)); height: min(40px, calc(40 / 390 * 100vw));
    background: rgba(255,255,255,0.9); border-radius: 20px;
    gap: min(8px, calc(8 / 390 * 100vw)); padding: 0 min(20px, calc(20 / 390 * 100vw));
  }
  body[data-page="courses"] .courses-hero-cta__label { font-size: 12px; line-height: 1.2; }
  body[data-page="courses"] .courses-hero-cta__arrow { width: 18px; height: 18px; }

  /* ---------- LEARNING AT THE ASHRAM (cream text -> full-width video) ---------- */
  body[data-page="courses"] .courses-learning {
    height: auto; min-height: 0; background: rgba(240,234,222,0.5);
    display: flex; flex-direction: column;
  }
  body[data-page="courses"] .courses-learning__copy {
    position: static; left: auto; top: auto; width: auto; order: 1;
    padding: min(34px, calc(34 / 390 * 100vw)) min(37px, calc(37 / 390 * 100vw)) min(30px, calc(30 / 390 * 100vw));
  }
  body[data-page="courses"] .courses-learning__copy h2 {
    font-size: 28px; line-height: 1.12; color: #5E2A29; margin: 0 0 min(18px, calc(18 / 390 * 100vw));
  }
  body[data-page="courses"] .courses-learning__copy p {
    font-size: 14px; line-height: 26px; color: #282828; width: auto; margin: 0;
  }
  body[data-page="courses"] .courses-learning__video {
    position: relative; left: auto; top: auto; order: 2; width: 100%;
    height: min(245px, calc(245 / 390 * 100vw)); border-radius: 0;
    /* Figma overlays a 0.47 black scrim on the still */
    background-image: linear-gradient(rgba(0,0,0,0.30), rgba(0,0,0,0.30)), var(--courses-learning-bg);
    background-size: cover; background-position: center;
  }
  body[data-page="courses"] .courses-learning__play { width: 35px; height: 35px; }
  body[data-page="courses"] .courses-learning__iframe { background-image: none; }

  /* ---------- WAYS TO LEARN (heading + 3 cream icon cards) ---------- */
  body[data-page="courses"] .courses-ways {
    position: static; padding: min(70px, calc(70 / 390 * 100vw)) 0 0;
  }
  body[data-page="courses"] .courses-ways__head {
    display: block; grid-template-columns: none; column-gap: 0;
    padding: 0 min(37px, calc(37 / 390 * 100vw)); margin: 0 0 min(28px, calc(28 / 390 * 100vw));
  }
  body[data-page="courses"] .courses-ways__head h2 {
    font-size: 28px; line-height: 1.12; color: #5E2A29; margin: 0 0 min(20px, calc(20 / 390 * 100vw));
  }
  body[data-page="courses"] .courses-ways__head p {
    font-size: 14px; line-height: 26px; color: #282828; width: auto; margin: 0;
  }
  body[data-page="courses"] .courses-ways__grid {
    display: flex; flex-direction: column; grid-template-columns: none;
    gap: min(20px, calc(20 / 390 * 100vw)); padding-left: 0;
  }
  body[data-page="courses"] .courses-way-card {
    width: 100%; height: auto; border-radius: 0; background: rgba(240,234,222,0.5);
    padding: min(10px, calc(10 / 390 * 100vw)) min(24px, calc(24 / 390 * 100vw)) min(24px, calc(24 / 390 * 100vw));
    display: flex; flex-direction: column; gap: min(12px, calc(12 / 390 * 100vw));
  }
  body[data-page="courses"] .courses-way-card__icon { width: 63px; height: 63px; }
  body[data-page="courses"] .courses-way-card__body { gap: min(25px, calc(25 / 390 * 100vw)); }
  body[data-page="courses"] .courses-way-card__head { gap: min(12px, calc(12 / 390 * 100vw)); }
  body[data-page="courses"] .courses-way-card__title {
    font-size: 18px; line-height: 1.45; color: #5E2A29; margin: 0;
  }
  body[data-page="courses"] .courses-way-card__tag {
    font-size: 12px; line-height: 20px; letter-spacing: 0.48px; text-transform: uppercase;
    color: #282828; margin: 0;
  }
  body[data-page="courses"] .courses-way-card__desc {
    font-size: 12px; line-height: 20px; color: #282828; margin: 0;
  }

  /* ---------- HOLISTIC WELLNESS (dark amber band, white copy + 5 cards) ---------- */
  body[data-page="courses"] .courses-holistic {
    position: relative; height: auto; min-height: 0;   /* relative so the amber __bg (inset:0) covers copy + cards */
    margin-top: min(70px, calc(70 / 390 * 100vw));
    padding: min(40px, calc(40 / 390 * 100vw)) min(8px, calc(8 / 390 * 100vw)) min(34px, calc(34 / 390 * 100vw));
  }
  body[data-page="courses"] .courses-holistic__bg { filter: blur(5px); transform: scaleX(-1); }
  body[data-page="courses"] .courses-holistic__inner {
    position: relative; z-index: 1;   /* relative so z-index lifts copy+cards above the absolute amber __bg/__veil */
    display: flex; flex-direction: column; align-items: stretch;
  }
  body[data-page="courses"] .courses-holistic__copy {
    position: static; transform: none; top: auto; left: auto; width: auto;
    padding: 0 min(31px, calc(31 / 390 * 100vw)); margin: 0 0 min(28px, calc(28 / 390 * 100vw));
    gap: min(16px, calc(16 / 390 * 100vw));
  }
  body[data-page="courses"] .courses-holistic__title {
    font-size: 28px; line-height: 1.12; color: #FAFAFA; text-align: center; margin: 0;
  }
  body[data-page="courses"] .courses-holistic__body {
    font-size: 14px; line-height: 26px; color: #FAFAFA; margin: 0;
  }
  body[data-page="courses"] .courses-holistic__cards {
    position: static; left: auto; top: auto; width: auto;
    display: flex; flex-direction: column; gap: min(15px, calc(15 / 390 * 100vw));
  }
  body[data-page="courses"] .courses-health-card {
    width: 100%; min-height: min(109px, calc(109 / 390 * 100vw)); box-sizing: border-box;
    background: #F0EADE; border-radius: min(8px, calc(8 / 390 * 100vw));
    display: flex; flex-direction: row; align-items: center;
    gap: min(23px, calc(23 / 390 * 100vw)); padding: min(20px, calc(20 / 390 * 100vw));
  }
  body[data-page="courses"] .courses-health-card__icon {
    flex-shrink: 0; width: min(60px, calc(60 / 390 * 100vw)); height: min(49px, calc(49 / 390 * 100vw));
    object-fit: contain; object-position: center;
  }
  body[data-page="courses"] .courses-health-card__body { min-width: 0; gap: min(6px, calc(6 / 390 * 100vw)); }
  body[data-page="courses"] .courses-health-card__title {
    font-size: 16px; line-height: 1.45; color: #4A3B2E; margin: 0;
  }
  body[data-page="courses"] .courses-health-card__desc {
    font-size: 12px; line-height: 20px; color: #282828; margin: 0;
  }

  /* ---------- INSIDE THE EXPERIENCE (written quote cards, stacked) ---------- */
  body[data-page="courses"] .courses-experience { padding: min(70px, calc(70 / 390 * 100vw)) 0 min(56px, calc(56 / 390 * 100vw)); }
  body[data-page="courses"] .courses-experience__heading { font-size: 28px; line-height: 1.1; text-transform: none; }
  body[data-page="courses"] .exp-quotes {
    width: min(350px, calc(350 / 390 * 100vw));
    margin: min(28px, calc(28 / 390 * 100vw)) auto 0;
    gap: min(16px, calc(16 / 390 * 100vw));
  }
  body[data-page="courses"] .exp-quote-card {
    border-radius: min(12px, calc(12 / 390 * 100vw));
    padding: min(36px, calc(36 / 390 * 100vw)) min(24px, calc(24 / 390 * 100vw));
  }
  body[data-page="courses"] .exp-quote-card__text { max-width: none; font-size: 20px; line-height: 1.35; }
  body[data-page="courses"] .exp-quote-card__attribution { font-size: 14px; margin: min(20px, calc(20 / 390 * 100vw)) 0 0; }

  /* ---------- UPCOMING COURSES & WORKSHOPS (single carousel card) ---------- */
  body[data-page="courses"] .courses-events { padding: min(70px, calc(70 / 390 * 100vw)) 0 min(40px, calc(40 / 390 * 100vw)); }
  body[data-page="courses"] .courses-events__heading { font-size: 28px; line-height: 1.1; }
  body[data-page="courses"] .courses-events__grid {
    display: block; width: min(300px, calc(300 / 390 * 100vw)); margin: min(28px, calc(28 / 390 * 100vw)) auto 0;
  }
  body[data-page="courses"] .courses-event-card:not(:first-child) { display: none; }
  body[data-page="courses"] .courses-event-card {
    min-height: 0; border-radius: min(7px, calc(7 / 390 * 100vw)); padding-bottom: min(20px, calc(20 / 390 * 100vw));
  }
  body[data-page="courses"] .courses-event-card__photo { height: min(180px, calc(180 / 390 * 100vw)); }
  body[data-page="courses"] .courses-event-card__tags { left: min(16px, calc(16 / 390 * 100vw)); bottom: min(12px, calc(12 / 390 * 100vw)); gap: min(6px, calc(6 / 390 * 100vw)); }
  body[data-page="courses"] .courses-event-tag { font-size: 10px; line-height: 1.2; padding: min(3px, calc(3 / 390 * 100vw)) min(12px, calc(12 / 390 * 100vw)); }
  body[data-page="courses"] .courses-event-card__body { padding: min(14px, calc(14 / 390 * 100vw)) min(20px, calc(20 / 390 * 100vw)) 0; gap: min(8px, calc(8 / 390 * 100vw)); }
  body[data-page="courses"] .courses-event-card__date { font-size: 11px; line-height: 1.2; gap: min(8px, calc(8 / 390 * 100vw)); }
  body[data-page="courses"] .courses-event-card__bullet { width: 12px; height: 12px; }
  body[data-page="courses"] .courses-event-card__title { font-size: 17px; line-height: 1.3; }
  body[data-page="courses"] .courses-event-card__desc { font-size: 12px; line-height: 20px; }
  body[data-page="courses"] .courses-event-card__cta { font-size: 11px; border-radius: 15px; padding: min(9px, calc(9 / 390 * 100vw)) min(12px, calc(12 / 390 * 100vw)); }
  body[data-page="courses"] .courses-events__nav { margin: min(20px, calc(20 / 390 * 100vw)) 0 0; gap: min(16px, calc(16 / 390 * 100vw)); }
  body[data-page="courses"] .courses-events__arrow {
    width: min(28px, calc(28 / 390 * 100vw)); height: min(28px, calc(28 / 390 * 100vw)); border-color: #282828; color: #282828;
  }
  body[data-page="courses"] .courses-events__arrow svg { width: 20px; height: 20px; }
}