/* Hallmark · genre: editorial · macrostructure: Split Studio · theme: custom (whitewash coast) · enrichment: real photography · nav: N3 side-rail (vertical link list) · footer: Ft5 statement · tone: quiet, airy · anchor hue: 228 sea
 * Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V5
 */
html, body { overflow-x: clip; }
body { background: var(--color-paper); color: var(--color-ink-2); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--lh-body); }
a { color: var(--color-ink); text-underline-offset: 0.2em; transition: color var(--dur-micro) var(--ease-out); }
@media (hover: hover) { a:hover { color: var(--color-accent); } }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; font-style: normal; color: var(--color-ink); line-height: 1.05; letter-spacing: -0.01em; margin: 0; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; }

/* N3 side-rail: a top bar on phones, a fixed left rail on desktop */
.rail { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-lg); row-gap: var(--space-2xs); padding: var(--space-md) var(--page-gutter); border-bottom: 1px solid var(--color-rule); background: var(--color-paper); }
.rail__name { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1; color: var(--color-ink); text-decoration: none; }
.rail__place { font-size: var(--text-sm); color: var(--color-muted); }
.rail nav { flex-basis: 100%; }
.rail__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: var(--space-lg); }
.rail__nav a { display: inline-block; padding-block: var(--space-xs); text-decoration: none; white-space: nowrap; }
.rail__nav a[aria-current="page"] { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.35em; }
.rail__cta { display: none; }

main { display: grid; }

/* Split Studio rows */
.split { display: grid; gap: var(--space-lg); padding: var(--space-2xl) var(--page-gutter); align-items: center; }
.split + .split { padding-top: 0; }
.split__text { display: grid; gap: var(--space-md); max-width: var(--measure); }
.split__text h1 { font-size: var(--text-display-s); }
.split__text h2 { font-size: var(--text-lg); }
.split figure { margin: 0; }
.split img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-paper-2); }
.split--tint { background: var(--color-paper-2); padding-block: var(--space-2xl); }
.split + .split--tint { padding-top: var(--space-2xl); }
.lede { font-size: var(--text-md); color: var(--color-ink); line-height: 1.5; }
.chip {
  justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-xs) var(--space-lg);
  border: 1px solid var(--color-ink); border-radius: 999px; color: var(--color-ink); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) { .chip:hover { background: var(--color-ink); color: var(--color-accent-ink); } }
.chip:active { transform: translateY(1px); }

.facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xs) var(--space-lg); font-size: var(--text-sm); }
.facts dt { color: var(--color-muted); }
.facts dd { margin: 0; color: var(--color-ink); }
.price { font-family: var(--font-display); font-size: var(--text-md); color: var(--color-ink); }
.note { font-size: var(--text-sm); color: var(--color-muted); }

.places { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.places li { display: grid; gap: var(--space-2xs); border-top: 1px solid var(--color-rule); padding-top: var(--space-sm); }
.places strong { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--color-ink); }

.map-consent { background: var(--color-paper-2); }
.map-consent button { min-height: 44px; padding: var(--space-xs) var(--space-lg); border: 1px solid var(--color-ink); border-radius: 999px; background: transparent; color: var(--color-ink); cursor: pointer; }

.legal { padding: var(--space-2xl) var(--page-gutter); display: grid; gap: var(--space-lg); max-width: calc(var(--measure) + 2 * var(--page-gutter)); }
.legal h1 { font-size: var(--text-display-s); }
.legal h2 { font-size: var(--text-md); font-weight: 600; }
.legal section { display: grid; gap: var(--space-xs); }

/* Ft5 statement */
.foot { padding: var(--space-3xl) var(--page-gutter) var(--space-xl); display: grid; gap: var(--space-lg); }
.foot__line { font-family: var(--font-display); font-size: clamp(2rem, 4vw + 1rem, 3.6rem); line-height: 1; color: var(--color-ink); max-width: 18ch; }
.foot__meta { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.foot__meta a { color: var(--color-muted); white-space: nowrap; }

@media (min-width: 52rem) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); }
  .split--rev .split__text { order: 2; }
  .split--rev { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

@media (min-width: 64rem) {
  .frame { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); }
  .rail {
    position: sticky; top: 0; align-self: start; height: 100dvh;
    flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: var(--space-md);
    padding: var(--space-xl) var(--space-lg); border-bottom: 0; border-inline-end: 1px solid var(--color-rule);
  }
  .rail nav { flex-basis: auto; }
  .rail__nav { flex-direction: column; row-gap: var(--space-2xs); }
  .rail__cta { display: inline-block; margin-top: auto; white-space: nowrap; }
}

/* ── Richiesta preventivo ──────────────────────────────────── */
.split--form { align-items: start; }
.quote { display: grid; gap: var(--space-md); padding: var(--space-lg); background: var(--color-paper-2); border-radius: 18px; container-type: inline-size; }
.quote__row { display: grid; gap: var(--space-md); }
.quote__row[hidden] { display: none; }
.field { display: grid; gap: var(--space-2xs); min-width: 0; }
.field label { font-size: var(--text-sm); color: var(--color-ink); font-weight: 500; }
.field__hint { color: var(--color-muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-rule); border-radius: var(--radius-field);
  background: var(--color-paper); color: var(--color-ink); font: inherit;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.field textarea { min-height: 6rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-muted); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
.field [aria-invalid="true"] { border-color: var(--color-error); }
.field__error { min-height: 0; font-size: var(--text-sm); color: var(--color-error); }
.field__error:empty { display: none; }
.quote__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.quote__privacy { font-size: var(--text-sm); color: var(--color-muted); }
.chip--solid { background: var(--color-ink); color: var(--color-accent-ink); border-color: var(--color-ink); min-height: 48px; cursor: pointer; font: inherit; }
@media (hover: hover) { .chip--solid:hover { background: var(--color-accent); border-color: var(--color-accent); } }
.chip--solid:disabled { opacity: 0.6; cursor: progress; }
.quote__status { padding: var(--space-md); border-radius: var(--radius-field); background: var(--color-paper); border: 1px solid var(--color-accent); display: grid; gap: var(--space-xs); }
.quote__status:focus { outline: none; }
.quote__demo { font-size: var(--text-sm); color: var(--color-muted); }
/* Pairs sit side by side only when the form itself is wide enough for a date field. */
@container (min-width: 30rem) { .quote__row--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 36rem) { .quote { padding: var(--space-xl); } }