/* ==========================================================================
   Your Lake Como Home — design system
   Editorial, calm, photographic. Ivory ground, lake blue, charcoal, olive.
   ========================================================================== */

/* ---- Fonts (self-hosted, no third-party requests) ---- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-var-italic.woff2") format("woff2");
  font-weight: 300 600;
  font-style: italic;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {
  --ivory: #f6f3ec;
  --ivory-deep: #efeadf;
  --paper: #fdfcf9;
  --charcoal: #24292b;
  --ink-soft: #55605f;
  --lake: #33525f;
  --lake-deep: #223e49;
  --olive: #6d7050;
  --stone: #a89f8d;
  --line: #ddd5c6;
  --line-soft: #e8e2d6;
  --white: #fffdf9;
  /* Cool-toned tint of --lake, used only for the availability calendar's
     in-range nights. Deliberately blue rather than another shade of
     ivory/cream so it reads as clearly distinct from the calendar's warm
     background even where lightness is similar. */
  --lake-tint: #d7e0e2;

  --serif: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --w-text: 46rem;
  --w-content: 72rem;
  --w-wide: 86rem;

  --sp-section: clamp(4.5rem, 9vw, 8rem);
  --sp-gap: clamp(1.5rem, 3vw, 2.5rem);

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ---- Reset & base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--charcoal);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  /* Explicit, global OpenType configuration for the self-hosted Fraunces
     variable font: standard ligatures/kerning only (no stylistic
     alternates), optical size tracked automatically to the rendered
     font-size, and synthesis disabled so a browser never fakes a bold or
     italic style the font doesn't actually contain (which can visibly
     thicken and distort serif strokes, most noticeably on "f"). Inherited
     sitewide from this one rule rather than repeated per selector. */
  font-feature-settings: "liga" 1, "kern" 1;
  font-variant-ligatures: common-ligatures;
  font-optical-sizing: auto;
  font-synthesis: none;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  /* Fraunces' "opsz" (optical size) axis is what the type designer uses
     to shift letterforms toward its eccentric, high-contrast "display"
     cut -- at the large sizes headings render at, `font-optical-sizing:
     auto` (set globally on body) pushes opsz toward that end of its
     9-144 range, most visibly distorting the lowercase f/ff/fi/fl
     terminals. Pinning opsz near the font's own default (9) keeps the
     conventional, fully-formed letterforms at any heading size. */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 20;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.005em;
  margin: 0 0 1rem;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
}
h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
}
h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
}
h4 {
  font-size: 1.15rem;
  font-weight: 500;
}
p {
  margin: 0 0 1.1rem;
}
a {
  color: var(--lake);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.25s var(--ease);
}
a:hover {
  color: var(--lake-deep);
}
::selection {
  background: var(--lake);
  color: var(--ivory);
}
:focus-visible {
  outline: 2px solid var(--lake);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--charcoal);
  color: var(--white);
  padding: 0.7rem 1.2rem;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Layout helpers ---- */
.container {
  width: min(var(--w-content), 100% - 3rem);
  margin-inline: auto;
}
.container--wide {
  width: min(var(--w-wide), 100% - 3rem);
}
.container--text {
  width: min(var(--w-text), 100% - 3rem);
}
.section {
  padding-block: var(--sp-section);
}
.section--tight {
  padding-block: calc(var(--sp-section) * 0.62);
}
.section--alt {
  background: var(--ivory-deep);
}
.section--paper {
  background: var(--paper);
}

.kicker {
  display: block;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 1.1rem;
}
/* Small, discreet label introducing one photo group within a larger gallery
   section (e.g. Villa Larius interiors split by room type). Reuses .kicker's
   type scale so it stays visually subordinate to the section's own h2. */
.gallery-group-heading {
  margin-top: 3rem;
}
.lede {
  font-size: clamp(1.12rem, 1.6vw, 1.3rem);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: var(--w-text);
}
.center {
  text-align: center;
}
.center .lede {
  margin-inline: auto;
}
.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 1.9rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--charcoal);
  background: transparent;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.btn:hover {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--ivory);
}
.btn--solid {
  background: var(--lake);
  border-color: var(--lake);
  color: var(--ivory);
}
.btn--solid:hover {
  background: var(--lake-deep);
  border-color: var(--lake-deep);
  color: var(--ivory);
}
.btn--light {
  color: var(--white);
}
.btn--light:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--charcoal);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--charcoal);
}
.text-link svg {
  transition: transform 0.3s var(--ease);
}
.text-link:hover svg {
  transform: translateX(5px);
}

/* ---- Header ---- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease),
    color 0.35s var(--ease);
  color: var(--white);
}
.site-header .header-inner {
  width: min(var(--w-wide), 100% - 3rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.1rem;
}
.site-header.is-solid,
.site-header.is-static {
  position: fixed;
  background: rgba(246, 243, 236, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--charcoal);
  box-shadow: 0 1px 0 var(--line-soft);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}
.brand svg {
  flex: none;
}
.brand-name {
  font-family: var(--serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 20;
  font-size: 1.18rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.15;
}
.brand-name small {
  display: block;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.75;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
}
.site-nav a:not(.btn) {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 550;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.site-nav a:not(.btn):hover,
.site-nav a:not(.btn)[aria-current="page"] {
  border-bottom-color: currentColor;
}
.site-nav .btn {
  color: inherit;
  padding: 0.7rem 1.5rem;
}
.site-header.is-solid .site-nav .btn:hover,
.site-header.is-static .site-nav .btn:hover {
  background: var(--charcoal);
  color: var(--ivory);
}
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: inherit;
  padding: 0.5rem;
  cursor: pointer;
}

/* ---- Language switcher ---- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  margin-left: 0.3rem;
  padding-left: 1.1rem;
  border-left: 1px solid currentColor;
  border-image: linear-gradient(transparent 22%, currentColor 22%, currentColor 78%, transparent 78%) 1;
}
.lang-switch a {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  padding: 0.35rem 0.45rem;
  border-bottom: 1px solid transparent;
  opacity: 0.62;
  transition: opacity 0.25s var(--ease), border-color 0.25s var(--ease);
}
.lang-switch a:hover {
  opacity: 1;
  border-bottom-color: transparent;
}
.lang-switch a[aria-current="true"] {
  opacity: 1;
  border-bottom-color: currentColor;
}
.lang-switch abbr {
  text-decoration: none;
  border: 0;
  cursor: inherit;
}

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 92svh;
  display: grid;
  align-items: end;
  color: var(--white);
  isolation: isolate;
}
.hero--short {
  min-height: 64svh;
}
.hero picture,
.hero > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}
.hero picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(18, 28, 33, 0.62) 0%,
    rgba(18, 28, 33, 0.18) 45%,
    rgba(18, 28, 33, 0.3) 100%
  );
}
.hero-content {
  width: min(var(--w-wide), 100% - 3rem);
  margin-inline: auto;
  padding-block: clamp(3.5rem, 8vh, 6.5rem);
}
.hero-content .kicker {
  color: rgba(255, 253, 249, 0.85);
}
.hero h1 {
  max-width: 15em;
  margin-bottom: 1.2rem;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}
.hero .lede {
  color: rgba(255, 253, 249, 0.92);
  max-width: 36rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
.hero-meta {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 253, 249, 0.35);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 253, 249, 0.85);
}

/* ---- Feature trio ---- */
.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
}
.trio-item {
  text-align: center;
  padding-inline: 0.5rem;
}
.trio-item svg {
  margin-inline: auto;
  margin-bottom: 1.3rem;
  color: var(--lake);
}
.trio-item h3 {
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}
.trio-item p {
  color: var(--ink-soft);
  font-size: 0.98rem;
  margin: 0;
}

/* ---- Panorama with floating card ---- */
.panorama {
  position: relative;
}
.panorama picture img {
  width: 100%;
  height: clamp(26rem, 62vh, 38rem);
  object-fit: cover;
}
/* The gravedona photograph frames the town and bell tower between two tree
   trunks in the upper-middle of the frame, with lawn/loungers/wall as
   foreground. A plain centre crop pushes too much weight onto that
   foreground on short/wide containers (the homepage panorama band and the
   lake-como hero), so the vertical anchor is biased up toward the town;
   it's tightened further as those containers get relatively shorter on
   smaller screens. Matched by src rather than a template class so it
   applies wherever this exact image is reused. */
.hero picture img[src*="/gravedona-"],
.panorama picture img[src*="/gravedona-"] {
  object-position: 50% 35%;
}
@media (max-width: 64em) {
  .hero picture img[src*="/gravedona-"],
  .panorama picture img[src*="/gravedona-"] {
    object-position: 50% 32%;
  }
}
@media (max-width: 48em) {
  .hero picture img[src*="/gravedona-"],
  .panorama picture img[src*="/gravedona-"] {
    object-position: 50% 30%;
  }
}

.panorama-card {
  position: relative;
  background: var(--paper);
  padding: clamp(1.8rem, 3.5vw, 3rem) clamp(1.6rem, 3.5vw, 3.2rem);
  width: min(34rem, calc(100% - 3rem));
  margin: -7rem auto var(--sp-section);
  box-shadow: 0 24px 60px -30px rgba(34, 62, 73, 0.35);
}
@media (min-width: 62em) {
  .panorama-card {
    margin-left: clamp(3rem, 10vw, 10rem);
    margin-top: -11rem;
  }
}

/* ---- Property cards ---- */
.homes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.8rem, 3.5vw, 3rem);
}
.home-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.home-card figure {
  margin: 0 0 1.2rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ivory-deep);
}
.home-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.home-card:hover img {
  transform: scale(1.035);
}
.home-card .kicker {
  margin-bottom: 0.4rem;
}
.home-card h3 {
  margin-bottom: 0.35rem;
  transition: color 0.3s var(--ease);
}
.home-card:hover h3 {
  color: var(--lake);
}
.home-card .meta {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0 0 0.8rem;
}
.home-card .text-link {
  font-size: 0.78rem;
}

/* ---- Steps ---- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: 1.6rem;
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 20;
  font-style: italic;
  font-size: 1rem;
  color: var(--stone);
  letter-spacing: 0.06em;
}
.step h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.step p {
  color: var(--ink-soft);
  font-size: 0.98rem;
  margin: 0;
}

/* ---- Host band ---- */
.host-band {
  background: var(--lake-deep);
  color: rgba(255, 253, 249, 0.92);
}
.host-band .kicker {
  color: var(--stone);
}
.host-band h2 {
  color: var(--white);
}
.host-band blockquote {
  margin: 0;
  font-family: var(--serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 20;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.5;
  max-width: 42rem;
}
.host-band .attribution {
  margin-top: 1.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
}
.contact-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.2rem;
}

/* ---- Split sections (image + text) ---- */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.split--flip > .split-media {
  order: 2;
}
.split-media {
  overflow: hidden;
}
.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split-body .lede {
  font-size: 1.08rem;
}

/* ---- "Le nostre case" listing cards ----
   The alternating split--flip layout paired with asymmetric 1.05fr/0.95fr
   columns meant the photo got the larger share on two cards and the
   smaller share on the other two (whichever side landed in track 1). Equal
   columns make all four cards consistent, a fixed aspect-ratio keeps every
   photo the same shape regardless of how long that property's summary text
   runs, and the heading/lede are trimmed slightly so type doesn't compete
   with the photograph for attention. */
.listing-split {
  grid-template-columns: 1fr 1fr;
}
.listing-split .split-media {
  aspect-ratio: 4 / 3;
}
.listing-split .split-body h2 {
  font-size: clamp(1.6rem, 2.3vw, 2.15rem);
}
.listing-split .split-body .lede {
  font-size: 1.02rem;
  max-width: 34rem;
}

/* ---- Fact strip / amenity chips ---- */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-block: 2rem;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.facts strong {
  color: var(--charcoal);
  font-weight: 600;
}
.facts--pair {
  gap: 0.5rem 3.5rem;
}
.facts--pair strong {
  font-size: 1.1em;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0;
  margin: 1.2rem 0 0;
  list-style: none;
}
.chips li {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.38rem 0.95rem;
  background: var(--paper);
}

/* ---- Apartment blocks ---- */
.apartment {
  padding-block: var(--sp-section);
  border-top: 1px solid var(--line);
}
.apartment:first-of-type {
  border-top: 0;
}
.apartment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.apartment-head .capacity {
  font-family: var(--serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 20;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.apartment-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.apartment-info p {
  color: var(--ink-soft);
}
.spec-list {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.spec-list li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.95rem;
}
.spec-list .label {
  color: var(--ink-soft);
}
.spec-list .value {
  text-align: right;
  font-weight: 550;
}

/* ---- Galleries ---- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 12rem;
  grid-auto-flow: dense;
  gap: 0.9rem;
}
.gallery--two {
  grid-template-columns: repeat(2, 1fr);
}
.gallery a {
  display: block;
  overflow: hidden;
  grid-row: span 1;
  background: var(--ivory-deep);
}
.gallery a.tall {
  grid-row: span 2;
}
.gallery a.wide {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease), opacity 0.4s var(--ease);
}
.gallery a:hover img {
  transform: scale(1.04);
}
/* Shared-spaces gallery (Casa Artis "Condivisi da tutti"): on the narrowest
   phones a 2-column grid squeezes portrait "tall" photos too hard, so this
   variant drops to one column with a fixed aspect ratio instead of forcing
   the auto-rows crop. */
@media (max-width: 34em) {
  .gallery--shared {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 0.9rem;
  }
  .gallery--shared a,
  .gallery--shared a.tall,
  .gallery--shared a.wide {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
}

/* ---- Lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20, 26, 29, 0.94);
  padding: 3.5rem 1rem 4.5rem;
}
.lightbox.is-open {
  display: flex;
}
.lightbox img {
  max-width: min(92vw, 78rem);
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.lightbox-caption {
  position: absolute;
  bottom: 1.4rem;
  inset-inline: 0;
  text-align: center;
  color: rgba(255, 253, 249, 0.75);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}
.lightbox button {
  position: absolute;
  background: none;
  border: 0;
  color: rgba(255, 253, 249, 0.85);
  cursor: pointer;
  padding: 0.8rem;
  transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}
.lightbox button:hover {
  color: #fff;
  transform: scale(1.08);
}
.lightbox .lb-close {
  top: 0.8rem;
  right: 0.8rem;
}
.lightbox .lb-prev {
  left: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox .lb-next {
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox .lb-prev:hover,
.lightbox .lb-next:hover {
  transform: translateY(-50%) scale(1.08);
}

/* ---- Availability note ---- */
.availability-note {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: grid;
  gap: 0.4rem;
  max-width: 46rem;
}
.availability-note h3 {
  margin-bottom: 0.3rem;
}
.availability-note p {
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
}

/* ---- Forms ---- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.3rem 1.6rem;
}
.form-field {
  display: grid;
  gap: 0.4rem;
}
.form-field--full {
  grid-column: 1 / -1;
}
.form-field label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  color: var(--charcoal);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.78rem 0.9rem;
  width: 100%;
  transition: border-color 0.25s var(--ease);
}
.form-field textarea {
  resize: vertical;
  min-height: 7.5rem;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--lake);
  box-shadow: 0 0 0 1px var(--lake);
}
.form-consent {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.form-consent input {
  margin-top: 0.3rem;
  accent-color: var(--lake);
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
}
.form-field label.label--plain {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 0.92rem;
}
.form-note {
  font-size: 0.9rem;
  color: var(--ink-soft);
  border-left: 2px solid var(--olive);
  padding-left: 1rem;
}
.form-status {
  display: none;
  border: 1px solid var(--line);
  background: var(--ivory-deep);
  padding: 1.4rem 1.6rem;
  font-size: 0.97rem;
}
.form-status.is-visible {
  display: block;
}
.form-status p {
  margin: 0;
}
.form-status.is-success {
  border-color: var(--lake);
}
.form-status.is-error {
  border-color: #8c3b2e;
}
.form-status .contact-inline {
  margin-top: 1rem;
}
/* Netlify Forms honeypot: hidden from every real visitor (sighted or
   using assistive tech) so only bots that blindly fill every field
   trip it -- never disable this by making it merely visually hidden.
   The `hidden` attribute in the markup is the primary defence (it hides
   the field even if this stylesheet fails to load or is served stale
   from cache); this rule is a second, independent guarantee that it
   takes up no space and cannot be tabbed into even if something
   overrides `hidden` elsewhere. */
.form-honeypot,
.form-honeypot[hidden] {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}
.field-hint {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.field-error {
  font-size: 0.85rem;
  color: #8c3b2e;
  display: none;
}
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: #8c3b2e;
}
.form-field.has-error .field-error {
  display: block;
}

/* ---- Contact cards ---- */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.contact-card {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 1.8rem 1.6rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.contact-card:hover {
  border-color: var(--lake);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(34, 62, 73, 0.4);
}
.contact-card svg {
  color: var(--lake);
}
.contact-card .label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.contact-card .value {
  font-family: var(--serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 20;
  font-size: 1.15rem;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--lake-deep);
  color: rgba(255, 253, 249, 0.8);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 2.5rem;
  font-size: 0.95rem;
}
.site-footer a {
  color: rgba(255, 253, 249, 0.92);
  text-decoration: none;
}
.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 2.8rem;
  border-bottom: 1px solid rgba(255, 253, 249, 0.18);
}
.footer-grid h4 {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1rem;
}
.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.footer-brand .brand {
  color: #fff;
  margin-bottom: 1rem;
}
.footer-brand p {
  max-width: 22rem;
  font-size: 0.92rem;
  line-height: 1.7;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem 2rem;
  padding-top: 1.8rem;
  font-size: 0.82rem;
  color: rgba(255, 253, 249, 0.55);
}
.footer-bottom a {
  color: rgba(255, 253, 249, 0.7);
}

/* ---- Page hero (interior pages) ---- */
.page-head {
  padding-top: clamp(7rem, 14vh, 9.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.breadcrumb {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.6rem;
}
.breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--lake);
  text-decoration: underline;
}

/* ---- Reveal on scroll (hidden state only when JS is running) ---- */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* The horizontal nav has to hold four labels, a button and the language
   switcher. German and Italian labels are markedly longer than English
   (measured: EN needs ~1166px of viewport, IT ~1266px, DE ~1258px), so the
   row is tightened here and collapses into the menu below 74em for all
   languages alike — one breakpoint, no language-specific layout. */
@media (min-width: 74.001em) and (max-width: 86em) {
  .site-nav {
    gap: 1.15rem;
  }
  .site-nav a:not(.btn) {
    letter-spacing: 0.08em;
  }
  .site-nav .btn {
    padding: 0.7rem 1.15rem;
    letter-spacing: 0.08em;
  }
  .lang-switch {
    margin-left: 0.1rem;
    padding-left: 0.7rem;
  }
}
.brand-name,
.site-nav a:not(.btn),
.site-nav .btn {
  white-space: nowrap;
}

/* ---- Collapsed navigation ---- */
@media (max-width: 74em) {
  /* backdrop-filter would make the header a containing block for the fixed
     nav overlay, so it is disabled wherever the overlay is used. */
  .site-header.is-solid,
  .site-header.is-static {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(246, 243, 236, 0.98);
  }
  .nav-toggle {
    display: inline-flex;
    position: relative;
    z-index: 95;
  }
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 90;
    flex-direction: column;
    justify-content: center;
    gap: 1.8rem;
    background: var(--ivory);
    color: var(--charcoal);
    transform: translateY(-102%);
    transition: transform 0.45s var(--ease);
  }
  .site-nav.is-open {
    transform: none;
  }
  .site-nav a:not(.btn) {
    font-size: 1rem;
  }
  .site-header.nav-open {
    background: var(--ivory);
    color: var(--charcoal);
    box-shadow: none;
  }
  /* In the overlay the switcher sits below the links, not beside them */
  .site-nav .lang-switch {
    margin-left: 0;
    padding-left: 0;
    padding-top: 1.6rem;
    border-left: 0;
    border-image: none;
    border-top: 1px solid var(--line);
    gap: 0.6rem;
  }
  .site-nav .lang-switch a {
    font-size: 0.85rem;
    opacity: 0.75;
  }
}

@media (max-width: 64em) {
  .split,
  .apartment-grid {
    grid-template-columns: 1fr;
  }
  .split--flip > .split-media {
    order: 0;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 11rem;
  }
}
@media (max-width: 48em) {
  body {
    font-size: 1rem;
  }
  .trio,
  .steps,
  .homes-grid,
  .contact-cards,
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-field--full {
    grid-column: auto;
  }
  .hero {
    min-height: 86svh;
  }
  .hero-meta {
    gap: 0.5rem 1.4rem;
    font-size: 0.78rem;
  }
  .gallery {
    grid-auto-rows: 9.5rem;
    gap: 0.6rem;
  }
  .panorama-card {
    margin-top: -4.5rem;
  }
}
@media (max-width: 34em) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .facts {
    gap: 0.4rem 1.2rem;
    font-size: 0.82rem;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---- Homepage: a few sections have empty content by design in all
   three languages (hero-meta down to one message, homepage intro title
   removed, booking section keeps only its heading, no kicker/lede).
   These selectors are unique to the homepage template, so this is safe
   without a :lang() scope. ---- */
.hero-meta span:empty {
  display: none;
}
#homes-heading:empty {
  display: none;
}
[aria-labelledby="how-heading"] > .container > .reveal:first-child > .kicker:empty,
[aria-labelledby="how-heading"] > .container > .reveal:first-child > .lede:empty {
  display: none;
}

/* ---- Lago di Como: "La vita a Gravedona" editorial photo group ----
   Sits in a wider container than a plain .split, and gives the photo
   column more share than the text column (reversing .split's usual
   1.05fr/0.95fr text-first balance) with a tighter gap, so the group reads
   as a large showcase rather than a sidebar of thumbnails. */
.gravedona-split {
  grid-template-columns: 0.85fr 1.3fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 64em) {
  .gravedona-split {
    grid-template-columns: 1fr;
  }
}
/* gravedona-giorno runs large across both rows on the left; tramonto and
   gravedona-fuochi stack beside it on the right, sized so the pair's
   combined height lands close to the big photo's, keeping the whole group
   gap-free and roughly level with the text column beside it. Each cell
   keeps an aspect-ratio close to that photo's own native ratio, so the
   crop needed to fill the cell stays light rather than "excessive". Still
   marked up with .gallery so the lightbox script picks the links up; every
   sizing property .gallery sets for its usual fixed-row crop is overridden
   here. */
.gravedona-photos {
  grid-template-columns: 2.8fr 1fr;
  grid-auto-rows: auto;
  gap: 0.9rem;
}
.gravedona-photos a:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / 3;
  aspect-ratio: 4 / 3;
}
.gravedona-photos a:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
  aspect-ratio: 4 / 3;
}
.gravedona-photos a:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
  aspect-ratio: 3 / 4;
}
.gravedona-photos img {
  height: 100%;
}
@media (max-width: 34em) {
  /* Narrow phones: the sidebar column would shrink too far to read either
     photo, so drop back to a single readable column instead. */
  .gravedona-photos {
    grid-template-columns: 1fr;
  }
  .gravedona-photos a:nth-child(1),
  .gravedona-photos a:nth-child(2),
  .gravedona-photos a:nth-child(3) {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: auto;
  }
  .gravedona-photos img {
    height: auto;
  }
}

/* ---- Lago di Como: "Verso le montagne" single-row gallery ----
   All four photos are portrait; the default dense auto-flow mixed with
   "tall" left a stray empty cell (the reported gap). A fixed, non-dense
   grid with a shared aspect-ratio close to the photos' own keeps all four
   evenly sized, aligned and gap-free, with only a light, uniform crop.
   Four in a row at the same per-photo width the 2x2 version had (~16.5rem
   each); narrower screens step down to 2 columns, then 1, before that
   width would get uncomfortably squeezed. */
.gallery--mountains {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  max-width: 70rem;
  margin-inline: auto;
}
.gallery--mountains a {
  grid-column: auto;
  grid-row: auto;
  aspect-ratio: 3 / 4;
}
.gallery--mountains img {
  height: 100%;
}
@media (max-width: 48em) {
  .gallery--mountains {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 34em) {
  .gallery--mountains {
    grid-template-columns: 1fr;
  }
}

/* ---- Availability calendar (contact form) ----
   Flat, bordered box matching the rest of the form (no radius, paper
   background), a 7-column day grid, and disabled/selected/in-range states
   for the dates. Hidden entirely until a bookable unit is chosen in the
   property select. */
.availability-calendar {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(1.2rem, 2.5vw, 1.6rem);
  display: grid;
  gap: 0.8rem;
}
.availability-calendar[hidden] {
  display: none;
}
.availability-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.availability-calendar-title {
  font-family: var(--serif);
  font-optical-sizing: none;
  font-variation-settings: "opsz" 20;
  font-size: 1.05rem;
  text-transform: capitalize;
}
.availability-nav {
  background: var(--ivory);
  border: 1px solid var(--line);
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--charcoal);
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}
.availability-nav:hover {
  border-color: var(--lake);
}
.availability-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
}
.cal-weekday {
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-block: 0.2rem;
}
.cal-day {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.86rem;
  background: var(--ivory);
  border: 1px solid transparent;
  border-radius: 0.4rem;
  color: var(--charcoal);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.cal-day--empty {
  visibility: hidden;
  cursor: default;
}
.cal-day:hover:not(:disabled) {
  border-color: var(--lake);
}
/* Check-in/check-out: the darker, solid selected color. */
.cal-day--selected {
  background: var(--lake);
  color: var(--white);
}
/* Every night between check-in and check-out: a lighter tint of the same
   lake color, so the whole stay reads as one coherent range anchored by
   the two darker endpoint days -- clearly distinct from the plain ivory
   background/available days, from unavailable (struck-through) days, and
   from the darker selected endpoints. */
.cal-day--inrange {
  background: var(--lake-tint);
  color: var(--charcoal);
}
.cal-day--disabled {
  background: transparent;
  color: var(--stone);
  text-decoration: line-through;
  cursor: not-allowed;
}
.availability-calendar-legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0;
}
.availability-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  flex: none;
}
.availability-dot--busy {
  background: var(--stone);
}
.availability-calendar-status {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0;
}