/* ==========================================================================
   news-media-feed — iteration block
   --------------------------------------------------------------------------
   Light Swiss feed for the News & Media page. Page-grid container (1400px,
   border-box, 56px gutters) split into a fixed sticky filter rail — a quiet
   white-glass panel — and a fluid main column. Right side
   has a toolbar (result count + search) and the release register: a
   uniform list of heading-only rows (date · tag · headline · arrow),
   hairline-ruled, no imagery. Also styles the dark Films section (.nmv)
   between the hero and the feed, and the full-bleed location-photo band
   (.nmb) that closes the page.
   PLAYGROUND MODE: raw values, no token snap.
   ========================================================================== */

/* Footer deep links (#press-releases, #news-films) land clear of the fixed header. */
.nmf, .nmv { scroll-margin-top: 104px; }

.nmf {
  --nmf-bg:        #F4F5F7;
  --nmf-surface:   #FFFFFF;
  --nmf-ink:       #141A26;
  --nmf-dim:       rgba(20, 26, 38, 0.62);
  --nmf-faint:     rgba(20, 26, 38, 0.42);
  --nmf-rule:      rgba(20, 26, 38, 0.12);
  --nmf-rule-soft: rgba(20, 26, 38, 0.06);
  --nmf-accent:    #C42800;
  /* Left rail: fixed measure, tightened 2026-08-20 (was 3 of 12 = 304px).
     The register is the content — the filter column gets only what it
     needs, so the rows start closer to the page's left edge. */
  --nmf-rail:      256px;
  --nmf-rail-gap:  28px;

  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--nmf-bg);
  color: var(--nmf-ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 64px 0 96px;
}

/* The 56px padding used to sit OUTSIDE the 1400px cap (content-box), so the
   container measured 1512px and overflowed every viewport under that — the
   register was clipped on the right. border-box is global now (css/base.css)
   and the measure comes from the site-wide grid in css/layout.css. */
.nmf__container {
  width: 100%;
  max-width: var(--teako-page-max);
  margin: 0 auto;
  padding: 0 var(--teako-page-gutter);
  display: grid;
  grid-template-columns: var(--nmf-rail) minmax(0, 1fr);
  gap: var(--nmf-rail-gap);
  align-items: start;
}

/* ---------- Left rail (filter / type / topic / quote) ---------- */

/* The rail is a quiet light panel (client 2026-08-20) — the house white
   glass at low strength, radius 0, defined by an ink hairline rather than
   the recipe's white one: over a flat tonal page a white border reads as
   nothing, and the panel needs an edge. */
.nmf__rail {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: sticky;
  top: 110px;
  padding: 24px 22px 26px;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid rgba(20, 26, 38, 0.09);
  border-radius: 0;
}
.nmf__kicker {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--nmf-dim);
}

.nmf__filters {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--nmf-rule);
}
.nmf__filter {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--nmf-rule);
  background: transparent;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 16px;
  text-align: left;
  color: var(--nmf-dim);
  cursor: pointer;
  transition: color 200ms ease, padding-left 200ms ease;
}
.nmf__filter:hover {
  color: var(--nmf-ink);
  padding-left: 6px;
}
.nmf__filter.is-active {
  color: var(--nmf-ink);
  font-weight: 600;
}
.nmf__filter--video {
  color: var(--nmf-accent);
  font-weight: 600;
}
.nmf__filter--video:hover,
.nmf__filter--video.is-active {
  color: var(--nmf-accent);
}
.nmf__filter-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: currentColor;
}
.nmf__filter-icon svg { width: 100%; height: 100%; fill: currentColor; }
.nmf__filter-label { flex: 1; }
.nmf__filter-count {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--nmf-faint);
}
.nmf__filter.is-active .nmf__filter-count { color: var(--nmf-accent); }

.nmf__video-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  /* D2: one rectangular button system — radius 0 everywhere. */
  border-radius: 0;
  border: 0;
  background: var(--nmf-accent);
  color: #fff;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 200ms ease, transform 240ms cubic-bezier(0.33, 1, 0.68, 1);
}
/* D2: same hover as every other red primary — one step darker, no lift. */
.nmf__video-cta:hover {
  background: #A62200;
}
.nmf__video-cta svg { width: 14px; height: 14px; fill: currentColor; }

.nmf__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nmf__select {
  appearance: none;
  border: 1px solid var(--nmf-rule);
  background: transparent;
  padding: 12px 14px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px;
  color: var(--nmf-ink);
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 16px, calc(100% - 12px) 16px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

/* Live tape (2026-08-11): mono, tabular read-out.
   2026-08-20: the red top line is gone (client) and the box with it — inside
   the rail panel it only needed separating, so a single hairline rule does
   the work. The red stays as the live dot alone. */
.nmf__quote {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--nmf-rule);
  background: transparent;
}
.nmf__quote-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nmf-faint);
}
.nmf__quote-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nmf-faint);
}
.nmf__quote-dot.is-live {
  background: #C42800;
  animation: nmf-quote-pulse 2s ease-in-out infinite;
}
@keyframes nmf-quote-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
.nmf__quote-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.nmf__quote-sym {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--nmf-dim);
}
.nmf__quote-value {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--nmf-ink);
  font-variant-numeric: tabular-nums;
}
.nmf__quote-row--sub {
  padding-top: 8px;
  border-top: 1px dashed var(--nmf-rule);
}
.nmf__quote-value--sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--nmf-dim);
}

/* ---------- Main column ---------- */

.nmf__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* 18px drops the result count onto the same line as the rail panel's
   "Filter · Type" kicker, and the toolbar rule onto the panel's first rule —
   the two columns now share a baseline. Value = the rail panel's top
   padding + border, less the toolbar's own row centring. */
.nmf__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--nmf-rule);
}
.nmf__result-count {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nmf-dim);
}
.nmf__search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 280px;
  max-width: 50%;
  color: var(--nmf-dim);
}
.nmf__search svg { width: 15px; height: 15px; flex-shrink: 0; }
.nmf__search input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px;
  color: var(--nmf-ink);
  outline: none;
  padding: 6px 0;
}
.nmf__search input::placeholder { color: var(--nmf-faint); }

/* ---------- Release register — uniform heading-only rows ---------- */

.nmf__list {
  display: flex;
  flex-direction: column;
}
/* Metadata columns trimmed to their content 2026-08-20 — the date and tag
   tracks were carrying ~80px of slack between the filter rail and the
   headlines, which is the gap the client was reading. */
.nmf__row {
  display: grid;
  grid-template-columns: 92px 146px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 20px;
  padding: 19px 0;
  border-bottom: 1px solid var(--nmf-rule);
  text-decoration: none;
  color: inherit;
}
.nmf__row-date {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--nmf-dim);
  font-variant-numeric: tabular-nums;
}
.nmf__row-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--nmf-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nmf__row-square {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  background: var(--nmf-ink);
}
.nmf__row-title {
  margin: 0;
  /* D1: h3 on the display face at the hero weight. */
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 16.5px;
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.008em;
  color: var(--nmf-ink);
  transition: color 200ms ease;
}
.nmf__row:hover .nmf__row-title { color: var(--nmf-accent); }
.nmf__row-arrow {
  width: 17px;
  height: 17px;
  color: var(--nmf-faint);
  justify-self: end;
  transition: transform 240ms cubic-bezier(0.33, 1, 0.68, 1), color 200ms ease;
}
.nmf__row:hover .nmf__row-arrow {
  color: var(--nmf-accent);
  transform: translate(2px, -2px);
}

.nmf__empty {
  padding: 80px 0;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--nmf-dim);
  text-align: center;
}

/* ==========================================================================
   nmv — Films (dark, continues the hero masthead)
   ========================================================================== */

.nmv {
  --nmv-bg:     #0b1018;
  --nmv-ink:    #f4f5f7;
  --nmv-dim:    rgba(244, 245, 247, 0.62);
  --nmv-rule:   rgba(244, 245, 247, 0.16);
  --nmv-accent: #C42800;

  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--nmv-bg);
  color: var(--nmv-ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 64px 0 88px;
}
/* Same fix as .nmf__container — the Films section shared the 1512px
   overflow; both sit on the one site-wide page grid now. */
.nmv__container {
  width: 100%;
  max-width: var(--teako-page-max);
  margin: 0 auto;
  padding: 0 var(--teako-page-gutter);
}

/* Section topbar — hairline with mono labels left and right. */
.nmv__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--nmv-rule);
  margin-bottom: 40px;
}
.nmv__label {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--nmv-dim);
}

.nmv__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.nmv__film {
  display: flex;
  flex-direction: column;
}
.nmv__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #07090d;
  cursor: pointer;
}
.nmv__frame img,
.nmv__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 540ms cubic-bezier(0.33, 1, 0.68, 1);
}
.nmv__frame:hover img { transform: scale(1.03); }
.nmv__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(244, 245, 247, 0.14);
  border: 1px solid rgba(244, 245, 247, 0.45);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nmv-ink);
  pointer-events: none;
  transition: background 200ms ease;
}
.nmv__frame:hover .nmv__play { background: rgba(196, 40, 0, 0.85); }
.nmv__play svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; }
.nmv__title {
  margin: 20px 0 6px;
  font-family: 'Geologica', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 300; /* D1 */
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--nmv-ink);
}
.nmv__meta {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--nmv-dim);
}

/* ==========================================================================
   nmb — full-bleed location-photo band (closes the page)
   ========================================================================== */

.nmb {
  position: relative;
  width: 100vw;
  margin: 0;
  margin-left: calc(50% - 50vw);
}
.nmb__img {
  display: block;
  width: 100%;
  height: 54vh;
  min-height: 340px;
  object-fit: cover;
}
.nmb__caption {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Full-bleed band: content on the page grid, not the viewport edge
     (2026-08-20 width pass — A-NEWS flagged this one for the global agent). */
  padding: 14px var(--teako-page-inset);
  background: #F4F5F7;
  border-bottom: 1px solid rgba(20, 26, 38, 0.12);
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(20, 26, 38, 0.62);
}
/* 45° survey hatch — the brand mark, leading the caption. */
.nmb__hatch {
  width: 28px;
  height: 9px;
  flex-shrink: 0;
  background: repeating-linear-gradient(
    45deg,
    #C42800 0, #C42800 1.5px,
    transparent 1.5px, transparent 5px
  );
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .nmf { --nmf-rail: 228px; --nmf-rail-gap: 24px; }
  .nmf__container { padding: 0 var(--teako-page-gutter); }
  .nmv__container { padding: 0 var(--teako-page-gutter); }
  .nmf__row { grid-template-columns: 88px 132px minmax(0, 1fr) 24px; gap: 16px; }
}
@media (max-width: 1080px) {
  .nmf__container { padding: 0 var(--teako-page-gutter); grid-template-columns: minmax(0, 1fr); }
  .nmf__rail { position: static; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 18px; padding: 20px; }
  .nmf__filters { flex-direction: row; flex-wrap: wrap; border: 0; }
  .nmf__filter { border: 1px solid var(--nmf-rule); padding: 10px 14px; border-radius: 999px; }
  /* Tape stays a compact block on the right of the stacked rail rather than
     stretching its rows across the whole band. */
  .nmf__quote { flex: 0 1 300px; margin-left: auto; padding: 0; border: 0; }
  .nmv__container { padding: 0 var(--teako-page-gutter); }
  .nmf__video-cta { margin-top: 21px; } /* = Topic label (11px) + its gap (10px): bottom-aligns the button with the select regardless of the quote block's height */
}
@media (max-width: 760px) {
  .nmf__row { grid-template-columns: 92px minmax(0, 1fr) 24px; gap: 14px; }
  .nmf__row-tag { display: none; }
  .nmv__grid { grid-template-columns: 1fr; gap: 44px; }
  .nmb__img { height: 42vh; min-height: 260px; }
}

/* ==========================================================================
   PHONES — News & Media (client, 29 Aug 2026)
   Filter panel tidied into three rows: search · type chips (one scrolling
   line) · topic + films. Kicker labels and the live-quote tape go on phones.
   Rows: date on its own line, headline full width beneath, arrow right.
   ========================================================================== */
@media (max-width: 760px) {
  .nmf__rail { flex-direction: column; flex-wrap: nowrap; gap: 10px; padding: 12px 14px 14px; }
  .nmf__rail > .nmf__kicker, .nmf__field > .nmf__kicker { display: none; }
  .nmf__quote { display: none; }
  /* Search (moved into the rail by news-media-feed.js) */
  .nmf__rail .nmf__search { order: 1; width: 100%; max-width: none; padding: 8px 12px; border: 1px solid var(--nmf-rule); background: #fff; }
  .nmf__rail .nmf__search input { padding: 2px 0; font-size: 14px; }
  .nmf__filters { order: 2; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; margin: 0 -14px; padding: 0 14px 2px; width: calc(100% + 28px); }
  .nmf__filters::-webkit-scrollbar { display: none; }
  .nmf__filter { flex: none; padding: 7px 11px; font-size: 13px; white-space: nowrap; }
  .nmf__filter:hover { padding-left: 11px; }
  .nmf__field { order: 3; flex: 1 1 auto; margin: 0; }
  .nmf__select { width: 100%; }
  .nmf__video-cta { order: 4; flex: none; padding: 9px 12px; font-size: 10.5px; margin: 0; }
  .nmf__rail-row { order: 3; display: flex; gap: 8px; align-items: stretch; width: 100%; }
  .nmf__toolbar { padding: 12px 0 10px; }
  .nmf__toolbar .nmf__search { display: none; }
  .nmf__row { grid-template-columns: minmax(0, 1fr) 24px; grid-template-areas: "date arrow" "title arrow"; gap: 4px 12px; align-items: center; padding: 14px 0; }
  .nmf__row-date { grid-area: date; }
  .nmf__row-title { grid-area: title; }
  .nmf__row-arrow { grid-area: arrow; }
}