/* =====================================================================
   The Lactation Clinic page only (24/09/2026). Loaded after clinic-proto.css.
   Applies the client's deck notes (slides 11-20) on top of the approved design:
   - skip link, clinic sub-header (lockup, section links, booking button), phone booking bar
   - hero portrait edge to edge
   - concern cards: 4 across, turn over to show Sister Yasa's guidance
   - "Meet the specialists": Sister Yasa and Sister Kang (client's updated prototype, 28/09/2026)
   - learning block photo (the crib inset under it was removed at the client's R2 review, 29/09/2026),
     colostrum section on cream
   - consultation options (in-clinic and home visit) with the packages-and-prices notice,
     final CTA band, clinic contact strip. The client's R1 notes (28/09/2026) removed the
     "What is Lactation Clinics" section, the offer / add-on / extra-support blocks and the
     price table, so their rules are gone too
   - type, link and eyebrow details from the prototype's visual system
   ===================================================================== */

/* ---- type: Playfair Display headings, Quicksand body (the site's three fonts, ticket #112; were Georgia and Inter) ---- */
html body main.proto-page{--sans: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif; font-family:var(--sans);}

/* ---- skip link: hidden until it gets keyboard focus ---- */
.skip-link{position:fixed; left:1rem; top:-5rem; z-index:200; padding:.7rem 1rem; border-radius:8px;
  color:#5b405f; background:#fff; box-shadow:0 8px 24px rgba(64,47,67,.18); font-weight:700; text-decoration:none;}
.skip-link:focus, .skip-link:focus-visible{top:1rem; outline:2px solid #5b405f; outline-offset:2px;}

/* ---- clinic sub-header: sits below the BMB site header, never replaces it ---- */
html body main.proto-page .lc-subhead{position:relative; z-index:40; display:flex; align-items:center; gap:2rem; min-height:76px;
  padding:.4rem clamp(1rem,4vw,4.5rem); background:rgba(255,253,251,.9); border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);}
/* lockup (R2, 29/09/2026): the client's ticked logo in full, not the round crop she crossed out, then
   "The Lactation Clinic" over "Mother & Newborn", on the homepage's type scale (18px / 15.3px) */
html body main.proto-page .lc-lockup{display:flex; align-items:center; gap:.85rem; min-width:0; color:inherit; text-decoration:none;}
html body main.proto-page .lc-emblem{display:block; flex:0 0 auto; height:61px;}
html body main.proto-page .lc-emblem img{display:block; width:auto; height:100%; max-width:none;}
html body main.proto-page .lc-lockup-copy{display:grid; line-height:1.2;}
html body main.proto-page .lc-lockup-copy strong{color:#147b9b; font-family:var(--serif); font-size:1.06rem; font-style:italic; font-weight:500; white-space:nowrap;}
html body main.proto-page .lc-lockup-copy small{margin-top:.15rem; color:var(--plum); font-size:.9rem; font-weight:700; letter-spacing:.02em; white-space:nowrap;}
html body main.proto-page .lc-subnav{display:flex; justify-content:center; gap:clamp(1rem,2.4vw,2rem); margin-left:auto;}
html body main.proto-page .lc-subnav a{color:#625963; font-size:.9rem; font-weight:600; line-height:1.3; text-decoration:none; white-space:nowrap;}
html body main.proto-page .lc-subnav a:hover, html body main.proto-page .lc-subnav a:focus-visible{color:var(--plum); text-decoration:underline; text-underline-offset:.3em;}
html body main.proto-page .lc-subhead-cta{flex:0 0 auto;}
@media (min-width:761px){
  /* sticky from 761px up (desktop and tablet), so the Book button stays in reach; phones
     (760px and below) get the fixed booking bar instead. --lc-sub-top is set by the page
     script: the site header's height at the top of the page, then the floating pill's
     bottom edge, so the sub-header sits straight under the pill with no gap */
  html body main.proto-page .lc-subhead{position:sticky; top:var(--lc-sub-top,81px);}
}
@media (min-width:761px) and (max-width:1060px){
  /* tablets: the section links are hidden here, so a slimmer bar (58px, not 76px) keeps more
     of the screen free while it is pinned under the BMB header */
  html body main.proto-page .lc-subhead{gap:1rem; min-height:58px; padding-top:.4rem; padding-bottom:.4rem;}
  html body main.proto-page .lc-emblem{height:43px;}
  html body main.proto-page .lc-lockup-copy strong{font-size:1rem;}
  /* classes: the grid is two columns here, so the third card (Parent & Baby Bonding Class) would sit
     alone on the left of row two; it is centred at the same width as the cards above it instead */
  html body main.proto-page .class-links-grid > .class-link-card:nth-child(3):last-child{grid-column:1 / -1; justify-self:center;
    width:calc((100% - clamp(1.3rem,2.5vw,2rem)) / 2);}
}

/* ---- phone booking bar (hidden on wider screens) ---- */
html body main.proto-page .lc-mobile-book{display:none;}

/* ---- in-page links land below the sticky bars ---- */
html body main.proto-page #why, html body main.proto-page #who, html body main.proto-page #how,
html body main.proto-page #classes, html body main.proto-page #colostrum, html body main.proto-page #visit,
html body main.proto-page #sister-yasa, html body main.proto-page #sister-kang{scroll-margin-top:160px;}
/* the page script focuses the section it scrolls to (for keyboard users); no ring round a whole section */
html body main.proto-page [tabindex="-1"]:focus{outline:none;}

/* ---- hero: portrait runs to the top, bottom and right edges ---- */
html body main.proto-page .hero{padding:0; grid-template-columns:minmax(0,1fr) 44%;}

/* ---- prototype details: bronze eyebrows everywhere, underlined plum text links ---- */
html body main.proto-page .expert-copy > p.eyebrow,
html body main.proto-page .learning-feature p.eyebrow{color:var(--bronze);}
html body main.proto-page .text-link{text-decoration:underline; text-decoration-color:currentColor; text-decoration-thickness:1px; text-underline-offset:.3em;}
html body main.proto-page .service-related-cta{text-decoration:underline; text-decoration-color:var(--plum); text-decoration-thickness:1px; text-underline-offset:.3em; border-bottom:0;}
html body main.proto-page #pair .service-related-grid > li{box-shadow:0 14px 40px rgba(70,52,72,.07);}

/* ---- #why: intro in two columns, the eight concerns full width below (4 x 2) ---- */
html body main.proto-page #why{display:block;}
html body main.proto-page #why .section-intro{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:0 clamp(2.5rem,6vw,6rem);
  align-items:start; max-width:1320px; margin:0 auto clamp(2.8rem,4.5vw,4rem);}
html body main.proto-page #why .why-head h2{margin-bottom:.2rem;}
html body main.proto-page #why .why-body p:last-child{margin-bottom:0;}
html body main.proto-page #why .concern-list{max-width:1320px; margin:0 auto;}
html body main.proto-page #why .concern-intro{margin:0 auto .35rem; max-width:860px; color:var(--muted); font-size:1.02rem; font-style:italic; text-align:center;}
html body main.proto-page #why .concern-instruction{margin:0 auto 1.6rem; color:var(--bronze); font-size:.8rem; font-weight:700; letter-spacing:.08em; text-align:center;}
html body main.proto-page #why .concern-grid{grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem;}

/* cards turn over once the page script is running; without it they stay stacked (front above guidance) */
html body main.proto-page #why.lc-flip-ready .concern-card{display:block; width:100%; min-height:204px !important; padding:0; cursor:pointer; perspective:1000px;}
html body main.proto-page #why.lc-flip-ready .concern-card-inner{display:block !important; position:relative; height:100%; min-height:204px !important;
  transform:none !important; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.2,.7,.2,1) !important;}
html body main.proto-page #why.lc-flip-ready .concern-card.is-flipped .concern-card-inner{transform:rotateY(180deg) !important;}
html body main.proto-page #why.lc-flip-ready .concern-front,
html body main.proto-page #why.lc-flip-ready .concern-back{position:absolute !important; inset:0 !important; justify-content:flex-start !important;
  padding:1.35rem 1.35rem 1.3rem; border-radius:14px !important; backface-visibility:hidden !important; -webkit-backface-visibility:hidden !important;}
html body main.proto-page #why.lc-flip-ready .concern-front{transform:none !important; background:#f7f3f8; border-color:rgba(91,64,95,.1);}
html body main.proto-page #why.lc-flip-ready .concern-back{transform:rotateY(180deg) !important; justify-content:center !important;}
html body main.proto-page #why.lc-flip-ready .concern-front::after{content:"+"; position:absolute; top:1.05rem; right:1.2rem; color:var(--bronze);
  font-family:var(--sans); font-size:1.35rem; font-weight:400; line-height:1;}
html body main.proto-page #why .concern-front span{color:#5f5660; font-size:.95rem;}
html body main.proto-page #why .concern-back span{font-size:.95rem;}
/* both faces share one grid cell instead of being pinned inside a fixed-height card, so each card is as tall
   as its longer face (R2, 29/09/2026). With the guidance at 16px the back ran past the card edge at 521 to
   700px and at 1061px, and one card already did at 1061px before; the min-heights above stay as the floor */
html body main.proto-page #why.lc-flip-ready .concern-card-inner{display:grid !important;}
html body main.proto-page #why.lc-flip-ready .concern-front,
html body main.proto-page #why.lc-flip-ready .concern-back{position:relative !important; inset:auto !important; grid-area:1 / 1;}

/* credentials: keep the IBLCE registration number on one line (it broke as "L-" / "37317"),
   and "Registered Nurse" / "The Lactation Clinic" together on the role lines and hero caption */
html body main.proto-page .lc-nowrap{white-space:nowrap;}

/* ---- classes: the booking strip's arrow sits a space after "Speak to an expert" (the button is a
   flex box, so the space in the markup collapsed), and the line balances instead of leaving "today." alone ---- */
html body main.proto-page .colostrum-booking .button{gap:.35em;}
html body main.proto-page .colostrum-booking p{max-width:none; text-wrap:pretty;}

/* ---- #how: intro leads straight into the learning block; one class photo (the client crossed out the
   small crib inset that overlapped its corner, R2 29/09/2026, so the photo no longer reserves room under it) ---- */
html body main.proto-page #how .section-intro.narrow{margin-bottom:clamp(3rem,5vw,4.5rem);}
html body main.proto-page .lc-learning-media{position:relative; margin:0;}
html body main.proto-page .learning-feature .lc-learning-main{width:100%; aspect-ratio:16 / 10; object-fit:cover; border-radius:16px; box-shadow:var(--shadow);}

/* ---- colostrum: two columns on a cream band, white bordered cards ---- */
html body main.proto-page .colostrum-feature{background:#f3eee6; border-color:rgba(154,106,67,.14); box-shadow:none;}
html body main.proto-page .colostrum-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); align-items:center;}
html body main.proto-page .colostrum-intro h3{margin-bottom:.8rem;}
html body main.proto-page .colostrum-intro > p.colostrum-lead{margin-top:0; color:#5f5660; font-size:1.06rem; font-style:italic; line-height:1.65;}
html body main.proto-page .colostrum-extra{margin-bottom:0;}
html body main.proto-page .colostrum-extra div{background:#fff; border:1px solid rgba(91,64,95,.14);}
html body main.proto-page .colostrum-image img{aspect-ratio:4 / 3; object-position:center 40%;}
/* definition, safety note, quote and course link: one row under the photo row */
html body main.proto-page .lc-colostrum-more{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(2rem,5vw,4.5rem);
  align-items:start; margin-top:clamp(2rem,3.5vw,2.8rem); padding-top:clamp(1.6rem,3vw,2.2rem); border-top:1px solid rgba(154,106,67,.18);}
html body main.proto-page .lc-colostrum-more p{color:var(--muted);}
html body main.proto-page .lc-colostrum-more > div > :first-child{margin-top:0;}
html body main.proto-page .lc-colostrum-more .safety-note{margin-bottom:0; background:rgba(255,253,251,.7);}
html body main.proto-page .lc-colostrum-more .quote{margin-top:0;}

/* ---- #visit, consultation options: the two booking cards side by side, the packages-and-prices
   notice between the heading and the cards (lined up with the heading, not centred), and each
   card's booking link on the same line at the foot of the card. A soft lilac band (where the removed
   "What is Lactation Clinics" band sat), so it does not run on from the cream "How care works" section ---- */
html body main.proto-page #visit{background:var(--lilac-soft);}
html body main.proto-page #visit .bmb-section-head{margin-bottom:1.3rem;}
html body main.proto-page #visit > aside.bmb-promo-pause.bmb-promo-pause[role="note"][aria-label]{margin:0 0 2rem !important;}
html body main.proto-page #visit .service-related-grid{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:1320px;}
html body main.proto-page #visit .service-related-body{display:flex; flex:1; flex-direction:column;}
html body main.proto-page #visit .service-related-cta{align-self:flex-start; margin-top:auto; padding-top:1.1rem;}

/* ---- final CTA: centred on a full-width cream band ---- */
html body main.proto-page .final-cta{max-width:none; margin:0; padding:clamp(5rem,8.5vw,7.5rem) clamp(1.5rem,7vw,8rem); background:var(--ivory);}
html body main.proto-page .final-cta > *{max-width:920px; margin-left:auto; margin-right:auto;}
html body main.proto-page .final-cta > p:not(.eyebrow){max-width:690px;}

/* ---- clinic contact strip, above the site footer ---- */
html body main.proto-page .lc-contact-strip{align-items:center; background:#f2edf3; border-top:1px solid var(--line); color:#6b626c;}
html body main.proto-page .lc-contact-strip strong{font-size:.95rem;}
html body main.proto-page .lc-contact-strip div:last-child{justify-items:end; text-align:right;}
html body main.proto-page .lc-contact-strip a{color:#5f5660; text-decoration:underline; text-decoration-color:rgba(91,64,95,.35); text-underline-offset:.25em;}
html body main.proto-page .lc-contact-strip a:hover, html body main.proto-page .lc-contact-strip a:focus-visible{color:var(--plum);}

@media (max-width:1060px){
  html body main.proto-page .lc-subnav{display:none;}
  html body main.proto-page .lc-subhead-cta{margin-left:auto;}
  html body main.proto-page .hero{grid-template-columns:1fr 42%;}
  html body main.proto-page #why .concern-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  html body main.proto-page #why.lc-flip-ready .concern-card,
  html body main.proto-page #why.lc-flip-ready .concern-card-inner{min-height:176px !important;}
  html body main.proto-page .colostrum-hero{grid-template-columns:1fr;}
  html body main.proto-page .colostrum-image img{aspect-ratio:3 / 2;}
  html body main.proto-page .lc-colostrum-more{grid-template-columns:1fr; gap:1.4rem;}
}

@media (min-width:901px) and (max-width:1060px){
  /* Meet the specialists on tablets: the copy column beside each portrait is about 470px here,
     so the credentials stack in one column instead of two cramped ones */
  html body main.proto-page #who .credentials{grid-template-columns:1fr; gap:0;}
}

@media (max-width:900px){
  /* Meet the specialists: each profile goes to one column from here down, portrait first, so the
     copy and the two-column credentials grid are not squeezed beside the portrait */
  html body main.proto-page #who .expert-section{grid-template-columns:1fr; gap:3rem;}
  html body main.proto-page #who .expert-image-wrap{max-width:520px; margin:0 auto;}
  html body main.proto-page #who .kang-section .expert-image-wrap{order:-1;}
  html body main.proto-page #who .kang-section .expert-copy{margin-left:0;}
  html body main.proto-page .learning-feature{grid-template-columns:1fr; gap:2.2rem;}
  /* consultation options: the two cards stack, so the opening hours are not squeezed */
  html body main.proto-page #visit .service-related-grid{grid-template-columns:1fr; max-width:720px;}
}

@media (max-width:760px){
  html body main.proto-page .lc-subhead{gap:1rem; min-height:64px; padding:.5rem 1rem;}
  html body main.proto-page .lc-emblem{height:46px;}
  html body main.proto-page .lc-lockup-copy strong{font-size:1rem;}
  html body main.proto-page .lc-subhead-cta{display:none;}

  html body main.proto-page .hero{grid-template-columns:1fr;}
  html body main.proto-page .hero-portrait{min-height:470px;}

  html body main.proto-page #why .section-intro{grid-template-columns:1fr;}
  html body main.proto-page #why .why-head h2{margin-bottom:1rem;}

  html body main.proto-page .colostrum-extra{grid-template-columns:1fr;}

  html body main.proto-page .lc-contact-strip{align-items:flex-start; gap:1rem;}
  html body main.proto-page .lc-contact-strip div:last-child{justify-items:start; text-align:left;}
  /* phones: standalone text links and the strip's phone links get a 44px tap height */
  html body main.proto-page .hero-actions .text-link,
  html body main.proto-page .final-cta .text-link{padding-top:.6rem; padding-bottom:.6rem;}
  html body main.proto-page .service-related-cta{display:inline-block; padding-top:.75rem; padding-bottom:.75rem;}
  html body main.proto-page .learning-feature .text-link,
  html body main.proto-page .lc-colostrum-more .text-link{display:inline-block; padding-top:.8rem; padding-bottom:.8rem;}
  html body main.proto-page .lc-contact-strip a{display:inline-block; padding-top:.65rem; padding-bottom:.65rem;}

  html body main.proto-page #why, html body main.proto-page #who, html body main.proto-page #how,
  html body main.proto-page #classes, html body main.proto-page #colostrum, html body main.proto-page #visit,
  html body main.proto-page #sister-yasa, html body main.proto-page #sister-kang{scroll-margin-top:88px;}

  /* fixed booking bar; it replaces the round WhatsApp button on this page */
  html body main.proto-page .lc-mobile-book{position:fixed; z-index:40; left:.8rem; right:.8rem; bottom:calc(.8rem + env(safe-area-inset-bottom, 0px));
    display:grid; place-items:center; min-height:50px; padding:.5rem 1rem; color:#fff; background:var(--plum);
    border:1px solid rgba(255,255,255,.4); border-radius:8px; font-size:.95rem; font-weight:700; text-decoration:none;
    box-shadow:0 12px 32px rgba(64,47,67,.22);}
  html body main.proto-page .lc-mobile-book:hover, html body main.proto-page .lc-mobile-book:focus-visible{color:#fff; background:var(--plum-deep);}
  body.mobile-nav-open main.proto-page .lc-mobile-book{display:none;}
  body:has(.lc-mobile-book) .bmb-wa-fab{display:none !important;}
  /* keep the footer's last line clear of the bar */
  html body .site-footer > p.copyright:last-child{padding-bottom:calc(1rem + 70px + env(safe-area-inset-bottom, 0px)) !important;}
}

@media (max-width:520px){
  html body main.proto-page #why .concern-grid{grid-template-columns:1fr;}
  html body main.proto-page #why.lc-flip-ready .concern-card,
  html body main.proto-page #why.lc-flip-ready .concern-card-inner{min-height:148px !important;}
}

@media (prefers-reduced-motion: reduce){
  /* swap sides at once instead of turning */
  html body main.proto-page #why.lc-flip-ready .concern-card-inner{transition:none !important;}
}