/* ─── /blogs/ categorised archive (client brief, 15/09/2026) ─────────────
   Loaded on /blogs/ only, after service.css + service-cream.css. Adds the
   browse bar (topic select + search + topic chips), the featured band and
   the topic pills on cards. Filtering itself lives in js/bmb-blog-index.js.

   svc-cream forces p/li/span colours with !important, so text colours here
   are re-asserted as `body.svc-cream .service-preview .x { … !important }`,
   which outranks that blanket rule. */

/* ── Browse bar ─────────────────────────────────────────────────────────── */
html:not(.js) .blog-index .blog-browse{ display:none; }

.blog-index .service-hero--lean{ padding-bottom:1.75rem; }

.blog-index .blog-browse{
  position:relative;
  z-index:20;                       /* suggestion list sits over the featured band */
  max-width:1120px;
  margin:0 auto;
  padding:0 1rem clamp(2.75rem, 5vw, 4rem);
  display:grid;
  justify-items:center;
  gap:1.15rem;
}

.blog-index .blog-search{
  position:relative;
  z-index:2;                        /* suggestions paint over the chip strip */
  width:min(100%, 720px);
  display:flex;
  align-items:stretch;
  margin:0;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:999px;
  box-shadow:0 1px 2px rgba(42,37,64,.04), 0 14px 34px -20px rgba(90,31,99,.32);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.blog-index .blog-search:focus-within{
  border-color:var(--c-purple);
  box-shadow:0 0 0 4px rgba(141,49,155,.14), 0 14px 34px -20px rgba(90,31,99,.32);
}

.blog-index .blog-search-topic{
  -webkit-appearance:none;
  appearance:none;
  flex:0 0 auto;
  max-width:46%;
  min-height:3.5rem;
  margin:0;
  padding:0 2.5rem 0 1.4rem;
  border:0;
  border-right:1px solid var(--c-line);
  border-radius:999px 0 0 999px;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238d319b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1.05rem center / 12px 8px;
  font:700 .95rem/1.2 var(--sans);
  color:var(--c-ink);
  text-overflow:ellipsis;
  cursor:pointer;
}
.blog-index .blog-search-topic:hover{ background-color:var(--brand-50); }
.blog-index .blog-search-topic:focus-visible{ outline:none; background-color:var(--brand-50); }

.blog-index .blog-search-field{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:0 .55rem 0 1.15rem;
}
.blog-index .blog-search-icon{ width:1.15rem; height:1.15rem; flex:0 0 auto; color:var(--c-purple); }
.blog-index .blog-search-input{
  flex:1 1 auto;
  min-width:0;
  height:3.5rem;
  margin:0;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  font:400 1rem/1.2 var(--sans);
  color:var(--c-ink);
}
.blog-index .blog-search-input::placeholder{ color:#6b6474; opacity:1; }
.blog-index .blog-search-input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }

.blog-index .blog-search-clear{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.5rem;
  height:2.5rem;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#645c6d;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease;
}
.blog-index .blog-search-clear svg{ width:1rem; height:1rem; }
.blog-index .blog-search-clear:hover{ background:var(--brand-50); color:var(--c-plum); }
.blog-index .blog-search-clear:focus-visible{ outline:3px solid var(--brand-200); outline-offset:1px; }
.blog-index .blog-search-clear[hidden]{ display:none; }

/* Suggestions */
.blog-index .blog-suggest{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + .55rem);
  margin:0;
  padding:.4rem;
  list-style:none;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:20px;
  box-shadow:0 30px 70px -28px rgba(20,6,24,.45);
  max-height:min(60vh, 420px);
  overflow-y:auto;
  text-align:left;
  animation:blog-suggest-in .18s cubic-bezier(.22,1,.36,1);
}
.blog-index .blog-suggest[hidden]{ display:none; }
@keyframes blog-suggest-in{ from{ opacity:0; transform:translateY(-6px); } }

.blog-index .blog-suggest-opt{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.7rem .85rem;
  border-radius:14px;
  text-decoration:none;
}
.blog-index .blog-suggest-opt:hover,
.blog-index .blog-suggest-opt.is-active{ background:var(--brand-50); }
body.svc-cream .service-preview .blog-suggest-title{
  flex:1 1 auto;
  min-width:0;
  font:600 .96rem/1.35 var(--sans);
  color:var(--c-ink) !important;
}
.blog-index .blog-suggest-title mark{ background:transparent; color:var(--c-purple); font-weight:800; }
body.svc-cream .service-preview .blog-suggest-topic{
  flex:0 0 auto;
  padding:.32rem .55rem;
  border-radius:999px;
  background:#f0cdf6;
  font:700 .64rem/1 var(--sans);
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  color:#6e2479 !important;
}

/* Topic chips */
.blog-index .blog-topics{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem;
  max-width:780px;                  /* breaks the seven chips 4 + 3 on desktop */
}
.blog-index .blog-topic{
  -webkit-appearance:none;
  appearance:none;
  min-height:2.75rem;
  margin:0;
  padding:.55rem 1.05rem;
  border:1px solid var(--c-line);
  border-radius:999px;
  background:#fff;
  font:600 .9rem/1.2 var(--sans);
  color:var(--c-body);
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s cubic-bezier(.22,1,.36,1);
}
.blog-index .blog-topic:hover{ border-color:var(--brand-200); background:var(--brand-50); color:var(--c-plum); }
.blog-index .blog-topic:active{ transform:scale(.97); }
.blog-index .blog-topic[aria-pressed="true"]{ border-color:var(--c-plum); background:var(--c-plum); color:#fff; }
.blog-index .blog-topic:focus-visible{ outline:3px solid var(--brand-200); outline-offset:2px; }

/* ── Section heads line up with the 1120px card grid ───────────────────── */
.blog-index .blog-featured .bmb-section-head--left,
.blog-index .blog-all .bmb-section-head--left{
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
}

/* ── Featured band (even band, deep purple) ─────────────────────────────── */
.blog-index .blog-featured[hidden]{ display:none; }

.blog-index .blog-featured-list{
  list-style:none;
  max-width:1120px;
  margin:2rem auto 0;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);
  grid-auto-rows:auto;
  gap:.85rem 2.25rem;
}
.blog-index .blog-feature{
  position:relative;
  display:grid;
  grid-template-columns:5.75rem minmax(0, 1fr);
  align-items:center;
  gap:1.1rem;
  margin:0;
  padding:.75rem;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.06);
  transition:background-color .25s ease;
}
.blog-index .blog-feature[hidden]{ display:none; }
.blog-index .blog-feature:hover{ background:rgba(255,255,255,.12); }
.blog-index .blog-feature:has(a:focus-visible){ outline:3px solid #e6b8ef; outline-offset:3px; }

.blog-index .blog-feature-media{
  aspect-ratio:1;
  border-radius:10px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
}
.blog-index .blog-feature-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.blog-index .blog-feature:hover .blog-feature-media img{ transform:scale(1.05); }

body.svc-cream .service-preview .blog-feature-topic{
  margin:0 0 .4rem;
  font:700 .68rem/1.2 var(--sans);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#e6b8ef !important;
}
body.svc-cream .service-preview .blog-feature-title{
  margin:0;
  font:500 1.08rem/1.32 var(--serif);
  text-wrap:balance;
  color:#fdf9ff !important;
}
body.svc-cream .service-preview .blog-feature-title a{ color:inherit; text-decoration:none; }
.blog-index .blog-feature-title a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.blog-index .blog-feature-title a:focus-visible{ outline:none; }
.blog-index .blog-feature-excerpt{ display:none; }

/* The lead: first pick in the all-topics view (and without JS), or the one
   pick left in a single-topic view. */
.blog-index .blog-featured-list:not([data-view="topic"]) > .blog-feature:first-child,
.blog-index .blog-featured-list[data-view="topic"] > .blog-feature:not([hidden]){
  grid-row:span 4;
  grid-template-columns:1fr;
  align-content:start;
  gap:0;
  padding:0;
  background:transparent;
}
.blog-index .blog-featured-list:not([data-view="topic"]) > .blog-feature:first-child .blog-feature-media,
.blog-index .blog-featured-list[data-view="topic"] > .blog-feature:not([hidden]) .blog-feature-media{
  aspect-ratio:3 / 2;
  border-radius:var(--r-lg);
}
.blog-index .blog-featured-list:not([data-view="topic"]) > .blog-feature:first-child .blog-feature-body,
.blog-index .blog-featured-list[data-view="topic"] > .blog-feature:not([hidden]) .blog-feature-body{
  padding:1.25rem .15rem 0;
}
body.svc-cream .service-preview .blog-featured-list:not([data-view="topic"]) > .blog-feature:first-child .blog-feature-title,
body.svc-cream .service-preview .blog-featured-list[data-view="topic"] > .blog-feature:not([hidden]) .blog-feature-title{
  font-size:clamp(1.4rem, 2.3vw, 1.85rem);
  line-height:1.22;
}
body.svc-cream .service-preview .blog-featured-list:not([data-view="topic"]) > .blog-feature:first-child .blog-feature-excerpt,
body.svc-cream .service-preview .blog-featured-list[data-view="topic"] > .blog-feature:not([hidden]) .blog-feature-excerpt{
  display:block;
  max-width:62ch;
  margin:.7rem 0 0;
  font:400 .98rem/1.62 var(--sans);
  color:rgba(253,249,255,.84) !important;
}
.blog-index .blog-featured-list:not([data-view="topic"]) > .blog-feature:first-child:hover,
.blog-index .blog-featured-list[data-view="topic"] > .blog-feature:not([hidden]):hover{ background:transparent; }

/* One topic: the single pick runs across the band, image beside the text. */
.blog-index .blog-featured-list[data-view="topic"]{ grid-template-columns:1fr; }
@media (min-width:761px){
  .blog-index .blog-featured-list[data-view="topic"] > .blog-feature:not([hidden]){
    grid-row:auto;
    grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);
    align-items:center;
    gap:2.25rem;
  }
  .blog-index .blog-featured-list[data-view="topic"] > .blog-feature:not([hidden]) .blog-feature-body{ padding:0; }
}

@media (max-width:960px){
  .blog-index .blog-featured-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.85rem; }
  .blog-index .blog-featured-list:not([data-view="topic"]) > .blog-feature:first-child{
    grid-row:auto;
    grid-column:1 / -1;
    margin-bottom:1rem;
  }
}
@media (max-width:600px){
  .blog-index .blog-featured-list{ grid-template-columns:1fr; }
  .blog-index .blog-feature{ grid-template-columns:4.75rem minmax(0, 1fr); gap:.95rem; }
}

/* ── All-articles grid ──────────────────────────────────────────────────── */
.blog-index #latest-articles{ scroll-margin-top:5.5rem; }

.blog-index .blog-all-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  column-gap:1.1rem;
  row-gap:.5rem;
}
.blog-index .blog-all-head h2{ margin:0; }
body.svc-cream .service-preview .blog-all-status{
  margin:0;
  font:600 .95rem/1.4 var(--sans);
  color:#645c6d !important;
}
.blog-index .blog-all-status:empty{ display:none; }
.blog-index .blog-all-clear{
  -webkit-appearance:none;
  appearance:none;
  margin:0 0 0 auto;
  padding:.5rem 1rem;
  border:1px solid var(--c-line);
  border-radius:999px;
  background:#fff;
  font:700 .82rem/1.2 var(--sans);
  color:var(--c-plum);
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease;
}
.blog-index .blog-all-clear:hover{ background:var(--brand-50); border-color:var(--brand-200); }
.blog-index .blog-all-clear:focus-visible{ outline:3px solid var(--brand-200); outline-offset:2px; }
.blog-index .blog-all-clear[hidden]{ display:none; }

/* Filtered-out cards. The archive card rule sets display:flex, which would
   otherwise beat the hidden attribute. */
.blog-index .post-grid--archive .bmb-post-card[hidden]{ display:none; }

/* Topic pill on the card photo. The label lives here rather than in the
   markup so cards the auto-publisher adds get it from data-topic alone. */
.blog-index .post-grid--archive .bmb-post-card-img{ position:relative; }
.blog-index .post-grid--archive .bmb-post-card[data-topic] .bmb-post-card-img::after{
  position:absolute;
  left:.8rem;
  top:.8rem;
  z-index:1;
  padding:.38rem .65rem;
  border-radius:999px;
  background:rgba(90,31,99,.9);
  font:700 .64rem/1 var(--sans);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
  pointer-events:none;
}
.blog-index .bmb-post-card[data-topic="pregnancy"] .bmb-post-card-img::after{ content:"Pregnancy & Prenatal Care"; }
.blog-index .bmb-post-card[data-topic="postnatal"] .bmb-post-card-img::after{ content:"Postnatal & Recovery"; }
.blog-index .bmb-post-card[data-topic="lactation"] .bmb-post-card-img::after{ content:"Lactation & Breastfeeding"; }
.blog-index .bmb-post-card[data-topic="baby"] .bmb-post-card-img::after{ content:"Baby & Newborn Care"; }
.blog-index .bmb-post-card[data-topic="wellness"] .bmb-post-card-img::after{ content:"Wellness & Therapies"; }
.blog-index .bmb-post-card[data-topic="events"] .bmb-post-card-img::after{ content:"Workshops & Events"; }

/* Empty state */
.blog-index .blog-empty{
  max-width:640px;
  margin:2.5rem auto 0;
  padding:2.25rem 1.5rem;
  border:1px solid var(--c-line);
  border-radius:var(--r-lg);
  background:#fff;
  text-align:center;
}
.blog-index .blog-empty[hidden]{ display:none; }
body.svc-cream .service-preview .blog-empty-title{
  margin:0;
  font:500 1.3rem/1.35 var(--serif);
  text-wrap:balance;
  color:var(--c-ink) !important;
}
.blog-index .blog-empty-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.6rem;
  margin-top:1.3rem;
}
.blog-index .blog-empty-action{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  min-height:2.75rem;
  margin:0;
  padding:.6rem 1.15rem;
  border:1px solid var(--c-plum);
  border-radius:999px;
  background:#fff;
  font:700 .88rem/1.2 var(--sans);
  color:var(--c-plum);
  text-decoration:none;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease;
}
body.svc-cream .service-preview a.blog-empty-action{ color:var(--c-plum); }
.blog-index .blog-empty-action:hover{ background:var(--brand-50); }
.blog-index .blog-empty-action--primary,
body.svc-cream .service-preview a.blog-empty-action--primary{ background:var(--c-plum); color:#fff; }
.blog-index .blog-empty-action--primary:hover{ background:#6e2479; }
.blog-index .blog-empty-action:focus-visible{ outline:3px solid var(--brand-200); outline-offset:2px; }

/* ── Phones ─────────────────────────────────────────────────────────────── */
@media (max-width:720px){
  .blog-index .service-hero--lean{ padding-bottom:1.25rem; }
  /* chips scroll sideways instead of stacking five rows deep */
  .blog-index .blog-topics{
    flex-wrap:nowrap;
    justify-content:flex-start;
    width:calc(100% + 2rem);
    margin:0 -1rem;
    padding:.3rem 1rem .45rem;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 2.25rem), transparent);
    mask-image:linear-gradient(90deg, #000 calc(100% - 2.25rem), transparent);
  }
  .blog-index .blog-topics::-webkit-scrollbar{ display:none; }
  .blog-index .blog-topic{ scroll-snap-align:start; }
  .blog-index .blog-all-clear{ margin-left:0; }
}
@media (max-width:540px){
  /* the select drops under the search field so neither gets squeezed */
  .blog-index .blog-search{ flex-direction:column; border-radius:22px; }
  .blog-index .blog-search-field{ order:1; }
  .blog-index .blog-search-topic{
    order:2;
    max-width:none;
    min-height:3.1rem;
    border-right:0;
    border-top:1px solid var(--c-line);
    border-radius:0 0 22px 22px;
  }
  .blog-index .blog-suggest-opt{ flex-direction:column; align-items:flex-start; gap:.4rem; }
}

@media (prefers-reduced-motion:reduce){
  .blog-index .blog-suggest{ animation:none; }
  .blog-index :is(.blog-search, .blog-topic, .blog-feature, .blog-feature-media img, .blog-search-clear, .blog-all-clear, .blog-empty-action){ transition:none; }
  .blog-index .blog-feature:hover .blog-feature-media img{ transform:none; }
  .blog-index .blog-topic:active{ transform:none; }
}