/* Guida di Roma, pagina indice (08/10/2026). Collegato solo da rome-guide.html e */rome-guide.html.
   Grammatica delle pagine nuove: hero foto con titolo e due pulsanti, Magazine a griglia piena,
   le due strutture romane in quadrati con il loop (scripts/pf-media.js) e le distanze di data/distanze.json.
   Gli articoli usano rome-guide.css, che qui non si carica. */

/* ── hero ── */
.gi-hero { height: clamp(440px, 64svh, 660px); }
.gi-hero::after {
  background: linear-gradient(to top, oklch(8% 0 0 / 0.78) 0%, oklch(8% 0 0 / 0.40) 34%, oklch(8% 0 0 / 0.06) 64%);
}
.gi-hero .pf-hero__img { object-position: 50% 62%; }

/* ── sezioni ── */
.gi-sec { padding-block: clamp(32px, 4vw, 64px); scroll-margin-top: 80px; }
.gi-sec + .gi-sec { border-top: 1px solid var(--line); }
.gi-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); align-items: end;
  gap: 10px clamp(24px, 4vw, 64px); margin-bottom: clamp(18px, 2.4vw, 32px);
}
.gi-h2 { margin: 0; font: var(--w-title) clamp(28px, 2.8vw, 40px)/1.1 var(--serif); color: var(--ink); text-wrap: balance; }
.gi-lead { margin: 0; max-width: 62ch; font: 400 var(--text-base)/1.55 var(--sans); color: var(--ash-1); }
@media (max-width: 800px) { .gi-head { grid-template-columns: 1fr; } }

/* ── Magazine: 3 colonne, la prima lettura occupa 2x2, nessuna cella vuota ── */
.gi-mag {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 19vw, 290px);
  gap: clamp(10px, 1.4vw, 20px); margin: 0; padding: 0; list-style: none;
}
.gi-mag > li { min-width: 0; }
.gi-mag > li:first-child { grid-column: span 2; grid-row: span 2; }
.gi-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  height: 100%; padding: clamp(16px, 1.8vw, 26px); border-radius: var(--radius-lg); overflow: hidden; isolation: isolate;
  background: oklch(22% 0 0); color: oklch(98% 0 0); text-decoration: none;
}
.gi-tile img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.gi-tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, oklch(8% 0 0 / 0.9) 0%, oklch(8% 0 0 / 0.66) 40%, oklch(8% 0 0 / 0.1) 78%);
}
.gi-tile:hover img { transform: scale(1.05); }
.gi-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.gi-tile__name {
  margin: 0; font: var(--w-title) clamp(20px, 1.7vw, 26px)/1.15 var(--serif); color: oklch(99% 0 0);
  text-shadow: 0 1px 12px oklch(0% 0 0 / 0.45);
}
.gi-tile__desc {
  margin: 0; max-width: 46ch; font: 400 var(--text-sm)/1.5 var(--sans); color: oklch(98% 0 0 / 0.9);
  text-shadow: 0 1px 10px oklch(0% 0 0 / 0.5);
}
.gi-mag > li:first-child .gi-tile__name { font-size: clamp(30px, 3vw, 44px); }
.gi-mag > li:first-child .gi-tile__desc { font-size: var(--text-base); max-width: 52ch; }

/* tablet: 2 colonne; prima lettura 2x2, ultima a tutta riga */
@media (max-width: 1000px) {
  .gi-mag { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 27vw, 260px); }
  .gi-mag > li:last-child { grid-column: 1 / -1; }
}

/* telefono: la prima lettura in foto, le altre in elenco con miniatura */
@media (max-width: 600px) {
  .gi-mag { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 0; }
  .gi-mag > li:first-child { grid-column: auto; grid-row: auto; margin-bottom: 12px; }
  .gi-mag > li:last-child { grid-column: auto; }
  .gi-mag > li:first-child .gi-tile { min-height: 360px; }
  .gi-mag > li:first-child .gi-tile__name { font-size: 30px; }
  .gi-mag > li:not(:first-child) .gi-tile {
    display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto auto;
    column-gap: 14px; row-gap: 3px; align-content: center; min-height: 108px; padding: 12px 0;
    border-radius: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); isolation: auto; overflow: visible;
  }
  .gi-mag > li:nth-child(2) .gi-tile { border-top: 1px solid var(--line); }
  .gi-mag > li:not(:first-child) .gi-tile::after { content: none; }
  .gi-mag > li:not(:first-child) .gi-tile img {
    position: static; grid-row: 1 / span 2; width: 84px; height: 84px; border-radius: var(--radius-md); z-index: auto;
  }
  .gi-mag > li:not(:first-child) .gi-tile:hover img { transform: none; }
  .gi-mag > li:not(:first-child) .gi-tile__name {
    align-self: end; font-size: var(--text-lg); color: var(--ink); text-shadow: none;
  }
  .gi-mag > li:not(:first-child) .gi-tile__desc {
    align-self: start; font-size: var(--text-xs); line-height: 1.45; color: var(--ash-1); text-shadow: none;
  }
}

/* ── le due strutture: due quadrati e le distanze, 4 colonne senza vuoti ── */
.gi-stay { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.gi-stay > * { min-width: 0; }
.gi-card { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; }
.gi-card__media {
  position: relative; display: block; aspect-ratio: 1 / 1; margin-bottom: 8px; border-radius: var(--radius-lg);
  overflow: hidden; isolation: isolate; background: color-mix(in oklch, var(--ink) 8%, var(--paper));
}
.gi-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.gi-card:hover .gi-card__media img, .gi-card:hover .pfx-card__video { transform: scale(1.05); }
.gi-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--radius-lg); }
.gi-card__name { font: var(--w-title) var(--text-lg)/1.2 var(--serif); color: var(--ink); }
.gi-card:hover .gi-card__name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.gi-card__place { font: 400 var(--text-xs)/1.45 var(--sans); color: var(--ash-1); }

.gi-dist {
  grid-column: span 2; display: flex; flex-direction: column; gap: 14px;
  padding: clamp(22px, 2.6vw, 36px); border-radius: var(--radius-lg); background: var(--ink); color: var(--paper);
}
.gi-dist__h { margin: 0; font: var(--w-title) clamp(20px, 1.8vw, 26px)/1.15 var(--serif); color: var(--paper); text-wrap: balance; }
.gi-dist__table { width: 100%; border-collapse: collapse; font: 400 var(--text-sm)/1.3 var(--sans); }
.gi-dist__table th, .gi-dist__table td {
  padding: 10px 0; text-align: left; vertical-align: middle;
  border-bottom: 1px solid color-mix(in oklch, var(--paper) 18%, transparent);
}
.gi-dist__table thead th { padding-top: 0; font: 500 var(--text-xs)/1.2 var(--sans); color: color-mix(in oklch, var(--paper) 66%, transparent); }
.gi-dist__table tbody th { font-weight: 500; color: var(--paper); padding-right: 12px; }
.gi-dist__table td { width: 26%; color: color-mix(in oklch, var(--paper) 84%, transparent); white-space: nowrap; }
.gi-dist__table thead th:not(:first-child) { width: 26%; }
.gi-dist__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-top: auto; }
.gi-dist__note { margin: 0; max-width: 40ch; font: 400 var(--text-xs)/1.5 var(--sans); color: color-mix(in oklch, var(--paper) 74%, transparent); }
.gi-dist__btn {
  min-height: 48px; padding: 0 28px; justify-content: center; white-space: nowrap;
  background: var(--paper); color: var(--ink); border: 1px solid var(--paper);
}
.gi-dist__btn:hover { background: color-mix(in oklch, var(--paper) 88%, var(--ink)); color: var(--ink); }
.gi-dist__btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.gi-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 1000px) {
  .gi-stay { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gi-dist { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .gi-tile img, .gi-card__media img { transition: none; }
}