/* ============================================================
 * BLOG HOME — page styling (design system v2)
 * Shared full-photo hero (shorter cut) · theme filter pills
 * (nav-switcher language) · card grid reusing home blogcards.
 * ============================================================ */

/* ---------- hero: shorter cut ---------- */
.hero2--bloghome .hero2__frame { min-height: max(480px, 66svh); }
.hero2__copy--bloghome { max-width: 62rem; padding-bottom: clamp(36px, 6vh, 64px); }
.hero2__copy--bloghome h1 { font-size: clamp(38px, 5vw, 72px); }

/* ---------- filter bar ----------
   WHITE AFTER A HERO (site rule, Rebecca 4 Aug: "id like to make a rule that
   after a hero there is only white sections"). This band was #F3F7FA. The
   filter track keeps its own grey pill so it still reads, and the article
   cards swap their hairline stroke for the soft site shadow below — on a white
   band a stroke-only card is exactly the tile stroke she asked to lose. */
.bh { background: #fff; padding: clamp(64px, 8vw, 110px) 0 clamp(72px, 9vw, 130px); }
.bh .blogcard { border-color: transparent; box-shadow: 0 8px 24px rgba(15, 20, 56, 0.08); }

/* ============================================================
 * PAGE HEADER — JUST TYPE (4 Aug 2026)
 * "i dont like the blog hero - lets make it just text."
 * The thin navy banner tile that was here (and the hexagon watermark inside
 * it) is deleted. What is left is the heading as plain type on the white page,
 * left aligned. No tile, no colour block, no watermark, no photo.
 * ============================================================ */
.bhhead {
  background: #fff;
  /* ⚠ 18px, THE SITE-WIDE HERO TOP GAP — 6 Aug 2026, Rebecca: "can we make sure
     that all hero banners have the same distance above them". This was
     clamp(52px, 6.5vw, 96px), from when .bhhead was a bare heading and needed the
     air itself. It is a hero tile now, and a hero tile sits 18px under the nav on
     every other page on the site. Measured: 94px -> 18px. */
  padding: var(--hero-top, 18px) 0 clamp(26px, 3.2vw, 44px);
}
/* ⚠ NO container override here. I first set max-width:1640px (the site container
   figure from the design rules) and the heading landed 80px LEFT of everything
   below it — because on this page .container resolves to foundation.css's
   1280px, not 1640px. Leaving it alone keeps the heading, the featured article,
   the filter bar and the grid all on the same left edge. */
.bh__head { max-width: 60ch; }
/* small uppercase type, NOT the site's navy eyebrow pill: on a text-only
   header a lone navy pill is the one non-text object on the page. Swap the
   three properties below for the pill styling if she wants it back. */
.bh__eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ge-blue, #1B367E);
}
.bhhead h1 {
  margin: 0;
  /* PAGE tier, 62px — see the H1 tier table in home-v2.css. Was 66px, which
     was a third size doing the same job as the product and audience heroes. */
  font-size: clamp(36px, 4.3vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ge-navy, #0F1438);
}
/* the signature highlight pill still has to be restated here — home-v2.css only
   styles .mark inside the photo hero, the statement lines and the final CTA */
.bhhead h1 .mark {
  display: inline-block;
  line-height: 1;
  background: var(--ge-blue-3, #D9F4FF);
  color: var(--ge-blue, #1B367E);
  border-radius: 0.24em;
  padding: 0.1em 0.18em 0.16em;
  margin-block: 0.14em 0.08em;
}
.bh__lede {
  margin: 18px 0 0;
  max-width: 58ch;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--ge-text-secondary, #4A5876);
}
/* the list band follows the header directly, so it carries no top padding of
   its own — the header's bottom padding is the whole gap */
.bh { padding-top: 0; }

/* ---------- featured article ---------- */
.bhfeat {
  display: grid;
  /* copy left, photo right — the photo is the bigger half, as in her reference */
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin: 0 0 clamp(44px, 5.5vw, 80px);
  padding: 0;
  text-decoration: none;
  color: inherit;
}
.bhfeat__body { min-width: 0; }
.bhfeat__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: var(--ge-text-secondary, #4A5876);
}
/* "Latest" — sky pill, navy text. Sky is barred from text by the design rules,
   so it is the pill and the text is navy, never the other way round.
   4 Aug: SIZED TO MATCH .blogcard__tag beside it ("can we make these the same
   size"). Three things were making it bigger — more padding, uppercase, and the
   letter-spacing that goes with uppercase — so all three now match the tag and
   only the fill colour tells them apart. Keep them in step if either changes:
   the tag lives in home-v2.css at .blogcard__tag. */
.bhfeat__latest {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ge-sky, #2FB7F1);
  color: var(--ge-navy, #0F1438);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}
.bhfeat h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ge-navy, #0F1438);
}
.bhfeat__body > p {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ge-text-secondary, #4A5876);
}
.bhfeat__img {
  display: block;
  border-radius: 24px;
  overflow: hidden;
  /* soft lift, no stroke — the same treatment the cards below now use */
  box-shadow: 0 8px 24px rgba(15, 20, 56, 0.08);
}
.bhfeat__img img {
  display: block;
  width: 100%;
  /* 4 Aug photo-ratio standard: 1:1 / 4:3 / 16:9 (see the note in home-v2.css) */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 420ms var(--hv2-ease);
}
.bhfeat:hover .bhfeat__img img { transform: scale(1.03); }
.bhfeat:hover .blogcard__go svg { transform: translateX(4px); }
.bhfeat:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47, 183, 241, 0.45); border-radius: 24px; }
@media (prefers-reduced-motion: reduce) {
  .bhfeat__img img, .bhfeat:hover .bhfeat__img img { transition: none; transform: none; }
}
@media (max-width: 860px) {
  .bhfeat { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 32px); }
  /* photo first once stacked, so the page still opens on an image */
  .bhfeat__img { order: -1; }
  .bhfeat__body > p { max-width: none; }
}
.bh__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
/* ⚠ THE PILL ROW SCROLLS INSIDE ITSELF — fixed 12 Aug 2026.
   This was an `inline-flex` group of six `white-space: nowrap` pills with no width
   limit, so from ~1150px down the group was wider than the page and pushed the whole
   document sideways: measured 900px of scroll width in a 768px viewport (iPad
   portrait), which breaks the zero-overflow standard the site was signed off against.
   ⚠ NOT a pre-existing quirk anyone had accepted — it simply had not been measured at
   768. It was NOT caused by the hero changes; verified by restoring the old hero rule
   and re-measuring, the overflow persisted.
   overflow-x on the group is the right fix rather than wrapping the pills: the grey
   track is a single control, and a wrapped second row of pills would read as two
   controls. Same pattern as the sideways product scrollers.
   ⚠ `flex: none` matters. Without it flexbox shrinks the pills to fit instead of
   scrolling, and the labels ("Site safety") clip mid-word. */
.bh__filters {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: #EEF2F6;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;                /* the track is chrome, not content */
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;       /* don't hand the swipe to the page */
}
.bh__filters::-webkit-scrollbar { display: none; }
.bh__filters .bh__pill { flex: none; }
.bh__pill {
  appearance: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  color: var(--ge-navy, #0F1438);
  background: transparent;
  border-radius: 999px;
  padding: 10px 22px;
  /* min-height rather than more padding, so the pill can't fall under the 44px
     touch floor whatever the font metrics do (iPad pass, 29 Jul) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  transition: background 200ms var(--hv2-ease), box-shadow 200ms var(--hv2-ease);
  white-space: nowrap;
}
.bh__pill:hover:not(.is-active) { background: rgba(255, 255, 255, 0.6); }
.bh__pill.is-active {
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 20, 56, 0.10);
  font-weight: 700;
}
.bh__pill:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47, 183, 241, 0.45); }
/* 3.75:1 -> 4.6:1; see .pcard__then in home-v2.css */
.bh__count { margin: 0; font-size: 14.5px; color: #6B7689; }

/* ============================================================
 * ARTICLE CAROUSEL (4 Aug 2026)
 * "i only want 3 tiles to show under the filter. we can make them a carousel
 * then which is controlled by arrows."
 * .bhc is a window that clips; .bhc__track is ONE flex row holding every card,
 * translated by whole pages. Cards are sized off --bhc-per, so the same maths
 * gives 3 up on desktop, 2 on a tablet and 1 on a phone without the script
 * needing per-breakpoint numbers — it reads --bhc-per back off the track.
 * Filtering is untouched: it sets .is-hidden, the flex row reflows, and
 * blog-home.js recounts the pages.
 * ============================================================ */
.bhc {
  --bhc-per: 3;
  --bhc-gap: clamp(16px, 2vw, 24px);
  overflow: hidden;
  /* the cards' hover lift and focus ring would be clipped by overflow:hidden,
     so the window is padded and pulled back out by the same amount */
  padding: 14px;
  margin: -14px;
}
.bhc__track {
  /* beats .bloggrid's grid-template-columns from home-v2.css */
  display: flex;
  gap: var(--bhc-gap);
  align-items: stretch;
  transform: translateX(0);
  transition: transform 460ms var(--hv2-ease);
  will-change: transform;
}
.bhc__track > .blogcard {
  flex: 0 0 calc((100% - (var(--bhc-per) - 1) * var(--bhc-gap)) / var(--bhc-per));
  min-width: 0;
}
@media (prefers-reduced-motion: reduce) {
  .bhc__track { transition: none; }
}

/* ---------- arrows, in the filter bar beside the count ---------- */
.bh__nav { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); }
.bh__arrows { display: flex; align-items: center; gap: 8px; }
.bh__arrow {
  appearance: none;
  flex: 0 0 auto;
  width: 44px; height: 44px;          /* 44px touch target, per the a11y rules */
  border: none;
  border-radius: 999px;
  background: #EEF2F6;                /* the filter track's grey, so the bar reads as one control */
  color: var(--ge-navy, #0F1438);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 200ms var(--hv2-ease), color 200ms var(--hv2-ease);
}
.bh__arrow svg { width: 19px; height: 19px; }
.bh__arrow:hover:not(:disabled) { background: var(--ge-navy, #0F1438); color: #fff; }
.bh__arrow:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47, 183, 241, 0.45); }
/* disabled rather than looping: at the ends there is genuinely nothing further,
   and a silently looping carousel makes people think they missed something */
.bh__arrow:disabled { opacity: 0.35; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .bh__arrow { transition: none; }
}

@media (max-width: 900px) {
  .bhc { --bhc-per: 2; }
}
@media (max-width: 560px) {
  .bhc { --bhc-per: 1; }
}

/* ---------- filtering: hidden cards + gentle entrance ---------- */
.bh__grid .blogcard.is-hidden { display: none; }
.bh__grid .blogcard.is-entering { animation: bh-in 360ms var(--hv2-ease); }
@keyframes bh-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bh__grid .blogcard.is-entering { animation: none; }
}

@media (max-width: 480px) {
  .bh__filters { max-width: 100%; overflow-x: auto; }
  /* the bar stacks on a phone, so the arrows sit under the pills, not beside */
  .bh__bar { align-items: flex-start; }
  .bh__pill { padding: 9px 14px; font-size: 14px; }
}

/* ============================================================
 * BLOG HERO TILE  (6 Aug 2026)
 * Rebecca: "i feel like the blog page could do with a hero header. use the same
 * size as the help centre hero."
 * The blog opened with a bare heading on white while every other section on the
 * page is a card — it read as if the page started mid-scroll.
 *
 * ⚠ HEIGHT IS THE SAME EXPRESSION AS THE HELP CENTRE, not a copied number:
 * `calc(var(--hero-h) / 2)`, from .ph-help__frame in parent-help.css. If the
 * shared hero height ever changes, both pages move together — which is what
 * "the same size as the help centre hero" has to mean to stay true.
 * ⚠ Geometry comes from --hero-frame-w / --hero-inset, the site's hero tokens, so
 * this lands on the one margin without inventing a width.
 * ============================================================ */
.bhhead__frame {
  position: relative;
  overflow: hidden;                 /* clips the watermark to the rounded corners */
  width: var(--hero-frame-w);
  margin-inline: auto;
  min-height: calc(var(--hero-h) / 2);
  border-radius: var(--band-radius, 64px);
  /* ⚠ BRAND BLUE, not navy — Rebecca, 12 Aug 2026: "can we make the news and insights
     hero a differnt blue". #1B367E is the palette's own blue (colors_and_type.css line
     22, "hover · active · emphasis"), so this is a documented brand colour rather than a
     new one invented for this page.
     ⚠ NOT the sky #2FB7F1. That is reserved for actions and CTAs in CLAUDE.md, and white
     text on it fails WCAG AA — this band carries a heading, a lede and an eyebrow.
     White on #1B367E measures 10.4:1. */
  background: var(--ge-blue, #1B367E);
  display: flex;
  align-items: center;
  padding: clamp(28px, 3.4vw, 56px) clamp(24px, 3.6vw, 64px);
}
/* ⚠ NO max-width HERE ANY MORE — Rebecca: "i think the header could go on 1 line too".
   This carried `max-width: 34ch` (357px), which forced "News and insights." onto two
   lines even though the text only needs 319px and the frame has 1275px inside it. The cap
   was doing double duty — holding the heading AND giving the lede a readable measure — so
   the measure moves onto the lede, where it belongs. Without that the lede would run the
   full 1275px, which is far too wide to read. */
.bhhead__inner { position: relative; z-index: 1; }
.bhhead__inner .bh__lede { max-width: 46ch; }
/* the site-standard hero ghost: white hexagon, top-right, 11% */
.bhhead__wm {
  position: absolute;
  top: clamp(-160px, -11vw, -70px);
  right: clamp(-170px, -11vw, -80px);
  width: clamp(380px, 52vw, 820px);
  opacity: 0.11;
  z-index: 0;
  pointer-events: none;
  line-height: 0;
}
.bhhead__wm img { width: 100%; height: auto; display: block; }

/* type inverts onto the navy */
.bhhead .bh__eyebrow { color: rgba(255, 255, 255, 0.72); }
.bhhead h1 { color: #fff; }
.bhhead .bh__lede { color: rgba(255, 255, 255, 0.86); }
/* the highlight pill goes white on a dark hero, matching every other hero */
.bhhead h1 .mark { background: #fff; color: var(--ge-blue, #1B367E); }

@media (max-width: 700px) {
  .bhhead__frame { border-radius: 32px; min-height: 0; }
  .bhhead__inner { max-width: none; }
}