/**
 * Foundry Editorial — shared token catalog + chrome.
 *
 * The blocks consume these `--foundry-editorial-*` custom properties (never the
 * site's brand presets directly), so the module is brand-neutral and portable.
 * Each value has a NEUTRAL fallback here, so the module renders sanely with zero
 * site theming. A site brands the module by mapping these tokens to its own
 * theme.json presets — e.g. cananews-foundry-child sets:
 *
 *   :root {
 *     --foundry-editorial-accent: var(--wp--preset--color--cn-red);
 *     --foundry-editorial-ink:    var(--wp--preset--color--cn-black);
 *     --foundry-editorial-font-heading: var(--wp--preset--font-family--heading);
 *     ...
 *   }
 */

:root {
  /* Color */
  --foundry-editorial-accent:      #2563eb; /* primary editorial accent (kickers, glyphs, ribbons) */
  --foundry-editorial-accent-deep: #1d4ed8; /* hover/active for accent */
  --foundry-editorial-cta-fg:      #ffffff; /* text on accent/dark CTAs (buttons, light-on-dark titles) — defended !important against host content-link rules; retarget this token instead of fighting the cascade */
  --foundry-editorial-cta-link:    #1976b8; /* secondary "more / alt" CTA link colour (defended the same way; distinct from --foundry-editorial-link) */
  --foundry-editorial-cta-link-hover: #0e5a8c; /* hover-darken for the defended CTA link (rebind with the base token) */
  --foundry-editorial-dark-link:   #ededed; /* light link on dark panels (video panel, dark bands) — defended !important */
  --foundry-editorial-ink:         #1a1a1a; /* headlines / strong text */
  --foundry-editorial-text:        #222222; /* body copy */
  --foundry-editorial-muted:       #5a5a5a; /* bylines, meta, timestamps */
  --foundry-editorial-rule:        #e5e5e5; /* hairlines, card borders */
  --foundry-editorial-bg:          #ffffff; /* page background */
  --foundry-editorial-surface:     #f5f5f4; /* warm reading surface for cards/callouts */
  --foundry-editorial-success:     #1a7f37; /* a form said yes (newsletter status, confirmations) */
  --foundry-editorial-error:       #b32d2e; /* a form said no. NOT --accent: the accent is a brand
                                               colour and is blue by default, so an error bound to it
                                               renders as information rather than a problem, and on a
                                               site whose accent is green it would read as success. */
  --foundry-editorial-link:        #2563eb; /* links / institutional UI */
  --foundry-editorial-link-deep:   #1d4ed8; /* link hover */

  /* Type */
  --foundry-editorial-font-heading: Georgia, "Times New Roman", serif;
  --foundry-editorial-font-body:    system-ui, -apple-system, "Segoe UI", sans-serif;
  --foundry-editorial-font-display: system-ui, -apple-system, "Segoe UI", sans-serif;
  --foundry-editorial-font-mono:    ui-monospace, "SFMono-Regular", "Menlo", monospace;
}

/* === Section-band chrome ===========================================
 * Shared by section-grid, geo-grid, video-panel, press-release-strip.
 * Brand-neutral: a site rebrands via the --foundry-editorial-* tokens
 * (ribbon square = accent, rule = head underline, accent = "more" link).
 * A `.alt` modifier flags a warm-surface band; a site decides which
 * bands get it (cananews: Politics + Business) and full-bleed background
 * comes from the block's alignfull + this constrained inner. */
.foundry-editorial-section-band {
  padding-block: 2.5rem;
}
.foundry-editorial-section-band.alt {
  background: var(--foundry-editorial-surface);
}
.foundry-editorial-section-band__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 1.25rem;
}
.foundry-editorial-section-band__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px solid var(--foundry-editorial-ink);
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}
.foundry-editorial-section-band__ribbon {
  font-family: var(--foundry-editorial-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--foundry-editorial-ink);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.foundry-editorial-section-band__ribbon::before {
  content: "";
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--foundry-editorial-accent);
}
.foundry-editorial-section-band__more {
  font-family: var(--foundry-editorial-font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* !important: these blocks inject into article body, where a host's
     `.wrapper .content a { color }` rule (specificity 0,2,1) would otherwise
     repaint this accent link. Retarget via --foundry-editorial-accent, not the cascade. */
  color: var(--foundry-editorial-accent, #2563eb) !important;
  text-decoration: none;
  white-space: nowrap;
}
.foundry-editorial-section-band__more:hover { text-decoration: underline; }

/* === Editorial post card ===========================================
 * The atomic unit shared by section-grid, latest-strip, geo-grid,
 * archive-feed and section-recirc-footer (recirc-rail self-styles).
 * Bare by default — modern editorial rhythm, no box; a context adds its
 * own frame if it wants one. `--xs/sm/md/lg` scale the headline;
 * `--thumb-top/right/left` set the image relationship. All color/type
 * comes from the --foundry-editorial-* tokens. */
.foundry-editorial-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  text-decoration: none;
}
.foundry-editorial-card--thumb-right,
.foundry-editorial-card--thumb-left {
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
}
.foundry-editorial-card--thumb-right .foundry-editorial-card__thumb { order: 2; flex: 0 0 96px; }
.foundry-editorial-card--thumb-right .foundry-editorial-card__body  { order: 1; flex: 1 1 auto; }
.foundry-editorial-card--thumb-left  .foundry-editorial-card__thumb { flex: 0 0 96px; }

.foundry-editorial-card__thumb { display: block; overflow: hidden; border-radius: 4px; }
.foundry-editorial-card__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.foundry-editorial-card--thumb-right .foundry-editorial-card__thumb img,
.foundry-editorial-card--thumb-left  .foundry-editorial-card__thumb img { aspect-ratio: 1 / 1; }
.foundry-editorial-card__thumb--placeholder { background: var(--foundry-editorial-surface); }
.foundry-editorial-card__thumb--placeholder img {
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
  max-height: 200px;
}

.foundry-editorial-card__body { display: flex; flex-direction: column; gap: 0.3125rem; }
.foundry-editorial-card__eyebrow {
  font-family: var(--foundry-editorial-font-body);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--foundry-editorial-muted);
  margin: 0;
}
.foundry-editorial-card__eyebrow-section { color: var(--foundry-editorial-accent); }
.foundry-editorial-card__eyebrow-geo     { color: var(--foundry-editorial-link); }
.foundry-editorial-card__eyebrow-time    { color: var(--foundry-editorial-muted); }
.foundry-editorial-card__title {
  font-family: var(--foundry-editorial-font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0;
}
.foundry-editorial-card--lg .foundry-editorial-card__title { font-size: 1.5rem; line-height: 1.18; }
.foundry-editorial-card--md .foundry-editorial-card__title { font-size: 1.125rem; }
.foundry-editorial-card--sm .foundry-editorial-card__title { font-size: 0.9375rem; line-height: 1.3; }
.foundry-editorial-card--xs .foundry-editorial-card__title { font-size: 0.875rem; line-height: 1.3; }
.foundry-editorial-card__title a { color: var(--foundry-editorial-ink); text-decoration: none; }
.foundry-editorial-card__title a:hover { color: var(--foundry-editorial-accent); }
.foundry-editorial-card__dek {
  font-family: var(--foundry-editorial-font-heading);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--foundry-editorial-text);
  margin: 0;
}
