/* ==========================================================================
   Centro Anna Rita Buonincontro — sezione PRESS & MEDIA
   (Comunicati Stampa, Video e Interviste, Gallery Eventi, articolo singolo)
   --------------------------------------------------------------------------
   Ordine di caricamento:
     css/base.css → css/inner.css → css/servizio.css → css/press.css
   Riutilizza da base.css: token, bottoni (.btn), header/menu, .hero__bg /
   .hero__bg-img, .split__text, .splits / .splits__decor (onde di sfondo),
   .booking, .maps, footer, back-to-top.
   Riutilizza da inner.css: .cs-container, .cs-title, .cs-eyebrow, .page-hero
   (+ .page-hero__cta), .sr-only. Da servizio.css: .sv-head, .sv-cta.
   Interazioni in js/home.js: 2c (scroll alle ancore), 11 (modale video e
   lightbox), 12 (condivisione).

   Struttura delle pagine:
     .page-hero.pr-hero        → Hero (eyebrow + titolo + sottotitolo + CTA)
     .pr-flow > .pr-list       → elenco con onde di sfondo: .sv-head + .pr-grid
     .pr-grid > .pr-card       → card comunicato / video (variante --featured)
     .gl-grid > .gl-item       → gallery a griglia con lightbox
     .pr-contact               → fascia ardesia "Area stampa" con CTA
     .ar-*                     → articolo singolo (press-single.html)
     .media-modal              → modale condivisa (video + lightbox), creata da JS

   Indice
   01. Hero (variante)
   02. Sezione elenco
   03. Meta (categoria + data)
   04. Card comunicato / video
   05. Card in evidenza
   06. Video: miniatura e pulsante Play
   07. Gallery
   08. Fascia "Area stampa"
   09. Modale multimediale (video + lightbox)
   10. Articolo singolo
   11. Responsive
   ========================================================================== */

/* 01. Hero --------------------------------------------------------------- */
/* Foto sempre in B/N come gli Hero delle altre pagine */
.pr-hero .hero__bg-img { filter: grayscale(100%); }
.pr-hero .page-hero__text { max-width: 760px; }

/* 02. Sezione elenco ----------------------------------------------------- */
/* Onde di sfondo (waves-2) nella stessa posizione delle altre pagine:
   y = 5425.2px dall'inizio della pagina, l'elenco inizia a y ≈ 604px */
.pr-flow .splits__waves { transform: matrix(.706, -.709, .709, .706, -4238, 4821.2); }
.pr-list { padding: 131px 0 137px; }
.pr-list:focus { outline: none; }                      /* focus programmatico dalla CTA dell'Hero */
.pr-list--mist { background: var(--mist); }
.pr-head .cs-eyebrow { color: var(--teal); }
.pr-head .cs-title { margin-top: 18px; }
.pr-head .split__text { max-width: 860px; margin: 27px auto 0; text-wrap: pretty; }
.pr-list .sv-cta { width: 424px; margin-top: 64px; }

/* 03. Meta --------------------------------------------------------------- */
.pr-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0;
  font-family: var(--ff-head); font-weight: 700; font-size: 11.5px; line-height: 1.3;
  letter-spacing: .18em; text-transform: uppercase;
}
.pr-meta__cat { color: var(--teal); }
.pr-meta__date { font-weight: 600; color: var(--slate); }
/* separatore verticale tra le voci */
.pr-meta > * + *::before {
  content: ""; display: inline-block; width: 1px; height: 12px; margin: 0 14px;
  vertical-align: -1px; background: currentColor; opacity: .35;
}

/* 04. Card comunicato / video ------------------------------------------- */
.pr-grid {
  margin-top: 64px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 22px;
}
/* Stessa famiglia delle card del sito: bordo ardesia + barra teal di 8px in basso */
.pr-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--white); border: 1px solid rgba(79, 117, 139, .45);
  box-shadow: inset 0 -8px 0 var(--teal), 0 4px 20px rgba(0, 0, 0, .12);
  /* "translate" (e non "transform") per l'hover: non interferisce con il reveal GSAP */
  transition: translate .5s var(--ease), box-shadow .5s var(--ease);
}
.pr-card:hover, .pr-card:focus-within {
  translate: 0 -6px;
  box-shadow: inset 0 -12px 0 var(--teal), 0 18px 34px -12px rgba(1, 100, 106, .35);
}
.pr-card__media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #e8eef0; }
.pr-card__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--ease); }
.pr-card:hover .pr-card__media img { scale: 1.06; }
.pr-card__body { flex: 1; display: flex; flex-direction: column; padding: 26px 30px 36px; }
.pr-card__title { margin-top: 14px; font-family: var(--ff-head); font-weight: 700; font-size: 22px; line-height: 27px; color: var(--slate); }
.pr-card__text { margin: 12px 0 22px; font-family: var(--ff-head); font-weight: 400; font-size: 16px; line-height: 23px; color: var(--gray-600); }
/* Link sul titolo: lo pseudo-elemento rende cliccabile l'intera card */
.pr-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pr-card__link:focus-visible { outline: none; }
.pr-card:has(.pr-card__link:focus-visible) { outline: 2px solid var(--teal); outline-offset: 3px; }
/* Invito alla lettura: ancorato in basso (stessa riga in tutte le card) */
.pr-card__more {
  margin-top: auto; width: fit-content;
  font-family: var(--ff-head); font-weight: 700; font-size: 14px; line-height: 20px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--teal);
}
.pr-card__arrow { display: inline-block; margin-left: 6px; transition: transform .35s var(--ease); }
.pr-card:hover .pr-card__more { text-decoration: underline; text-underline-offset: 3px; }
.pr-card:hover .pr-card__arrow { transform: translateX(4px); }

/* 05. Card in evidenza --------------------------------------------------- */
/* A tutta riga: immagine a sinistra (56%), testo a destra */
.pr-card--featured { grid-column: 1 / -1; flex-direction: row; }
.pr-card--featured .pr-card__media { flex: 0 0 56%; aspect-ratio: auto; min-height: 430px; }
.pr-card--featured .pr-card__body { justify-content: center; padding: 56px 56px 64px; }
.pr-card--featured .pr-card__title { margin-top: 18px; font-size: clamp(26px, 1.852vw, 32px); line-height: 1.2; }
.pr-card--featured .pr-card__text { margin: 18px 0 30px; font-family: var(--ff-body); font-weight: 200; font-size: 18px; line-height: 30px; color: var(--ink); }
.pr-card--featured .pr-card__more { margin-top: 0; }
.pr-card__badge {
  position: absolute; z-index: 1; top: 24px; left: 24px; padding: 8px 12px 7px;
  background: var(--teal); color: var(--white);
  font-family: var(--ff-head); font-weight: 700; font-size: 11.5px; line-height: 1; letter-spacing: .18em; text-transform: uppercase;
}

/* 06. Video -------------------------------------------------------------- */
/* Il titolo è un <button> (apre la modale video, js/home.js modulo 11):
   lo pseudo-elemento rende cliccabile l'intera card, come .pr-card__link */
.pr-card__play { text-align: left; }
.pr-card__play::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pr-card__play:focus-visible { outline: none; }
.pr-card:has(.pr-card__play:focus-visible) { outline: 2px solid var(--teal); outline-offset: 3px; }
/* velo leggero sulla miniatura */
.pr-card--video .pr-card__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(79, 117, 139, 0) 40%, rgba(0, 40, 44, .45));
  transition: opacity .5s var(--ease);
}
.pr-card--video:hover .pr-card__media::before { opacity: .7; }
.vd-play {
  position: absolute; z-index: 2; top: 50%; left: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  border-radius: 50%; background: rgba(255, 255, 255, .92);
  box-shadow: 0 12px 30px -10px rgba(0, 40, 44, .6);
  transition: background-color .4s var(--ease), scale .5s var(--ease);
}
/* triangolo "play" */
.vd-play::before {
  content: ""; position: absolute; top: 50%; left: 50%; margin: -11px 0 0 -6px;
  border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--teal);
  transition: border-color .4s var(--ease);
}
/* anello che si espande all'hover */
.vd-play::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .8); opacity: 0; scale: .85;
  transition: opacity .5s var(--ease), scale .5s var(--ease);
}
.pr-card:hover .vd-play { background: var(--teal); scale: 1.08; }
.pr-card:hover .vd-play::before { border-left-color: var(--white); }
.pr-card:hover .vd-play::after { opacity: 1; scale: 1; }
/* Icona play e durata sono sopra il velo cliccabile della card (z-index 2): lasciano passare
   il clic al pulsante del titolo, così anche l'icona apre il video (l'hover resta su .pr-card) */
.vd-play, .vd-duration { pointer-events: none; }
.pr-card--featured .vd-play { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
.pr-card--featured .vd-play::before { margin: -14px 0 0 -8px; border-width: 14px 0 14px 23px; }
.vd-duration {
  position: absolute; z-index: 2; right: 16px; bottom: 16px; padding: 5px 8px 4px;
  background: rgba(0, 0, 0, .62); color: var(--white);
  font-family: var(--ff-head); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: .04em;
}

/* 07. Gallery ------------------------------------------------------------ */
/* Griglia a mosaico: celle quadrate di base, varianti larghe / alte / grandi;
   "dense" riempie i vuoti mantenendo l'ordine di lettura il più possibile */
.gl-grid {
  margin-top: 64px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 13.9vw, 240px); grid-auto-flow: dense; gap: 14px;
}
.gl-item { position: relative; display: block; overflow: hidden; background: #e8eef0; isolation: isolate; }
.gl-item--wide { grid-column: span 2; }
.gl-item--tall { grid-row: span 2; }
.gl-item--big  { grid-column: span 2; grid-row: span 2; }
.gl-item img { width: 100%; height: 100%; object-fit: cover; transition: scale .9s var(--ease); }
.gl-item:hover img, .gl-item:focus-visible img { scale: 1.06; }
.gl-item:focus-visible { outline-offset: 3px; }
/* Didascalia: sale dal basso all'hover */
.gl-item__cap {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 48px 22px 20px;
  background: linear-gradient(180deg, rgba(0, 40, 44, 0), rgba(0, 40, 44, .78));
  color: var(--white); opacity: 0; translate: 0 12px;
  transition: opacity .45s var(--ease), translate .45s var(--ease);
}
.gl-item:hover .gl-item__cap, .gl-item:focus-visible .gl-item__cap { opacity: 1; translate: 0 0; }
.gl-item__cat { display: block; font-family: var(--ff-head); font-weight: 700; font-size: 11px; line-height: 1.3; letter-spacing: .18em; text-transform: uppercase; color: var(--mist); }
.gl-item__title { display: block; margin-top: 4px; font-family: var(--ff-head); font-weight: 700; font-size: 18px; line-height: 1.25; }
/* Icona "ingrandisci" */
.gl-item__zoom {
  position: absolute; z-index: 1; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); box-shadow: 0 8px 20px -8px rgba(0, 40, 44, .6);
  opacity: 0; scale: .7; transition: opacity .4s var(--ease), scale .4s var(--ease);
}
.gl-item__zoom::before, .gl-item__zoom::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--teal); }
.gl-item__zoom::after { rotate: 90deg; }
.gl-item:hover .gl-item__zoom, .gl-item:focus-visible .gl-item__zoom { opacity: 1; scale: 1; }
/* Dispositivi senza hover: didascalia e icona sempre visibili */
@media (hover: none) {
  .gl-item__cap, .gl-item__zoom { opacity: 1; translate: 0 0; scale: 1; }
  .gl-item__cap { padding: 36px 14px 12px; }
}

/* 08. Fascia "Area stampa" ---------------------------------------------- */
.pr-contact {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 110px 0 124px; background: var(--slate); color: var(--white); text-align: center;
}
/* Marchio in trasparenza (stesso asset di "Prenota" / "Assicurazioni Partner") */
.pr-contact__mark { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 604px; max-width: 45%; overflow: hidden; pointer-events: none; }
.pr-contact__mark::before {
  content: ""; position: absolute; top: -40px; left: -868.5px; width: 2548.3px; height: 1333.4px;
  background: url(../img/brand-mark.webp) 0 0 / 100% 100% no-repeat; opacity: .07;
}
.pr-contact .cs-eyebrow { color: var(--mist); }
.pr-contact .cs-title { margin-top: 18px; color: var(--white); }
.pr-contact .split__text { max-width: 640px; margin: 24px auto 0; }
.pr-contact .btn { margin: 34px auto 0; padding-inline: 41px; }

/* 09. Modale multimediale ----------------------------------------------- */
/* <dialog> a tutto schermo (js/home.js, modulo 11): lo sfondo è il dialog stesso,
   così l'apertura/chiusura è animabile con GSAP */
.media-modal {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 72px 96px 48px; border: 0; overflow: hidden;
  background: rgba(0, 32, 36, .94); color: var(--white);
}
.media-modal[open] { display: flex; align-items: center; justify-content: center; }
.media-modal::backdrop { background: transparent; }
.media-modal__figure { display: flex; flex-direction: column; align-items: center; width: min(1200px, 100%); max-height: 100%; }
.media-modal__stage { position: relative; display: flex; justify-content: center; width: 100%; min-height: 0; touch-action: pan-y; }
.media-modal__stage img { max-width: 100%; max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); width: auto; height: auto; object-fit: contain; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); user-select: none; }
/* Video: riquadro 16:9 responsive */
.media-modal--video .media-modal__stage { aspect-ratio: 16 / 9; width: min(100%, (100vh - 190px) * 16 / 9); background: #000; }
.media-modal__stage iframe, .media-modal__stage video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Video non ancora disponibile (contenuti segnaposto) */
.media-modal__soon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.media-modal__soon img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; opacity: .35; box-shadow: none; }
.media-modal__soon p {
  position: relative; padding: 14px 22px; background: rgba(0, 0, 0, .55);
  font-family: var(--ff-head); font-weight: 700; font-size: 18px; letter-spacing: .04em; text-transform: uppercase;
}
.media-modal__caption { margin-top: 18px; max-width: 900px; text-align: center; font-family: var(--ff-head); font-weight: 600; font-size: 18px; line-height: 1.35; }
.media-modal__caption:empty { display: none; }
.media-modal__count { position: absolute; top: 34px; left: 32px; font-family: var(--ff-head); font-weight: 700; font-size: 13px; letter-spacing: .18em; }
.media-modal__close { position: absolute; z-index: 2; top: 20px; right: 20px; width: 48px; height: 48px; transition: rotate .45s var(--ease); }
.media-modal__close span { position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; background: var(--white); }
.media-modal__close span:first-child { rotate: 45deg; }
.media-modal__close span:last-child { rotate: -45deg; }
.media-modal__close:hover { rotate: 90deg; }
.media-modal__nav {
  position: absolute; z-index: 2; top: 50%; width: 56px; height: 56px; margin-top: -28px;
  border: 1px solid rgba(255, 255, 255, .5); transition: background-color .35s var(--ease), border-color .35s var(--ease);
}
.media-modal__nav::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: -45deg;
}
.media-modal__nav--prev { left: 24px; }
.media-modal__nav--prev::before { rotate: 135deg; margin-left: -4px; }
.media-modal__nav--next { right: 24px; }
.media-modal__nav:hover { background: var(--teal); border-color: var(--teal); }
.media-modal:not(.media-modal--gallery) .media-modal__nav,
.media-modal.is-single .media-modal__nav { display: none; }

/* 10. Articolo singolo --------------------------------------------------- */
/* Hero: spazio in basso per l'immagine in evidenza che si sovrappone */
.ar-hero { padding-bottom: 200px; }
.ar-hero .page-hero__title { max-width: 1000px; font-size: clamp(34px, 3.24vw, 56px); line-height: 1.1; }
.ar-crumbs ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 0; font-family: var(--ff-head); font-weight: 700; font-size: 11.5px; line-height: 1.3; letter-spacing: .18em; text-transform: uppercase; color: var(--mist); }
.ar-crumbs li + li::before { content: "/"; margin: 0 10px; opacity: .6; }
.ar-crumbs a { transition: opacity .3s; }
.ar-crumbs a:hover { opacity: .75; text-decoration: underline; text-underline-offset: 3px; }
.ar-crumbs [aria-current] { color: var(--white); }
.ar-hero .pr-meta { margin-top: 28px; }
.ar-hero .pr-meta__cat { color: var(--mist); }
.ar-hero .pr-meta__date, .ar-hero .pr-meta__read { color: var(--white); font-weight: 600; }

.ar-cover { position: relative; z-index: 1; margin-top: -140px; }
.ar-cover__img { width: 100%; height: auto; aspect-ratio: 1210 / 560; object-fit: cover; box-shadow: 0 30px 60px -30px rgba(0, 40, 44, .55); }
.ar-cover__cap { margin-top: 12px; padding-left: 12px; border-left: 3px solid var(--teal); font-size: 14px; line-height: 20px; color: var(--muted); }

.ar-main { padding: 72px 0 120px; }
/* Colonna dell'articolo: tutta la larghezza di .cs-container (1210px + margini laterali
   del Design System), allineata a immagine in evidenza, correlati e sezioni delle altre pagine */
.ar-col { width: 100%; }
/* Barra strumenti: torna indietro + condivisione */
.ar-tools {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  padding: 16px 0; border-block: 1px solid rgba(79, 117, 139, .25);
}
.ar-back {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 0;
  font-family: var(--ff-head); font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: .04em; text-transform: uppercase; color: var(--teal);
}
.ar-back__arrow { display: inline-block; rotate: 180deg; transition: translate .35s var(--ease); }
.ar-back:hover { color: var(--teal-deep); }
.ar-back:hover .ar-back__arrow { translate: -5px 0; }
.ar-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ar-share__label { margin-right: 6px; font-family: var(--ff-head); font-weight: 700; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--slate); }
.ar-share__btn {
  position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid rgba(79, 117, 139, .4); color: var(--slate);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), translate .35s var(--ease);
}
.ar-share__btn svg { width: 18px; height: 18px; fill: currentColor; }
.ar-share__btn:hover, .ar-share__btn:focus-visible { background: var(--teal); border-color: var(--teal); color: var(--white); translate: 0 -2px; }
.ar-share__btn.is-copied { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--white); }
.ar-share__status { flex-basis: 100%; min-height: 0; font-family: var(--ff-head); font-weight: 600; font-size: 13px; color: var(--teal); text-align: right; }
.ar-share__status:empty { display: none; }

/* Testo dell'articolo: stessa voce e misura di .split__text (Inter 200, 20/36px) */
.ar-body { padding: 56px 0 64px; font-weight: 200; font-size: 20px; line-height: 36px; }
.ar-body > * + * { margin-top: 24px; }
.ar-body .ar-lead { font-family: var(--ff-head); font-weight: 400; font-size: 23px; line-height: 36px; color: var(--slate); }
.ar-body h2 { margin-top: 48px; font-family: var(--ff-head); font-weight: 700; font-size: clamp(24px, 1.62vw, 28px); line-height: 1.25; color: var(--slate); }
.ar-body strong { font-weight: 400; }
.ar-body a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.ar-body ul li { position: relative; padding-left: 22px; }
.ar-body ul li + li { margin-top: 8px; }
.ar-body ul li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 6px; height: 6px; background: var(--teal); }
.ar-quote {
  position: relative; margin-block: 44px; padding: 36px 40px 34px 76px;
  background: var(--mist); border-left: 4px solid var(--teal);
}
.ar-quote::before {
  content: "“"; position: absolute; left: 22px; top: 18px;
  font-family: var(--ff-head); font-weight: 700; font-size: 72px; line-height: 1; color: var(--teal);
}
.ar-quote p { font-family: var(--ff-head); font-weight: 600; font-size: 23px; line-height: 34px; color: var(--slate); }
.ar-quote footer { margin-top: 14px; font-family: var(--ff-head); font-weight: 700; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--teal); }
.ar-figure { margin-block: 44px; }
.ar-figure img { width: 100%; height: auto; aspect-ratio: 1210 / 560; object-fit: cover; }   /* stesso formato dell'immagine in evidenza */
.ar-figure figcaption { margin-top: 12px; padding-left: 12px; border-left: 3px solid var(--teal); font-size: 14px; line-height: 20px; color: var(--muted); }

.ar-related { padding: 120px 0 130px; background: var(--mist); }
.ar-related .pr-grid { margin-top: 48px; }

/* 11. Responsive --------------------------------------------------------- */
/* Hero: nel design delle pagine interne il testo parte 5px oltre il bordo del container */
@media (min-width: 1024px) {
  .pr-hero .page-hero__content { padding-left: 5px; }
}

/* ≤1199 — card su 2 colonne, gallery su 3 */
@media (max-width: 1199.98px) {
  .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .pr-card--featured .pr-card__media { flex-basis: 50%; min-height: 380px; }
  .pr-card--featured .pr-card__body { padding: 40px 40px 48px; }
  .gl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 200px; }
}

/* ≤1023 — tablet */
@media (max-width: 1023.98px) {
  .pr-list { padding: 80px 0 88px; }
  .pr-grid, .gl-grid { margin-top: 48px; }
  .pr-list .sv-cta { margin-top: 48px; }
  .pr-card--featured { flex-direction: column; }
  .pr-card--featured .pr-card__media { flex-basis: auto; aspect-ratio: 16 / 9; min-height: 0; }
  .pr-card--featured .pr-card__body { padding: 32px 32px 44px; }
  .pr-card--featured .pr-card__text { font-size: 17px; line-height: 28px; }
  .pr-contact { padding: 88px 0 96px; }
  .pr-contact__mark { max-width: 60%; }

  .media-modal { padding: 72px 24px 96px; }
  .media-modal__nav { top: auto; bottom: 24px; margin-top: 0; }
  .media-modal__nav--prev { left: calc(50% - 64px); }
  .media-modal__nav--next { right: calc(50% - 64px); }
  .media-modal__stage img { max-height: calc(100vh - 240px); max-height: calc(100dvh - 240px); }
  .media-modal--video .media-modal__stage { width: 100%; }

  .ar-hero { padding-bottom: 150px; }
  .ar-cover { margin-top: -100px; }
  .ar-main { padding: 56px 0 88px; }
  .ar-related { padding: 80px 0 96px; }
}

/* ≤767 — mobile */
@media (max-width: 767.98px) {
  .pr-list { padding: 56px 0 64px; }
  .pr-head .split__text { margin-top: 18px; text-align: left; }
  .pr-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 32px; }
  .pr-card__body { padding: 22px 22px 30px; }
  .pr-card__title { font-size: 20px; line-height: 25px; }
  .pr-card--featured .pr-card__body { padding: 24px 22px 34px; }
  .pr-card--featured .pr-card__title { font-size: 23px; }
  .pr-card__badge { top: 16px; left: 16px; }
  .vd-play, .pr-card--featured .vd-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .vd-play::before, .pr-card--featured .vd-play::before { margin: -10px 0 0 -5px; border-width: 10px 0 10px 16px; }
  .pr-list .sv-cta { width: 100%; margin-top: 32px; white-space: normal; line-height: 1.15; }

  .gl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 8px; margin-top: 32px; }
  .gl-item__title { font-size: 15px; }
  .gl-item__cat { display: none; }
  .gl-item__zoom { top: 10px; right: 10px; width: 32px; height: 32px; }
  .gl-item__zoom::before, .gl-item__zoom::after { width: 12px; margin-left: -6px; }

  .pr-contact { padding: 64px 0 72px; }
  .pr-contact .split__text { margin-top: 18px; }
  .pr-contact .btn { width: 100%; padding-inline: 16px; white-space: normal; line-height: 1.15; }
  .pr-contact__mark { max-width: 75%; opacity: .7; }

  .media-modal { padding: 64px 12px 92px; }
  .media-modal__count { top: 30px; left: 16px; }
  .media-modal__close { top: 14px; right: 10px; }
  .media-modal__caption { font-size: 16px; padding-inline: 8px; }

  .ar-hero { padding-bottom: 110px; }
  .ar-cover { margin-top: -72px; }
  .ar-cover__img, .ar-figure img { aspect-ratio: 4 / 3; }
  .ar-main { padding: 40px 0 64px; }
  .ar-tools { flex-direction: column; align-items: flex-start; }
  .ar-share__status { text-align: left; }
  .ar-body { padding: 36px 0 44px; font-size: 18px; line-height: 30px; }
  .ar-body .ar-lead { font-size: 20px; line-height: 31px; }
  .ar-quote { padding: 60px 22px 26px; }
  .ar-quote::before { left: 18px; top: 10px; }
  .ar-quote p { font-size: 20px; line-height: 30px; }
  .ar-related { padding: 64px 0 72px; }
}