/* puglia.css — pagina Puglia (/puglia/, 5 lingue), nuovo disegno 08/10/2026.
   Markup da tools/build-puglia.py. Riusa da property.css .pf-hero/.pfx-hero, .pfx-place e i loop
   .pfx-card--video (scripts/pf-media.js); qui solo i blocchi propri della pagina (.pg-*). */

/* ── Hero: foto chiara (piscina al sole) → velatura bassa un po' più piena per il titolo bianco ── */
.pg-hero .pf-hero__img { object-position: 50% 60%; }
.pg-hero::after {
  background: linear-gradient(to top, oklch(8% 0 0 / 0.72) 0%, oklch(8% 0 0 / 0.38) 26%, transparent 52%);
}
.pg-hero .pf-hero__loc { flex-basis: 100%; }

/* ── Blocco a quattro colonne: testo (due colonne) + due quadrati con il loop, nessuna cella vuota ── */
.pg-duo {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px);
  padding-block: clamp(16px, 2vw, 24px) clamp(32px, 4vw, 56px);
}
.pg-duo > * { min-width: 0; }
.pg-duo__lead {
  grid-column: span 2; display: flex; flex-direction: column; gap: 14px;
  padding: clamp(22px, 2.6vw, 40px); border-radius: var(--radius-lg);
  background: var(--ink); color: var(--paper);
}
.pg-duo__h { margin: 0; font: var(--w-title) clamp(24px, 2.2vw, 34px)/1.15 var(--serif); color: inherit; }
.pg-duo__p { margin: 0; max-width: 62ch; font: 400 var(--text-sm)/1.6 var(--sans); color: color-mix(in oklch, var(--paper) 80%, transparent); }

.pg-duo--light .pg-duo__lead {
  background: color-mix(in oklch, var(--paper) 96%, var(--ink)); color: var(--ink); border: 1px solid var(--line);
  justify-content: center;
}
.pg-duo--light .pg-duo__p { color: var(--ash-1); }
.pg-duo__btn { align-self: flex-start; min-height: 44px; margin-top: 4px; }

/* prenotazioni dentro il blocco scuro */
.pg-book { margin-top: auto; padding-top: 14px; border-top: 1px solid color-mix(in oklch, var(--paper) 18%, transparent); }
.pg-book__h { margin: 0 0 4px; font: 600 var(--text-xs)/1.2 var(--sans); color: color-mix(in oklch, var(--paper) 70%, transparent); }
.pg-book__list { margin: 0; padding: 0; list-style: none; }
.pg-book__list li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 18px; }
.pg-book__k { flex: 0 0 7.5em; white-space: nowrap; font: var(--w-title) var(--text-md)/1.2 var(--serif); color: var(--paper); }
.pg-book__v { display: flex; flex-wrap: wrap; align-items: center; column-gap: 18px; min-width: 0; }
.pg-book__v a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; white-space: nowrap;
  color: var(--paper); text-decoration: underline; text-underline-offset: 4px; font: 500 var(--text-sm)/1 var(--sans);
}
.pg-book__v a:hover { text-decoration-thickness: 2px; }
.pg-book__v a:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; border-radius: 4px; }
.pg-book__note { font: 400 var(--text-xs)/1.3 var(--sans); color: color-mix(in oklch, var(--paper) 70%, transparent); }

/* quadrati: foto + loop (pf-media.js), nome e tipo in sovrimpressione */
.pg-sq {
  position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden;
  color: oklch(98% 0 0); text-decoration: none; isolation: isolate;
  align-self: stretch; width: 100%;   /* se il testo accanto è più alto, il quadrato segue la riga: niente fondi sfalsati */
}
.pg-sq .pfx-card__media::after { background: linear-gradient(to top, oklch(8% 0 0 / 0.72), oklch(8% 0 0 / 0.2) 40%, transparent 60%); }
.pg-sq__media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: inherit; }
.pg-sq:hover .pfx-card__media img, .pg-sq:hover .pfx-card__video,
.pg-sq:focus-visible .pfx-card__media img { transform: scale(1.05); }
.pg-sq:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pg-sq__txt {
  position: absolute; z-index: 2; left: clamp(14px, 1.4vw, 20px); right: clamp(14px, 1.4vw, 20px); bottom: clamp(14px, 1.4vw, 18px);
  display: flex; flex-direction: column; gap: 4px;
}
.pg-sq__name { font: var(--w-title) clamp(19px, 1.6vw, 24px)/1.15 var(--serif); color: oklch(99% 0 0); text-shadow: 0 1px 12px oklch(0% 0 0 / 0.35); }
.pg-sq__sub { text-wrap: balance; font: 400 var(--text-xs)/1.35 var(--sans); color: oklch(98% 0 0 / 0.86); }

@media (max-width: 900px) {
  .pg-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-duo__lead { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .pg-duo { gap: 10px; }
  .pg-sq__txt { left: 12px; right: 12px; bottom: 12px; }
  .pg-sq__name { font-size: 17px; }
  .pg-sq__sub { display: none; }   /* sul telefono andrebbe a capo: i fatti sono nel blocco accanto */
  .pg-book__k { flex-basis: 100%; margin-top: 8px; }
}

/* ── Come muoversi: testo breve sopra le distanze; nessun pulsante in fondo ── */
.pg-place .pf-place__where { text-wrap: balance; }
.pg-place__p { margin: 0; max-width: 52ch; font: 400 var(--text-sm)/1.6 var(--sans); color: var(--ash-1); }
.pg-place { padding-block: clamp(28px, 3.4vw, 48px); }
.pg-place .pf-place__frame { min-height: 380px; }
@media (max-width: 900px) { .pg-place .pf-place__frame { min-height: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pg-sq:hover .pfx-card__media img, .pg-sq:focus-visible .pfx-card__media img { transform: none; }
}

/* Mappa (09/10): foto con pulsante verso Google Maps, niente iframe caricato senza consenso */
.map-link { position: absolute; inset: 0; display: block; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; background: var(--line); }
.map-link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.map-link::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, oklch(8% 0 0 / 0.55), transparent 45%); }
.map-link:hover img { transform: scale(1.03); }
.map-link__btn { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); background: oklch(99% 0 0); color: oklch(15% 0 0); font: 500 var(--text-sm)/1 var(--sans); white-space: nowrap; }
.map-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .map-link img { transition: none; } }