/*
 * FMBusiness home — category-block magazine composition (2026-09-27).
 *
 * Card system: one shared four-field card (title, short description, date,
 * primary-category pill) whose type scale is driven by the card's OWN inline
 * size (container queries) and capped per screen band. Screen-band caps are
 * rem-based; the fluid term is `cqi`, never `vw`, so a narrow sidebar card on an
 * ultrawide monitor keeps a sidebar-sized title.
 *
 * Composition: cover strip → opening (hero XL + rail XS) → mixed module A → one
 * block per category in the Primary-menu order (band → module B → two-cell
 * module C) → FM Briefing. The `fm-module--a/b/c` classes are semantic hooks; the
 * visual layout is decided by the `fm-cell--*` spans inside each module.
 */

/* ==========================================================================
   1. Root + screen-band caps (mobile-first; rem breakpoints)
   ========================================================================== */

.fm-home {  background: var(--fm-color-paper);
  color: var(--fm-color-ink);
  font-family: var(--fm-font-ui);
  overflow-x: clip; /* full-bleed bands without creating a scroll container */
}

.fm-home a { color: inherit; }

/* ≥160rem (ultrawide): the same caps — the composition simply stops growing. */

/* ---------- Home canvas ---------- */
.fm-home-main {
  max-width: var(--fm-layout-home);
  margin: 0 auto;
  padding: 0 var(--fm-gutter) 8px;
}

/* ---------- Cover strip (publication line) ---------- */
.fm-cover-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 28px;
  padding: 20px 0 14px;
  border-bottom: var(--fm-line-hairline) solid var(--fm-color-grid);
  font-family: var(--fm-font-data);
  font-size: var(--fm-type-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fm-color-steel);
}
.fm-cover-strip__label { color: var(--fm-color-ink); font-weight: var(--fm-weight-semibold); }
.fm-cover-strip__meta--end { margin-left: auto; color: var(--fm-color-steel); }

/* ==========================================================================
   4. Opening — hero + rail
   ========================================================================== */

.fm-opening {
  margin-top: 1.75rem;
}
.fm-opening__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--fm-home-gap);
}
.fm-opening__hero { grid-column: span 8; min-inline-size: 0; }
.fm-opening__rail { grid-column: span 4; min-inline-size: 0; display: grid; align-content: start; }

.fm-opening__rail-title {
  margin: 0 0 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: var(--fm-line-warn) solid var(--fm-color-ink);
  font-family: var(--fm-font-data);
  font-size: clamp(0.8125rem, calc(0.78rem + 0.15cqi), var(--fm-home-pill-max));
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fm-color-ink);
}
.fm-opening__rail .fm-card + .fm-card {
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: var(--fm-line-hairline) solid var(--fm-color-grid);
}

/* ==========================================================================
   5. Bento modules
   ========================================================================== */

.fm-module {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--fm-home-gap);
  margin-top: clamp(2.5rem, calc(1.5rem + 3cqi), 4.5rem);
}

/* Two modules inside one category block run as a single grid: the following module
   keeps the block's internal row rhythm instead of the large section margin. */
.fm-category > .fm-module + .fm-module { margin-top: var(--fm-home-gap); }

.fm-cell { min-inline-size: 0; }
/* Bento discipline: a card fills its cell, so a row never reads ragged. */
.fm-cell > .fm-card { block-size: 100%; }
.fm-cell--l { grid-column: span 8; }
.fm-cell--l12 { grid-column: span 12; }
.fm-cell--s { grid-column: span 4; }
.fm-cell--s6 { grid-column: span 6; }
.fm-cell--c { grid-column: span 4; }
.fm-cell--d { grid-column: span 6; }
.fm-cell--w { grid-column: span 12; }
.fm-cell--e { grid-column: span 12; }
.fm-cell--e6 { grid-column: span 6; }

/* Compact (text-only) cells read as a stack of short previews. */
.fm-cell--c .fm-card + .fm-card { margin-top: var(--fm-home-gap); }

/* ==========================================================================
   5b. Category navigation card — the closing cell of a homepage category block
   ========================================================================== */

/* Not an article: one full-surface link to the category archive. Reuses the card
   surface/radius but never the article fields (no meta, image, title or desc).
   The surface is the brand Signal Orange in both modes, so type and rules use the
   mode-independent --fm-on-signal ink (AA contrast), including the focus ring. */
.fm-card--category-nav {
  gap: 1.5rem;
  padding: clamp(1.25rem, calc(0.9rem + 1.5cqi), 2rem);
  border: var(--fm-line-hairline) solid var(--fm-color-signal);
  background: var(--fm-color-signal);
  color: var(--fm-on-signal);
  text-decoration: none;
  transition: border-color var(--fm-motion-fast) var(--fm-ease);
}

.fm-card--category-nav:focus-visible { --fm-focus-ring: var(--fm-on-signal); }

/* The card is the anchor itself: beat the global `.fm-home a { color: inherit }`
   so type on the Signal surface stays the mode-independent ink. */
.fm-home a.fm-card--category-nav { color: var(--fm-on-signal); }

.fm-card--category-nav:hover,
.fm-card--category-nav:focus-visible { border-color: var(--fm-on-signal); }

.fm-card__nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--fm-font-data);
  font-size: var(--fm-type-micro);
  font-weight: var(--fm-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
}

.fm-card__nav-cta::after {
  content: '→';
  font-size: 1.35em;
  line-height: 1;
  color: inherit;
  transition: transform var(--fm-motion-fast) var(--fm-ease);
}

.fm-card--category-nav:hover .fm-card__nav-cta::after,
.fm-card--category-nav:focus-visible .fm-card__nav-cta::after { transform: translateX(4px); }

.fm-card__nav-cat {
  font-family: var(--fm-font-disp);
  font-weight: var(--fm-weight-bold);
  font-size: clamp(1.5rem, calc(1.15rem + 2.6cqi), 2.125rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

.fm-card__nav-unit {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--fm-font-data);
  font-size: var(--fm-type-micro);
  font-weight: var(--fm-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
}

/* ==========================================================================
   6. Band — full-width feature statement
   ========================================================================== */

.fm-band {
  container-type: inline-size;
  container-name: fm-band;
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: clamp(3rem, calc(1.5rem + 4cqi), 6rem);
  padding-block: clamp(3rem, calc(1.5rem + 6cqi), 7rem);
  padding-inline: max(var(--fm-gutter), calc((100vw - var(--fm-layout-home)) / 2 + var(--fm-gutter)));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  overflow: hidden;
  background: var(--fm-surface-deep);
  color: var(--fm-on-dark);
}

.fm-band__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Image bands are hero-scale: at least 75% of the viewport tall, with the meta row
   kept at the top edge and the story block at the bottom (the band's space-between).
   `svh` keeps the surface fully visible on phones with a dynamic URL bar. */
.fm-band--on-image {
  min-height: 75vh;
  min-height: 75svh;
}

.fm-band--on-image::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(18, 22, 31, 0.9) 0%,
    rgba(18, 22, 31, 0.74) 46%,
    rgba(18, 22, 31, 0.38) 100%
  );
}

.fm-band__meta {
  width: 100%;
  padding: 0 0 2rem;
}
.fm-band__body {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.75rem;
  max-inline-size: 56rem;
  min-inline-size: 0;
}
.fm-band__title {
  margin: 0;
  font-family: var(--fm-font-disp);
  font-weight: 700;
  font-size: clamp(1.875rem, calc(1.375rem + 3cqi), var(--fm-home-xl-max));
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--fm-on-dark);
  text-wrap: pretty;
  overflow-wrap: break-word;
  hyphens: auto;
}
.fm-band__desc {
  margin: 0;
  max-inline-size: 44rem;
  font-family: var(--fm-font-body);
  font-size: clamp(1rem, calc(0.975rem + 0.35cqi), var(--fm-home-desc-lg-max));
  line-height: 1.45;
  color: var(--fm-on-dark-muted);
  text-wrap: pretty;
}
.fm-band__date {
  font-family: var(--fm-font-ui);
  font-size: clamp(0.875rem, calc(0.85rem + 0.1cqi), var(--fm-home-date-max));
  line-height: 1.35;
  color: var(--fm-on-dark-muted);
  font-variant-numeric: tabular-nums;
}
.fm-band .fm-card__pill {
  color: var(--fm-on-dark);
  border-color: rgba(251, 250, 246, 0.42);
}

/* ==========================================================================
   7. FM Briefing (newsletter close, once)
   ========================================================================== */

.fm-briefing {
  container-type: inline-size;
  container-name: fm-briefing;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr);
  gap: 40px;
  margin-top: 96px;
  padding: 28px 0 8px;
  border-top: var(--fm-line-warn) solid var(--fm-color-ink);
  align-items: start;
}
.fm-briefing__body { display: grid; gap: 10px; }
.fm-briefing__title {
  font-family: var(--fm-font-disp);
  font-weight: 700;
  font-size: clamp(1.5rem, calc(1.2rem + 1.6cqi), var(--fm-home-head-max));
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.fm-briefing__note { font-family: var(--fm-font-body); font-size: 17px; color: var(--fm-color-steel); margin: 0; }
.fm-briefing__call { display: grid; gap: 10px; justify-items: start; align-content: center; }
.fm-briefing__fine { font-family: var(--fm-font-data); font-size: var(--fm-type-micro); color: var(--fm-color-steel); margin: 0; }
.fm-briefing__submit { min-height: 48px; }

/* ==========================================================================
   8. Responsive
   ========================================================================== */

/* Tablet and below: modules fold to six columns. */
@media (max-width: 63.999rem) {
  .fm-opening__top,
  .fm-module { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fm-opening__hero { grid-column: span 6; }
  .fm-opening__rail { grid-column: span 6; }
  .fm-cell--l,
  .fm-cell--l12,
  .fm-cell--w,
  .fm-cell--e { grid-column: span 6; }
  .fm-cell--s,
  .fm-cell--s6,
  .fm-cell--c,
  .fm-cell--d,
  .fm-cell--e6 { grid-column: span 3; }
  .fm-briefing { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* Phones: single column, everything full width. */
@media (max-width: 47.999rem) {
  .fm-opening__top,
  .fm-module { grid-template-columns: minmax(0, 1fr); }
  .fm-cell--l,
  .fm-cell--l12,
  .fm-cell--s,
  .fm-cell--s6,
  .fm-cell--c,
  .fm-cell--d,
  .fm-cell--w,
  .fm-cell--e,
  .fm-cell--e6 { grid-column: span 1; }
  .fm-cover-strip { font-size: 11px; }
  .fm-cover-strip__meta--end { display: none; }
  .fm-briefing { margin-top: 64px; }
  .fm-briefing__submit { width: 100%; }
}

@media (max-width: 29.999rem) {
  .fm-opening__rail .fm-card--rail.fm-card--beside { grid-template-columns: 64px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .fm-card__link,
  .fm-card--category-nav,
  .fm-card__nav-cta::after { transition: none; }
}