/* ============================================================================
   Sinch Voice Ebook. PAGE styles (EPIC content) - parte do entregavel
   ----------------------------------------------------------------------------
   STATUS: este arquivo E parte do entregavel. Adicionar ao tema Sinch.

   Contem classes de conteudo especificas do voice ebook (.cost-card,
   .question-block, .chapter-lead, .ebook-cta, etc) que nao pertencem a
   nenhum componente do tema simpletexting-theme-blank nem aos widgets EPIC.

   Tudo aqui foi criado pro voice ebook especificamente. No lift, esses
   estilos servem o conteudo dos capitulos.

   Para o Sinch web team: incluir este arquivo + widgets.css no tema, junto
   com o markup. Os scaffolds (theme.css, components.css) sao descartaveis.
   ============================================================================ */

/* Navbar breathing room para logo 40px brand minimum.
   Sinch theme default --nav-height: 53px era apertado pro logo 40px (so 6.5px
   por lado). Bump para 72px da 16px de respiro top/bottom, mais perto da clear
   space rule do brand (~bumblebee height around logo). */
body { --nav-height: 72px; }

/* Compensa a navbar sticky quando se chega via ancora (#secao) */
[id] { scroll-margin-top: 104px; }

/* Hub: cover com toque de glow de marca (Honey yellow) */
.ebook-cover { position: relative; overflow: hidden; }

/* Capitulo: a intro logo abaixo do header fica um pouco maior */
.chapter-lead { font-size: 1.25rem; }
@media (max-width: 767.98px) { .chapter-lead { font-size: 1.125rem; } }

/* ============================================================================
   Skip link (WCAG 2.1 SC 2.4.1 Bypass Blocks)
   ----------------------------------------------------------------------------
   Visually hidden until it receives keyboard focus (first Tab keystroke).
   On focus, appears as a pill in the top left, with high z-index to sit
   above the sticky navbar. Skip target is `<main id="main">` on every page.
   ============================================================================ */
.skip-link {
  position: absolute;
  top: -200px;
  left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background: rgb(var(--sinch-glow-color));
  color: #000000;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: top 0.15s ease-out;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 1rem;
  outline: 2px solid #000000;
  outline-offset: 2px;
}

/* Symmetric padding between ebook sections.
   The Sinch theme catch-all rule zeroes padding-top on adjacent sections
   that share the same .bg-* and data-theme (selector with 4 attrs, specificity
   0,4,0). On the marketing site that makes sense (few consecutive identical
   sections), but in the ebook nearly every section is bg-body dark, so every
   one after the first ends up with top:0 and bottom:5rem, creating visible
   asymmetry (more space below than above).
   Override: re-establish symmetric padding-top specifically on ebook-section,
   winning specificity by chaining the .ebook-section class. */
[data-content-type*="hub"].ebook-section.section-hub-py + [data-content-type*="hub"].ebook-section.section-hub-py {
  padding-top: 3rem !important;
}
@media (min-width: 768px) {
  [data-content-type*="hub"].ebook-section.section-hub-py + [data-content-type*="hub"].ebook-section.section-hub-py {
    padding-top: 4rem !important;
  }
}
@media (min-width: 1200px) {
  [data-content-type*="hub"].ebook-section.section-hub-py + [data-content-type*="hub"].ebook-section.section-hub-py {
    padding-top: 5rem !important;
  }
}

/* Lista de "o que tem dentro" no hub e listas de bullets no corpo */
.ebook-bullets { padding-left: 1.25rem; }
.ebook-bullets li { margin-bottom: 0.5rem; }
.ebook-bullets li:last-child { margin-bottom: 0; }

/* Cartao de custo / risco (Capitulo 04) */
.cost-card {
  padding: 1.5rem;
  border-radius: var(--sinch-border-radius-lg);
  background-color: var(--sinch-light);
  border-left: 3px solid var(--sinch-secondary);
}
.cost-card h3 { margin: 0 0 0.5rem; font-size: 1.125rem; color: var(--sinch-accent); }
.cost-card p { margin: 0; color: var(--sinch-body-color); }
.cost-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

/* Fecho de capitulo / hub: CTA centralizado */
.ebook-cta { text-align: center; }

/* ============================================================================
   Utility classes replacing one-off inline style="" attributes.
   These replace three specific inline styles identified in the code-separation
   audit (v23, 2026-05-27):
     1. .mb-section-header  -- cost-cards heading gap in ch04 (was margin-bottom:2rem)
     2. .ebook-cta-body     -- CTA_SINCH paragraph bottom margin (was margin-bottom:1.5rem)
     3. .form-legal         -- form privacy disclaimer font size (was font-size:12px)
   ============================================================================ */
.mb-section-header { margin-bottom: 2rem; }
.ebook-cta-body { margin-bottom: 1.5rem; }

/* Form privacy disclaimer text. Brand: body color is #4B575E (--sinch-body-color)
   in light mode for proper contrast on white BG (~7:1). Default Sinch theme
   sometimes inherits --sinch-muted (#AEB7BD, ~2:1 FAIL) for legal text. Force
   body-color for AA contrast. Also size bump from 12px to 13px for legibility. */
.form-legal {
  font-size: 13px;
  color: var(--sinch-body-color);
}
.form-legal a { color: var(--sinch-secondary); }

/* Checkbox consent label, same contrast issue. */
.form-block .mc-checkbox label.inline,
.form-block .form-field label {
  color: var(--sinch-body-color);
}

/* Explore chapters carousel nav buttons.
   Sinch theme defaults .btn-icon.btn-lg to 0.625rem padding (~40px square).
   Ai-paradox uses bigger touch targets (~56px square). Bump padding + svg
   size to match. Helps WCAG 2.5.5 target size (44x44 min) too. */
[data-carousel-nav] {
  --sinch-btn-icon-padding: 1rem !important;
  --sinch-btn-icon-svg-size: 1.75rem !important;
}

/* Brand-canonical video player (Sinch ai-paradox pattern).
   Markup: <div data-ebook-video> with <video> + overlay <button.btn-play.btn-play-circle>.
   Aspect-ratio 16:9 by default, 9:16 via .iframe-responsive-9x16 modifier.
   Click on button: hides overlay, shows native browser controls, autoplays.
   Canonical "intrinsic ratio" pattern: container reserves aspect via aspect-ratio,
   video fills via position absolute + inset (works across all browsers without
   the child-height-100% resolution issue). */
[data-ebook-video] {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1.5rem;
  overflow: hidden;
}
[data-ebook-video].iframe-responsive-9x16 { aspect-ratio: 9 / 16; }
[data-ebook-video] video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-ebook-video] [data-ebook-video-play] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #0e1518;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.2s ease-out, background-color 0.2s ease-out;
}
[data-ebook-video] [data-ebook-video-play]:hover {
  transform: translate(-50%, -50%) scale(1.05);
  background: #FFFFFF;
}
[data-ebook-video][data-playing="true"] [data-ebook-video-play] { display: none; }
[data-ebook-video][data-playing="true"] video { background: #000; }

/* --- "What's inside" inside-grid -----------------------------------------
   Grid visual de cards numerados (01..06) no hub. Padrao Sinch:
   numero gigante a esquerda (fs-1 text-muted) + heading h6 + descricao.
   3 cols no lg, 2 cols no md, 1 col no mobile. Hover destaca numero.
   -------------------------------------------------------------------------- */
.inside-grid { --bs-gutter-y: 2rem; }
.inside-item { position: relative; }
.inside-item__number {
  font-family: var(--sinch-font-sans-serif);
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1;
  color: var(--sinch-muted);
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.inside-item:hover .inside-item__number { color: rgb(var(--sinch-glow-color)); }
.inside-item h3 { color: var(--sinch-accent); }
.inside-item p { font-size: 0.9375rem; color: var(--sinch-body-color); }

/* .row.g-4 (gap utility) - row-gap + col-gap = 1.5rem */
.g-4 { --bs-gutter-y: 1.5rem; --bs-gutter-x: 1.5rem; }
.row.g-4 { row-gap: 1.5rem; }

/* --- Stat hero: massive single stat block ---------------------------------
   Padrao editorial Sinch. Numero gigante, caption clara, fonte abaixo.
   Atmosfera dada pelo `.glow` no <section>. Usado uma vez por capitulo no
   pico da narrativa (ex: Capitulo 01 = $270B).
   -------------------------------------------------------------------------- */
.stat-hero { padding-block: 2rem; position: relative; }
.stat-hero__num {
  font-family: var(--sinch-font-sans-serif);
  /* Host Grotesk ships 400 and 600 from the Sinch CDN. 700 doesn't exist as a
     loaded face so the browser synthesizes a fake bold, which renders slightly
     off. Use 600 (the real Semibold) to get the canonical Sinch display look. */
  font-weight: 600;
  font-size: clamp(4rem, 11vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: rgb(var(--sinch-glow-color));
  margin-bottom: 1.5rem;
  font-variant-numeric: tabular-nums;
}
.stat-hero__caption {
  font-size: 1.25rem;
  line-height: 1.5;
  max-width: 38rem;
  margin-inline: auto;
}
.stat-hero__source {
  font-size: 0.8125rem;
  /* High contrast over yellow glow halo. QA Joanna 27-Mai: var(--sinch-muted) failed
     contrast on the stat-hero gradient. Hardcoded rgba beats the glow. */
  color: rgba(255, 255, 255, 0.95);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 1.5rem;
}

/* --- Quote pull: oversized editorial quote -------------------------------- */
.hub-quote {
  padding: 2.5rem 2rem;
  margin: 0;
  position: relative;
  border-radius: var(--sinch-border-radius-lg);
}
@media (min-width: 768px) { .hub-quote { padding: 3rem 3.5rem; } }
.hub-quote .quote-mark {
  /* Brand portal canonical quote icon (assets/images/icons/quote.svg).
     Mask-image lets us tint the SVG with brand yellow. */
  display: block;
  width: 4rem;
  height: 3rem;
  margin-bottom: 1rem;
  background-color: rgb(var(--sinch-glow-color));
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
}
.hub-quote .quote-text {
  font-family: var(--sinch-font-sans-serif);
  font-size: clamp(1.25rem, 2.4vw, 1.875rem);
  line-height: 1.35;
  font-weight: 500;
  color: var(--sinch-accent);
}
.hub-quote .quote-attribution {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--sinch-body-color);
  font-style: normal;
}

/* --- Inline mid-chapter CTA card ------------------------------------------
   Card brand-yellow accent, copy a esquerda, imagem a direita.
   -------------------------------------------------------------------------- */
.inline-cta {
  border-radius: var(--sinch-border-radius-xl);
  padding: 2rem;
  background-color: var(--sinch-light);
  overflow: hidden;
  position: relative;
}
@media (min-width: 768px) { .inline-cta { padding: 3rem; } }
[data-theme="dark"] .inline-cta { background-color: #000; }
.inline-cta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(var(--sinch-glow-color), 0) 0%,
    rgba(var(--sinch-glow-color), 0.85) 30%,
    rgba(var(--sinch-glow-color), 0.85) 70%,
    rgba(var(--sinch-glow-color), 0) 100%);
}
.inline-cta__copy h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; }
.inline-cta__media { display: flex; justify-content: center; align-items: center; }
.inline-cta__media img { max-width: 100%; height: auto; }

/* ============================================================================
   Placeholder treatment, EPIC entregavel
   ----------------------------------------------------------------------------
   Enquanto a Sinch nao envia as ilustracoes 3D reais, todos os slots de imagem
   que apontam para <img src="...placeholder-*.svg"> recebem:
     1. A img escondida (display:none, escopado por wrapper para vencer
        `.altblock-media img { display: block }` por especificidade 0,2,1).
     2. O wrapper recebe gradiente sutil + pill amarelo "PREVIEW Placeholder
        artwork" no canto superior esquerdo.
   Quando arte real chegar (src muda para nao bater com `placeholder-`), ambos
   efeitos somem sozinhos via `:has()`, sem editar markup. */
.hero-front-page__wrapper img[src*="placeholder-"],
.altblock-media img[src*="placeholder-"],
.chapters-cards__img-wrap img[src*="placeholder-"],
.inline-cta__media img[src*="placeholder-"],
.chapter-hero__media img[src*="placeholder-"],
.nav-prev img[src*="placeholder-"],
.nav-next img[src*="placeholder-"] { display: none; }

.hero-front-page__bg:has(img[src*="placeholder-"]),
.altblock-media:has(img[src*="placeholder-"]),
.chapters-cards__img-wrap:has(img[src*="placeholder-"]),
.inline-cta__media:has(img[src*="placeholder-"]),
.chapter-hero__media:has(img[src*="placeholder-"]),
.nav-prev:has(img[src*="placeholder-"]),
.nav-next:has(img[src*="placeholder-"]) {
  background-image:
    radial-gradient(circle at 22% 55%, rgba(255, 233, 122, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 86% 84%, rgba(255, 233, 122, 0.12) 0%, transparent 40%),
    linear-gradient(180deg, var(--sinch-light-subtle) 0%, var(--sinch-body-bg) 100%);
  background-color: var(--sinch-body-bg);
}
.hero-front-page__bg:has(img[src*="placeholder-"])::after,
.altblock-media:has(img[src*="placeholder-"])::after,
.chapters-cards__img-wrap:has(img[src*="placeholder-"])::after,
.inline-cta__media:has(img[src*="placeholder-"])::after,
.chapter-hero__media:has(img[src*="placeholder-"])::after,
.nav-prev:has(img[src*="placeholder-"])::after,
.nav-next:has(img[src*="placeholder-"])::after {
  content: "PREVIEW \00b7 Placeholder artwork";
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 6;
  padding: 0.3rem 0.85rem;
  border-radius: 50rem;
  font-family: var(--sinch-font-sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgb(var(--sinch-glow-color));
  background-color: rgba(20, 24, 28, 0.92);
  border: 1px solid rgba(255, 233, 122, 0.45);
  pointer-events: none;
}
.altblock-media, .chapters-cards__img-wrap, .inline-cta__media,
.chapter-hero__media, .nav-prev, .nav-next { position: relative; }

/* Real artwork rounded corners (Sinch design system pattern).
   Sinch AI Paradox + product pages round imagery with 1.5rem (24px) at
   altblock/chapter-hero size and 0.5rem (8px) on adjacent-posts thumbnails.
   Apply only when src does NOT contain "placeholder-" so the placeholder
   treatment above keeps its own radius. The `overflow: hidden` ensures the
   image clips correctly even when the wrapper has aspect-ratio constraints. */
.altblock-media:not(:has(img[src*="placeholder-"])),
.chapter-hero__media:not(:has(img[src*="placeholder-"])),
.inline-cta__media:not(:has(img[src*="placeholder-"])) {
  border-radius: 1.5rem;
  overflow: hidden;
}
.altblock-media:not(:has(img[src*="placeholder-"])) img,
.chapter-hero__media:not(:has(img[src*="placeholder-"])) img,
.inline-cta__media:not(:has(img[src*="placeholder-"])) img {
  border-radius: 1.5rem;
}
.nav-prev:not(:has(img[src*="placeholder-"])) img,
.nav-next:not(:has(img[src*="placeholder-"])) img {
  border-radius: 0.5rem;
}

/* Full-bleed pattern was attempted (margin-left/right calc trick to push the
   image to the viewport edge) but it broke column alignment on adjacent
   sections. Reverted: images stay contained within their Bootstrap column
   with the standard 1.5rem rounded corners on all four sides. The reference
   Sinch design uses full-bleed in some sections, but the cleanest path is to
   restructure the markup (container-fluid + a single column with internal
   container for text) rather than fight Bootstrap with negative margins. */
.altblock-media:has(img[src*="placeholder-"]),
.inline-cta__media:has(img[src*="placeholder-"]),
.chapter-hero__media:has(img[src*="placeholder-"]) { min-height: 280px; border-radius: 1rem; overflow: hidden; }
.nav-prev:has(img[src*="placeholder-"]),
.nav-next:has(img[src*="placeholder-"]) { min-height: 80px; border-radius: 0.5rem; overflow: hidden; }

/* Ratio 4:3 nos slots de placeholder de capitulo (hero do cap, altblock,
 * inline-cta, adjacent posts). Quando a arte real chegar, o seletor
 * `img[src*="placeholder-"]` deixa de bater e a regra some, voltando ao
 * ratio natural da imagem. Min-height acima serve de fallback se 4:3
 * resultar em altura menor que 280px em coluna estreita. */
.altblock-media:has(img[src*="placeholder-chapter"]),
.inline-cta__media:has(img[src*="placeholder-chapter"]),
.chapter-hero__media:has(img[src*="placeholder-chapter"]),
.nav-prev:has(img[src*="placeholder-chapter"]),
.nav-next:has(img[src*="placeholder-chapter"]) { aspect-ratio: 4 / 3; }

/* ============================================================================
   Hub data (stat grid with counters), EPIC entregavel
   ----------------------------------------------------------------------------
   Grid de stats numericas (`.hub-data` > `.hub-data-item`). Cada item tem
   numero gigante (`.counter`) + label. Halo yellow sutil atras do numero.
   `repeat(auto-fit, minmax(220px, 1fr))` faz auto-balance: 2 itens viram 2
   cols, 3 itens viram 3 cols (no md+), 4 itens podem virar 2x2 ou 4x1. */
.hub-data {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.hub-data-item {
  position: relative;
  padding: 1.5rem;
  border-radius: var(--sinch-border-radius-lg);
  background-color: var(--sinch-light);
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}
[data-theme="dark"] .hub-data-item { background-color: var(--sinch-light-subtle); }
.hub-data-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%;
  left: -10%;
  width: 60%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(var(--sinch-glow-color), 0.22) 0%,
              rgba(var(--sinch-glow-color), 0) 65%);
  filter: blur(40px);
  pointer-events: none;
}
.hub-data-item .counter {
  position: relative;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--sinch-heading-color);
  margin-bottom: 0.5rem;
}
.hub-data-item .content-body { font-size: 0.9375rem; }
@media (max-width: 767.98px) {
  .hub-data { grid-template-columns: 1fr; }
}

/* ============================================================================
   Light mode: stat-hero e hub-quote usam glow yellow (--sinch-glow-color
   #FFE97A) que perde contraste sobre bg claro. Em light mode trocamos pelo
   primary-text-color (#F0C243 darker honey), mantendo a familia honey e
   passando WCAG. No dark mode o brilho yellow permanece (alto contraste com
   bg escuro). Patch da auditoria do light, 26 Mai 2026.
   ============================================================================ */
[data-ebook-mode="light"] .stat-hero__num {
  color: var(--sinch-primary-text-color);
}
[data-ebook-mode="light"] .hub-quote .quote-mark {
  /* Mask-image quote icon: tint via background-color, not color. */
  background-color: var(--sinch-primary-text-color);
}
[data-ebook-mode="light"] .stat-hero__source {
  /* Light mode: source line on a light bg + dimmed glow. Strong dark for legibility. */
  color: rgba(0, 0, 0, 0.85);
}

/* Center the brand glow on stat-hero sections.
   The Sinch theme default for `.glow` positions the radial halo at -530px
   -590px (top-left of the section), and the `.glow::before` pseudo defaults
   to top:0/left:0. On most pages this asymmetric halo is fine because the
   content is also left-aligned. But on stat-hero blocks the content is
   centered, so the top-left halo creates an optical illusion that the giant
   number is shifted to the LEFT of true center. Override: center both the
   background-image and the ::before pseudo so the halo sits behind the
   number, matching the visual center of the content. */
.ebook-section.glow:has(.stat-hero) {
  background-position: center;
}
.ebook-section.glow:has(.stat-hero)::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 70%;
  /* Lucas QA 27-Mai: glow was too prominent and washed out the source text.
     Tone the halo so yellow stays "a small touch" per brand guide, not the
     headline element. */
  opacity: 0.55;
}

/* ============================================================================
   Light mode chart accent treatment (brand-canonical)
   ----------------------------------------------------------------------------
   Sinch chart canonical: yellow bar carries the color story, labels and arrow
   stay neutral (black in light, yellow in dark). Brand "titles are black in
   light mode" + "yellow as small accent" alignment.
   Previous attempt used dark amber #5C4000 for WCAG AA contrast on white. That
   passed contrast but rendered muddy brown and visually broke brand consistency
   with the dark mode counterpart. Joanna QA flagged 2026-05-28.
   Black on white = 21:1 (max contrast) and brand canonical.
   Dark mode keeps bright yellow (high contrast against dark bg).
   ============================================================================ */
/* Text + arrow-head fills (text labels are <text>, arrow-head is <polygon>). */
[data-ebook-mode="light"] .ebook-chart .chart-delta,
[data-ebook-mode="light"] .ebook-chart .chart-arrow-head,
[data-ebook-mode="light"] .ebook-chart .chart-value--accent {
  fill: var(--sinch-heading-color);
}
/* Arrow path is a curve with fill="none" + stroke. Only override stroke,
   leave fill alone (CSS fill: var(...) would fill the curve as a closed shape,
   creating a thick blob, exactly the bug Joanna flagged 2026-05-28 light mode). */
[data-ebook-mode="light"] .ebook-chart .chart-arrow {
  stroke: var(--sinch-heading-color);
}
[data-ebook-mode="light"] .ebook-chart .chart-source,
[data-ebook-mode="light"] .ebook-chart .chart-axis-label {
  opacity: 1;
  fill: rgba(0, 0, 0, 0.72);
}

/* ============================================================================
   Adjacent-posts img crop fix (v15 hotfix, 26 Mai noite)
   ----------------------------------------------------------------------------
   Sinch theme (templates-single-hub-chapter.css) forca `aspect-ratio: 1` no
   img dentro do primeiro span do .btn-arrow. Sinch live usa thumbnails
   150x150 PRE-CROPADAS, nossos chapter covers sao 1200x900 retangulares,
   entao a regra esticava/squashava a foto. Object-fit cover centraliza o
   crop sem distorcer.
   ============================================================================ */
.adjacent-posts > a.btn-arrow > span:first-child img.rounded-sm {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

/* ============================================================================
   Inline chart animations (v17)
   ----------------------------------------------------------------------------
   Inline SVG charts (.ebook-chart) are visible by default. JS adds the class
   `charts-enhanced` to <body> when present; only then the chart starts hidden
   and animates in on scroll-into-view (`.is-visible`). If JS fails, charts
   render normally. Honors prefers-reduced-motion.
   ========================================================================== */

body.charts-enhanced .ebook-chart .chart-bar,
body.charts-enhanced .ebook-chart .chart-value,
body.charts-enhanced .ebook-chart .chart-axis-label,
body.charts-enhanced .ebook-chart .chart-delta,
body.charts-enhanced .ebook-chart .chart-annotation,
body.charts-enhanced .ebook-chart .chart-source,
body.charts-enhanced .ebook-chart .chart-grid,
body.charts-enhanced .ebook-chart .chart-grid-labels,
body.charts-enhanced .ebook-chart .chart-arrow,
body.charts-enhanced .ebook-chart .chart-arrow-head,
body.charts-enhanced .ebook-chart .chart-baseline {
  opacity: 0;
  transition: opacity 0.45s ease-out, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

body.charts-enhanced .ebook-chart .chart-bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
}

body.charts-enhanced .ebook-chart .chart-value,
body.charts-enhanced .ebook-chart .chart-delta {
  transform: translateY(6px);
}

body.charts-enhanced .ebook-chart .chart-arrow {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: opacity 0.3s ease-out, stroke-dashoffset 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Active state: triggered by IntersectionObserver in widgets.js */
body.charts-enhanced .ebook-chart.is-visible .chart-baseline,
body.charts-enhanced .ebook-chart.is-visible .chart-grid,
body.charts-enhanced .ebook-chart.is-visible .chart-grid-labels,
body.charts-enhanced .ebook-chart.is-visible .chart-annotation,
body.charts-enhanced .ebook-chart.is-visible .chart-source,
body.charts-enhanced .ebook-chart.is-visible .chart-axis-label,
body.charts-enhanced .ebook-chart.is-visible .chart-value,
body.charts-enhanced .ebook-chart.is-visible .chart-delta,
body.charts-enhanced .ebook-chart.is-visible .chart-arrow-head {
  opacity: 1;
  transform: none;
}

body.charts-enhanced .ebook-chart.is-visible .chart-bar {
  opacity: 1;
  transform: scaleY(1);
}

body.charts-enhanced .ebook-chart.is-visible .chart-arrow {
  opacity: 1;
  stroke-dashoffset: 0;
}

/* Stagger: baseline + grid first, then bars, then labels, then arrow + delta */
body.charts-enhanced .ebook-chart.is-visible .chart-baseline,
body.charts-enhanced .ebook-chart.is-visible .chart-grid,
body.charts-enhanced .ebook-chart.is-visible .chart-grid-labels,
body.charts-enhanced .ebook-chart.is-visible .chart-annotation { transition-delay: 0ms; }

body.charts-enhanced .ebook-chart.is-visible .chart-bar { transition-delay: 120ms; }
body.charts-enhanced .ebook-chart.is-visible .chart-bar:nth-of-type(2) { transition-delay: 220ms; }
body.charts-enhanced .ebook-chart.is-visible .chart-bar:nth-of-type(3) { transition-delay: 320ms; }

body.charts-enhanced .ebook-chart.is-visible .chart-value,
body.charts-enhanced .ebook-chart.is-visible .chart-axis-label,
body.charts-enhanced .ebook-chart.is-visible .chart-source { transition-delay: 480ms; }

body.charts-enhanced .ebook-chart.is-visible .chart-arrow { transition-delay: 600ms; }
body.charts-enhanced .ebook-chart.is-visible .chart-arrow-head,
body.charts-enhanced .ebook-chart.is-visible .chart-delta { transition-delay: 1450ms; }

/* Reduced motion: render fully visible, no animation */
@media (prefers-reduced-motion: reduce) {
  body.charts-enhanced .ebook-chart .chart-bar,
  body.charts-enhanced .ebook-chart .chart-value,
  body.charts-enhanced .ebook-chart .chart-axis-label,
  body.charts-enhanced .ebook-chart .chart-delta,
  body.charts-enhanced .ebook-chart .chart-annotation,
  body.charts-enhanced .ebook-chart .chart-source,
  body.charts-enhanced .ebook-chart .chart-grid,
  body.charts-enhanced .ebook-chart .chart-grid-labels,
  body.charts-enhanced .ebook-chart .chart-arrow,
  body.charts-enhanced .ebook-chart .chart-arrow-head,
  body.charts-enhanced .ebook-chart .chart-baseline {
    opacity: 1;
    transform: none;
    transition: none;
    stroke-dashoffset: 0;
  }
}

/* ============================================================================
   Hero BG full-bleed + opacidade reduzida (v18)
   ----------------------------------------------------------------------------
   Override do Sinch theme: hero-front-page__wrapper tem margin 1.5rem +
   border-radius 2rem (card look) e a img e centralizada width:auto. Pra usar
   a imagem como BG real do hero (edge-to-edge + opacidade baixa pra texto
   ficar legivel), remover essas regras.
   ========================================================================== */
/* Selectors espelham a especificidade do Sinch theme (.hero-front-page .hero-front-page__bg img)
   pra vencer a regra original sem !important. */
.hero-front-page .hero-front-page__bg .hero-front-page__wrapper {
  margin: 0;
  border-radius: 0;
}
.hero-front-page .hero-front-page__bg img {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: none;
  max-width: none;
  border-radius: 0;
  opacity: 0.25;
}

/* =============================================================================
   Highlight word in chapter and hub h1 (QA Joanna 27-Mai).
   Brand rule: yellow signature in every layout. In light mode, headlines may
   use Ocean 60 blue per brand-components.md (secondary color for headlines).
   ========================================================================== */
.chapter-hero h1 .hl,
.hero-front-page__content h1 .hl {
  color: rgb(var(--sinch-glow-color));
}
[data-ebook-mode="light"] .chapter-hero h1 .hl,
[data-ebook-mode="light"] .hero-front-page__content h1 .hl {
  color: var(--sinch-highlight-text-color);
}

/* =============================================================================
   Hub hero standfirst: single-column stacked baseline (option A / fallback).
   The .hero-intro wrapper spaces the two intro paragraphs inside the hero.
   Option explorations (A/B/C) live in css/hero-options.css, linked only
   from the _hero-options/ previews, not from the main build.
   ========================================================================== */
.hero-intro p { margin-bottom: 1rem; }
.hero-intro p:last-child { margin-bottom: 0; }

/* =============================================================================
   Hero B (production): split layout -- title left / intro right.
   Ported from css/hero-options.css [data-hero-option="B"] rules.
   B is the chosen hero; the scope prefix is removed since it is the only hero.
   Background image: right-half panel only (::after pseudo), masked at the left
   edge so it does not bleed into the title column. Mobile stacks: title ->
   intro -> CTAs. The stock __bg element is hidden in B (image via ::after).
   ========================================================================== */
.hero-front-page.hero-b {
  padding-top: 5rem;
  padding-bottom: 5rem;
  min-height: min(620px, 60vh);
}
@media (min-width: 992px) {
  .hero-front-page.hero-b {
    padding-top: 6.5rem;
    padding-bottom: 6.5rem;
    min-height: min(680px, 70vh);
  }
}

/* Override Sinch default col-lg-6 centering; B uses a 2-col row. */
.hero-b-row {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Left column: title block */
.hero-b-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-b-left .section-caption,
.hero-b-left h1 {
  text-align: left;
}

/* Right column: intro copy */
.hero-b-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 992px) {
  .hero-b-right {
    padding-left: 3rem;
    /* Subtle left border as a visual divider. Uses glow color at low opacity. */
    border-left: 1px solid rgba(var(--sinch-glow-color), 0.2);
  }
}
.hero-b-right p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--sinch-body-color);
  margin-bottom: 1.1rem;
}
.hero-b-right p:last-child {
  margin-bottom: 0;
}

/* Background image: right-half panel only on lg+.
   Pseudo-element on the hero section, z-index below the content row.
   The stock __bg element is hidden so the image is not double-rendered. */
.hero-front-page.hero-b .hero-front-page__bg {
  display: none !important;
}
.hero-front-page.hero-b::after {
  content: "";
  display: block;
  position: absolute;
  /* Right half only */
  left: 50%;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  background-image: url("../assets/images/brand-portal/Environment_Dark_07.webp");
  background-size: cover;
  background-position: left center;
  opacity: 0.22;
  /* Gradient mask fades the image edge where it meets the title column */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 20%, rgba(0,0,0,1) 60%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.6) 20%, rgba(0,0,0,1) 60%);
}
/* Mobile: no split image */
@media (max-width: 991.98px) {
  .hero-front-page.hero-b::after {
    display: none;
  }
}

/* Decorative hero overlays must never intercept clicks. The Sinch theme's
   .hero-front-page__container::before (z-index 5, full-hero, from sinch-inline-hub.css)
   and the B background ::after (right-half image) are visual only; without this they
   sit above the content row and swallow pointer events (CTAs, text selection). */
.hero-front-page .hero-front-page__container::before,
.hero-front-page.hero-b::after {
  pointer-events: none;
}

/* CTA row on B: left-aligned to match title column */
.hero-b-cta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  margin-top: 2rem;
}

/* Mobile stacking for B: title -> intro -> CTAs */
@media (max-width: 991.98px) {
  .hero-b-left,
  .hero-b-right {
    padding-left: 0;
    padding-right: 0;
    border-left: none;
  }
  .hero-b-right {
    margin-top: 1.5rem;
  }
}

/* Ensure hero content row sits above the ::after pseudo */
.hero-front-page.hero-b .hero-b-row {
  position: relative;
  z-index: 2;
}

/* hl highlight selector: B hero title lives outside .hero-front-page__content
   so we extend the selector to cover it. */
.hero-front-page.hero-b h1 .hl {
  color: rgb(var(--sinch-glow-color));
}
[data-ebook-mode="light"] .hero-front-page.hero-b h1 .hl {
  color: var(--sinch-highlight-text-color);
}

/* =============================================================================
   Cost cards icons (Ch04 "The five costs of inaction").
   Brand rule: icons always black on light, inverted to white on dark.
   Mask-image lets us color a monochromatic SVG via `background-color`, so the
   icon follows the card's text color and switches with the theme without
   per-icon CSS rules. Each card sets its mask via inline `--icon` variable.
   ========================================================================== */
.cost-card {
  position: relative;
}
.cost-card__icon {
  display: block;
  width: 32px;
  height: 32px;
  margin-bottom: 1rem;
  /* Sinch theme `--sinch-accent` flips #000000 (light) <-> #FFFFFF (dark) automaticamente.
     Substitui 3 regras de mode-override por uma so. Brand canonical para icons. */
  background-color: var(--sinch-accent);
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
}

/* =============================================================================
   Print styles (Ctrl+P / Save as PDF)
   Force light theme, strip chrome and CTAs, keep content readable on paper.
   ========================================================================== */
@media print {
  /* Force light color scheme regardless of theme toggle / system preference */
  :root,
  html,
  body,
  body[data-theme="dark"],
  body[data-theme="light"] {
    color-scheme: light !important;
    background: #fff !important;
    color: #000 !important;
  }

  /* Reset backgrounds and shadows globally; keep text dark for ink saving */
  *,
  *::before,
  *::after {
    background: transparent !important;
    background-image: none !important;
    color: #111 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
  }

  /* Beat Bootstrap utilities that set color/bg with !important (.bg-dark, .text-light-emphasis, .text-body-color, etc.). Single-class specificity, so we must match each one explicitly. */
  .bg-dark, .bg-body, .bg-black, .bg-primary, .bg-secondary,
  .bg-light, .bg-info, .bg-success, .bg-warning, .bg-danger,
  [class*="bg-"] {
    background-color: transparent !important;
    background: transparent !important;
  }
  .text-light, .text-light-emphasis, .text-body-color,
  .text-body, .text-muted, .text-white, .text-dark,
  .text-secondary, .text-primary, .text-accent,
  [class*="text-light"], [class*="text-white"] {
    color: #111 !important;
    opacity: 1 !important;
  }

  /* Hide UI chrome that does not belong on paper */
  .top-nav,
  .skip-link,
  .theme-toggle,
  .theme-toggle-col,
  .ai-pill,
  .signal-widget,
  .reading-signal,
  .menu-backdrop,
  .menu-background,
  .offcanvas-lg,
  .navbar-toggler,
  .top-nav__offcanvas-toggler,
  footer,
  .site-footer,
  .footer-bar,
  .footer-top,
  .footer-bottom,
  form,
  .hubspot-form,
  .btn,
  button,
  .menu-item__dropdown,
  .chapters-menu,
  .btn-arrow,
  .adjacent-posts,
  .reading-signal-host,
  [hidden] {
    display: none !important;
  }

  /* Show the main reading area cleanly */
  body,
  main,
  .ebook-section,
  .container,
  .container-fluid,
  .row,
  [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    float: none !important;
  }

  /* Safe typography fallback (avoid webfont fetch in print) */
  body,
  h1, h2, h3, h4, h5, h6,
  p, li, blockquote, figcaption, .content-body, .stat-hero__caption {
    font-family: -apple-system, "Segoe UI", Arial, Helvetica, sans-serif !important;
  }
  h1 { font-size: 22pt; line-height: 1.2; margin: 0 0 12pt; }
  h2 { font-size: 16pt; line-height: 1.25; margin: 18pt 0 8pt; }
  h3 { font-size: 13pt; line-height: 1.3; margin: 12pt 0 6pt; }
  p, li { font-size: 11pt; line-height: 1.45; margin: 0 0 8pt; }

  /* Hub hero: remove dark BG, keep only the title block as flat text */
  .hero-front-page,
  .hero-front-page .hero-front-page__bg,
  .hero-front-page .hero-front-page__wrapper {
    position: static !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    inset: auto !important;
    background: #fff !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #111 !important;
  }
  .hero-front-page .hero-front-page__bg,
  .hero-front-page .hero-front-page__bg img,
  .chapter-hero img[class*="hero"] {
    display: none !important;
  }

  /* Chapter hero (per-chapter page): drop the full-bleed dark band entirely.
     Print uses the badge + title text only. */
  .chapter-hero,
  .chapter-hero__bg,
  .chapter-hero::before,
  .chapter-hero::after {
    background: #fff !important;
    color: #111 !important;
    padding: 0 0 8pt !important;
    margin: 0 0 8pt !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
  }
  .chapter-hero img,
  .chapter-hero picture {
    display: none !important;
  }

  /* Eyebrow + chapter number: always dark text on white, no pill background */
  .hero-front-page .eyebrow,
  .chapter-hero__eyebrow,
  .chapters-cards__number,
  .chapter-number,
  .chapter-badge,
  [class*="eyebrow"],
  [class*="__number"] {
    background: transparent !important;
    color: #111 !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    letter-spacing: 0.04em;
    font-weight: 700 !important;
    font-size: 9pt !important;
  }

  /* Chapter cards in the hub: flat block with image + title + desc, no dark frame */
  .chapters-cards,
  .chapters-cards__item,
  .chapters-cards__item.bg-dark,
  .chapters__slide {
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 8pt 0 12pt !important;
    margin: 0 0 12pt !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .chapters-cards__item img {
    border-radius: 0 !important;
    max-width: 100% !important;
    margin: 0 0 6pt !important;
  }

  /* Page breaks */
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  .chapter-hero,
  .ebook-section,
  .chapter-card,
  article {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .chapter-hero,
  article + article {
    break-before: page;
    page-break-before: always;
  }

  /* Images: contain to printable width, never split across pages */
  img, svg {
    max-width: 100% !important;
    height: auto !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Reveal link URLs after the link text, except internal anchors and JS */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555 !important;
    word-break: break-all;
  }
  a[href^="#"]:after,
  a[href^="javascript:"]:after,
  a[href^="mailto:"]:after {
    content: "" !important;
  }

  /* Page margins */
  @page {
    margin: 14mm 16mm;
  }

  /* Chapter 04 question accordions: force-open in print so the answers survive
     the PDF (on screen they stay collapsed). Scoped to .question-stack so the
     Chapter 02 compliance accordions keep their existing print behavior. */
  .question-stack .comp-card-body { grid-template-rows: 1fr !important; }
  .question-stack .comp-card-body-inner { padding-bottom: 1.25rem !important; }
  .question-stack .comp-card-caret { display: none !important; }
}