/*
 * blog.css — the app-owned blog subsystem (phases B2 + B2.5 of
 * docs/BLOG_MIGRATION_PLAN.md): /blog/, /blog/categoria/{slug}/ and the 60
 * post pages. Loaded ONLY on those routes (BlogViewModel appends it after the
 * shared chrome bundle, the same way LegalPageController appends legal.css), so
 * nothing here can affect the Elementor replicas.
 *
 * PHASE B2.5 — the redesign Jose approved 2026-08-22: the STRUCTURE of an
 * editorial blog (a sectioned, category-first index; two card densities; a
 * split post hero; one narrow prose measure; an inline TOC; a footer ladder)
 * wearing the SKIN of the brand's own Instagram design language, which is loud:
 * electric ultramarine and hot pink grounds, a chartreuse highlight, cream
 * type, extra-bold Poppins, and sticker geometry (2 px outline + hard offset
 * shadow, never a soft blur).
 *
 * The five mechanisms, in the order they matter:
 *
 *  1. HEAVY SANS DISPLAY. Poppins 800 for H1s and highlight bars, 700 for card
 *     titles and section headings, 400/500 for body. No second family: every
 *     weight is already self-hosted by the Elementor kit, so the display face
 *     costs two 8 KB preloads (config/blog.php `preload_fonts`) and no new
 *     vendor asset.
 *  2. HIGHLIGHT BARS (.blog-mark) — the brand's signature move: a solid bar
 *     behind one or two words, offset by a hard chartreuse/electric shadow.
 *     Used on the index H1, the rail heading and the band headings. NOT used
 *     inside article prose.
 *  3. BOLD BANDS, CALM ARTICLE. The electric ground carries the mastheads, the
 *     post hero and the CTA panels; the reading surfaces (prose, listings) stay
 *     on the warm near-white so a 1,500-word article is still readable. Sections
 *     separate by ground change, never by a soft shadow.
 *  4. ONE MEASURE FOR PROSE (--blog-measure, ~70ch) inside a wide container.
 *     The width change is what signals that the article has started.
 *  5. TWO CARD DENSITIES. .blog-card (image card, sticker outline) tops a page;
 *     .blog-row (thumb + title + date, no chrome) carries volume in the
 *     category bands.
 *
 * PALETTE — sampled from the Instagram set (dominant-colour histogram, see the
 * B2.5 report) and then checked pair by pair against WCAG AA:
 *
 *   cream  #fdf5e0 on electric #2b42e6 ....  6.39:1  AA
 *   lime   #d6f70a on electric ............  5.68:1  AA
 *   ink    #0f1420 on lime ................ 15.04:1  AAA
 *   white  #ffffff on pink #ed4784 ........  3.60:1  AA Large only -> pink bars
 *                                                    carry ONLY >=21px bold text
 *   navy   #003865 on ground #fcfcfa ...... 11.66:1  AAA
 *   ink    #303030 on ground .............. 12.85:1  AAA
 *   muted  #5c6773 on ground ..............  5.61:1  AA
 *   #dce3ff on electric ...................  5.45:1  AA  (meta on a blue band)
 *
 * Two standing rules the loud skin must not break:
 *   - PINK AND LIME ARE NEVER TEXT ON A LIGHT GROUND (#ed4784 on #fcfcfa is
 *     3.5:1, #d6f70a is worse). They are bar fills, hard shadows and icons.
 *   - ORANGE #ff8200 IS A BUTTON FILL, never body-sized text: white on it is
 *     2.49:1. That is the accepted, pre-existing brand risk (memory: "CTA
 *     contrast deferred"), not a new one — do not extend it.
 *
 * ONE deliberate use of !important, in the .blog-prose block. The migrated
 * bodies carry per-span inline styles from Google Docs (Arial, 11pt, #000)
 * which CANNOT be overridden by specificity, and content/blog/ belongs to phase
 * B1 — the styling fix has to live here. Only the properties that decide
 * typography are neutralised (family/size/colour); weight, style and decoration
 * are left alone so bold, italic and underline survive.
 */

/* ------------------------------------------------------------------ tokens */

.blog {
  --blog-ink: #303030;
  --blog-navy: #003865;
  --blog-orange: #ff8200;
  /* Sampled: electric ultramarine, the dominant ground of the IG set. */
  --blog-electric: #2b42e6;
  --blog-electric-dark: #1f33bf;
  /* Sampled: hot pink. Accent only — bars, chips, hard shadows. */
  --blog-pink: #ed4784;
  /* Sampled: chartreuse highlight. Accent only. */
  --blog-lime: #d6f70a;
  /* Sampled: the cream the IG type is set in. */
  --blog-cream: #fdf5e0;
  /* Meta/secondary type ON the electric ground (5.45:1). */
  --blog-on-electric: #dce3ff;
  --blog-ground: #fcfcfa;
  --blog-band: #f5f2ed;
  --blog-outline: #0f1420;
  --blog-rule: #e4e8ee;
  --blog-hairline: #e2ddd3;
  --blog-muted: #5c6773;
  --blog-sans: 'Poppins', -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* ~70ch at 17px. The single measure every run of prose obeys. */
  --blog-measure: 44rem;
  /* The sticker offset. Hard, never blurred. */
  --blog-lift: 4px 4px 0 var(--blog-outline);

  background: var(--blog-ground);
  padding: 0 0 72px;
  font-family: var(--blog-sans);
  color: var(--blog-ink);
  font-size: 17px;
  line-height: 1.7;
  overflow-wrap: break-word;
}

.blog a {
  color: var(--blog-navy);
}

/* The width-limiting wrapper. It is NOT .blog itself, because a band has to be
   able to bleed to the viewport edge while its content stays on this grid. */
.blog-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

.blog-measure {
  max-width: var(--blog-measure);
  margin: 0 auto;
}

/* ---------------------------------------------------------- highlight bars */

/*
 * The brand's signature: a solid bar behind the words, kicked by a hard shadow
 * in a second brand colour. `display: inline` + box-decoration-break keeps the
 * bar correct when a heading wraps at 375px — inline-block would leave one long
 * bar overflowing the viewport.
 */
.blog-mark {
  display: inline;
  padding: 0.06em 0.4em 0.16em;
  background: var(--blog-electric);
  color: var(--blog-cream);
  box-shadow: 5px 5px 0 var(--blog-lime);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* White on #ed4784 is 3.6:1 — AA for LARGE text only, so this variant is
   restricted to >=21px bold headings. Never put a caption in it. */
.blog-mark--pink {
  background: var(--blog-pink);
  color: #fff;
  box-shadow: 5px 5px 0 var(--blog-lime);
}

.blog-mark--lime {
  background: var(--blog-lime);
  color: var(--blog-outline);
  box-shadow: 5px 5px 0 var(--blog-electric);
}

/* ------------------------------------------------------------ hero bands */

/* Full-bleed electric ground: the masthead of a listing and the header of a
   post. Cream type, no image behind the text. */
.blog-headband {
  background: var(--blog-electric);
  color: var(--blog-cream);
  padding: 46px 0 52px;
  border-bottom: 6px solid var(--blog-outline);
}

.blog-headband a {
  color: var(--blog-cream);
}

/* …except the sticker pills, which keep their own ink on their cream fill: the
   rule above is more specific than .blog-cats__link and would otherwise paint
   cream text on a cream chip. */
.blog-headband .blog-cats__link {
  color: var(--blog-outline);
}

.blog-headband .blog-cats__link.is-current {
  color: var(--blog-cream);
}

.blog-eyebrow {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blog-on-electric);
}

.blog-hero {
  margin: 0;
}

.blog-hero__title {
  margin: 0 0 18px;
  /* The reference sets its display type as tight as it goes; 1.02 with 800
     weight is the sans equivalent of that discipline. */
  font-size: clamp(34px, 4.6vw, 48px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--blog-cream);
}

.blog-hero__lead {
  margin: 0;
  max-width: 60ch;
  color: var(--blog-on-electric);
  font-size: 18px;
  line-height: 1.55;
}

/* The category masthead puts the tagline on the H1's baseline, so the page
   reaches its first article inside one screen. */
.blog-hero--tight {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
}

.blog-hero--tight .blog-hero__title {
  margin: 0;
}

.blog-hero__tagline {
  margin: 0;
  color: var(--blog-on-electric);
  font-size: 18px;
}

.blog-breadcrumb {
  padding-top: 22px;
  font-size: 14px;
  color: var(--blog-muted);
}

/* On the electric band the breadcrumb doubles as the eyebrow, so it needs the
   band's own type colour — #5c6773 on #2b42e6 would be unreadable. */
.blog-headband .blog-breadcrumb {
  padding-top: 0;
  color: var(--blog-on-electric);
}

/* Links inside a run of text must not rely on colour alone to be
   distinguishable (WCAG 1.4.1 — axe's link-in-text-block). */
.blog-breadcrumb a,
.blog-article__meta a {
  text-decoration: underline;
}

/* ----------------------------------------------------------- band sections */

.blog-band {
  padding: 52px 0;
}

.blog-band--tint {
  background: var(--blog-band);
}

.blog-band__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 0 0 32px;
}

.blog-band__heading,
.blog-section__heading {
  margin: 0;
  font-size: 25px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--blog-navy);
}

.blog-band__more,
.blog-band__links a {
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--blog-lime);
}

/*
 * The arrows are DRAWN, not typed.
 *
 * A literal "→" (U+2192) is outside Poppins' latin unicode-range — the subset
 * covers U+2191 and U+2193 but not U+2192 — so a single arrow glyph made the
 * browser download a whole extra Roboto subset (40 KB, at VeryHigh priority,
 * ahead of the index's LCP image). Measured, not theorised: it cost the index
 * several Lighthouse points. Two borders and a rotation cost nothing and scale
 * with the type.
 */
.blog-band__more::after,
.blog-band__links a::after,
.blog-pagination__next::after,
.blog-pagination__prev::before {
  content: '';
  display: inline-block;
  width: 0.38em;
  height: 0.38em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  vertical-align: middle;
  position: relative;
  top: -0.08em;
}

.blog-band__more::after,
.blog-band__links a::after,
.blog-pagination__next::after {
  margin-left: 0.5em;
  transform: rotate(45deg);
}

.blog-pagination__prev::before {
  margin-right: 0.5em;
  transform: rotate(-135deg);
}

.blog-band__more:hover,
.blog-band__more:focus,
.blog-band__links a:hover,
.blog-band__links a:focus {
  border-bottom-color: var(--blog-navy);
}

.blog-band__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
}

/* ------------------------------------------------------ category chip rows */

.blog-cats,
.blog-topics {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  font-size: 14px;
}

.blog-cats {
  margin: 28px 0 0;
}

.blog-cats__label,
.blog-topics__label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
}

.blog-cats__label {
  color: var(--blog-on-electric);
}

.blog-topics__label {
  color: var(--blog-muted);
}

.blog-cats__list,
.blog-topics__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Sticker pills: 2 px outline + hard offset, the IG object treatment. */
.blog-cats__link,
.blog-topics__link,
.blog-share__link {
  display: inline-block;
  padding: 5px 14px;
  border: 2px solid var(--blog-outline);
  border-radius: 999px;
  background: var(--blog-cream);
  color: var(--blog-outline);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--blog-outline);
}

.blog-cats__link:hover,
.blog-cats__link:focus,
.blog-topics__link:hover,
.blog-topics__link:focus,
.blog-share__link:hover,
.blog-share__link:focus {
  background: var(--blog-lime);
  box-shadow: 3px 3px 0 var(--blog-electric);
}

.blog-cats__link.is-current {
  background: var(--blog-outline);
  color: var(--blog-cream);
  box-shadow: 3px 3px 0 var(--blog-lime);
}

/* ------------------------------------------------------------- index feed */

.blog-feed {
  padding-top: 52px;
}

/* Featured post + "Destacados" rail. Asymmetric on purpose: a symmetric split
   would read as two equal columns rather than as one lead story. */
.blog-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
  margin: 0 0 56px;
}

.blog-featured {
  border: 2px solid var(--blog-outline);
  border-radius: 8px;
  background: var(--blog-cream);
  box-shadow: 8px 8px 0 var(--blog-electric);
  overflow: hidden;
}

.blog-featured__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.blog-featured__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 2px solid var(--blog-outline);
  background: #eee9e0;
}

.blog-featured__body {
  padding: 26px 28px 30px;
}

.blog-featured__title {
  margin: 0;
  font-size: clamp(25px, 2.4vw, 31px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--blog-navy);
}

.blog-featured__link:hover .blog-featured__title,
.blog-featured__link:focus .blog-featured__title {
  text-decoration: underline;
}

.blog-featured__excerpt {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.6;
}

.blog-featured__meta {
  margin: 16px 0 0;
  color: var(--blog-muted);
  font-size: 13px;
}

.blog-rail__heading {
  margin: 0 0 6px;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 800;
}

.blog-rail .blog-row {
  padding: 16px 0;
  border-bottom: 2px solid var(--blog-rule);
}

/* ------------------------------------------------------------ compact rows */

.blog-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 36px;
}

.blog-rows--triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blog-row {
  min-width: 0;
}

.blog-row__link {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  text-decoration: none;
  color: inherit;
}

.blog-row--bare .blog-row__link {
  grid-template-columns: minmax(0, 1fr);
}

.blog-row__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 2px solid var(--blog-outline);
  border-radius: 4px;
  background: #eee9e0;
}

.blog-row__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.32;
  font-weight: 700;
  color: var(--blog-navy);
}

.blog-row__link:hover .blog-row__title,
.blog-row__link:focus .blog-row__title {
  text-decoration: underline;
}

.blog-row__meta {
  display: block;
  margin: 6px 0 0;
  color: var(--blog-muted);
  font-size: 13px;
}

/* ------------------------------------------------------------ image cards */

.blog-listing__heading {
  margin: 0 0 26px;
  font-size: 25px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--blog-navy);
}

/* Fixed 3-up, not auto-fill: page 1's grid holds exactly 6 cards (12 minus the
   featured and the 5 rail rows), and auto-fill would break that into 4 + 2. */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 38px 30px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.blog-card__link {
  text-decoration: none;
  color: inherit;
}

/* The corpus has no uniform aspect ratio (1200x350 banners next to squares):
   one ratio + object-fit gives the grid a single rhythm and, together with the
   intrinsic width/height attributes, reserves the space before load. */
.blog-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 2px solid var(--blog-outline);
  border-radius: 6px;
  background: #eee9e0;
  box-shadow: var(--blog-lift);
}

.blog-card__link:hover .blog-card__image,
.blog-card__link:focus .blog-card__image {
  box-shadow: 4px 4px 0 var(--blog-electric);
}

.blog-card__title {
  margin: 18px 0 0;
  font-size: 19px;
  line-height: 1.28;
  font-weight: 700;
  color: var(--blog-navy);
}

.blog-card__link:hover .blog-card__title,
.blog-card__link:focus .blog-card__title {
  text-decoration: underline;
}

.blog-card__meta {
  margin: 8px 0 0;
  color: var(--blog-muted);
  font-size: 13px;
}

.blog-card__excerpt {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
}

.blog-card__more {
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 600;
}

.blog-card__more-link {
  /* Navy, not the brand orange: #ff8200 on white is 2.5:1, well under the
     4.5:1 WCAG AA minimum for body-sized text. Orange stays where it is
     legible and expected — a solid button's background. */
  color: var(--blog-navy);
  text-decoration: none;
  border-bottom: 2px solid var(--blog-lime);
}

.blog-card__more-link:hover,
.blog-card__more-link:focus {
  border-bottom-color: var(--blog-navy);
}

/* ------------------------------------------------------------- pagination */

.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 52px 0 0;
  padding: 26px 0 0;
  border-top: 2px solid var(--blog-rule);
  font-size: 15px;
  font-weight: 600;
}

.blog-pagination__status {
  color: var(--blog-muted);
  font-weight: 400;
}

/* ---------------------------------------------------------------- article */

.blog-article {
  display: block;
}

/* The split hero: text left, featured image right, both on the electric band.
   The prose below returns to the light ground at the narrow measure — the width
   change is the signal that the article has started. */
.blog-article__header {
  background: var(--blog-electric);
  color: var(--blog-cream);
  padding: 44px 0 50px;
  border-bottom: 6px solid var(--blog-outline);
}

.blog-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 46px;
  align-items: start;
}

.blog-article__title {
  margin: 0;
  font-size: clamp(30px, 3.5vw, 42px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--blog-cream);
}

.blog-article__meta {
  margin: 18px 0 0;
  color: var(--blog-on-electric);
  font-size: 14px;
}

.blog-article__header .blog-article__meta a {
  color: var(--blog-cream);
}

.blog-article__meta-sep {
  margin: 0 6px;
}

.blog-article__image {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--blog-outline);
  border-radius: 8px;
  background: #eee9e0;
  box-shadow: 8px 8px 0 var(--blog-lime);
}

/* The lead magnet, moved out of the article tail into the hero: the
   front-matter cta_* fields, short form. */
.blog-lead-cta {
  margin: 28px 0 0;
  padding: 20px 22px 24px;
  background: var(--blog-cream);
  border: 2px solid var(--blog-outline);
  border-radius: 8px;
  box-shadow: 6px 6px 0 var(--blog-lime);
  color: var(--blog-ink);
}

.blog-lead-cta__eyebrow {
  margin: 0 0 8px;
  color: var(--blog-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.blog-lead-cta__text {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--blog-navy);
}

.blog-button {
  display: inline-block;
  padding: 13px 26px;
  background: var(--blog-orange);
  border: 2px solid var(--blog-outline);
  border-radius: 6px;
  box-shadow: var(--blog-lift);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}

.blog-button:hover,
.blog-button:focus {
  background: #e57500;
  box-shadow: 2px 2px 0 var(--blog-outline);
}

.blog-article__body {
  padding-top: 46px;
}

/* -------------------------------------------------------------------- TOC */

/* Bold label + bulleted anchors, inline in the flow before the first H2. No
   sidebar, no sticky behaviour, no JS — the cheapest thing on the page. */
.blog-toc {
  margin: 0 0 40px;
  padding: 0 0 0 18px;
  /* Electric, not lime: on the near-white ground a chartreuse rule reads as a
     rendering artefact rather than as structure. */
  border-left: 4px solid var(--blog-electric);
}

.blog-toc__title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blog-ink);
}

.blog-toc__list {
  margin: 0;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.55;
  list-style: disc;
}

.blog-toc__item {
  margin: 5px 0;
}

.blog-toc__item a {
  text-decoration: underline;
}

.blog-toc__item--h3 {
  margin-left: 18px;
  list-style-type: circle;
  font-size: 15px;
}

/* ------------------------------------------------------------------ prose */

/* Deliberately calm: the loud skin lives in the bands, the heroes, the panels
   and the chips. In the middle of a 1,500-word article it would be noise. */
.blog-prose {
  font-size: 17px;
  line-height: 1.75;
}

/* See the file header: the migrated bodies carry inline Google-Docs typography
   that only !important can neutralise. */
.blog-prose,
.blog-prose p,
.blog-prose li,
.blog-prose span,
.blog-prose td,
.blog-prose th,
.blog-prose h2,
.blog-prose h3,
.blog-prose h4 {
  font-family: var(--blog-sans) !important;
}

.blog-prose p,
.blog-prose li,
.blog-prose span,
.blog-prose td,
.blog-prose th {
  font-size: inherit !important;
  color: inherit !important;
}

.blog-prose a,
.blog-prose a span {
  color: var(--blog-navy) !important;
  text-decoration: underline;
}

.blog-prose h2,
.blog-prose h3,
.blog-prose h4 {
  color: var(--blog-navy) !important;
  /* Anchored headings must not hide under a sticky header when jumped to. */
  scroll-margin-top: 90px;
}

.blog-prose h2 {
  margin: 48px 0 14px !important;
  font-size: 27px !important;
  line-height: 1.18;
  font-weight: 700;
}

.blog-prose h3 {
  margin: 34px 0 10px !important;
  font-size: 20px !important;
  line-height: 1.35;
  font-weight: 600;
}

.blog-prose h4 {
  margin: 24px 0 8px !important;
  font-size: 18px !important;
  line-height: 1.4;
  font-weight: 600;
}

.blog-prose h2 span,
.blog-prose h3 span,
.blog-prose h4 span {
  font-size: inherit !important;
  color: inherit !important;
}

.blog-prose p {
  margin: 0 0 20px;
}

.blog-prose ul,
.blog-prose ol {
  margin: 0 0 20px;
  /* The extracted lists carry padding-inline-start: 48px inline, which pushes
     content past the 375px viewport. Ours is a normal indent. */
  padding-inline-start: 24px !important;
}

.blog-prose li {
  margin: 0 0 8px;
}

.blog-prose li p {
  margin: 0 !important;
}

.blog-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 28px auto;
  border: 2px solid var(--blog-outline);
  border-radius: 6px;
}

.blog-prose blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 20px;
  border-left: 4px solid var(--blog-pink);
  color: var(--blog-muted);
  font-style: italic;
}

.blog-prose hr {
  margin: 36px 0;
  border: 0;
  border-top: 2px solid var(--blog-rule);
}

/* ----------------------------------------------------------------- tables */

/* Every table in the corpus is wrapped in .table-scroll by the extractor. A
   wide table must scroll INSIDE its wrapper — the page body never scrolls
   horizontally, at any viewport. */
.table-scroll {
  overflow-x: auto;
  margin: 28px 0;
  -webkit-overflow-scrolling: touch;
}

.blog-prose table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 15px;
}

.blog-prose th,
.blog-prose td {
  padding: 10px 12px;
  border: 1px solid var(--blog-rule);
  text-align: left;
  vertical-align: top;
}

.blog-prose th {
  background: var(--blog-band);
  color: var(--blog-navy);
  font-weight: 700;
}

/* -------------------------------------------------- article footer ladder */

/* CTA panel -> Temas chips -> share -> related posts. */
.blog-cta {
  margin: 56px 0 0;
  padding: 32px 30px 34px;
  background: var(--blog-electric);
  border: 2px solid var(--blog-outline);
  border-radius: 10px;
  box-shadow: 8px 8px 0 var(--blog-lime);
  color: var(--blog-cream);
}

.blog-cta__eyebrow {
  margin: 0 0 10px;
  color: var(--blog-on-electric);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.blog-cta__heading {
  margin: 0 0 12px;
  font-size: 27px;
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--blog-cream);
}

.blog-cta__body {
  margin: 0 0 22px;
  max-width: 52ch;
  font-size: 16px;
  color: var(--blog-on-electric);
}

/* 2x2 benefit checks. The check is decorative (::before, not content), so lime
   is legal here — and on the electric ground it is 5.68:1 anyway. */
.blog-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 26px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
}

.blog-benefits li {
  position: relative;
  padding-left: 28px;
}

.blog-benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--blog-lime);
  font-weight: 700;
}

.blog-cta__action {
  margin: 0;
}

.blog-topics {
  margin: 38px 0 0;
}

/* ------------------------------------------------------------------ share */

.blog-share {
  margin: 30px 0 0;
  padding: 26px 0 0;
  border-top: 2px solid var(--blog-rule);
}

.blog-share__title {
  margin: 0 0 14px;
  color: var(--blog-ink);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.blog-share__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* -------------------------------------------------------- related posts */

.blog-related {
  margin-top: 60px;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .blog-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .blog-hero-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  /* Image first on a narrow screen would push the H1 below the fold. */
  .blog-hero-split__media {
    order: 2;
  }

  .blog-rows,
  .blog-rows--triple {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .blog {
    padding-bottom: 56px;
    font-size: 16px;
  }

  .blog-container {
    padding: 0 16px;
  }

  .blog-headband {
    padding: 30px 0 34px;
  }

  .blog-hero__lead,
  .blog-hero__tagline {
    font-size: 16px;
  }

  /* Seven full-size sticker pills would own the whole masthead at 375, which
     defeats the point of a tight masthead. Smaller pills pack two per row. */
  .blog-cats {
    gap: 8px 10px;
  }

  .blog-cats__link,
  .blog-topics__link,
  .blog-share__link {
    padding: 4px 11px;
    font-size: 13px;
    box-shadow: 2px 2px 0 var(--blog-outline);
  }

  .blog-cats__link:hover,
  .blog-cats__link:focus,
  .blog-topics__link:hover,
  .blog-topics__link:focus,
  .blog-share__link:hover,
  .blog-share__link:focus {
    box-shadow: 2px 2px 0 var(--blog-electric);
  }

  .blog-cats__link.is-current {
    box-shadow: 2px 2px 0 var(--blog-lime);
  }

  .blog-feed {
    padding-top: 36px;
  }

  .blog-band {
    padding: 38px 0;
  }

  .blog-band__heading,
  .blog-section__heading,
  .blog-listing__heading {
    font-size: 22px;
  }

  .blog-featured {
    box-shadow: 5px 5px 0 var(--blog-electric);
  }

  .blog-featured__body {
    padding: 22px 20px 24px;
  }

  .blog-article__header {
    padding: 30px 0 34px;
  }

  .blog-article__image {
    box-shadow: 5px 5px 0 var(--blog-lime);
  }

  .blog-article__body {
    padding-top: 34px;
  }

  .blog-prose {
    font-size: 16px;
  }

  .blog-prose h2 {
    font-size: 23px !important;
  }

  .blog-prose h3 {
    font-size: 19px !important;
  }

  .blog-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* A 104px thumb next to a five-line title reads unbalanced at 375. */
  .blog-row__link {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 14px;
  }

  .blog-row__title {
    font-size: 16px;
  }

  .blog-benefits {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-cta {
    padding: 26px 20px 28px;
    box-shadow: 5px 5px 0 var(--blog-lime);
  }

  .blog-lead-cta {
    padding: 18px 18px 20px;
    box-shadow: 5px 5px 0 var(--blog-lime);
  }
}