/* AB Group Shipping — blog page styles
 * Public-facing CSS for /blogs/<lang>/<slug> pages served by serveBlog.
 * Pairs with design/colors_and_type.css (loaded first) for design tokens.
 *
 * Sections in order:
 *   1. Page chrome (header, footer, layout)
 *   2. Article hero (featured image + title block)
 *   3. Article body typography
 *   4. Custom blocks (answer-capsule, tldr-box, info-box, grid-2col,
 *      faq-section, callout-stat, mid-cta, route-comparison, highlight)
 *   5. Styled lists (checkmark-list, step-list, arrow-list, document-list)
 *   6. Embed calculator slot
 *   7. Index page (/blogs grid)
 *   8. Responsive (≤768px)
 */

/* ============================================================================
 * 1. PAGE CHROME
 * ========================================================================== */

* { box-sizing: border-box; }

body.blog-body {
  margin: 0;
  background: var(--bg-app);
  font-family: var(--font-sans);
  color: var(--fg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Long URLs, raw links and code in article copy should wrap, never
   horizontally overflow. The article body lives inside the wider grid;
   without these rules a single long token in a paragraph (e.g. a Spanish
   URL or accented filename) pushes the whole page wider. */
.blog-article p,
.blog-article li,
.blog-article a,
.blog-article code { overflow-wrap: anywhere; word-break: break-word; }

/* Top nav — mirrors the homepage chrome at a smaller scale */
.blog-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 32px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--border-subtle);
  /* Belt-and-braces: the nav can never be wider than the viewport. Even
     if some descendant manages to grow past 100vw, the nav itself stays
     within the visible area so the CTA on the right is always visible. */
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  gap: 16px;
}
/* Brand on the left can shrink (text wraps / truncates) if the right
   cluster needs room. Without min-width:0 a flex child can't shrink below
   its content's natural width, which would push the CTA off-screen. */
.blog-nav__brand { min-width: 0; }
.blog-nav__brand span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.blog-nav__links { flex-shrink: 0; flex-wrap: nowrap; }
/* The CTA must never collapse — it's the conversion action and has to
   stay rendered fully even on tight widths. */
.blog-nav__cta { flex-shrink: 0; white-space: nowrap; }
.blog-nav__brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--fg-primary);
}
.blog-nav__brand img { width: 32px; height: 32px; }
.blog-nav__brand span { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.blog-nav__links {
  display: inline-flex; align-items: center; gap: 24px;
  font-size: 14px;
}
.blog-nav__links a {
  color: var(--fg-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--duration-fast) var(--ease-out);
}
.blog-nav__links a:hover { color: var(--brand-700); }
/* CTA must beat `.blog-nav__links a` (specificity 0,1,1) — a bare
   `.blog-nav__cta` (0,1,0) loses the cascade and inherits the gray link
   color, which made "Cotizar" almost invisible on the blue gradient. We
   anchor on the parent class to bump specificity to 0,2,0 / 0,2,1. */
.blog-nav__links .blog-nav__cta,
.blog-nav__links a.blog-nav__cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-700) 100%);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  border-radius: var(--radius-full);
  box-shadow: 0 6px 14px -4px rgba(30,87,214,0.4);
  transition: transform var(--duration-fast) var(--ease-out);
}
.blog-nav__links .blog-nav__cta:hover,
.blog-nav__links a.blog-nav__cta:hover {
  color: #fff;
  transform: translateY(-1px);
}
.blog-nav__lang {
  display: inline-flex; gap: 4px;
  font-size: 12px;
  background: var(--gray-100);
  border-radius: var(--radius-full);
  padding: 4px;
}
.blog-nav__lang a {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  color: var(--fg-tertiary);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.blog-nav__lang a.active { background: #fff; color: var(--fg-primary); box-shadow: var(--shadow-xs); }

/* Footer — minimal, matches main site footer treatment */
.blog-footer {
  margin-top: 96px;
  padding: 48px 32px 32px;
  background: var(--gray-900);
  color: var(--gray-300);
  text-align: center;
  font-size: 14px;
}
.blog-footer a { color: var(--gray-200); text-decoration: none; margin: 0 12px; }
.blog-footer a:hover { color: #fff; }
.blog-footer__copy {
  margin-top: 24px;
  color: var(--gray-500);
  font-size: 13px;
}

/* ============================================================================
 * 2. ARTICLE HERO
 * ========================================================================== */

/* Full-bleed hero — featured image as background, dark gradient overlay,
   white title + lede overlaid. Mirrors landing-page hero pattern from
   landing/landing.css → .hero / .hero__video / .hero__video-overlay /
   .hero__inner. Image uses object-fit:cover so any aspect ratio works. */
.blog-hero {
  position: relative;
  width: 100%;
  min-height: 460px;
  padding: 80px 32px 96px;
  background: #0B1220;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-end;        /* title anchored to bottom-left of hero */
}
/* .blog-hero__bg now wraps a <picture> (with srcset for 400/800/1600 webp
   variants from the storage-resize-images extension). The <img> inside
   fills the picture via object-fit. The placeholder variant is a <div>
   with the same class — both cases positioned identically. */
.blog-hero__bg {
  position: absolute; inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  display: block;
  overflow: hidden;
}
.blog-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.blog-hero__bg--placeholder {
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-800) 100%);
}
.blog-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    /* Stronger darkening at the bottom-left so the title pops */
    radial-gradient(ellipse 1000px 600px at 20% 90%, rgba(11,18,32,0.85) 0%, rgba(11,18,32,0.45) 50%, transparent 80%),
    /* Subtle dark wash across the whole image */
    linear-gradient(180deg, rgba(11,18,32,0.30) 0%, rgba(11,18,32,0.15) 40%, rgba(11,18,32,0.65) 100%);
  pointer-events: none;
}
.blog-hero__inner {
  position: relative; z-index: 2;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.blog-hero h1 {
  margin: 0 0 16px;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: #fff;
  max-width: 800px;
  text-shadow: 0 2px 24px rgba(11,18,32,0.5);
}
.blog-hero__lede {
  margin: 0;
  max-width: 680px;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 12px rgba(11,18,32,0.5);
}

/* Strip below the hero — tag pill on left + date · read time · author on
   right. Sits in normal flow on the light page background so it reads as
   article metadata rather than fighting the hero image. */
.blog-hero__strip {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-subtle);
}
.blog-hero__tag {
  display: inline-block;
  padding: 5px 12px;
  background: var(--brand-50);
  color: var(--brand-700);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.blog-hero__meta {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px;
  color: var(--fg-tertiary);
  font-weight: 500;
}
.blog-hero__meta-divider { width: 4px; height: 4px; background: var(--gray-300); border-radius: 50%; }

/* ============================================================================
 * 3. ARTICLE BODY TYPOGRAPHY
 * ========================================================================== */

.blog-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-primary);
}
.blog-article > p { margin: 0 0 18px; color: var(--gray-800); }
.blog-article > h2 {
  margin: 56px 0 16px;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.018em;
  font-weight: 700;
  scroll-margin-top: 96px;
}
.blog-article > h3 {
  margin: 36px 0 12px;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.012em;
  font-weight: 600;
  scroll-margin-top: 96px;
}
.blog-article > h4 {
  margin: 28px 0 10px;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
}
.blog-article strong { color: var(--fg-primary); font-weight: 600; }
.blog-article a {
  color: var(--brand-700);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  font-weight: 500;
}
.blog-article a:hover { color: var(--brand-800); }
.blog-article ul, .blog-article ol {
  margin: 16px 0 24px;
  padding-left: 26px;
}
.blog-article li { margin: 6px 0; }
.blog-article img {
  width: 100%;
  border-radius: var(--radius-lg);
  margin: 24px 0;
}
.blog-article blockquote {
  margin: 24px 0;
  padding: 16px 24px;
  border-left: 3px solid var(--brand-600);
  background: var(--brand-50);
  color: var(--gray-800);
  font-style: italic;
}
.blog-article code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

/* ============================================================================
 * 4. CUSTOM BLOCKS — these class names MUST match what the AI generates.
 * The prompts in blogAPI.js reference them by name; renaming here breaks the
 * editor + the generator output.
 * ========================================================================== */

/* Highlight — inline emphasis (yellow underline glow) */
.blog-article .highlight {
  background: linear-gradient(180deg, transparent 60%, rgba(255, 217, 102, 0.55) 60%);
  padding: 0 2px;
  font-weight: 600;
  color: var(--fg-primary);
}

/* Answer capsule — after each H2, 40-60 word direct answer */
.blog-article .answer-capsule {
  margin: 0 0 28px;
  padding: 18px 22px;
  background: linear-gradient(135deg, var(--info-50) 0%, var(--brand-50) 100%);
  border-left: 4px solid var(--brand-600);
  border-radius: var(--radius-md);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--gray-800);
}
.blog-article .answer-capsule strong {
  color: var(--brand-800);
  font-weight: 700;
}

/* TL;DR box — near the top of the article */
.blog-article .tldr-box {
  margin: 28px 0;
  padding: 22px 26px;
  background: var(--gray-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  position: relative;
}
.blog-article .tldr-box::before {
  content: "TL;DR";
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin-bottom: 12px;
}
.blog-article .tldr-box ul {
  margin: 0;
  padding-left: 22px;
}
.blog-article .tldr-box li {
  margin: 6px 0;
  color: var(--gray-800);
}

/* Info boxes — tip + warning */
.blog-article .info-box {
  margin: 28px 0;
  padding: 18px 22px;
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: start;
}
.blog-article .info-box.tip {
  background: var(--success-50);
  border: 1px solid #b7eb8f;
}
.blog-article .info-box.warning {
  background: var(--warning-50);
  border: 1px solid #ffd591;
}
.blog-article .info-box-icon {
  font-size: 22px;
  line-height: 1;
}
.blog-article .info-box-content h4 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-primary);
}
.blog-article .info-box.tip .info-box-content h4 { color: var(--success-700); }
.blog-article .info-box.warning .info-box-content h4 { color: var(--warning-700); }
.blog-article .info-box-content p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--gray-800);
}

/* 2-column grid — comparisons (FCL vs LCL, Air vs Ocean) */
.blog-article .grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 28px 0;
}
.blog-article .grid-2col > div {
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.blog-article .grid-2col h3, .blog-article .grid-2col h4 {
  margin: 0 0 10px;
  font-size: 17px;
  color: var(--brand-700);
}
.blog-article .grid-2col p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--gray-700); }

/* FAQ section — accordion. Open/close handled by tiny inline JS in blog template */
.blog-article .faq-section {
  margin: 48px 0;
}
.blog-article .faq-item {
  border-top: 1px solid var(--border-subtle);
  padding: 0;
}
.blog-article .faq-item:last-child { border-bottom: 1px solid var(--border-subtle); }
.blog-article .faq-question {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
  font-weight: 600;
  font-size: 17px;
  color: var(--fg-primary);
  cursor: pointer;
  user-select: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.blog-article .faq-question:hover { color: var(--brand-700); }
.blog-article .faq-question .faq-icon {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gray-100);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  color: var(--fg-secondary);
  transition: transform var(--duration-base) var(--ease-out);
  flex-shrink: 0;
}
.blog-article .faq-item[data-open="1"] .faq-question .faq-icon {
  transform: rotate(45deg);
  background: var(--brand-600);
  color: #fff;
}
.blog-article .faq-answer {
  display: none;
  padding: 0 0 20px;
  color: var(--gray-700);
  font-size: 16px;
  line-height: 1.6;
}
.blog-article .faq-item[data-open="1"] .faq-answer { display: block; }
.blog-article .faq-answer p { margin: 0 0 10px; }

/* Stat callout — a single big number with explanation */
.blog-article .callout-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  margin: 32px 0;
  padding: 24px 28px;
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-900) 100%);
  border-radius: var(--radius-xl);
  color: #fff;
}
.blog-article .callout-stat .stat-number {
  display: block;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.blog-article .callout-stat .stat-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-top: 6px;
}
.blog-article .callout-stat > div:last-child p {
  margin: 0;
  color: rgba(255,255,255,0.92);
  font-size: 15px;
  line-height: 1.5;
}

/* Mid-CTA — anchor links to embedded calculator (#quote-calc) */
.blog-article .mid-cta {
  margin: 36px 0;
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-800) 100%);
  border-radius: var(--radius-xl);
  color: #fff;
  text-align: center;
  box-shadow: 0 16px 32px -12px rgba(30,87,214,0.45);
}
.blog-article .mid-cta h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.blog-article .mid-cta p {
  margin: 0 0 18px;
  color: rgba(255,255,255,0.92);
  font-size: 16px;
}
.blog-article .mid-cta .cta-btn, .blog-article .mid-cta a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 24px;
  background: #fff;
  color: var(--brand-700);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-out);
}
.blog-article .mid-cta .cta-btn:hover, .blog-article .mid-cta a:hover { transform: translateY(-2px); color: var(--brand-700); }

/* Route comparison — origin → destination price cards */
.blog-article .route-comparison {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 28px 0;
}
.blog-article .route-card {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.blog-article .route-mode {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 10px;
  background: var(--brand-700);
  color: #fff;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  width: fit-content;
}
.blog-article .route-info {
  display: flex; align-items: center; gap: 14px;
  font-size: 14px;
  color: var(--fg-primary);
}
.blog-article .route-origin, .blog-article .route-dest {
  display: inline-flex; align-items: center; gap: 8px;
}
.blog-article .route-flag {
  width: 24px; height: 18px;
  border-radius: 2px;
  object-fit: cover;
  display: inline-block;
}
.blog-article .route-city {
  font-weight: 600;
  font-size: 15px;
}
.blog-article .route-port {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-tertiary);
}
.blog-article .route-arrow {
  color: var(--fg-tertiary);
  font-weight: 700;
}
.blog-article .route-price {
  display: inline-flex; flex-direction: column; align-items: flex-end;
}
.blog-article .route-price-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  font-weight: 600;
}
.blog-article .route-price-value {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-700);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
 * 5. STYLED LISTS
 * ========================================================================== */

.blog-article ul.checkmark-list,
.blog-article ul.checkmark-circle-list,
.blog-article ol.step-list,
.blog-article ul.arrow-list,
.blog-article ul.document-list {
  list-style: none;
  padding-left: 0;
  margin: 20px 0;
}
.blog-article ul.checkmark-list li,
.blog-article ul.checkmark-circle-list li,
.blog-article ol.step-list li,
.blog-article ul.arrow-list li,
.blog-article ul.document-list li {
  position: relative;
  padding-left: 36px;
  margin: 10px 0;
  line-height: 1.55;
}

/* Checkmark — benefits */
.blog-article ul.checkmark-list li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--success-700);
  font-weight: 800;
  font-size: 16px;
}

/* Checkmark in circle — required items */
.blog-article ul.checkmark-circle-list li::before {
  content: "✓";
  position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--success-500);
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  font-size: 12px;
}

/* Numbered step list */
.blog-article ol.step-list { counter-reset: step; }
.blog-article ol.step-list li {
  counter-increment: step;
  padding-left: 42px;
}
.blog-article ol.step-list li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-800) 100%);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Arrow — next steps / action items */
.blog-article ul.arrow-list li::before {
  content: "→";
  position: absolute; left: 0; top: 0;
  width: 22px;
  color: var(--brand-600);
  font-weight: 700;
  font-size: 17px;
}

/* Document — forms / paperwork */
.blog-article ul.document-list li::before {
  content: "📄";
  position: absolute; left: 0; top: 0;
  width: 22px;
}

/* ============================================================================
 * 6. EMBED CALCULATOR SLOT
 * The serveBlog template inserts a <div id="quote-calc" class="blog-calc-slot"
 * data-mode=... data-cargo=... data-audience=...> at the end of the article
 * body. BlogQuoteEmbed.jsx hydrates it client-side.
 * ========================================================================== */

/* Article + calc layout container — handles the desktop 2-column split.
 * On desktop ≥1024px, .blog-article-layout becomes a CSS grid with the
 * article body on the left and the sticky calc sidebar on the right.
 * On mobile <1024px, it collapses to single-column flow and the calc
 * lands at the end of the article.
 */
.blog-article-layout {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}
.blog-toc { display: none; }    /* shown only on wide layouts; see below */

/* Mid-width: article + calc sidebar (TOC hidden) — 1024 to 1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
  .blog-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 40px;
    align-items: start;
  }
  .blog-article-layout .blog-article { max-width: none; margin: 0; padding: 0; }
  .blog-calc-slot {
    position: sticky; top: 96px; margin: 0;
    max-height: calc(100vh - 120px); overflow-y: auto;
  }
}

/* Wide: 3-column TOC + article + calc — >=1280px */
@media (min-width: 1280px) {
  .blog-article-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
  }
  .blog-article-layout .blog-article { max-width: none; margin: 0; padding: 0; }
  .blog-calc-slot {
    position: sticky; top: 96px; margin: 0;
    max-height: calc(100vh - 120px); overflow-y: auto;
  }
  /* The aside itself is the sticky element. Its grid cell parent
     (.blog-article-layout) has the row height of the tallest column (=
     article), so sticky has room to actually stick. Nesting sticky on an
     inner wrapper breaks because the wrapper shrinks to fit its content. */
  .blog-toc {
    display: block;
    position: sticky;
    top: 96px;
    align-self: start;
    padding-top: 16px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

/* TOC visual styles — same look across all widths once it's rendered.
   Hidden on narrow widths via the parent .blog-toc { display: none }. */
.blog-toc__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-secondary);
  margin: 0 0 14px;
  padding-left: 16px;
}
.blog-toc__nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
}
.blog-toc__link {
  display: block;
  padding: 9px 14px 9px 16px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--fg-secondary);
  text-decoration: none;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.blog-toc__link:hover {
  color: var(--fg-primary);
  background: rgba(16, 24, 40, 0.025);
}
.blog-toc__link.active {
  color: var(--brand-700);
  background: var(--brand-50);
  border-left-color: var(--brand-600);
  font-weight: 600;
}
/* H3 sub-items — indented under their parent H2 so the outline reads
   like the article's section/subsection hierarchy. Slightly smaller and
   lighter so the H2 parents still anchor the visual structure. */
.blog-toc__link--sub {
  padding: 6px 14px 6px 32px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--fg-tertiary);
  font-weight: 500;
}
.blog-toc__link--sub.active {
  color: var(--brand-700);
  background: var(--brand-50);
  border-left-color: var(--brand-500);
  font-weight: 600;
}
/* When the TOC overflows vertically, JS auto-scrolls the active item into
   view. scroll-behavior: smooth makes that animation native to the panel
   instead of a hard jump, and the JS-driven scrollIntoView({behavior:'smooth'})
   already smooths individual transitions — this is a belt-and-braces fallback
   for browsers that ignore the JS option (e.g. older Safari). */
.blog-toc {
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
/* Pretty scrollbar in WebKit/Chromium so a long TOC doesn't look chunky */
.blog-toc::-webkit-scrollbar { width: 6px; }
.blog-toc::-webkit-scrollbar-thumb {
  background: rgba(16,24,40,0.15);
  border-radius: 9999px;
}
.blog-toc::-webkit-scrollbar-thumb:hover { background: rgba(16,24,40,0.28); }
/* Smooth page-level scroll so anchor jumps + JS scrollTo animate cleanly */
html { scroll-behavior: smooth; }

/* ============================================================================
 * READING PROGRESS BAR — horizontal sliver under the sticky nav, fills
 * left→right as the reader scrolls through the article. JS sets the width
 * of .blog-progress__fill on scroll (throttled with rAF).
 * ========================================================================== */
.blog-progress {
  position: fixed;
  top: 64px;             /* sits flush under the .blog-nav (height: 64px) */
  left: 0; right: 0;
  height: 3px;
  background: rgba(16, 24, 40, 0.06);
  z-index: 49;           /* nav is z-50, calc-mobile-bar is z-60 */
  pointer-events: none;
}
.blog-progress__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand-500) 0%, var(--brand-700) 100%);
  box-shadow: 0 0 8px rgba(30, 87, 214, 0.45);
  transition: width 80ms linear;
}
@media (max-width: 768px) {
  .blog-progress { top: 56px; }   /* mobile nav is shorter (56px) */
}

/* Mobile sticky-bottom CTA bar — appears below 1024px when not currently
 * showing the calc. Tap → smooth-scroll to #quote-calc. */
.blog-calc-mobile-bar {
  display: none;
}
@media (max-width: 1023px) {
  .blog-calc-mobile-bar {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    position: fixed; left: 12px; right: 12px; bottom: 12px;
    z-index: 60;
    padding: 14px 22px;
    background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-800) 100%);
    color: #fff;
    border-radius: var(--radius-full);
    box-shadow: 0 10px 24px -6px rgba(30,87,214,0.5),
                0 4px 10px -2px rgba(30,87,214,0.3);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 120ms ease;
  }
  .blog-calc-mobile-bar:hover, .blog-calc-mobile-bar:active {
    transform: translateY(-1px);
  }
  /* Hide the mobile bar when the calc itself is in view */
  .blog-calc-slot.is-visible ~ .blog-calc-mobile-bar { display: none; }
}

.blog-calc-slot {
  margin: 64px auto 32px;
  padding: 0;            /* card chrome moved into .bc-card below */
  background: transparent;
  border: 0;
  border-radius: var(--radius-2xl);
  scroll-margin-top: 96px;
}
@media (max-width: 1023px) {
  /* Calc goes nearly edge-to-edge on mobile/tablet — tightens the wrapper
     so we don't lose width to 3 layers of nested padding (article-layout +
     calc-slot + bc-card all stacking). Bottom margin reserves space for
     the floating sticky CTA bar. */
  .blog-article-layout {
    padding: 0 12px;
  }
  .blog-calc-slot {
    margin: 40px 0 96px;
  }
}
/* Legacy header (server-rendered) — keep for compat with generic CTA mode */
.blog-calc-slot__header {
  margin: 0 0 24px;
  text-align: center;
}
.blog-calc-slot__eyebrow {
  display: inline-block;
  padding: 4px 12px;
  background: var(--brand-700);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.blog-calc-slot__title {
  margin: 12px 0 6px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.018em;
}
.blog-calc-slot__sub {
  margin: 0;
  color: var(--fg-secondary);
  font-size: 16px;
}
.blog-calc-slot__loading {
  min-height: 240px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-tertiary);
  font-size: 14px;
}

/* ============================================================================
 * BlogCalc — React component styles. All classes prefixed `.bc-*`.
 * ========================================================================== */

.bc-card {
  background: linear-gradient(180deg, #fff 0%, var(--brand-50) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  box-shadow: 0 20px 40px -16px rgba(16,24,40,0.12),
              0 4px 12px -2px rgba(16,24,40,0.06),
              inset 0 1px 0 rgba(255,255,255,0.85);
  padding: 20px;
  position: relative;
}
.bc-card-header {
  margin-bottom: 16px;
  text-align: center;
}
.bc-eyebrow {
  display: inline-block;
  padding: 3px 10px;
  background: var(--brand-700);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bc-title {
  margin: 10px 0 4px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--fg-primary);
}
.bc-sub {
  margin: 0;
  font-size: 13px;
  color: var(--fg-secondary);
}
.bc-card-body {
  display: flex; flex-direction: column; gap: 14px;
}

/* Form fields */
.bc-field {
  display: flex; flex-direction: column; gap: 5px;
}
.bc-field-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-secondary);
}
.bc-field-label em {
  text-transform: none;
  font-weight: 500;
  font-style: normal;
  color: var(--fg-tertiary);
}
.bc-field input {
  width: 100%;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  color: var(--fg-primary);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.bc-field input:focus {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(30,87,214,0.12);
}
.bc-field input:disabled { background: var(--gray-100); color: var(--fg-tertiary); }
.bc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bc-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* Toggle pills (pickup / mode) */
.bc-toggle {
  display: inline-flex; gap: 4px; padding: 3px;
  background: var(--gray-100);
  border-radius: 9999px;
  font-size: 12px;
}
.bc-toggle button {
  padding: 6px 12px;
  background: transparent;
  color: var(--fg-secondary);
  border: 0;
  border-radius: 9999px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.bc-toggle button.active {
  background: #fff;
  color: var(--brand-700);
  box-shadow: 0 1px 2px rgba(16,24,40,0.06);
}
.bc-pickup-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}

/* RouteSection — groups one side (origin OR destination) of the route
   picker: city input + port dropdown + pickup/delivery toggle. Stacks
   vertically with subtle visual grouping so each side reads as a unit. */
.bc-route-side {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  background: rgba(30,87,214,0.025);
  border: 1px solid rgba(30,87,214,0.08);
  border-radius: 10px;
  margin-bottom: 10px;
}
.bc-route-side > .bc-pickup-row {
  padding-top: 4px;
  border-top: 1px dashed rgba(30,87,214,0.12);
  margin-top: 2px;
}

/* Port picker — explicit dropdown of available ports for the resolved
   country. Matches the homepage hero's port-column styling: white pill,
   subtle blue border, chevron suffix. Disabled state shows "Select origin
   city first" until the Walio /ports lookup resolves. */
.bc-port-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 9px 32px 9px 12px;
  background: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-primary);
  cursor: pointer;
  letter-spacing: -0.005em;
}
.bc-port-select:disabled {
  background-color: var(--bg-subtle);
  color: var(--fg-tertiary);
  cursor: not-allowed;
}
.bc-port-select:not(:disabled):focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px rgba(30,87,214,0.15);
}

/* Container stepper */
.bc-container-stepper {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: rgba(30,87,214,0.04);
  border-radius: 10px;
}
.bc-stepper-row {
  display: flex; align-items: center; justify-content: space-between;
}
.bc-stepper-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-primary);
}
.bc-stepper-ctrl {
  display: inline-flex; align-items: center; gap: 4px;
}
.bc-stepper-ctrl button {
  width: 26px; height: 26px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-700);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.bc-stepper-ctrl button:disabled { color: var(--fg-disabled); cursor: not-allowed; }
.bc-stepper-val {
  display: inline-block;
  min-width: 28px; text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Preset picker wrap */
.bc-preset-wrap {
  background: rgba(30,87,214,0.04);
  border-radius: 10px;
  padding: 10px;
}

/* Places autocomplete dropdown */
.bc-places-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: 0 8px 20px -4px rgba(16,24,40,0.18);
  max-height: 240px;
  overflow-y: auto;
}
.bc-places-item {
  display: block;
  width: 100%; padding: 9px 12px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  border-bottom: 1px solid var(--gray-100);
}
.bc-places-item:last-child { border-bottom: 0; }
.bc-places-item.active, .bc-places-item:hover {
  background: var(--brand-50);
}
.bc-places-main {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-primary);
}
.bc-places-secondary {
  display: block;
  font-size: 11px;
  color: var(--fg-tertiary);
  margin-top: 1px;
}

/* CTAs */
.bc-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  padding: 12px 18px;
  border-radius: 9999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.bc-cta-primary {
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-800) 100%);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(30,87,214,0.5),
              inset 0 1px 0 rgba(255,255,255,0.25);
}
.bc-cta-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -6px rgba(30,87,214,0.55);
}
.bc-cta-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.bc-cta-ghost {
  background: transparent;
  color: var(--brand-700);
  border: 1px solid var(--border-default);
}
.bc-cta-ghost:hover { background: var(--brand-50); }
.bc-mt { margin-top: 10px; }

/* Trust badges row */
.bc-trust {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-default);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  justify-content: center;
}
.bc-trust-item {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--success-700);
}

/* Error message */
.bc-error {
  margin: 10px 0;
  padding: 9px 12px;
  background: var(--danger-50);
  border: 1px solid #fda29b;
  border-radius: 8px;
  color: var(--danger-700);
  font-size: 13px;
}

/* Lead modal */
.bc-modal-scrim {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(16,24,40,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: bc-fade-in 180ms ease;
}
@keyframes bc-fade-in { from { opacity: 0 } to { opacity: 1 } }
.bc-modal {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  width: 100%; max-width: 480px;
  padding: 28px;
  position: relative;
  animation: bc-modal-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes bc-modal-in {
  from { opacity: 0; transform: translateY(20px) scale(0.98) }
  to   { opacity: 1; transform: translateY(0) scale(1) }
}
.bc-modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 22px;
  color: var(--fg-tertiary);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.bc-modal-close:hover { background: var(--gray-100); color: var(--fg-primary); }
.bc-modal-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.018em;
}
.bc-modal-sub {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--fg-secondary);
}

/* Submit button inside the lead modal — give it breathing room so it doesn't
   sit flush against the last input row (the `.bc-grid-2` only has `gap` and
   doesn't add space below). */
.bc-lead-submit { margin-top: 18px; }

/* Loading panel — replaces the form while we fetch live rates. Animated
   radar + stepped checklist + sweeping progress bar so a 4–8s API call
   feels like work is being done. */
.bc-modal--loading {
  padding: 36px 28px 32px;
}
.bc-loading {
  text-align: center;
}
.bc-loading-radar {
  position: relative;
  width: 124px; height: 124px;
  margin: 0 auto 20px;
  display: grid; place-items: center;
  isolation: isolate;
}
/* Soft ambient glow that breathes behind everything else */
.bc-loading-radar-glow {
  position: absolute; inset: -18px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(30,87,214,0.32) 0%, rgba(30,87,214,0) 65%);
  animation: bc-radar-glow 2.4s ease-in-out infinite;
  z-index: 0;
}
@keyframes bc-radar-glow {
  0%, 100% { opacity: 0.55; transform: scale(0.95); }
  50%      { opacity: 1;    transform: scale(1.05); }
}
.bc-loading-radar-pulse {
  position: absolute; inset: 8px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(30,87,214,0.4) 0%, rgba(30,87,214,0) 68%);
  animation: bc-radar-pulse 2.4s ease-out infinite;
  z-index: 1;
}
.bc-loading-radar-pulse--2 { animation-delay: 1.2s; }
@keyframes bc-radar-pulse {
  0%   { transform: scale(0.55); opacity: 0.9; }
  100% { transform: scale(1.55); opacity: 0; }
}
/* Rotating radar-beam wedge (lighthouse) — sits as a ring around the disc */
.bc-loading-radar-sweep {
  position: absolute; inset: 6px;
  border-radius: 9999px;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(46,106,232,0) 35deg,
    rgba(46,106,232,0.55) 70deg,
    rgba(30,87,214,0.85) 92deg,
    transparent 100deg);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 58%, #000 100%);
          mask: radial-gradient(circle, transparent 56%, #000 58%, #000 100%);
  animation: bc-radar-sweep 1.8s linear infinite;
  z-index: 2;
}
@keyframes bc-radar-sweep { to { transform: rotate(360deg); } }
/* Outer brand-gradient ring that frames the white disc */
.bc-loading-radar-ring {
  position: relative;
  z-index: 3;
  width: 92px; height: 92px;
  border-radius: 9999px;
  padding: 3px;
  background: conic-gradient(from 160deg,
    #2E6AE8 0deg,
    #1E57D6 90deg,
    #1846B0 180deg,
    #2E6AE8 270deg,
    #2E6AE8 360deg);
  box-shadow:
    0 18px 40px -10px rgba(30,87,214,0.55),
    0 2px 6px rgba(16,24,40,0.08),
    inset 0 1px 0 rgba(255,255,255,0.3);
  animation: bc-radar-breath 2.4s ease-in-out infinite;
}
@keyframes bc-radar-breath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
.bc-loading-radar-disc {
  width: 100%; height: 100%;
  border-radius: 9999px;
  background: radial-gradient(circle at 30% 25%,
    #ffffff 0%, #f3f6fb 65%, #e6ecf6 100%);
  display: grid; place-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -8px 18px rgba(30,87,214,0.05);
  overflow: hidden;
}
.bc-loading-radar-logo {
  display: block;
  width: 72%; height: 72%;
  object-fit: contain;
  /* Logo is rasterized at 144x144 — render crisp and add a subtle glow so it
     feels HD even when scaled down. */
  image-rendering: -webkit-optimize-contrast;
  filter:
    drop-shadow(0 4px 10px rgba(30,87,214,0.25))
    drop-shadow(0 1px 1px rgba(16,24,40,0.12));
  animation: bc-radar-logo-float 3s ease-in-out infinite;
}
@keyframes bc-radar-logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.bc-loading-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.018em;
  color: var(--fg-primary, #0B1220);
}
.bc-loading-sub {
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--fg-secondary, #475467);
  letter-spacing: 0.01em;
}
.bc-loading-steps {
  list-style: none;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(30,87,214,0.05) 0%, rgba(30,87,214,0.02) 100%);
  border: 1px solid rgba(30,87,214,0.18);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 10px;
  text-align: left;
}
.bc-loading-step {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-tertiary, #98A2B3);
  transition: color 200ms ease;
}
.bc-loading-step--done   { color: #067647; }
.bc-loading-step--active { color: var(--brand-700, #1846B0); }
.bc-loading-step-icon {
  width: 20px; height: 20px;
  border-radius: 9999px;
  display: inline-grid; place-items: center;
  flex-shrink: 0;
  transition: background 200ms ease, color 200ms ease;
}
.bc-loading-step--done .bc-loading-step-icon {
  background: rgba(18,183,106,0.15);
  color: #067647;
}
.bc-loading-step--active .bc-loading-step-icon {
  background: rgba(30,87,214,0.15);
  color: var(--brand-700, #1846B0);
}
.bc-loading-step--pending .bc-loading-step-icon {
  background: rgba(16,24,40,0.06);
}
.bc-loading-step-dot {
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: currentColor;
  opacity: 0.6;
}
.bc-loading-step-spinner {
  width: 12px; height: 12px;
  border-radius: 9999px;
  border: 2px solid rgba(30,87,214,0.25);
  border-top-color: var(--brand-600, #1E57D6);
  animation: bc-spin 0.7s linear infinite;
}
@keyframes bc-spin { to { transform: rotate(360deg); } }
.bc-loading-step-label {
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.bc-loading-progress {
  height: 4px;
  border-radius: 9999px;
  background: rgba(16,24,40,0.08);
  overflow: hidden;
  position: relative;
}
.bc-loading-progress-bar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 40%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--brand-600, #1E57D6), var(--brand-800, #1846B0));
  animation: bc-loading-sweep 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes bc-loading-sweep {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* Rate list (price stage) */
.bc-rate-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 12px;
  max-height: 460px;
  overflow-y: auto;
}
.bc-rate-list > * { flex-shrink: 0; }

/* Request summary block — sits above the rate cards so the customer always
   sees what they asked for next to what the carriers returned. Mirrors the
   homepage ResultsGlass header in tone (eyebrow + route + chips). */
.bc-summary {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(30,87,214,0.06), rgba(30,87,214,0.02));
  border: 1px solid rgba(30,87,214,0.18);
  border-radius: 12px;
}
.bc-summary-eyebrow {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-700, #1E57D6);
  margin-bottom: 6px;
}
.bc-summary-route {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: #0B1220;
  letter-spacing: -0.01em;
  min-width: 0;
}
.bc-summary-route-from,
.bc-summary-route-to {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex: 1 1 0;
}
.bc-summary-route-arrow {
  color: var(--brand-700, #1E57D6);
  font-weight: 800; flex-shrink: 0;
}
.bc-summary-chips {
  margin-top: 8px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.bc-summary-chip {
  padding: 3px 9px; border-radius: 9999px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(16,24,40,0.1);
  color: #344054;
  font-size: 11px; font-weight: 600;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}
.bc-summary-flags {
  margin-top: 8px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.bc-summary-flag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 9999px;
  background: rgba(18,183,106,0.12);
  border: 1px solid rgba(18,183,106,0.28);
  color: #067647;
  font-size: 11px; font-weight: 700;
}
.bc-summary-flag-dot {
  width: 6px; height: 6px; border-radius: 9999px;
  background: #12b76a;
}

/* No-rates / done states */
.bc-norates {
  text-align: center;
  padding: 12px 8px;
}
.bc-norates-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: var(--brand-50);
  color: var(--brand-700);
  border-radius: 50%;
  font-size: 22px;
  margin-bottom: 10px;
}
.bc-norates h4 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}
.bc-norates p {
  margin: 0 auto 18px;
  font-size: 14px;
  color: var(--fg-secondary);
  line-height: 1.5;
  max-width: 320px;
}

/* Fallback "cheapest" card when RichRateCard isn't loaded */
.bc-cheapest {
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-900));
  color: #fff;
  border-radius: 12px;
  margin-bottom: 12px;
}
.bc-cheapest-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0.85;
}
.bc-cheapest-price {
  font-size: 28px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

.bc-help {
  padding: 12px;
  background: var(--gray-50);
  border-radius: 8px;
  font-size: 12px;
  color: var(--fg-tertiary);
  text-align: center;
}

/* Generic CTA fallback for non-calculable cargo (breakbulk, project, RoRo) */
.blog-calc-slot--generic {
  text-align: center;
}
.blog-calc-slot--generic h3 {
  margin: 16px 0 8px;
  font-size: 24px;
  font-weight: 700;
}
.blog-calc-slot--generic p {
  margin: 0 auto 24px;
  max-width: 540px;
  color: var(--fg-secondary);
  font-size: 16px;
  line-height: 1.55;
}
.blog-calc-slot--generic .cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-800) 100%);
  color: #fff;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 10px 24px -8px rgba(30,87,214,0.5);
  transition: transform var(--duration-fast) var(--ease-out);
}
.blog-calc-slot--generic .cta-btn:hover { transform: translateY(-2px); }

/* ============================================================================
 * 7. INDEX PAGE
 * ========================================================================== */

.blog-index {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 32px;
}
.blog-index__header {
  margin-bottom: 48px;
  text-align: center;
}
.blog-index__header h1 {
  margin: 0 0 12px;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.02em;
}
.blog-index__header p {
  margin: 0;
  color: var(--fg-secondary);
  font-size: 18px;
}
/* Category filter chip strip — sits between the header and the post grid.
   Each chip links to a stable URL (?category=<slug> or /blogs for "All")
   so filtered views are shareable + indexable for SEO. Color comes from
   the category doc via --cat-color, falling back to brand blue. */
.blog-index__chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 auto 28px;
  max-width: 1200px;
  padding: 0 32px;
}
.blog-index__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: 9999px;
  background: var(--bg-surface, #fff);
  border: 1px solid var(--border-subtle);
  color: var(--fg-secondary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.blog-index__chip:hover {
  border-color: var(--cat-color, var(--brand-600));
  color: var(--fg-primary);
}
.blog-index__chip-dot {
  width: 8px; height: 8px; border-radius: 9999px;
  background: var(--cat-color, var(--brand-600));
  flex-shrink: 0;
}
.blog-index__chip.is-active {
  background: var(--cat-color, var(--brand-600));
  border-color: var(--cat-color, var(--brand-600));
  color: #fff;
}
.blog-index__chip.is-active .blog-index__chip-dot {
  background: rgba(255,255,255,0.85);
}
/* Per-card category badges — first 2, with "+N" overflow. */
.blog-index__card-cats {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 8px;
}
.blog-index__card-cat {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--cat-color, #1E57D6) 12%, transparent);
  color: color-mix(in srgb, var(--cat-color, #1E57D6) 65%, #0B1220 40%);
  border: 1px solid color-mix(in srgb, var(--cat-color, #1E57D6) 28%, transparent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.blog-index__card-cat--more {
  background: var(--bg-subtle);
  color: var(--fg-tertiary);
  border-color: var(--border-subtle);
}

.blog-index__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.blog-index__card {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.blog-index__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.blog-index__card-media {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
  position: relative;
  overflow: hidden;
}
.blog-index__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-index__card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.blog-index__card-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin-bottom: 8px;
}
.blog-index__card-title {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg-primary);
  margin: 0 0 8px;
}
.blog-index__card-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-secondary);
  margin: 0 0 16px;
  flex: 1;
}
.blog-index__card-meta {
  font-size: 12px;
  color: var(--fg-tertiary);
}

.blog-index__empty {
  text-align: center;
  padding: 80px 32px;
  color: var(--fg-tertiary);
  font-size: 16px;
}

/* ============================================================================
 * 8. RESPONSIVE
 * ========================================================================== */

@media (max-width: 768px) {
  .blog-nav { padding: 0 16px; height: 56px; }
  /* Hide secondary links on mobile (Inicio / Servicios / Blog / EN-ES)
     but keep the CTA visible — display:contents lifts the CTA out of the
     hidden parent so it still flexes inside .blog-nav. The lang chip is
     also kept so users can switch languages on mobile. */
  .blog-nav__links { display: contents; }
  .blog-nav__links > a:not(.blog-nav__cta) { display: none; }
  .blog-nav__cta { padding: 8px 12px; font-size: 12px; }

  .blog-hero {
    min-height: 360px;
    padding: 60px 20px 28px;
  }
  .blog-hero h1 { font-size: clamp(26px, 7vw, 36px); margin-bottom: 10px; }
  .blog-hero__lede { font-size: 15px; }
  .blog-hero__strip { padding: 14px 18px; }

  .blog-article { padding: 0 18px; font-size: 16px; }
  .blog-article > h2 { font-size: 26px; margin-top: 40px; }
  .blog-article > h3 { font-size: 20px; margin-top: 28px; }

  .blog-article .grid-2col { grid-template-columns: 1fr; }
  .blog-article .route-card { grid-template-columns: 1fr; gap: 8px; padding: 16px; }
  .blog-article .route-info { flex-wrap: wrap; }
  .blog-article .callout-stat { grid-template-columns: 1fr; gap: 12px; text-align: center; padding: 20px; }
  .blog-article .callout-stat .stat-number { font-size: 40px; }

  /* Use whatever the article-layout grants us (12px sides) — the inner
     bc-card carries the visible chrome. Override the legacy padding that
     used to live on the slot itself. */
  .blog-calc-slot { margin: 32px 0 96px; padding: 0; border-radius: 0; }
  .blog-calc-slot__title { font-size: 22px; }

  /* Tighter card chrome on mobile so the form has more breathing room
     for inputs + toggles + buttons. ~14px padding instead of 20px. */
  .bc-card { padding: 14px 14px 16px; border-radius: 14px; }
  .bc-card-header { margin-bottom: 12px; }
  .bc-title { font-size: 20px; }
  .bc-sub { font-size: 13px; }

  /* RouteSection padding — give origin/destination groups breathing room
     without burning width on the inset background. */
  .bc-route-side { padding: 10px; gap: 8px; margin-bottom: 8px; }

  /* Container stepper + 2-column grids — single-column on narrow screens
     so the steppers + inputs can stretch full-width. */
  .bc-grid-2 { grid-template-columns: 1fr; gap: 8px; }

  /* Toggle pills — wrap to new line on tiny widths so they don't squish */
  .bc-pickup-row { gap: 8px; }
  .bc-toggle { width: 100%; }
  .bc-toggle button { flex: 1; padding: 8px 10px; font-size: 12px; }

  /* Trust badges — keep visible but tighter spacing */
  .bc-trust { gap: 6px; font-size: 10px; }
  .bc-trust-item { padding: 3px 8px; }

  .blog-index { padding: 32px 18px; }
  .blog-index__grid { grid-template-columns: 1fr; gap: 16px; }

  .blog-footer { padding: 32px 18px 24px; }
}