/* ================= /press — page-specific styles =====================
   Everything else comes from /style.css. Only tokens defined there
   (--ink, --ink-deep, --ink-lift, --cream, --cream-dim, --accent,
   --olive, --rule) are used here — no new colours.

   Rules are scoped under .guide because /style.css styles the prose
   with .guide h3 / .guide p, which would otherwise win on specificity.
   ==================================================================== */

.mentions {
  display: grid;
  gap: clamp(1.25rem, 4vw, 1.75rem);
}

/* ---------- one press mention ---------- */

.mention {
  position: relative;
  display: grid;
  gap: clamp(1rem, 3vw, 1.4rem);
  padding: clamp(1rem, 3vw, 1.4rem);
  border: 1px solid rgba(214, 175, 77, 0.22);
  border-radius: 12px;
  background: rgba(18, 67, 44, 0.32);
  transition: border-color 180ms ease, background-color 180ms ease;
}

@media (min-width: 48rem) {
  .mention {
    grid-template-columns: 16rem minmax(0, 1fr);
    align-items: start;
  }
}

/* the publication's own OG image. Ratios vary widely between outlets,
   so the image is contained rather than cropped — nothing important
   gets cut off, and the letterbox is the page background. */
.mention-shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 8px;
  background: var(--ink-deep);
  box-shadow: 0 0 0 1px rgba(214, 175, 77, 0.18);
}

.mention-body { min-width: 0; }

/* ---------- date + source ---------- */

.guide .mention-meta {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

.mention-source { color: var(--accent); }

/* the source name follows the date; the markup already contributes a
   collapsed space before it, so only pad the right of the separator */
.mention-source::before {
  content: "·";
  margin-right: 0.45em;
  color: var(--rule);
}

/* ---------- headline ---------- */

/* stays in the publication's original language in both IT and EN —
   it is a citation, not site copy */
.guide .mention-title {
  margin: 0 0 0.6rem;
  font-family: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 3.2vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--cream);
  text-wrap: pretty;
}

.guide .mention-title a {
  color: var(--cream);
  text-decoration: none;
}

/* one link per card, stretched over the whole row: the entire mention
   is clickable, but a screen reader announces a single link */
.guide .mention-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.mention:hover {
  border-color: rgba(214, 175, 77, 0.42);
  background: rgba(18, 67, 44, 0.46);
}

.guide .mention:hover .mention-title a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.mention:focus-within {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.guide .mention-title a:focus-visible { outline: none; }

/* ---------- extract ---------- */

.guide .mention-extract {
  margin: 0 0 0.75rem;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--cream-dim);
  text-wrap: pretty;
  overflow-wrap: break-word;
}

/* ---------- call to action ----------
   decorative: the real link is the headline above, and the markup
   marks this aria-hidden so it is not announced twice. */

.guide .mention-cta {
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--accent);
}

.guide .mention-cta::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 180ms ease;
}

.guide .mention:hover .mention-cta::after { transform: translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {
  .mention,
  .guide .mention-cta::after { transition: none; }
  .guide .mention:hover .mention-cta::after { transform: none; }
}