/* Who it's for (original #press). Only what the original markup can't express after the logos became statements. */

/* "For you" fills the left column, "Not for you" the right (the original grid fills row by row). */
.section-press .press-coverage { grid-auto-flow: column; }

/* The logo slot (140×28, with per-outlet nth-child sizes) now holds a sentence: take the free width, size to the text. */
.section-press .press-coverage-link .press-coverage-logo { flex: 1 1 auto; width: auto; max-width: none; height: auto; }
.section-press .press-coverage-logo p { text-wrap: balance; }

/* Tablet fix (the original's fixed 512px card squeezes the grid to nothing below ~1300px):
   the card gives up width first (512 → 360) so each grid card keeps ≥360px, then stacks above the grid.
   Below ~342px a statement wraps to 3 lines, every row grows to 106px and the stretched card opens a 140px+ hole. */
.section-press [data-node-id="666:2391"] { width: clamp(360px, 100% - 744px, 512px); }
@media (min-width: 768px) and (max-width: 1199px) {
  .section-press [data-node-id="666:2390"] { flex-direction: column; }
  .section-press [data-node-id="666:2391"] { width: 100%; }
}

/* Statements, not links: no hand cursor; the original's selected tint (#f5f5f5) shows on hover only, since there is
   no outlet to select. The summary no longer swaps, so its re-key animation has nothing to animate. */
.section-press .press-source { cursor: default; }
@media (hover: hover) and (pointer: fine) { .section-press .press-source:hover { background: #0000000a !important; } }
.section-press .press-summary { animation: none; text-wrap: pretty; }

@media (max-width: 767px) {
  /* One column of eight: 171px half-width cards can't hold a sentence. */
  .section-press .press-coverage { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; grid-auto-rows: minmax(48px, auto); }
  .section-press .press-coverage-link { padding: 10px 12px; }
  /* The original collapses "Read article ↗" to the arrow glyph on phones; the label has to stay readable here. */
  .section-press .press-coverage-cta { font-size: 14px; }
  .section-press .press-coverage-cta::after { content: none; }
}

/* Check / X in front of each statement (t/fit.js): the site's gold verified badge for "For you", its dark x icon in a
   circle of the card's own hover tint for "Not for you". Same 22px footprint so the statements line up. */
.section-press .fit-mark { flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; }
.section-press .fit-mark img { display: block; }
.section-press .fit-mark[data-fit="yes"] img { width: 22px; height: 22px; }
.section-press .fit-mark[data-fit="no"] { background: #00000014; }
.section-press .fit-mark[data-fit="no"] img { width: 18px; height: 18px; opacity: 0.85; }
.section-press .press-coverage-link .press-coverage-logo { margin-right: auto; }
@media (max-width: 767px) { .section-press .fit-mark { width: 20px; height: 20px; } .section-press .fit-mark[data-fit="yes"] img { width: 20px; height: 20px; } }