/* =====================================================================
   Specialist cards outside the homepage (/clinics/, "Our Specialists").
   Trina (30/09/2026): "can we have all the experts on the top and not at the
   bottom. Thereafter you can have the therapies." (D62)
   The heading block and the card are the homepage's (home-brochure.css, s4
   specialists), copied in their final state: base rules, the s4 overrides
   (square photo, inline check) and the final-audit contrast and focus fixes.
   home-brochure.css styles the whole homepage, so it is not loaded here.
   Change a card or the heading in both files.
   The grid differs: eight cards, four across on desktop (the homepage has six,
   three across).
   ===================================================================== */
html body .bmb-specialists{
  --b-plum:#553f63; --b-plum-2:#7a6390; --b-body:#62576a; --b-head:#4a1650;
  --b-round:"Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif; --b-serif:"Playfair Display", Georgia, serif;
  --b-leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 70' fill='none' stroke='%239576a7' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 62C40 52 86 34 134 8'/%3E%3Cpath d='M30 55C27 43 35 34 47 31C47 42 41 51 30 55Z'/%3E%3Cpath d='M31 54L45 33'/%3E%3Cpath d='M50 48C58 55 70 57 80 52C73 45 61 43 50 48Z'/%3E%3Cpath d='M51 48L78 52'/%3E%3Cpath d='M72 40C71 28 79 19 92 16C92 28 84 36 72 40Z'/%3E%3Cpath d='M73 39L90 18'/%3E%3Cpath d='M95 28C103 35 114 36 124 31C117 24 106 22 95 28Z'/%3E%3Cpath d='M96 28L122 31'/%3E%3Cpath d='M114 17C116 9 124 5 134 5C130 13 122 17 114 17Z'/%3E%3C/svg%3E");
}
/* Heading block: the homepage's s4 heading (Trina, 7:18 pm: "You can use these as first section"). */
html body .bmb-specialists-head{ text-align:center; max-width:960px; margin:0 auto 2.4rem; }
html body .bmb-specialists-head h2{ display:flex; align-items:center; justify-content:center; gap:.5em; margin:0 0 .55rem !important;
  font-family:var(--b-serif) !important; font-size:clamp(1.45rem,2.4vw,2.05rem) !important; font-weight:600 !important; line-height:1.2 !important;
  letter-spacing:.05em !important; text-transform:uppercase !important; color:var(--b-head) !important; }
@media (min-width:761px){ html body .bmb-specialists-head h2{ white-space:nowrap; } }
html body .bmb-specialists-head h2::before, html body .bmb-specialists-head h2::after{ content:""; flex:none; width:clamp(54px,5.5vw,84px);
  aspect-ratio:2/1; background:var(--b-leaf) center/contain no-repeat; opacity:.65; }
html body .bmb-specialists-head h2::before{ transform:scaleX(-1); }
html body .bmb-specialists-sub{ margin:0 auto .7rem !important; font-family:var(--b-serif) !important; font-style:italic; font-weight:500;
  font-size:clamp(1.12rem,1.7vw,1.4rem) !important; line-height:1.4 !important; color:var(--b-plum-2) !important; text-align:center; text-wrap:balance; }
html body .bmb-specialists-lead{ max-width:62ch; margin:0 auto !important; font-family:var(--b-round); font-size:1rem; line-height:1.6;
  color:var(--b-body) !important; text-wrap:pretty; }
html body .bmb-specialists-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.2rem; }
html body .bmb-specialists-grid > li{ display:flex; min-width:0; margin:0; padding:0; }
html body .bmb-specialists-grid > li::before{ content:none; }
html body .bmb-spec-card{ display:flex; flex-direction:column; width:100%; min-width:0; padding:10px 10px 14px; text-align:left; text-decoration:none; background:#fff; border:0;
  border-radius:26px; box-shadow:0 22px 44px -26px rgba(60,30,70,.34), 0 2px 6px rgba(60,30,70,.04); transition:transform .2s ease, box-shadow .2s ease; }
html body .bmb-spec-card:hover{ transform:translateY(-3px); box-shadow:0 30px 56px -26px rgba(60,30,70,.42), 0 2px 6px rgba(60,30,70,.05); }
html body .bmb-spec-card:focus-visible{ outline:3px solid var(--b-plum-2); outline-offset:3px; }
html body .bmb-spec-photo{ display:block; width:100%; aspect-ratio:1/1; margin:0; border-radius:18px; overflow:hidden;
  background:linear-gradient(160deg,#f3ebf9 0%,#e1d0ef 100%); box-shadow:0 0 0 1px #eee4f5; }
html body .bmb-spec-photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
html body .bmb-spec-body{ display:flex; flex-direction:column; gap:.28rem; padding:.9rem .45rem .3rem; }
html body .bmb-specialists .bmb-spec-name{ display:block; margin:0 !important; font-family:var(--b-round) !important; font-size:1.1rem !important;
  font-weight:700 !important; letter-spacing:0 !important; line-height:1.25 !important; color:#2b2233 !important; }
html body .bmb-spec-check{ display:inline-block; width:17px; height:17px; margin-left:.25rem; vertical-align:-2px; fill:var(--b-head); }
html body .bmb-spec-alt{ font-family:var(--b-round); font-size:.95rem; font-weight:600; line-height:1.35; letter-spacing:.04em; color:var(--b-body); }
html body .bmb-spec-role{ font-family:var(--b-round); font-size:.86rem; font-weight:500; line-height:1.4; color:var(--b-body); text-wrap:balance; }
html body .bmb-spec-cred{ font-family:var(--b-round); font-size:.8rem; line-height:1.4; color:var(--b-body); }
html body .bmb-spec-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.8rem .45rem 0; }
/* Android text scaling (01/10/2026): wrap the footer and break the credential line rather than overflow the card. */
html body .bmb-spec-foot{ flex-wrap:wrap; row-gap:.45rem; }
html body .bmb-spec-cred, html body .bmb-spec-role, html body .bmb-spec-clinic{ overflow-wrap:anywhere; }
/* (a 320px phone gives a 110px card, narrower than "Physiotherapist": break inside the word only then.) */
html body .bmb-spec-clinic{ font-family:var(--b-round); font-size:.74rem; font-weight:600; line-height:1.3; letter-spacing:0; text-transform:none; color:var(--b-body); }
html body .bmb-spec-plus{ flex:none; display:inline-grid; place-items:center; min-width:46px; height:34px; padding:0 .95rem; border-radius:999px; background:#f1eaf7;
  color:var(--b-head); font:700 1.2rem/1 var(--b-round); box-shadow:0 8px 16px -10px rgba(60,30,70,.45); transition:background .2s ease, color .2s ease; }
html body .bmb-spec-card:hover .bmb-spec-plus, html body .bmb-spec-card:focus-visible .bmb-spec-plus{ background:var(--b-head); color:#fff; }
@media (max-width:1099px){
  html body .bmb-specialists-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.1rem; }
  html body .bmb-specialists-grid > li{ flex:0 0 calc((100% - 2 * 1.1rem) / 3); }
}
@media (max-width:760px){
  html body .bmb-specialists-head{ margin-bottom:1.8rem; }
  html body .bmb-specialists-head h2{ gap:.4em; font-size:1.45rem !important; letter-spacing:.04em !important; }
  html body .bmb-specialists-head h2::before, html body .bmb-specialists-head h2::after{ width:40px; }
  html body .bmb-specialists-grid{ gap:.8rem; }
  html body .bmb-specialists-grid > li{ flex:0 0 calc((100% - .8rem) / 2); }
  html body .bmb-spec-card{ border-radius:20px; padding:8px 8px 12px; }
  html body .bmb-spec-photo{ border-radius:14px; }
  html body .bmb-specialists .bmb-spec-name{ font-size:1rem !important; }
  html body .bmb-spec-check{ width:15px; height:15px; }
  html body .bmb-spec-alt{ font-size:.85rem; }
  html body .bmb-spec-role{ font-size:.8rem; }
  html body .bmb-spec-cred{ font-size:.75rem; }
  html body .bmb-spec-body{ padding:.7rem .3rem .2rem; }
  html body .bmb-spec-foot{ padding:.7rem .3rem 0; }
  html body .bmb-spec-clinic{ font-size:.7rem; }
  html body .bmb-spec-plus{ min-width:38px; height:30px; padding:0 .7rem; font-size:1.05rem; }
}
/* This page's text column is 300px on a 390px phone (the homepage's is wider), so a card is about 143px.
   "Physiotherapy" and the + pill need about 154px and would push each card onto its own row. The whole
   card is the link, so the pill goes on small phones and the clinic label stays.
   The inner padding is trimmed too, so "Registered Midwife ·" (kept together with non-breaking spaces,
   as on the homepage) and a name with its check mark fit the column. */
@media (max-width:480px){
  html body .bmb-spec-plus{ display:none; }
  html body .bmb-spec-card{ padding:6px 6px 11px; }
  html body .bmb-spec-body{ padding:.7rem .15rem .2rem; }
  html body .bmb-spec-foot{ padding:.6rem .15rem 0; }
  html body .bmb-specialists .bmb-spec-name{ text-wrap:balance; }
}
@media (max-width:420px){
  html body .bmb-specialists-head h2::before, html body .bmb-specialists-head h2::after{ display:none; }
}
/* 360 to 375px phones: "Registered Midwife ·" is 120px at .75rem in a 111px column. */
@media (max-width:400px){
  html body .bmb-spec-cred{ font-size:.68rem; }
}
@media (prefers-reduced-motion:reduce){ html body .bmb-spec-card{ transition:none; } html body .bmb-spec-card:hover{ transform:none; } }