/* fs-news.css — the press strip (#news) in index.html.
 *
 * The press strip is not in the Claude Design canvas: tools/import-dc.mjs
 * injects news.html before the Contact section on every import, and links
 * this file and fs-news.js after fs-mobile.css / fs-mobile.js. All three
 * are linked rather than inlined so a re-import never overwrites them.
 *
 * Two jobs here. The hover states, because the export's generated
 * #dc-hover block is rebuilt from the canvas and cannot carry classes for
 * a section the canvas does not have. And the responsive tiers, because
 * the export's own @media rules name every section by id (#overview,
 * #product … #contact) and #news will never be in that list. The tiers
 * match fs-mobile.css: 40px gutters at 1180, 36px on a portrait tablet,
 * 20px on a phone, 16px at 360, and one card in view under 860 instead of
 * two. The !importants are needed because the styles they override are
 * inline, the same as in fs-mobile.css.
 */

/* ── Hover ────────────────────────────────────────────────────────────── */
.hvn { transition: border-color 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.hvn:hover { border-color: #0A2E9C !important; transform: translateY(-2px); }
.hvn:hover h3 { color: #0A2E9C; }
.hvn:focus-visible { outline: 2px solid #0A2E9C; outline-offset: 3px; }
.hvnb:hover { background: #14171C !important; border-color: #14171C !important; color: #F7F5EE !important; }
.hvnb[aria-disabled="true"] { opacity: 0.32; pointer-events: none; }

/* ── Position dots ────────────────────────────────────────────────────── */
/* 26×15 for the thumb, drawn as a 3px bar: the background is clipped to
   the content box, so the padding is hit area and nothing else. */
[data-fx-newsdots] button {
  width: 26px; height: 15px; padding: 6px 0; border: 0; cursor: pointer;
  background: rgba(20,23,28,0.22); background-clip: content-box;
  transition: background-color 220ms ease;
}
[data-fx-newsdots] button:hover { background: rgba(20,23,28,0.45); background-clip: content-box; }
[data-fx-newsdots] button[aria-current="true"] { background: #0A2E9C; background-clip: content-box; }

/* The track is moved by transform; a reduced-motion visitor gets the same
   steps with no slide, and fs-news.js does not start the rotation. */
@media (prefers-reduced-motion: reduce) {
  [data-fx-newstrack] { transition: none !important; }
}

/* ── Tablet landscape (≤1180) ─────────────────────────────────────────── */
@media (max-width: 1180px) {
  #news { padding-left: 40px !important; padding-right: 40px !important; }
  #news h2 { font-size: 60px !important; }
}

/* ── Tablet portrait and below (≤860): one card in view ───────────────── */
@media (max-width: 860px) {
  #news { padding-top: 72px !important; padding-bottom: 64px !important; padding-left: 20px !important; padding-right: 20px !important; }
  #news h2 { font-size: 38px !important; }
  [data-fx-newstrack] { --fx-per: 1 !important; }
  /* headline and summary hold their size; only the box tightens */
  #news .hvn { padding: 28px 26px 24px !important; }
}

/* ── Tablet portrait only (601–860): larger than a phone ──────────────── */
@media (min-width: 601px) and (max-width: 860px) {
  #news { padding-top: 88px !important; padding-bottom: 80px !important; padding-left: 36px !important; padding-right: 36px !important; }
}

/* ── Phones (≤600) ────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  #news { padding-top: 64px !important; padding-bottom: 56px !important; }
  /* the headline and its standfirst stack; the section rhythm matches the
     64/56 plates in fs-mobile.css */
  #news > [style*="margin-top: 60px"] { margin-top: 26px !important; row-gap: 18px !important; }
  #news [data-fx-news] { margin-top: 32px !important; }
  #news h3 { font-size: 25px !important; }
  #news .hvn { gap: 14px !important; padding: 24px 22px 22px !important; }
  /* arrows and counter sit on one line under the dots at 350px */
  #news [data-fx-newsprev], #news [data-fx-newsnext] { width: 42px !important; height: 42px !important; }
}

@media (max-width: 360px) {
  #news { padding-left: 16px !important; padding-right: 16px !important; }
}