/* ================================================================
   blog.css — M PRO9 Blog module
   Scope: blog.html (listing) + blogs/*.html (article template)

   Load order on every blog page:
     shared.css (tokens, .btn, .container, .section, .section-title)
     -> blog.css (this file)
     -> global-overrides.css (deferred, injected by seo-global-loader.js)

   Everything here is namespaced to the blog so it can never leak into
   an existing page. Colours, fonts, radii and button styles are the
   site's own tokens from shared.css — nothing new is invented.
   ================================================================ */

:root {
  --blog-ink: #0f2440;
  --blog-line: #e2eaf2;
  --blog-line-soft: #eef4fa;
  --blog-surface: #ffffff;
  --blog-tint: #eef8ff;
  /* Outer width of the article card. Its padding is subtracted from this,
     which lands the actual text measure inside the 720-800px band. */
  --blog-measure: 832px;
}

/* ================================================================
   1. HERO
   ================================================================ */

.blog-hero {
  position: relative;
  background: linear-gradient(160deg, #071422 0%, var(--secondary) 46%, #10365c 100%);
  color: #fff;
  padding: clamp(64px, 9vw, 118px) 0 clamp(56px, 8vw, 96px);
  overflow: hidden;
  isolation: isolate;
}

/* Subtle engineering grid — static, no animation */
.blog-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%);
  z-index: -2;
}

.blog-hero::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -12%;
  width: 62%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(49, 157, 207, .26) 0%, transparent 66%);
  z-index: -1;
  pointer-events: none;
}

.blog-hero .container {
  position: relative;
  max-width: 980px;
  text-align: center;
}

.blog-hero h1 {
  color: #fff;
  margin: 0 0 20px;
  font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.55rem);
  line-height: 1.12;
}

.blog-hero .hero-sub {
  color: rgba(255, 255, 255, .8);
  max-width: 64ch;
  margin: 0 auto 34px;
}

.blog-hero .hero-btns {
  justify-content: center;
}

/* Hero entrance.
   Deliberately CSS-only rather than reusing .motion-hero-item: that class is
   driven by assets/js/shared/motion.js, whose HERO_SELECTORS list does not
   include .blog-hero, so the items would stay at opacity:0 forever. Keeping
   this self-contained means no shared script has to change. */
.blog-hero-in {
  animation: blogHeroIn .62s cubic-bezier(.22, .61, .36, 1) both;
}

.blog-hero .hero-eyebrow.blog-hero-in { animation-delay: 0s; }
.blog-hero h1.blog-hero-in            { animation-delay: .08s; }
.blog-hero .hero-sub.blog-hero-in     { animation-delay: .18s; }
.blog-hero .hero-btns.blog-hero-in    { animation-delay: .28s; }

@keyframes blogHeroIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-hero-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ================================================================
   2. FEATURED ARTICLE
   ================================================================ */

.blog-featured-section {
  background: #fff;
  border-bottom: 1px solid var(--blog-line-soft);
}

.featured-card {
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--blog-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 28px rgba(15, 36, 64, .06);
  transition: box-shadow .28s ease, transform .28s ease, border-color .28s ease;
}

.featured-card:hover {
  transform: translateY(-3px);
  border-color: #cfe0ee;
  box-shadow: 0 16px 46px rgba(15, 36, 64, .12);
}

.featured-media {
  position: relative;
  overflow: hidden;
  background: var(--secondary);
  min-height: 320px;
}

.featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.featured-card:hover .featured-media img {
  transform: scale(1.045);
}

.featured-flag {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 6px 14px;
  border-radius: 6px;
  background: rgba(10, 31, 61, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #cfe9fb;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.featured-body {
  padding: clamp(28px, 3.4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.featured-body .blog-category {
  align-self: flex-start;
}

.featured-body h2 {
  color: var(--primary);
  margin: 0;
  font-size: clamp(1.5rem, 1.15rem + 1.35vw, 2.2rem);
  line-height: 1.2;
}

.featured-body p {
  color: var(--text-muted);
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.75;
}

/* ================================================================
   3. ARTICLE GRID + CARDS
   ================================================================ */

.blog-list-section {
  background: var(--bg-light);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--blog-surface);
  border: 1px solid var(--blog-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
  border-color: #cfe0ee;
  box-shadow: 0 16px 40px rgba(15, 36, 64, .11);
}

.blog-card[hidden] {
  display: none !important;
}

.blog-card-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--secondary);
  flex-shrink: 0;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.055);
}

.blog-card-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 24px 26px;
  flex: 1 1 auto;
}

.blog-category {
  display: inline-block;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 5px;
  background: var(--blog-tint);
  color: var(--primary-light);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.4;
}

.blog-card-content h3 {
  color: var(--primary);
  margin: 0;
  font-size: 1.14rem;
  line-height: 1.35;
}

.blog-card-content > p {
  color: var(--text-muted);
  margin: 0;
  font-size: .94rem;
  line-height: 1.7;
  flex: 1 1 auto;
}

.blog-meta {
  color: #8296ad;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .01em;
}

.blog-readmore {
  align-self: flex-start;
  color: var(--primary-light);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: gap .2s ease, color .2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.blog-readmore:hover {
  color: var(--primary);
  gap: 11px;
}

/* Make the whole card clickable without nesting interactive elements */
.blog-card-content h3 a,
.blog-readmore::after {
  color: inherit;
  text-decoration: none;
}

/* --- load more --- */
.blog-loadmore-wrap {
  display: flex;
  justify-content: center;
  margin-top: 42px;
}

.blog-loadmore-wrap[hidden] {
  display: none;
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--blog-line);
}

.btn-outline:hover {
  border-color: var(--primary-light);
  color: var(--primary-light);
  background: var(--blog-tint);
  transform: translateY(-2px);
}

/* ================================================================
   4. CTA BANDS (listing + article)
   ================================================================ */

.blog-cta {
  position: relative;
  background: linear-gradient(140deg, var(--secondary) 0%, #12365d 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.blog-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 100%);
  z-index: -1;
}

.blog-cta .container {
  max-width: 820px;
  text-align: center;
}

.blog-cta .section-label {
  color: #7fd0f5;
}

.blog-cta h2 {
  color: #fff;
  margin: 0 0 16px;
}

.blog-cta p {
  color: rgba(255, 255, 255, .78);
  margin: 0 auto 32px;
  max-width: 62ch;
  font-size: 1.04rem;
  line-height: 1.75;
}

/* ================================================================
   5. ARTICLE PAGE
   ================================================================ */

/* --- reading progress --- */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--primary-light), #7fd0f5);
  z-index: 10200;
  pointer-events: none;
}

/* --- header --- */
.article-head {
  background: linear-gradient(165deg, #071422 0%, var(--secondary) 55%, #10355a 100%);
  color: #fff;
  padding: clamp(28px, 4vw, 44px) 0 clamp(48px, 6vw, 76px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.article-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 85% 70% at 45% 25%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 45% 25%, #000 35%, transparent 100%);
  z-index: -1;
}

.article-head .container {
  max-width: 900px;
}

/* --- breadcrumb --- */
.breadcrumb {
  margin-bottom: 26px;
  font-size: .84rem;
  color: rgba(255, 255, 255, .55);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .84rem;
}

.breadcrumb li + li::before {
  content: "/";
  color: rgba(255, 255, 255, .3);
}

.breadcrumb a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  transition: color .2s ease;
}

.breadcrumb a:hover {
  color: #7fd0f5;
}

.breadcrumb [aria-current="page"] {
  color: rgba(255, 255, 255, .5);
}

/* --- title block --- */
.article-head .article-flag {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7fd0f5;
  margin-bottom: 14px;
}

.article-head h1 {
  color: #fff;
  margin: 0 0 20px;
  font-size: clamp(1.95rem, 1.4rem + 2.3vw, 3.05rem);
  line-height: 1.16;
  max-width: 20ch;
}

.article-standfirst {
  color: rgba(255, 255, 255, .8);
  font-size: clamp(1.02rem, .98rem + .3vw, 1.16rem);
  line-height: 1.72;
  max-width: 62ch;
  margin: 0 0 30px;
}

.article-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .62);
  font-size: .89rem;
}

.article-byline strong {
  color: #fff;
  font-weight: 600;
}

.article-byline .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
}

/* --- lead image --- */
.article-lead-media {
  background: linear-gradient(180deg, var(--secondary) 0 50%, var(--bg-light) 50% 100%);
  padding: 0;
}

.article-lead-media .container {
  max-width: 1000px;
}

.article-lead-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(7, 20, 34, .3);
}

/* --- body layout: TOC rail + reading column --- */
.article-shell {
  background: var(--bg-light);
}

.article-layout {
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  max-width: 1150px;
  margin: 0 auto;
}

/* --- table of contents --- */
.article-toc {
  min-width: 0;
  position: sticky;
  top: calc(var(--site-nav-h-px, 90px) + 24px);
  padding: 24px 22px;
  background: #fff;
  border: 1px solid var(--blog-line);
  border-radius: 12px;
}

.article-toc h2 {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--primary-light);
  margin: 0 0 14px;
}

.article-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}

.article-toc li {
  counter-increment: toc;
  margin: 0;
}

.article-toc a {
  display: block;
  padding: 7px 0 7px 34px;
  position: relative;
  color: #5a728c;
  font-size: .875rem;
  line-height: 1.5;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.article-toc a::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 10px;
  color: #a9bccd;
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.article-toc a:hover,
.article-toc a.is-current {
  color: var(--primary);
  border-left-color: var(--primary-light);
}

.article-toc a.is-current::before {
  color: var(--primary-light);
}

/* --- article prose --- */
.article-body {
  max-width: var(--blog-measure);
  /* Grid items default to min-width:auto, which lets a wide child (the
     comparison tables set min-width:460px) stretch the column and push the
     whole page into horizontal scroll. Pinning this to 0 keeps the overflow
     inside .article-table-wrap, where it belongs. */
  min-width: 0;
  background: #fff;
  border: 1px solid var(--blog-line);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 56px);
  color: #33465e;
}

.article-body > *:first-child {
  margin-top: 0;
}

.article-body > *:last-child {
  margin-bottom: 0;
}

.article-body h2 {
  color: var(--primary);
  font-size: clamp(1.4rem, 1.2rem + .7vw, 1.78rem);
  line-height: 1.28;
  margin: 46px 0 14px;
  scroll-margin-top: calc(var(--site-nav-h-px, 90px) + 22px);
}

.article-body h3 {
  color: var(--blog-ink);
  font-size: clamp(1.1rem, 1.02rem + .35vw, 1.24rem);
  line-height: 1.35;
  margin: 30px 0 10px;
  scroll-margin-top: calc(var(--site-nav-h-px, 90px) + 22px);
}

.article-body p {
  margin: 0 0 18px;
  font-size: 1.03rem;
  line-height: 1.82;
}

.article-body strong {
  color: var(--blog-ink);
  font-weight: 650;
}

.article-body a:not(.btn) {
  color: var(--primary-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.article-body a:not(.btn):hover {
  color: var(--primary);
}

.article-body ul,
.article-body ol {
  margin: 0 0 20px;
  padding-left: 22px;
}

.article-body li {
  margin-bottom: 9px;
  font-size: 1.02rem;
  line-height: 1.78;
  padding-left: 4px;
}

.article-body ul li::marker {
  color: var(--primary-light);
}

.article-body ol li::marker {
  color: var(--primary-light);
  font-weight: 700;
}

.article-body li > strong:first-child {
  color: var(--primary);
}

/* callout — used sparingly for a key takeaway */
.article-note {
  margin: 26px 0;
  padding: 20px 24px;
  background: var(--blog-tint);
  border-left: 3px solid var(--primary-light);
  border-radius: 0 10px 10px 0;
}

.article-note p {
  margin: 0;
  font-size: .98rem;
  line-height: 1.75;
  color: #2d4661;
}

/* Cautionary variant of the same callout */
.article-note--warn {
  background: #fff6ee;
  border-left-color: #d9822b;
}

.article-note--warn p {
  color: #5a4128;
}

.article-note--warn strong {
  color: #8f4d1f;
}

/* Side-by-side contrast pair (weak vs strong, avoid vs ask, before vs after) */
.article-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 26px 0;
}

.article-split > div {
  padding: 18px 20px;
  border: 1px solid var(--blog-line);
  border-radius: 12px;
  background: var(--bg-light);
}

/* Card captions, not document sections — kept out of the heading outline so
   they cannot create an h2 -> h4 skip. Font family and weight are restated
   here because they previously came from the global h1-h6 rule. */
.article-split .split-label {
  margin: 0 0 10px;
  font-family: var(--global-heading-font, 'Lato', sans-serif);
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: var(--primary);
}

.article-split p {
  margin: 0 0 8px;
  font-size: .95rem;
  line-height: 1.7;
}

.article-split p:last-child { margin-bottom: 0; }

.article-split ul,
.article-split ol { margin: 0; padding-left: 20px; }

.article-split li { font-size: .94rem; margin-bottom: 6px; }

.article-split .split-weak {
  background: #fff6ee;
  border-color: #f0dcc6;
}

.article-split .split-weak .split-label { color: #8f4d1f; }

.article-split .split-strong {
  background: var(--blog-tint);
  border-color: #cfe3f3;
}

.article-split .split-strong .split-label { color: var(--primary); }

@media (max-width: 700px) {
  .article-split { grid-template-columns: 1fr; }
}

/* Inline SVG diagram inside the reading column */
.article-figure {
  margin: 28px 0;
  padding: 22px 22px 14px;
  background: #fff;
  border: 1px solid var(--blog-line);
  border-radius: 12px;
}

.article-figure svg { display: block; width: 100%; height: auto; }

.article-figure figcaption {
  margin-top: 12px;
  color: #8296ad;
  font-size: .85rem;
  line-height: 1.6;
}

.article-figure figcaption strong { color: var(--primary); }

/* inline figure */
.article-image {
  margin: 30px 0;
}

.article-image img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--blog-line);
}

.article-image figcaption {
  margin-top: 10px;
  color: #8296ad;
  font-size: .85rem;
  line-height: 1.6;
  text-align: center;
}

/* comparison table */
.article-table-wrap {
  margin: 26px 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--blog-line);
  border-radius: 12px;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
  min-width: 460px;
}

.article-body th,
.article-body td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid var(--blog-line-soft);
  line-height: 1.6;
}

.article-body th {
  background: var(--bg-light);
  color: var(--primary);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.article-body tbody tr:last-child td {
  border-bottom: none;
}

/* --- mid-article CTA --- */
.article-midcta {
  margin: 40px 0;
  padding: 32px;
  background: linear-gradient(135deg, var(--secondary) 0%, #123a62 100%);
  border-radius: var(--radius);
  color: #fff;
}

.article-midcta h3 {
  color: #fff;
  margin: 0 0 10px;
  font-size: 1.24rem;
  line-height: 1.32;
}

.article-midcta p {
  color: rgba(255, 255, 255, .76);
  margin: 0 0 22px;
  font-size: .97rem;
  line-height: 1.7;
}

/* --- FAQ --- */
.article-faq {
  background: #fff;
  border-top: 1px solid var(--blog-line-soft);
}

.article-faq .container {
  max-width: 860px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--blog-line);
  border-radius: 12px;
  background: var(--bg-light);
  overflow: hidden;
  transition: border-color .22s ease, background .22s ease;
}

.faq-item[open] {
  border-color: #cfe0ee;
  background: #fff;
}

.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 24px;
  cursor: pointer;
  list-style: none;
  color: var(--primary);
  font-family: var(--global-heading-font, 'Lato', sans-serif);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.45;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: -2px;
}

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--blog-tint);
  color: var(--primary-light);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  transition: transform .22s ease, background .22s ease;
}

.faq-item[open] summary::after {
  content: "\2212";
  transform: rotate(180deg);
  background: var(--primary-light);
  color: #fff;
}

.faq-answer {
  padding: 0 24px 21px;
  color: #55697f;
  font-size: .97rem;
  line-height: 1.78;
}

.faq-answer p {
  margin: 0;
}

/* --- related articles --- */
.article-related {
  background: var(--bg-light);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.related-grid .blog-card-image {
  aspect-ratio: 16 / 9;
}

.related-grid .blog-card-content {
  padding: 20px 20px 22px;
  gap: 10px;
}

.related-grid .blog-card-content h3 {
  font-size: 1.03rem;
}

.related-grid .blog-card-content > p {
  font-size: .89rem;
}

/* --- back to top --- */
.back-to-top {
  position: fixed;
  /* Stacks directly above the shared floating WhatsApp button
     (56px + 24px bottom offset + 14px gap), never on top of it. */
  right: 24px;
  bottom: calc(94px + var(--mpro9-cookie-h, 0px));
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--primary-light);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  box-shadow: 0 8px 24px rgba(23, 63, 100, .28);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease, background .2s ease;
  z-index: 9000;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--primary);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* --mpro9-cookie-h is published by the script in includes/footer.html and
   carries the cookie bar's live height (0px once dismissed, or on pages with
   no bar). Adding it keeps this button clear of both the bar and the floating
   WhatsApp button at every viewport width. */
@media (max-width: 540px) {
  .back-to-top {
    right: 16px;
    bottom: calc(80px + var(--mpro9-cookie-h, 0px));
  }
}

/* ================================================================
   6. RESPONSIVE
   ================================================================ */

/* Tablet — 2 cards per row */
@media (max-width: 1024px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* TOC stacks above the article. Both stay capped at the reading width and
     centre, so the text measure stays inside the 720-800px band here too. */
  .article-toc,
  .article-body {
    position: static;
    max-width: var(--blog-measure);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 980px) {
  .blog-grid,
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .featured-card {
    grid-template-columns: 1fr;
  }

  .featured-media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 768px) {
  .article-head h1 {
    max-width: none;
  }

  .article-midcta {
    padding: 26px 22px;
  }

  .faq-item summary {
    padding: 17px 18px;
    font-size: .97rem;
  }

  .faq-answer {
    padding: 0 18px 19px;
  }
}

/* Mobile — 1 card per row */
@media (max-width: 640px) {
  .blog-grid,
  .related-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .blog-hero .hero-btns .btn {
    width: 100%;
    justify-content: center;
  }

  .article-byline {
    gap: 8px 12px;
    font-size: .84rem;
  }

  .article-body {
    border-radius: 12px;
  }
}

/* ================================================================
   7. MOTION PREFERENCES
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  .blog-card,
  .featured-card,
  .blog-card-image img,
  .featured-media img,
  .back-to-top,
  .read-progress,
  .blog-readmore {
    transition: none !important;
  }

  .blog-card:hover,
  .featured-card:hover {
    transform: none;
  }

  .blog-card:hover .blog-card-image img,
  .featured-card:hover .featured-media img {
    transform: none;
  }
}

/* ================================================================
   8. PRINT — articles should print as clean documents
   ================================================================ */

@media print {
  .navbar,
  .mobile-nav,
  .site-footer,
  .cookie-bar,
  .article-toc,
  .article-midcta,
  .article-related,
  .blog-cta,
  .back-to-top,
  .read-progress,
  .floating-contact {
    display: none !important;
  }

  .article-head {
    background: none !important;
    color: #000 !important;
    padding: 0 0 20px;
  }

  .article-head h1,
  .article-standfirst,
  .article-byline,
  .article-byline strong {
    color: #000 !important;
  }

  .article-body {
    border: none;
    padding: 0;
    max-width: 100%;
  }
}