/* ============================================================
   MDS Templates — Blog module (article + /blog listing)
   ------------------------------------------------------------
   Loads after variables.css → components.css → templates.css →
   mds-templates.css, and only on pages that render the blog chrome.

   RULES FOLLOWED HERE (same as the rest of the design system):
   - Typography comes from the DS classes in the markup
     (.h1–.h6 / .text-p1–.text-p4 / .fw-*). This sheet declares
     font-size / line-height / font-weight ONLY for editor prose
     (.mds-article-prose *), which cannot carry classes, and for
     documented deviations.
   - Colors, spacing, radii and shadows are DS tokens. Site accents
     are --site-accent / --site-accent-dark (defined in templates.css
     and mds-templates.css).
   - Components are reused, never rebuilt: .card-insight, .tag,
     .btn-pill, .breadcrumbs, .check-list, .benefit-list, .divider-v.

   The legacy standalone header/footer/lang-switcher styles were
   dropped in the merge — [mds_header] / [mds_footer] render those now.
   ============================================================ */

/* Hide the Bricks Single-template duplicates (our article renders its own
   title/meta/etc.). Loaded only on blog pages, so other posts keep their
   theme layout. */




.mds-article-main .mds-article-grid {
  max-width: 45%;
  margin:0 auto;
}


   
.bricks-post-header,
.brxe-post-title,
.brxe-post-meta,
.bricks-post-meta-wrapper { display: none !important; }
/* Orphan "Articles connexes" heading has no class — it is the only <h2> that
   sits as a direct child of the article wrapper / after our Post Content. */
article.brxe-container > h2,
.brxe-post-content ~ h2 { display: none !important; }

/* ── wrapper ───────────────────────────────────────────────── */
.medo-blog-body,
.medo-blog-body *:where(:not(svg, svg *)) { box-sizing: border-box; }
.medo-blog-body {
  color: var(--neutrals-950);
  background: var(--neutrals-100-white);
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Break out of the theme's content column so the design spans edge to edge. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* clip, not hidden: `overflow-x: hidden` turns this into a scroll container,
     which kills position:sticky on the depth bar inside it. `clip` trims the
     same overflow without becoming one (hidden stays as the pre-Safari-16
     fallback — there the bar simply doesn't pin). */
  overflow-x: hidden;
  overflow-x: clip;
}
/* Content images stay fluid. Scoped with :not() so it can't out-specify the
   component images below (card thumbs, hero wash) that must fill their box. */
.medo-blog-body img:not([class*="mds-"]):not([class*="card-"]):not([class*="blog-thumb"]) {
  max-width: 100%;
  display: block;

}
.medo-blog-body a { color: inherit; text-decoration: none; }
.is-hidden { display: none !important; }

/* Shared centred container (same width as .section-inner, own padding so the
   article can run edge-to-edge sections with their own backgrounds). */
.mds-article-container {
  margin: 0 auto;
  max-width: var(--section-container);
}
/* Below the ≥1440 tier the viewport is narrower than the 1420 container, so
   hero / body / "à propos" ran flush against the screen edge on tablet and
   mobile. Inset them by the same 24px the trail and the depth strip already
   use (--spacing-step-7, the DS gutter at every breakpoint). At ≥1440 the
   centred container has 250px of slack, so it keeps its current edges — and
   --grid-system-margin is NOT used here: it is 295px up there. */
@media (max-width: 1439px) {
  .mds-article-container { padding-inline: var(--spacing-step-7); }
}
.mds-article-main .mds-article-grid {
  max-width: 100%;
}

/* The shared .breadcrumbs trail follows the 1420 container with no inner
   padding. This module insets its content by --spacing-lg instead, so give the
   trail the same box here — otherwise its left edge sits 24px outside the
   article/listing content. Blog-only sheet, so it cannot reach other pages. */
.breadcrumbs {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--section-container);
}
/* The current crumb is the article title, so it can be long. PHP already cuts
   it at 60 chars; this keeps it on the strip's single 20px line at any width
   (min-width:0 lets the flex item shrink below its text width). */
.breadcrumbs-current {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── article hero ──────────────────────────────────────────── */
.mds-article-hero {
  background: var(--neutrals-200);
  padding: var(--spacing-xl) 0;
}
.mds-article-hero-grid {
  display: grid;
  grid-template-columns: 1fr 44%;
  gap: var(--spacing-3xl);
  align-items: center;
}
.mds-article-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}
/* First pill carries the article title (truncated in PHP); cap it so a long
   headline never pushes the accent pill off the hero column. */
.mds-article-kicker > .tag {
  /* inline-block, not the component's inline-flex: text-overflow only reaches
     a plain text child, and these pills are text-only. */
  display: none;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* second pill uses the secondary accent from the article design */
.mds-tag-accent {
  background: var(--colors-secondary-2-100);
  color: var(--colors-secondary-2-950);
}
.mds-article-title { color: var(--neutrals-950); }
.mds-article-lede {
  color: var(--neutrals-850);
  margin-top: var(--spacing-lg);
  max-width: 640px;
}
.mds-article-author { margin-top: var(--spacing-2xl); }
.mds-article-author-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}
.mds-article-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--site-accent);
  color: var(--neutrals-100-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.mds-article-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mds-article-author-role {
  color: var(--neutrals-700);
  max-width: 340px;
}
.mds-article-share {
  margin-top: var(--spacing-xl);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}
.mds-article-soc { display: flex; gap: var(--spacing-2xs); }
.mds-article-soc a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--neutrals-100-white);
  border: 1px solid var(--neutrals-400);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--site-accent);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mds-article-soc a:hover {
  background: var(--site-accent);
  color: var(--neutrals-100-white);
  border-color: var(--site-accent);
}
.mds-article-soc svg { width: 17px; height: auto; fill: currentColor; }
.mds-article-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--neutrals-950);
}
.mds-article-copy svg { width: 15px; height: 15px; fill: none; stroke: var(--site-accent); }
.mds-article-copied { color: var(--site-accent); margin-left: var(--spacing-3xs); }
.mds-article-hero-visual {
  border-radius: var(--radius-10md); /* 25px ≈ the 24px Figma corner */
  overflow: hidden;
  aspect-ratio: 620 / 540;
  box-shadow: 0 var(--dropshadow-positioning-3lg) var(--dropshadow-blur-xl)
    var(--dropshadow-spread-xl) var(--opacity-dark-30);
}
.mds-article-hero-visual img { width: 100%; height: 100%; object-fit: cover; }

/* ── depth indicator ───────────────────────────────────────── */
/* Figma 5160-15625 "Depth Indicator": a 56px title strip with a full-bleed 5px
   progress line under it. It pins under whatever is really fixed at the top of
   the screen (--medo-depth-top is measured live in JS — admin bar, medo header,
   theme header — and is 0 when nothing is) and stays pinned to the end of
   .medo-blog-body. */
.mds-article-depth {
  position: sticky;
  top: var(--medo-depth-top, 0px);
  z-index: 90;
  background: var(--neutrals-300);
  border-top: 1px solid var(--neutrals-400);
}
.mds-article-depth-inner {
  max-width: var(--section-container);
  margin: 0 auto;
  /* step-7, not --spacing-lg: the alias drops to 16px below 768px, which left
     the strip 8px out of line with the article gutter on mobile. */
  padding: var(--spacing-md) var(--spacing-step-7);
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}
/* The line under the strip: 5px tall, a 1px pale rule across the full width
   (Figma primary/Lighter #b4e9f9 — no DS token carries this value) with the
   read portion painted solid on top. */
.mds-article-depth-track {
  height: 5px;
  box-shadow: inset 0 -1px 0 #b4e9f9;
  overflow: hidden;
}
.mds-article-depth-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--primary-default);
  /* scaleX beats animating width: no layout work on every scroll frame. */
  transform: scaleX(var(--medo-depth, 0));
  transform-origin: left center;
  will-change: transform;
}
.mds-article-depth-label { color: var(--site-accent); }
.mds-article-depth-title {
  color: var(--neutrals-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── main column + sidebar ─────────────────────────────────── */
.mds-article-main {
  background: var(--neutrals-200);
  padding: var(--spacing-3xl) 0;
}
/* Flex, not grid: the grid always reserved the 380px sidebar track, so with the
   "Articles liés" column off (its default) the body hung on the left with a
   dead band on the right. Flex + justify-content:center lets the column take
   its measure and sit centred when it is alone, and still pairs with the
   sidebar when that section is on. */
.mds-article-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacing-3xl);
}
.mds-article-col {
  /* 992px = the width the old grid gave it (1420 − 380 sidebar − 48 gap), so
     the reading measure is unchanged; min-width:0 keeps long code/tables from
     forcing the column wider than its share. */
  flex: 1 1 992px;
  min-width: 0;
  max-width: 992px;
}
.mds-article-sidebar { flex: 0 0 380px; max-width: 100%; }
.mds-article-audio {
  background: var(--neutrals-100-white);
  border: 1px solid var(--neutrals-400);
  border-radius: var(--radius-9md); /* 20px */
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
  box-shadow: 0 var(--dropshadow-positioning-md) var(--dropshadow-blur-3md)
    var(--dropshadow-spread-xl) var(--opacity-dark-20);
}
.mds-article-audio h2 { margin-bottom: var(--spacing-md); }
.mds-article-player {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--site-accent);
}
.mds-article-play {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--site-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  border: 0;
}
.mds-article-play svg { width: 16px; height: 16px; fill: var(--neutrals-100-white); margin-left: 2px; }
.mds-article-bar {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-2xs);
  background: var(--neutrals-400);
  position: relative;
  overflow: hidden;
}
.mds-article-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 44%;
  background: var(--site-accent);
  border-radius: var(--radius-2xs);
}
.mds-article-toc { margin-bottom: var(--spacing-2xl); }
.mds-article-toc h2 { color: var(--neutrals-850); margin-bottom: var(--spacing-md); }

/* ── editor prose ──────────────────────────────────────────────
   The only block whose HTML comes from the database, so classes
   cannot be applied — these rules map the DS type scale onto the
   raw tags. Authored (non-prose) headings above use .h5/.h6. */
.mds-article-prose h3 { margin: var(--spacing-xs) 0 var(--spacing-md); }
.mds-article-prose h4 { margin: var(--spacing-2xl) 0 var(--spacing-sm); }
.mds-article-prose p,
.mds-article-prose li {
  font-size: var(--typography-size-p2);
  line-height: var(--typography-line-height-p2);
  color: var(--neutrals-800);
}
.mds-article-prose p { margin-bottom: var(--spacing-lg); }
.mds-article-prose ol,
.mds-article-prose ul { margin: 0 0 var(--spacing-lg) var(--spacing-lg); padding: 0; }
.mds-article-prose li { margin-bottom: var(--spacing-sm); padding-left: var(--spacing-3xs); }
.mds-article-prose li::marker { color: var(--site-accent); font-weight: var(--fw-bold); }
.mds-article-prose strong { font-weight: var(--fw-semibold); color: var(--neutrals-950); }
.mds-article-prose a { color: var(--site-accent); text-decoration: underline; }
.mds-article-lead p:first-child { margin-top: 0; }

.mds-article-kicker-no {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  color: var(--site-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--spacing-xl);
}
.mds-article-kicker-no b {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-md);
  background: var(--site-accent);
  color: var(--neutrals-100-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mds-article-logowall {
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-lg) 0;
  border-top: 1px solid var(--neutrals-400);
  border-bottom: 1px solid var(--neutrals-400);
  display: flex;
  justify-content: center;
}
.mds-article-logowall img { max-width: 100%; height: auto; }
/* inline [[IMG:…]] photos injected by medo_body_images() */
.article-img { margin: var(--spacing-xl) 0; text-align: center; }
.article-img img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-9md);
  display: inline-block;
}
.mds-article-cta { margin: var(--spacing-xl) 0; }

/* sidebar */
/* Clears the header + the pinned depth bar (both measured in JS); the 96px
   fallback covers a page without the depth indicator. */
.mds-article-sidebar { position: sticky; top: calc(var(--medo-stack-top, 72px) + var(--spacing-lg)); }
.mds-article-sidebar > h2 { color: var(--site-accent); margin-bottom: var(--spacing-md); }
.mds-article-side-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  border-bottom: 1px solid var(--neutrals-400);
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}
.mds-article-side-title { color: var(--neutrals-950); transition: color 0.2s ease; }
.mds-article-side-card:hover .mds-article-side-title { color: var(--site-accent); }
.mds-article-side-desc { color: var(--neutrals-800); }

/* ── about band ────────────────────────────────────────────── */
.mds-article-about {
  background: var(--neutrals-200);
  padding: var(--spacing-3xl) 0;
}
.mds-article-about-col { max-width: 820px; margin: 0 auto; }
.mds-article-about-col > h2 { margin-bottom: var(--spacing-md); }
.mds-article-about-col > p { color: var(--neutrals-800); margin-bottom: var(--spacing-md); }
.mds-article-about-col .benefit-list { margin: var(--spacing-xl) 0; }
.mds-article-refs {
  background: var(--neutrals-300);
  border-left: 3px solid var(--site-accent);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}
.mds-article-refs > div { color: var(--site-accent); margin-bottom: var(--spacing-xs); }
.mds-article-refs a {
  color: var(--neutrals-850);
  display: block;
  line-height: 1.7;
}
.mds-article-refs a:hover { color: var(--site-accent); }
.mds-article-tags {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin: var(--spacing-xl) 0;
}
.mds-article-about .mds-article-share {
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--neutrals-400);
}

/* ── blog card accents ─────────────────────────────────────── */
/* The category pill is primary blue, replacing the DS component default — a
   purple (--card-category-color, #a333ea) inherited from the generic card.
   --primary-default is #0c67e9 in the light palette, so the token carries the
   exact Figma value while still flipping under [data-theme="dark"]. */
.medo-blog-body .card-insight-category { color: var(--primary-default); }
/* Same treatment for the listing cards' category (.card-meta-type), which the
   DS paints as a clipped primary→primary-light gradient. The background has to
   be dropped as well as the colour set: with background-clip:text still on, a
   solid colour just paints over the gradient instead of replacing it. */
.medo-blog-body .card-meta-type {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--primary-default);
  -webkit-text-fill-color: currentColor;
}
/* Card title goes primary while the card is hovered/focused. The whole card is
   the <a>, so it drives this the same way it drives the ghost-label reveal. */
.medo-blog-body .card-insight-title { transition: color 0.2s ease; }
.medo-blog-body .card-insight:hover .card-insight-title,
.medo-blog-body .card-insight:focus-visible .card-insight-title {
  color: var(--primary-default);
}

/* ── "À lire aussi" ────────────────────────────────────────── */
/* Figma 5160-15792 (desktop) / 5516-50981 (mobile): a 3-up card carousel — dot
   pager + prev/next chevrons under the row. Card component is the existing
   .card-insight; only the row becomes a sliding track. Every size below was
   measured pixel-by-pixel off the Figma render (get_screenshot), not eyeballed:
   card gap 24px, row→controls gap 48px, dot 16/48/16px, chevrons 36×36 flush.
   The two frames position that control row differently: desktop centres the
   dot pager in the container (Figma puts it at x=652 of 1420 → centre 708 vs
   710) with the chevrons flush to the right edge, while mobile is a plain
   edge-to-edge space-between. Both are reproduced literally below. */
.mds-article-also { background: var(--neutrals-300); }
/* 48px on both frames — step-10 directly, because the --spacing-3xl alias
   drops to 40px below 768px and Figma keeps this one at 48. */
.mds-article-also > .section-inner > h2 { margin-bottom: var(--spacing-step-10); }

.mds-also-carousel { position: relative; overflow: hidden; }
.mds-also-track {
  display: flex;
  gap: var(--spacing-lg); /* 24px */
  /* JS drives the slide via transform so layout never reflows mid-swipe. */
  transform: translate3d(var(--medo-also-x, 0), 0, 0);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .mds-also-track { transition: none; }
}
.mds-also-track > .card-insight {
  flex: 0 0 auto;
  /* 3-up desktop: each card is a third of the row minus its share of the two
     24px gaps. */
  width: calc((100% - 2 * var(--spacing-lg)) / 3);
}
/* Figma's thumb is 462×258 (card component's own frame, not the instance
   width) — an aspect-ratio, not the shared component's fixed 200px, so it
   scales exactly with the card at any width. */
.mds-also-track .card-insight-thumb { height: auto; aspect-ratio: 462 / 258; }
/* Figma's card stacks two independent gaps, not one uniform one: the tag/date
   row sits tight under the title (4px), then a full 24px before the
   description, then another 24px before the arrow. The shared component
   groups title with the description instead, so this section re-groups title
   under .mds-also-head next to the meta row (article-body.php) rather than
   reusing .card-insight-text. */
.mds-also-track .card-insight-body { gap: var(--spacing-lg); }
.mds-also-head { display: flex; flex-direction: column; gap: var(--spacing-2xs); }

.mds-also-controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* chevrons flush right, per Figma */
  min-height: 36px;
  margin-top: var(--spacing-step-10); /* 48px, same as the heading→row gap above */
}
.mds-also-dots {
  /* Centred on the container, independent of the chevrons' width. */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--spacing-md); /* 16px */
}
/* Figma "Loading indicator": 3 short bars, not round dots — 16px idle, 48px
   (3×) for the active page, all 4px tall, primary/Light idle → primary/Default
   active. */
.mds-also-dot {
  appearance: none;
  border: 0;
  padding: 0;
  width: 16px;
  height: 4px;
  border-radius: var(--radius-round);
  background: var(--primary-light);
  cursor: pointer;
  transition: width 0.25s ease, background-color 0.25s ease;
}
.mds-also-dot:hover { background: var(--primary-default); }
.mds-also-dot.is-active { width: 48px; background: var(--primary-default); }
/* One joined 72×36 control, not two separate buttons: the pair shares its
   middle edge with no gap and square inner corners — only the outer corners
   are rounded (radius/3sm = 6px). Both glyphs are white on a solid fill. */
.mds-also-nav { display: flex; gap: 0; }
.mds-also-arrow {
  appearance: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: var(--primary-default);
  color: var(--neutrals-100-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.mds-also-prev { border-radius: var(--radius-3sm) 0 0 var(--radius-3sm); }
.mds-also-next { border-radius: 0 var(--radius-3sm) var(--radius-3sm) 0; }
.mds-also-arrow svg { width: 18px; height: 18px; }
.mds-also-prev svg { transform: scaleX(-1); }
.mds-also-arrow:hover:not(:disabled) { background: var(--site-accent-dark); }
/* Figma's page-1 render shows the unavailable "prev" as a lighter solid fill,
   still white-glyphed — #99bdf4, which no DS token carries (primary/Light is
   #bdd8ff, visibly paler). */
.mds-also-arrow:disabled { background: #99bdf4; cursor: default; }

@media (max-width: 1023px) {
  .mds-article-main .mds-article-grid {
  max-width: 100%;
}

  .mds-also-track > .card-insight { width: calc((100% - var(--spacing-xl)) / 2); }
  .mds-also-track { gap: var(--spacing-xl); }
}
@media (max-width: 767px) {
  .mds-article-main .mds-article-grid {
  max-width: 100%;
}

  /* Figma mobile: fixed-width cards, the next one peeking in at the edge —
     not a full-bleed single card. */
  .mds-also-carousel { margin-inline: calc(-1 * var(--spacing-step-7)); padding-inline: var(--spacing-step-7); overflow: hidden; }
  /* Figma mobile: 315px cards, 10px apart, next one peeking at the edge. */
  .mds-also-track { gap: 10px; }
  .mds-also-track > .card-insight { width: 315px; max-width: 86%; }
  /* Mobile frame puts the pager hard left, chevrons hard right, and tightens
     the row→controls gap to 24px (desktop keeps 48). */
  .mds-also-controls { justify-content: space-between; min-height: 32px; margin-top: var(--spacing-step-7); }
  /* 104px pager = 48 + 16 + 16 with 12px gaps; 64px nav = two 32px buttons.
     Mobile pages one card at a time, so a 9-card set makes 9 dots (Figma only
     ever drew 3): let the pager clip rather than shove the chevrons off a
     320px screen. */
  .mds-also-dots {
    position: static;
    transform: none;
    gap: var(--spacing-step-5);
    min-width: 0;
    overflow: hidden;
  }
  .mds-also-nav { flex: 0 0 auto; }
  .mds-also-arrow { width: 32px; height: 32px; }
  .mds-also-arrow svg { width: 16px; height: 16px; }
  /* Figma mobile shows the "Lire l'article →" label at rest — there is no
     hover on touch, so the hover-only reveal (components.css) would hide it
     permanently there. */
  .mds-also-track .card-ghost .btn-ghost-label {
    max-width: 240px;
    opacity: 1;
    margin-right: var(--spacing-2xs);
  }
}

/* ── /blog listing ─────────────────────────────────────────── */
/* Hero — 450px band: dark navy base, photographic wash, and the medO
   "O+" glyph at 62% on the right (Figma 4269-26439). */
.mds-blog-hero {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  display: flex;
  align-items: center;
  background: #172a4b; /* Primary/Primary-Darker — not a variables.css token */
  color: var(--neutrals-100-white);
}
.medo-blog-body .mds-blog-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
  pointer-events: none;
}
.mds-blog-hero-glyph {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 426px;
  max-width: 40%;
  height: auto;
  opacity: 0.62;
  pointer-events: none;
}
.mds-blog-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--section-container);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
/* the theme's global h1/p colors would win over the inherited white */
.mds-blog-hero h1,
.mds-blog-hero p { color: var(--neutrals-100-white) !important; }
.mds-blog-hero p { max-width: 888px; }

.mds-blog-tabs {
  display: flex;
  gap: var(--spacing-xs);
  background: var(--neutrals-100-white);
  border: 1px solid var(--neutrals-400);
  border-radius: var(--radius-5md); /* 12px */
  padding: var(--spacing-3xs);
  max-width: 520px;
  margin: 0 auto var(--spacing-2xl);
}
.mds-blog-tab {
  flex: 1;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--neutrals-700);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.mds-blog-tab.is-active {
  background: var(--site-accent);
  color: var(--neutrals-100-white);
}

/* card grid — the cards themselves are the DS .card-case-study component.
   Figma: 3 × 463px in a 1420 container → 16px column gap, 32px row gap. */
.mds-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--spacing-md);
  row-gap: var(--spacing-xl);
}
@media (max-width: 920px) { .mds-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .mds-blog-grid { grid-template-columns: 1fr; } }
.mds-blog-grid .card-case-study { height: 100%; }
.mds-blog-grid .card-case-study-thumb {
  background: linear-gradient(135deg, var(--colors-secondary-2-100), var(--colors-secondary-2-300));
}
/* placeholder logo when a post has no thumbnail */
.blog-thumb-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.blog-thumb-ph img { width: 44%; max-width: 150px; height: auto; object-fit: contain; }
/* Title 2 lines / excerpt 4 lines, clamped so every card lines up. */
.mds-blog-grid .card-case-study-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.mds-blog-grid .card-case-study-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.mds-blog-empty { color: var(--neutrals-700); padding: var(--spacing-md) 0; }
.mds-blog-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-2xl);
}
/* the grid section already pads 80px below — Figma has one gap, not two */
.mds-blog-news { padding-top: 0; }

/* Submit feedback for the HubSpot-backed newsletter box: the form is hidden and
   one of these takes its place. Type comes from the DS class in the markup. */
.mds-blog-news-done,
.mds-blog-news-error {
  margin: 0;
  text-align: center;
}
.mds-blog-news-done { color: var(--neutrals-100-white); }
.mds-blog-news-notice {
  margin: var(--spacing-step-6) auto 0;
  max-width: 560px;
  text-align: center;
  color: var(--neutrals-100-white);
  opacity: .75;
}
.mds-blog-news-notice a { color: inherit; text-decoration: underline; }
.mds-blog-news-error { color: #ffb4ab; } /* on the dark band, not the light #b42318 */

/* newsletter — DS .section-cta (centred variant); only the pill form is local.
   Figma: 350px transparent input with a white hairline + white gradient CTA. */
.mds-blog-news-form {
  display: flex;
  align-items: center;
  gap: 10px; /* Figma form gap, no 10px spacing token */
  flex-wrap: wrap;
  justify-content: center;
}
.mds-blog-news-input {
  width: 350px;
  max-width: 100%;
  height: 56px;
  border: 1px solid var(--neutrals-100-white);
  border-radius: 200px; /* Figma pill radius */
  background: transparent;
  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-md);
  font-family: inherit;
  font-size: var(--typography-size-step-3);
  line-height: var(--typography-line-height-p4);
  color: var(--neutrals-100-white);
  outline: none;
}
.mds-blog-news-input::placeholder { color: var(--neutrals-100-white); opacity: 1; }
.mds-blog-news-input:focus { border-color: var(--neutrals-100-white); }

/* ── legacy CTA button ──────────────────────────────────────────
   Imported article bodies can contain a hand-written
   <div class="btn-wrapper"><a class="btn">…</a></div> carried over
   from the source sites, so the pattern stays supported. New CTAs
   use the DS .btn-pill component instead. Scoped to the blog wrapper
   so it never collides with the legacy design system's global .btn. */
.medo-blog-body .btn-wrapper { margin: var(--spacing-xl) 0; }
.medo-blog-body .btn-wrapper .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-lg) var(--spacing-xs) var(--spacing-xs);
  border: 0;
  border-radius: var(--radius-round);
  background: var(--site-accent);
  color: var(--neutrals-100-white);
  font-size: var(--typography-size-p3);
  line-height: var(--typography-line-height-p3);
  font-weight: var(--fw-medium);
  transition: background-color 0.2s ease;
}
.medo-blog-body .btn-wrapper .btn:hover { background: var(--site-accent-dark); }
.medo-blog-body .btn-wrapper .btn-circle {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.medo-blog-body .btn-wrapper .btn-circle svg { width: 40px; height: 40px; display: block; }
.medo-blog-body .btn-wrapper .btn-label { white-space: nowrap; }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .mds-article-hero-grid { grid-template-columns: 1fr; gap: var(--spacing-xl); }
  .mds-article-hero-visual { aspect-ratio: 16 / 10; }
  .mds-article-grid { flex-direction: column; align-items: stretch; }
  .mds-article-col { flex: 1 1 auto; max-width: 100%; }
  .mds-article-sidebar { position: static; flex: 1 1 auto; }
  /* Figma mobile hero: 325px tall, glyph 273px top-right, 24px gutters */
  .mds-blog-hero { min-height: 325px; }
  .mds-blog-hero-glyph { width: 273px; max-width: 66%; top: 40%; }
  .mds-blog-hero-inner { padding: 0 var(--spacing-step-7); }
  .mds-blog-list > .section-inner { padding: 0; }
  /* stacked full-width form */
  .mds-blog-news-form { flex-direction: column; align-items: stretch; width: 100%; }
  .mds-blog-news-input { width: 100%; }
  .mds-blog-news-form .btn-pill { justify-content: center; }
}