/* ============================================================
   property.css — Civis immersive property template
   Photo-led structure page. Reusable across all structures.
   Pairs with shared.css + index.css (reuses cv-around / cv-xsell / cv-book).
   Namespace: .pf-*  (property-fresh)
   ============================================================ */

/* ---- Full-bleed immersive hero ---------------------------- */
.pf-hero {
  position: relative;
  margin-top: -80px;            /* cancel body padding-top: full-bleed under fixed nav */
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
/* variante per foto panoramiche larghe e basse (es. about, 1600x619):
   evita l'upscale verticale ~1.8x che sgranerebbe l'asset a 100svh */
.pf-hero--panorama { min-height: clamp(440px, 70svh, 720px); }
.pf-hero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pf-hero::after {                 /* legibility scrim, bottom-weighted */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(135% 100% at 50% 0%, transparent 42%, oklch(12% 0.01 250 / 0.32) 100%),
    linear-gradient(
    180deg,
    oklch(20% 0.01 250 / 0.28) 0%,
    oklch(20% 0.01 250 / 0) 32%,
    oklch(14% 0.01 250 / 0) 48%,
    oklch(12% 0.01 250 / 0.62) 100%
  );
}
.pf-hero__inner {
  width: 100%;
  padding-block: clamp(120px, 16vh, 180px) clamp(40px, 7vh, 84px);
  color: oklch(98% 0 0);
}
.pf-hero__crumb {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: oklch(98% 0 0 / 0.78);
  margin-bottom: clamp(20px, 4vh, 40px);
}
.pf-hero__crumb a { color: inherit; text-decoration: none; }
.pf-hero__crumb a:hover { color: oklch(99% 0 0); }
.pf-hero__crumb span { opacity: 0.5; margin: 0 0.5em; }
.pf-hero__eyebrow {
  color: oklch(98% 0 0 / 0.86);
  margin-bottom: clamp(12px, 1.6vw, 18px);
}
.pf-hero__name {
  font: 600 clamp(3.2rem, 1rem + 9vw, 8rem)/0.92 var(--sans);
  letter-spacing: -0.045em;
  color: oklch(99% 0 0);
  margin: 0;
}
.pf-hero__tagline {
  margin-top: clamp(16px, 2vw, 24px);
  max-width: 34ch;
  font: 400 clamp(1.05rem, 0.9rem + 0.7vw, 1.5rem)/1.4 var(--sans);
  color: oklch(98% 0 0 / 0.92);
  text-wrap: balance;
}
.pf-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(26px, 4vh, 44px);
}
.pf-hero__loc {
  font-size: 0.92rem;
  color: oklch(98% 0 0 / 0.8);
}
.pf-hero__scroll {              /* quiet scroll hint */
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3vh, 30px);
  transform: translateX(-50%);
  z-index: 1;
  width: 1px;
  height: clamp(32px, 5vh, 52px);
  background: linear-gradient(oklch(98% 0 0 / 0), oklch(98% 0 0 / 0.7));
}

/* ---- Editorial statement ---------------------------------- */
.pf-statement {
  padding-block: clamp(72px, 12vh, 168px);
}
.pf-statement__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: start;
}
.pf-statement__lead {
  font: 500 clamp(1.8rem, 1rem + 3vw, 3.4rem)/1.08 var(--sans);
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.pf-statement__body {
  font-size: var(--text-lg);
  line-height: 1.62;
  color: var(--ash-1);
  max-width: 56ch;
  padding-top: 0.4em;
}
@media (max-width: 820px) {
  .pf-statement__inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ---- Photo-led space modules ------------------------------ */
.pf-spaces { display: flex; flex-direction: column; }

/* full-bleed cinematic space (caption overlaid) */
.pf-space--full {
  position: relative;
  min-height: clamp(440px, 84vh, 880px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.pf-space--full .pf-space__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pf-space--full::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(135% 100% at 50% 0%, transparent 42%, oklch(12% 0.01 250 / 0.32) 100%),
    linear-gradient(
    180deg,
    oklch(15% 0.01 250 / 0) 50%,
    oklch(12% 0.01 250 / 0.66) 100%
  );
}
.pf-space--full .pf-space__cap {
  padding-block: clamp(36px, 7vh, 72px);
  color: oklch(98% 0 0);
  max-width: 40ch;
}
.pf-space--full .pf-space__label { color: oklch(98% 0 0 / 0.85); }
.pf-space--full .pf-space__text {
  margin-top: 0.5em;
  font: 400 clamp(1.25rem, 0.9rem + 1.4vw, 2rem)/1.18 var(--sans);
  letter-spacing: -0.02em;
  color: oklch(99% 0 0);
  text-wrap: balance;
}

/* asymmetric split space (image + text on the paper canvas) */
.pf-space--split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
  padding-block: clamp(56px, 9vh, 128px);
}
.pf-space--split.pf-space--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.pf-space--split.pf-space--rev .pf-space__figure { order: 2; }
.pf-space__figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ash-2);
}
.pf-space__figure img {
  display: block;
  width: 100%;
  height: clamp(280px, 42vw, 560px);
  object-fit: cover;
}
.pf-space__label {
  display: block;
  margin-bottom: clamp(12px, 1.4vw, 18px);
}
.pf-space__num {
  font-variant-numeric: tabular-nums;
  color: var(--ash-2);
  margin-right: 0.7em;
}
.pf-space--split .pf-space__text {
  font: 400 clamp(1.4rem, 1rem + 1.4vw, 2.1rem)/1.16 var(--sans);
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.pf-space--split .pf-space__sub {
  margin-top: clamp(14px, 1.6vw, 20px);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--ash-1);
  max-width: 46ch;
}
@media (max-width: 820px) {
  .pf-space--split,
  .pf-space--split.pf-space--rev { grid-template-columns: 1fr; gap: 20px; padding-block: 48px; }
  .pf-space--split.pf-space--rev .pf-space__figure { order: 0; }
  .pf-space__figure img { height: clamp(240px, 64vw, 420px); }
}

/* ---- Dark twilight break (full-bleed quote moment) -------- */
.pf-break {
  position: relative;
  min-height: clamp(420px, 76vh, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.pf-break__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pf-break::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: oklch(16% 0.01 250 / 0.52);
}
.pf-break__quote {
  max-width: 24ch;
  font: 400 clamp(1.6rem, 1rem + 2.4vw, 3rem)/1.16 var(--sans);
  letter-spacing: -0.03em;
  color: oklch(99% 0 0);
  text-wrap: balance;
}

/* ---- Servizi (typographic, no cards) ---------------------- */
.pf-services { padding-block: clamp(64px, 11vh, 152px); }
.pf-services__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6em clamp(16px, 3vw, 40px);
  margin-bottom: clamp(32px, 5vh, 64px);
}
.pf-services__title {
  font: 600 var(--text-2xl)/1 var(--sans);
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.pf-services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.pf-services__item {
  padding: clamp(14px, 1.4vw, 20px) 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.02rem;
  color: var(--ink);
  margin-right: clamp(16px, 2vw, 32px);
}
.pf-services__req {
  margin-top: clamp(26px, 4vh, 44px);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--ash-1);
  max-width: 64ch;
}
.pf-services__req strong { color: var(--ink); font-weight: 600; }

@media (max-width: 600px) {
  .pf-services__grid { grid-template-columns: 1fr; }
  .pf-services__item { margin-right: 0; }
}

/* ---- Intorno / place (photo-led location) ----------------- */
.pf-place { padding-block: clamp(64px, 11vh, 152px) clamp(56px, 9vh, 120px); }
.pf-place__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(36px, 6vh, 72px);
}
.pf-place__eyebrow { margin-bottom: clamp(12px, 1.4vw, 18px); }
.pf-place__title {
  font: 600 clamp(2rem, 1rem + 3.2vw, 3.6rem)/1.02 var(--sans);
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.pf-place__body {
  font-size: var(--text-lg);
  line-height: 1.62;
  color: var(--ash-1);
  max-width: 52ch;
}
.pf-place__figure { margin: 0 0 clamp(36px, 6vh, 72px); }
.pf-place__figure img {
  display: block;
  width: 100%;
  height: clamp(300px, 42vw, 560px);
  object-fit: cover;
}
.pf-place__cap {
  display: block;
  margin-top: clamp(10px, 1.2vw, 16px);
  font-size: 0.92rem;
  color: var(--ash-2);
}
.pf-place__list {
  list-style: none;
  margin-block: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(32px, 6vw, 96px);
  border-top: 1px solid var(--line);
}
.pf-place__row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: clamp(13px, 1.5vw, 19px) 0;
}
/* La rotta in miniatura: il tratteggio congiunge il luogo alla sua distanza */
.pf-place__row::after {
  content: '';
  order: 1;
  flex: 1 1 2ch;
  min-width: 2ch;
  border-bottom: 1px dashed color-mix(in oklch, var(--ash-2) 70%, transparent);
  transform: translateY(-0.3em);
}
.pf-place__where { order: 0; }
.pf-place__dist  { order: 2; text-align: right; }
.pf-place__where { color: var(--ink); font-size: 1.04rem; }
.pf-place__dist {
  color: var(--ash-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 820px) {
  /* allineato al collasso di .pf-space--split: a ~768 le due colonne
     dell'header restano troppo strette per il titolo */
  .pf-place__head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
}
@media (max-width: 760px) {
  .pf-place__list { grid-template-columns: 1fr; }
}

/* ---- Grand Tour cross-sell — tighten on property pages ----- */
.cv-xsell { padding-block: clamp(64px, 10vh, 132px) clamp(40px, 6vh, 72px); }
.cv-xsell__inner { align-items: center; }

/* ---- Photo finale (booking close) ------------------------- */
.pf-finale {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(520px, 82vh, 780px);
  padding: clamp(72px, 12vh, 140px) clamp(24px, 5vw, 64px);
}
.pf-finale__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pf-finale::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, oklch(15% 0.01 250 / 0.5), oklch(11% 0.01 250 / 0.72));
}
.pf-finale__eyebrow { color: oklch(98% 0 0 / 0.82); }
.pf-finale__title {
  font: 600 clamp(2.2rem, 1rem + 3.6vw, 4rem)/1 var(--sans);
  letter-spacing: -0.035em;
  color: oklch(99% 0 0);
  margin: 0.45em 0 0;
  text-wrap: balance;
}
.pf-finale__sub {
  margin-top: clamp(14px, 2vh, 22px);
  max-width: 48ch;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: oklch(98% 0 0 / 0.86);
  text-wrap: balance;
}
.pf-finale__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(28px, 4vh, 46px);
}
.pf-finale .cv-btn--ghost {
  color: oklch(98% 0 0);
  border-color: oklch(98% 0 0 / 0.4);
  background: transparent;
}
.pf-finale .cv-btn--ghost:hover { border-color: oklch(98% 0 0 / 0.85); }

/* ============================================================
   MOBILE — il respiro verticale da desktop (vh) diventa buco
   su colonna stretta: si stringe il ritmo tra le sezioni.
   ============================================================ */
@media (max-width: 600px) {
  .pf-statement { padding-block: 56px; }
  .pf-services { padding-block: 56px; }
  .pf-place { padding-block: 56px 48px; }
  .cv-xsell { padding-block: 56px 44px; }
  .pf-space--split { padding-block: 48px; }
  .pf-services__head { margin-bottom: 28px; }
  .pf-place__head { margin-bottom: 30px; }
  .pf-place__figure { margin-bottom: 30px; }
}