/* TNM 1.0.2: explicit backgrounds override legacy preset colours, not layouts.
   No selectors below affect sections kept on "Original / existing". */
.tnm-section[data-tnm-background] {
  --tnm-fg: #171719;
  --tnm-muted: #53545c;
  --tnm-border: #c8c8c5;
  --tnm-accent: #b91025;
  --tnm-bg: #fff;
  --tnm-panel: #fff;
  --tnm-panel-fg: #171719;
  color: var(--tnm-fg);
  background: var(--tnm-bg);
  border-color: var(--tnm-border);
}
.tnm-section[data-tnm-background="paper"] { --tnm-bg: #f1f0ec; --tnm-border: #cecdc7; }
.tnm-section[data-tnm-background="red-soft"] { --tnm-bg: #f9e8ea; --tnm-border: #dec3c8; }
.tnm-section[data-tnm-background="green"] { --tnm-bg: #dfe8da; --tnm-border: #bacbb3; --tnm-accent: #31552d; }
.tnm-section[data-tnm-background="red"],
.tnm-section[data-tnm-background="navy"],
.tnm-section[data-tnm-background="dark"] {
  --tnm-fg: #fff;
  --tnm-muted: #fff;
  --tnm-border: #ffffff59;
  --tnm-accent: #fff;
}
/* The deeper TNM red keeps normal-size white copy readable. */
.tnm-section[data-tnm-background="red"] { --tnm-bg: #cf1024; }
.tnm-section[data-tnm-background="navy"] { --tnm-bg: #182c48; --tnm-muted: #dae3ef; }
.tnm-section[data-tnm-background="dark"] { --tnm-bg: #171719; --tnm-muted: #d6d6dc; }
.tnm-section[data-tnm-background] .eyebrow,
.tnm-section[data-tnm-background] .eyebrow.light,
.tnm-section[data-tnm-background] .process-list .n,
.tnm-section[data-tnm-background] .three-cards .n,
.tnm-section[data-tnm-background] .initiative .icon,
.tnm-section[data-tnm-background] .step-num { color: var(--tnm-accent); }
.tnm-section[data-tnm-background] .section-head > p,
.tnm-section[data-tnm-background] .muted,
.tnm-section[data-tnm-background] .tnm-section-body,
.tnm-section[data-tnm-background] .tnm-hero-body,
.tnm-section[data-tnm-background] .process-list p,
.tnm-section[data-tnm-background] .metric-intro p,
.tnm-section[data-tnm-background] .metric span,
.tnm-section[data-tnm-background] .company-stat span,
.tnm-section[data-tnm-background] .targets span,
.tnm-section[data-tnm-background] .three-cards p,
.tnm-section[data-tnm-background] .quality-detail p,
.tnm-section[data-tnm-background] .copy .muted { color: var(--tnm-muted); }
.tnm-section[data-tnm-background] :is(.metric, .company-stat, .process-list li, .targets, .three-cards article, .quality-detail article, .initiative, .tnm-market-countries li) { border-color: var(--tnm-border); }
.tnm-section[data-tnm-background] .metric-intro span { color: var(--tnm-accent); }
.tnm-section[data-tnm-background] .tnm-classic-numbered-cards article { color: var(--tnm-fg); background: transparent; }
.tnm-section[data-tnm-background] .tnm-classic-value-grid .value-item {
  color: #171719; background: #fff;
  --tnm-fg: #171719; --tnm-muted: #53545c; --tnm-accent: #b91025;
}
.tnm-section[data-tnm-background] .tnm-classic-value-grid .value-item p { color: #53545c; }
.tnm-section[data-tnm-background] .tnm-classic-products .copy { background: transparent; color: var(--tnm-fg); }
.tnm-section[data-tnm-background] .tnm-classic-products .copy p { color: var(--tnm-muted); }
.tnm-section[data-tnm-background] .tnm-classic-products .num { color: var(--tnm-accent); }
.tnm-section[data-tnm-background] .tnm-section-card {
  color: #171719; background: #fff;
  --tnm-fg: #171719; --tnm-muted: #53545c; --tnm-accent: #b91025; --tnm-border: #dcdcd7;
}
.tnm-section[data-tnm-background] .tnm-section-card .copy { background: transparent; }
.tnm-section[data-tnm-background] .tnm-section-card p { color: #53545c; }
.tnm-section[data-tnm-background] .button,
.tnm-section[data-tnm-background] .button.light { border-color: var(--tnm-fg); color: var(--tnm-fg); background: transparent; }
.tnm-section[data-tnm-background] .button.red { background: var(--tnm-fg); color: var(--tnm-bg); border-color: var(--tnm-fg); }
.tnm-section[data-tnm-background] .button:hover,
.tnm-section[data-tnm-background] .button.light:hover { background: var(--tnm-fg); color: var(--tnm-bg); }
.tnm-section[data-tnm-background] .button.red:hover { background: transparent; color: var(--tnm-fg); }
.tnm-section[data-tnm-background] .tnm-section-card .text-link { color: #171719; }
.tnm-section[data-tnm-background] .tnm-market-countries li::before { color: var(--tnm-accent); }
.tnm-section[data-tnm-background] .tnm-section-finish-caption { background: var(--tnm-bg); color: var(--tnm-fg); }
.tnm-section[data-tnm-background] .tnm-section-finish-caption p { color: var(--tnm-muted); }
/* Photographic banners retain their dark overlay and light copy regardless of underlay. */
.tnm-section[data-tnm-background][data-tnm-photo] {
  --tnm-fg: #fff; --tnm-muted: #fff; --tnm-accent: #fff;
}
.tnm-section[data-tnm-background][data-tnm-photo] .button.red { background: #fff; color: #171719; border-color: #fff; }
.tnm-section[data-tnm-background][data-tnm-photo] .button:hover { background: #fff; color: #171719; }
/* Solid banners have no photo to protect: don't darken the editor's chosen colour. */
.tnm-section[data-tnm-background].tnm-section--no-image:is(.tnm-section--hero-page, .tnm-section--cta)::after { display: none; }
.tnm-section[data-tnm-background].tnm-section--no-image .page-hero-copy > p,
.tnm-section[data-tnm-background].tnm-section--no-image .cta-copy > p:not(.eyebrow) { color: var(--tnm-muted); }
.tnm-section-editor-note {
  padding: 20px 24px; border: 1px dashed currentColor; border-inline-start: 5px solid currentColor;
  color: var(--tnm-fg); font-size: 1rem; line-height: 1.6; margin: 0;
}
/* Narrow screens and unusually long translated headings must stay inside their cells. */
.tnm-section .title,
.tnm-section .tnm-section-home-heading,
.tnm-section .tnm-section-page-heading { overflow-wrap: anywhere; }
.tnm-section .tnm-section-embedded,
.tnm-section .section-head > *,
.tnm-section .tnm-section-split > * { min-width: 0; }
@media (prefers-reduced-motion: reduce) {
  .tnm-section *, .tnm-section *::before, .tnm-section *::after { scroll-behavior: auto; transition-duration: 0s; animation-duration: 0s; }
}

/* Preserve the full-width single-column layout when an editor removes a photo. */
.tnm-section.tnm-section--no-image .tnm-section-split,
.tnm-section.tnm-section--no-image .process-preview,
.tnm-section.tnm-section--no-image.sustain-preview,
.tnm-section.tnm-section--no-image.tnm-section--hero-home { grid-template-columns: minmax(0, 1fr); }
.tnm-section--classic .metrics-grid[data-tnm-has-intro="0"] { grid-template-columns: repeat(var(--tnm-columns, 4), minmax(0, 1fr)); }
.tnm-section--classic .metric-intro :is(h1,h2,h3) { margin: 12px 0; font-size: 22px; line-height: 1.15; overflow-wrap: anywhere; }
.tnm-section[data-tnm-background] .solar-big span { color: var(--tnm-muted); }
.tnm-section[data-tnm-background] .solar-big strong { color: var(--tnm-fg); }
.tnm-section[data-tnm-background] .tnm-section-home-heading .red { color: var(--tnm-accent); }
@media (max-width: 760px) {
  .tnm-section--classic .metrics-grid[data-tnm-has-intro="0"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Legacy fixed photo heights must not impose a minimum width via aspect-ratio. */
@media (max-width: 760px) {
  .tnm-section--classic .quality-strip { width: 100%; height: auto; aspect-ratio: 2 / 1; }
  .tnm-section--classic.sustain-preview .photo { width: 100%; min-height: 0; aspect-ratio: 4 / 3; }
}
/* Original CTA/Braille copy has its own literal white color; explicitly retheme it. */
.tnm-section[data-tnm-background] .tnm-section-body p,
.tnm-section[data-tnm-background].braille-feature .copy > p:not(.eyebrow) { color: var(--tnm-muted); }
.tnm-section[data-tnm-background] .process-list .arrow { color: var(--tnm-accent); }
