/* =====================================================================
   /courses/ only (portal bug #124, 25/09/2026; R2 29/09/2026).
   0. Hero (R2, Trina 29/09/2026): the photo is removed. A text-only hero on a soft
      lavender wash, centred like the class intro below, with three jump links.
   1. All classes: the header and class cards in the design of The Lactation
      Clinic's #classes section (clinic-proto.css, .class-link-card): bronze caps
      eyebrow, serif heading, photo cropped to 3:2 above the copy. Since R2 the cards
      sit in three groups (The Lactation Clinic, The Sleep Training Clinic,
      Workshops & Classes); each group's cards are centred, three across on desktop.
   2. "More ways to prepare" text cards (.crs-more): not on the page at present,
      the styles are kept for reuse.
   Loaded after the page CSS and before soft.css (soft.css sets the .preg-hero
   wash with !important, so the hero rules below use it too). Every rule is scoped
   to classes that exist only on /courses/.
   ===================================================================== */
html body.preg-page .crs-hero,
html body.preg-page .crs-classes,
html body.preg-page .crs-more{
  --crs-plum:#5b405f;
  --crs-plum-deep:#402f43;
  --crs-bronze:#8a5e3b;
  --crs-muted:#6f6670;
  --crs-paper:#fffdfb;
  --crs-line:rgba(91,64,95,.14);
  --crs-serif:"Playfair Display", Georgia, serif;
}

/* ---------- 0. Hero: no photo ---------- */
html body.preg-page .preg-hero.crs-hero{
  text-align:center;
  background:linear-gradient(180deg,#f3edf7 0%,#f7f2fa 55%,#faf7fc 100%);
  border-bottom:1px solid rgba(212,197,227,.55);
}
html body.preg-page .preg-hero.crs-hero::after{
  background:
    radial-gradient(42rem 22rem at 12% 0%, rgba(212,197,227,.42), rgba(212,197,227,0) 70%),
    radial-gradient(36rem 20rem at 92% 100%, rgba(234,221,206,.5), rgba(234,221,206,0) 70%) !important;
}
html body.preg-page .preg-hero.crs-hero .preg-wrap{
  padding:clamp(3.6rem,7vw,5.6rem) clamp(1.4rem,4vw,2.2rem) clamp(3rem,6vw,4.4rem);
}
html body.preg-page .preg-hero.crs-hero .bmb-eyebrow{ margin:0 0 1rem; }
html body.preg-page .preg-hero.crs-hero h1{ max-width:none; margin:0 auto; }
html body.preg-page .preg-hero.crs-hero .preg-hero-lead{ margin:1rem auto 0; }
html body.preg-page .crs-jump{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem .7rem; margin-top:1.8rem;
}
html body.preg-page .crs-jump a{
  display:inline-flex; align-items:center; min-height:44px; padding:.5rem 1.15rem;
  background:rgba(255,255,255,.86); border:1px solid #d4c5e3; border-radius:999px;
  color:#553f63; font-family:var(--font-body); font-size:.95rem; font-weight:700; line-height:1.2;
  text-decoration:none; transition:background-color .2s ease, border-color .2s ease;
}
html body.preg-page .crs-jump a:hover,
html body.preg-page .crs-jump a:focus-visible{ background:#f3edf7; border-color:#a58bbb; color:#553f63; text-decoration:none; }
html body.preg-page .crs-jump a:focus-visible{ outline:3px solid #d4c5e3; outline-offset:3px; }

/* ---------- 1. All classes ---------- */
html body.preg-page .crs-classes{ padding:clamp(3.5rem,7vw,6rem) 0 clamp(2.5rem,5vw,3.5rem); }
html body.preg-page .crs-classes .preg-wrap{ max-width:1180px; }
html body.preg-page .crs-intro{ max-width:720px; margin:0 auto clamp(1rem,2vw,1.4rem); text-align:center; }
html body.preg-page .crs-intro p.crs-eyebrow{
  margin:0 0 1.1rem; color:var(--crs-bronze); font-family:var(--font-body);
  font-size:.78rem; font-weight:800; letter-spacing:.19em; line-height:1.5; text-transform:uppercase;
}
html body.preg-page .crs-intro h2{
  margin:0 0 1.2rem; color:var(--crs-plum-deep); font-family:var(--crs-serif);
  font-size:clamp(2.15rem,3.3vw,3.2rem); font-weight:400; line-height:1.14; letter-spacing:-.026em;
}
html body.preg-page .crs-intro p:not(.crs-eyebrow){ margin:0; color:var(--crs-muted); font-size:1.06rem; line-height:1.75; }

/* groups: a centred head (who runs the classes), then that group's cards */
/* scroll-margin: the header leaves the page flow when it turns into the floating pill on the way down,
   so a jump from the hero lands about 80px higher than the margin says; 10rem keeps the group head clear */
html body.preg-page .crs-group{ padding-top:clamp(2.6rem,5vw,3.8rem); scroll-margin-top:10rem; }
html body.preg-page .crs-group + .crs-group{ margin-top:clamp(2.6rem,5vw,3.8rem); border-top:1px solid var(--crs-line); }
html body.preg-page .crs-group-head{ max-width:640px; margin:0 auto clamp(1.5rem,3vw,2.1rem); text-align:center; }
html body.preg-page .crs-group-head p.crs-group-kicker{
  margin:0; color:var(--crs-bronze); font-family:var(--font-body);
  font-size:.75rem; font-weight:800; letter-spacing:.16em; line-height:1.5; text-transform:uppercase;
}
html body.preg-page .crs-group-head h3{
  margin:.45rem 0 0; color:var(--crs-plum-deep); font-family:var(--crs-serif);
  font-size:clamp(1.7rem,2.5vw,2.25rem); font-weight:400; line-height:1.15; letter-spacing:-.015em;
}
html body.preg-page a.crs-group-link{
  display:inline-flex; align-items:center; gap:.35rem; min-height:44px; margin-top:.2rem;
  color:var(--crs-plum); font-family:var(--font-body); font-size:.95rem; font-weight:800;
  text-decoration:underline; text-decoration-color:rgba(91,64,95,.3); text-underline-offset:.22em;
}
html body.preg-page a.crs-group-link:hover,
html body.preg-page a.crs-group-link:focus-visible{ color:var(--crs-bronze); text-decoration-color:currentColor; }

/* cards: three across on desktop; a group of two is centred at the same card width */
html body.preg-page .crs-grid{
  --crs-gap:clamp(1.3rem,2.5vw,2rem);
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--crs-gap);
}
html body.preg-page .crs-grid > a.crs-card{ flex:0 1 calc((100% - 2 * var(--crs-gap)) / 3); min-width:0; }
html body.preg-page a.crs-card{
  display:flex; flex-direction:column; overflow:hidden; color:inherit; text-decoration:none;
  background:var(--crs-paper); border:1px solid var(--crs-line); border-radius:17px;
  box-shadow:0 16px 38px rgba(70,52,72,.07);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
html body.preg-page a.crs-card:hover,
html body.preg-page a.crs-card:focus-visible{
  color:inherit; text-decoration:none; transform:translateY(-3px);
  border-color:rgba(154,106,67,.4); box-shadow:0 22px 46px rgba(70,52,72,.12);
}
html body.preg-page a.crs-card:focus-visible{ outline:3px solid #d4c5e3; outline-offset:3px; }
html body.preg-page a.crs-card > img{
  display:block; width:100%; height:auto; aspect-ratio:3 / 2;
  object-fit:cover; object-position:center;
}
/* portrait photos from the sleep clinic pages: keep faces in the 3:2 crop */
html body.preg-page a.crs-card > img.crs-img-sleep{ object-position:center 30%; }
html body.preg-page a.crs-card > img.crs-img-estee{ object-position:center 12%; }
html body.preg-page a.crs-card > img.crs-img-top{ object-position:center top; }
html body.preg-page .crs-card-copy{
  display:flex; flex:1; flex-direction:column; align-items:flex-start;
  padding:clamp(1.5rem,3vw,2.3rem);
}

/* shared card type: eyebrow, serif title, muted text, plum link */
html body.preg-page :is(.crs-card-copy, a.crs-more-card) small{
  color:var(--crs-bronze); font-family:var(--font-body);
  font-size:.75rem; font-weight:800; letter-spacing:.14em; line-height:1.5; text-transform:uppercase;
}
html body.preg-page .crs-card-copy :is(h3, h4){
  margin:.65rem 0 .8rem; color:var(--crs-plum-deep); font-family:var(--crs-serif);
  font-size:clamp(1.45rem,2vw,1.9rem); font-weight:400; line-height:1.15; letter-spacing:normal;
}
html body.preg-page :is(.crs-card-copy, a.crs-more-card) p{ margin:0; color:var(--crs-muted); font-size:1rem; line-height:1.6; }
html body.preg-page :is(.crs-card-copy, a.crs-more-card) b{
  margin-top:auto; padding-top:1.25rem; color:var(--crs-plum);
  font-family:var(--font-body); font-size:.95rem; font-weight:800;
}
html body.preg-page :is(a.crs-card, a.crs-more-card):hover b{ color:var(--crs-bronze); }

/* ---------- 2. More ways to prepare (not on the page at present) ---------- */
html body.preg-page .crs-more{ padding:clamp(1.5rem,3vw,2.2rem) 0 clamp(3rem,6vw,4.5rem); }
html body.preg-page .crs-more .preg-wrap{ max-width:1180px; }
html body.preg-page .crs-more h2{
  margin:0 0 clamp(1.3rem,2.6vw,1.8rem); text-align:center; color:var(--crs-plum-deep);
  font-family:var(--crs-serif); font-size:clamp(1.65rem,2.5vw,2.2rem); font-weight:400; line-height:1.2; letter-spacing:-.015em;
}
html body.preg-page .crs-more-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1rem,2.4vw,1.6rem); }
html body.preg-page a.crs-more-card{
  display:flex; flex-direction:column; align-items:flex-start; color:inherit; text-decoration:none;
  padding:clamp(1.35rem,2.6vw,1.9rem); background:#fff; border:1px solid #e7ddef; border-radius:17px;
  box-shadow:0 12px 30px -22px rgba(85,63,99,.35);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
html body.preg-page a.crs-more-card:hover,
html body.preg-page a.crs-more-card:focus-visible{
  color:inherit; text-decoration:none; transform:translateY(-2px);
  border-color:#d4c5e3; box-shadow:0 18px 38px -24px rgba(85,63,99,.45);
}
html body.preg-page a.crs-more-card:focus-visible{ outline:3px solid #d4c5e3; outline-offset:3px; }
html body.preg-page a.crs-more-card h3{
  margin:.5rem 0 .6rem; color:var(--crs-plum-deep); font-family:var(--crs-serif);
  font-size:clamp(1.3rem,1.8vw,1.6rem); font-weight:400; line-height:1.2; letter-spacing:normal;
}
html body.preg-page a.crs-more-card b{ padding-top:1rem; }

/* ---------- tablet: two across; an odd last card is centred by the flex row ---------- */
@media (max-width:1060px){
  html body.preg-page .crs-grid > a.crs-card{ flex-basis:calc((100% - var(--crs-gap)) / 2); }
}

/* ---------- phone ---------- */
@media (max-width:760px){
  html body.preg-page .crs-grid > a.crs-card{ flex-basis:100%; }
  html body.preg-page .crs-intro h2{ font-size:clamp(2rem,8.4vw,2.6rem); }
  html body.preg-page .crs-more-grid{ grid-template-columns:1fr; }
  html body.preg-page .crs-jump a{ font-size:.9rem; padding:.5rem 1rem; }
}

@media (prefers-reduced-motion: reduce){
  html body.preg-page :is(a.crs-card, a.crs-more-card, .crs-jump a){ transition:none; }
  html body.preg-page :is(a.crs-card, a.crs-more-card):hover{ transform:none; }
}