/* ==========================================================================
   La Sicilia in un Sogno — Design System
   Hero/carousel language: Masseria Moroseta
   Body/typography/pacing: Passalacqua
   Architecture: portal home + 2 property mini-sites (B&B / Casa Vacanza)
   ========================================================================== */

:root {
  --color-bg: #f6f1e8;
  --color-bg-alt: #efe6d6;
  --color-panel: #ffffff;
  --color-ink: #211d17;
  --color-ink-soft: #5a5245;
  --color-ink-faint: #948a78;
  --color-terracotta: #b5562b;
  --color-terracotta-deep: #8f4220;
  --color-sea: #2c4a52;
  --color-sea-deep: #1c3238;
  --color-olive: #6c6a41;
  --color-line: rgba(33, 29, 23, 0.14);
  --color-line-soft: rgba(33, 29, 23, 0.08);
  --color-white: #ffffff;

  --font-display: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --font-body: "Newsreader", "Iowan Old Style", "Georgia", serif;
  --font-ui: "Inter", "Helvetica Neue", Arial, sans-serif;

  --container-max: 1320px;
  --gutter: clamp(24px, 5vw, 96px);
  --section-space: clamp(56px, 7vw, 104px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
main { display: block; }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  font-weight: 600;
}
.eyebrow.on-dark { color: #e2ab8a; }

.section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-top: 18px;
}

.section-lede {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--color-ink-soft);
  line-height: 1.55;
  max-width: 620px;
  margin-top: 24px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 16px 30px;
  border: 1px solid currentColor;
  border-radius: 2px;
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color .35s;
}
.btn-primary {
  background: var(--color-terracotta);
  border-color: var(--color-terracotta);
  color: var(--color-white);
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--color-terracotta-deep); border-color: var(--color-terracotta-deep); }
.btn-sea { background: var(--color-sea); border-color: var(--color-sea); color: var(--color-white); }
.btn-sea:hover, .btn-sea:focus-visible { background: var(--color-sea-deep); border-color: var(--color-sea-deep); }
.btn-outline { background: transparent; color: var(--color-ink); }
.btn-outline:hover, .btn-outline:focus-visible { background: var(--color-ink); color: var(--color-bg); }
.btn-outline.on-dark { color: var(--color-white); }
.btn-outline.on-dark:hover, .btn-outline.on-dark:focus-visible { background: var(--color-white); color: var(--color-ink); }
.btn-arrow { transition: transform 0.35s var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn:focus-visible { outline: 2px solid var(--color-terracotta); outline-offset: 3px; }

/* Text-only editorial link: for browsing/navigation moves. Reserve the boxed
   .btn for real commerce actions (Prenota) so hierarchy is legible at a glance. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: currentColor;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  transition: opacity .3s var(--ease-out);
}
.link-arrow .btn-arrow { transition: transform 0.35s var(--ease-out); }
.link-arrow:hover { opacity: .68; }
.link-arrow:hover .btn-arrow { transform: translateX(4px); }
.link-arrow:focus-visible { outline: 2px solid var(--color-terracotta); outline-offset: 4px; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 28px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-white);
  transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out), padding 0.4s var(--ease-out), backdrop-filter .4s;
}
.site-header.is-scrolled,
.site-header.is-static {
  background: rgba(246, 241, 232, 0.92);
  backdrop-filter: blur(10px);
  color: var(--color-ink);
  padding-block: 18px;
  border-bottom: 1px solid var(--color-line-soft);
}
/* True center regardless of how wide each side's nav content is —
   flex space-between alone shifts this toward whichever side is narrower. */
.brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.04em;
  line-height: 1.15;
}
.brand > span { text-align: center; }
.brand-logo {
  width: 42px; height: 42px; flex-shrink: 0;
  /* Logo art is flat grey line work — recolor to solid white to match the
     header's white text over a photo hero, then drop the filter once the
     header goes opaque (.is-scrolled/.is-static) so it shows its natural
     grey against the cream background, same switch the text color makes. */
  filter: brightness(0) invert(1);
  transition: filter 0.4s var(--ease-out);
}
.site-header.is-scrolled .brand-logo,
.site-header.is-static .brand-logo { filter: none; }
.brand small {
  display: block;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 4px;
}
.nav-side { display: flex; align-items: center; gap: 28px; }
.nav-links {
  display: flex;
  gap: 30px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* li's hit-area stretches through the visual gap below it (padding pushes the
   box down without shifting layout, thanks to the matching negative margin),
   so hovering from the trigger word into the dropdown never breaks contact —
   no need to pull the dropdown box up into the trigger to "bridge" a gap. */
.nav-links li { position: relative; padding-bottom: 22px; margin-bottom: -22px; }
.nav-links a { position: relative; padding-bottom: 4px; }
.nav-links a::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: currentColor;
  transition: right 0.35s var(--ease-out);
}
.nav-links a:hover::after, .nav-links a:focus-visible::after { right: 0; }
.nav-links .sub-menu {
  /* top:100% already lands at the *padded* bottom of the trigger <li> (see
     the li's own padding-bottom above) — that padding IS the visual gap.
     No margin-top here: stacking one on top of the other doubles the gap
     into a dead zone the pointer crosses with nothing hoverable under it,
     which is exactly what closed the menu before reaching a submenu item. */
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-6px);
  background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--color-ink);
  width: max-content; min-width: 140px; max-width: 200px; padding: 10px 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(20,17,12,0.14);
  /* opacity/pointer-events only — no visibility toggle. Toggling visibility
     drops the element from paint while hidden, so backdrop-filter's blur
     layer has to be built fresh on the first frame it opens, which stalls
     that frame and reads as a stutter before the rest of the transition
     catches up. Keeping it always painted (just transparent) keeps that
     layer warm so the open animation runs smooth from frame one. */
  opacity: 0; pointer-events: none;
  will-change: opacity, transform;
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.nav-links li:hover .sub-menu,
.nav-links li:focus-within .sub-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-links .sub-menu a { display: block; padding: 9px 22px; letter-spacing: 0.08em; white-space: nowrap; }
.nav-links .sub-menu a::after { display: none; }
.nav-links .sub-menu a:hover { background: rgba(181, 86, 43, 0.1); }
.nav-lang { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.08em; display: flex; align-items: center; gap: 3px; }
.nav-lang li { list-style: none; display: flex; align-items: center; }
.nav-lang li + li::before { content: "/"; margin-right: 3px; opacity: 0.35; }
.nav-lang a { display: inline-block; padding: 4px 2px; text-transform: uppercase; opacity: 0.55; transition: opacity .2s ease; }
.nav-lang a:hover { opacity: 0.85; }
.nav-lang a[aria-current="true"] { opacity: 1; font-weight: 600; }
.nav-toggle { display: none; }

/* ---------- Mobile nav drawer ----------
   .nav-links and .nav-side-right stay as separate elements (desktop's flex
   layout needs them that way) but tile into one full-screen panel on mobile
   when .site-header.nav-open is set: nav-links takes the top ~70%, the
   language/social row pins to the bottom, same background so the seam is
   invisible. Submenus lose :hover on touch, so they render always-expanded
   inline instead of as a hover flyout. */
@media (max-width: 760px) {
  .nav-toggle { position: relative; z-index: 210; color: inherit; }

  /* .is-scrolled/.is-static put backdrop-filter on the header — a filter on
     an ancestor makes it the containing block for position:fixed
     descendants (same as transform does), so once scrolled, the "fixed"
     full-screen nav panel below stopped anchoring to the viewport and
     anchored to the header's own (header-sized) box instead, clipping to
     roughly header height and sitting behind the rest of the page. Dropping
     the filter while the panel is open removes that broken containing
     block — the frosted-glass effect isn't visible anyway once the
     full-screen panel covers it. */
  .site-header.nav-open { color: var(--color-white); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-header.nav-open .brand { visibility: hidden; }

  .site-header.nav-open .nav-links {
    display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
    position: fixed; top: 0; left: 0; right: 0; bottom: 30%; z-index: 200;
    background: var(--color-ink); padding: 100px 32px 24px;
    font-size: 21px; letter-spacing: 0.04em;
  }
  .site-header.nav-open .nav-links > li { position: static; }
  .site-header.nav-open .nav-links > li > a { display: block; padding: 12px 0; min-height: 44px; }
  .site-header.nav-open .nav-links a::after { display: none; }
  .site-header.nav-open .nav-links .sub-menu {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    background: transparent; border: none; box-shadow: none; backdrop-filter: none;
    padding: 0 0 8px 18px; margin: 0; min-width: 0; max-width: none; width: auto;
  }
  .site-header.nav-open .nav-links .sub-menu a { font-size: 15px; color: rgba(246,241,232,0.68); padding: 8px 0; min-height: 40px; }

  .site-header.nav-open .nav-side-right {
    display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; height: 30%;
    background: var(--color-ink); padding: 0 32px;
    border-top: 1px solid rgba(246,241,232,0.14);
  }
  .site-header.nav-open .nav-lang { display: flex; font-size: 15px; }
  .site-header.nav-open .nav-social { display: flex; gap: 18px; }
  .site-header.nav-open .nav-social-link svg { width: 24px; height: 24px; }
  .site-header.nav-open .nav-social-tripadvisor-icon { width: 24px; height: 24px; }
}

/* ---------- Hero Carousel (Moroseta language) ---------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--color-ink);
}
.hero.hero-compact { height: 62svh; min-height: 420px; }
.hero-track { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.6s var(--ease-out), transform 7s linear;
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(160deg, #766a52 0%, #4c4433 55%, #2c2720 100%);
}
.hero-slide.tone-sea { background-image: linear-gradient(160deg, #4a6a72 0%, #2c4a52 55%, #1c3238 100%); }
.hero-slide.is-active { opacity: 1; transform: scale(1); z-index: 1; }
.hero-slide::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,17,12,.42) 0%, rgba(20,17,12,.06) 30%, rgba(20,17,12,.12) 62%, rgba(20,17,12,.58) 100%);
}
.hero-slide img, .hero-slide .ph-box { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-placeholder {
  position: absolute;
  bottom: 20px;
  left: 24px;
  z-index: 1;
  color: rgba(255,255,255,0.62);
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.1em;
}
.hero-placeholder span {
  display: inline-block;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,0.35);
}

.hero-content {
  position: relative; z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  color: var(--color-white);
  padding-bottom: clamp(56px, 8vw, 96px);
}
.hero-compact .hero-content { padding-bottom: clamp(40px, 6vw, 64px); }
.hero-kicker {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  opacity: 0.9;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(48px, 9vw, 116px);
  line-height: 0.98;
  margin-top: 20px;
  letter-spacing: -0.01em;
}
.hero-compact .hero-title { font-size: clamp(38px, 6vw, 72px); }
.hero-title em { font-style: italic; font-weight: 300; }
.hero-sub {
  margin-top: 20px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(16px, 1.8vw, 21px);
  opacity: 0.92;
}
.hero-actions { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

.hero-nav {
  position: absolute; top: 50%; z-index: 3;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  color: var(--color-white);
  opacity: 0;
  transition: opacity .4s var(--ease-out), background .3s;
}
.hero:hover .hero-nav, .hero:focus-within .hero-nav, .hero-nav:focus-visible { opacity: 0.75; }
.hero-nav:hover, .hero-nav:focus-visible { opacity: 1; background: rgba(255,255,255,0.12); }
.hero-nav.prev { left: clamp(16px, 3vw, 40px); }
.hero-nav.next { right: clamp(16px, 3vw, 40px); }

.hero-dots {
  position: absolute; bottom: 28px; left: 50%; z-index: 3;
  transform: translateX(-50%);
  display: flex; gap: 10px;
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}
.hero:hover .hero-dots, .hero:focus-within .hero-dots { opacity: 1; }
.hero-dots button {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.45);
  transition: background .3s, transform .3s;
}
.hero-dots button.is-active { background: var(--color-white); transform: scale(1.3); }

/* ---------- Breadcrumb (mini-site sub pages) ---------- */
.breadcrumb {
  padding-top: 132px;
  padding-bottom: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.breadcrumb a:hover { color: var(--color-terracotta); }

/* ---------- Property choice (portal home) ---------- */
.choice-grid {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
}
.choice-card {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
}
.choice-card:nth-child(2) { margin-top: clamp(28px, 5vw, 64px); aspect-ratio: 4/5; }
.choice-card .ph-box, .choice-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.choice-card::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,17,12,0.05) 0%, rgba(20,17,12,0.72) 100%);
}
.choice-card-body { position: relative; z-index: 2; padding: clamp(28px, 3.4vw, 48px); width: 100%; }
.choice-card-eyebrow { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; }
.choice-card-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 3.4vw, 46px); margin-top: 12px; }
.choice-card-desc { font-family: var(--font-body); font-style: italic; margin-top: 12px; max-width: 340px; opacity: 0.92; line-height: 1.5; }
.choice-card-cta { margin-top: 24px; }
.choice-card:hover .ph-box,
.choice-card:hover img { transform: scale(1.045); }
.choice-card .ph-box, .choice-card img { transition: transform 1.2s var(--ease-out); }

/* ---------- Intro (Passalacqua body language) ---------- */
.intro {
  padding-block: var(--section-space);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.intro.intro-reverse { grid-template-columns: 1.15fr 0.85fr; }
.intro.intro-reverse .intro-media { order: 2; }
.intro.intro-detail { grid-template-columns: 0.72fr 1fr; }
.intro.intro-detail .intro-media { margin-top: clamp(28px, 5vw, 64px); }
.intro-media { position: relative; }
.intro-media img, .intro-media .ph-box { border-radius: 2px; aspect-ratio: 4/5; width: 100%; height: auto; object-fit: cover; }
.intro-media .ph-box { aspect-ratio: 4/5; }
.intro-media .ph-tag {
  position: absolute; bottom: -22px; right: -22px;
  background: rgba(33, 29, 23, 0.88);
  border-left: 2px solid var(--color-terracotta);
  color: var(--color-bg);
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 20px;
  max-width: 220px;
  line-height: 1.5;
}
.intro.intro-reverse .ph-tag { right: auto; left: -22px; }
.intro-text p {
  font-family: var(--font-body);
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.65;
  color: var(--color-ink-soft);
}
.intro-text p + p { margin-top: 22px; }
.intro-text strong { color: var(--color-ink); font-weight: 500; }
.intro-signature {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.intro-signature .name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
}
.intro-signature .role {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
}

/* ---------- Placeholder photo block ---------- */
.ph-box {
  width: 100%; height: 100%;
  min-height: 220px;
  background: linear-gradient(160deg, #766a52 0%, #4c4433 55%, #2c2720 100%);
  display: flex; align-items: flex-end; justify-content: flex-start;
  color: rgba(255,255,255,0.7);
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  padding: 18px;
}
.ph-box.ph-light {
  background: linear-gradient(160deg, #e4d9c4, #cdbfa1);
  color: rgba(33,29,23,0.68);
}
.ph-box span {
  display: inline-block;
  padding-left: 11px;
  border-left: 1px solid rgba(255,255,255,0.4);
  line-height: 1.4;
}
.ph-box.ph-light span { border-left-color: rgba(33,29,23,0.35); }

/* ---------- Section frame ---------- */
.section { padding-block: var(--section-space); }
.section-alt { background: var(--color-bg-alt); }

/* ---------- Availability widget card ----------
   The <inr-be-widget> itself renders with its vendor's own internal styling
   (green theme, fixed field layout) we don't control — without a frame it
   floats as loose whitespace between sections instead of reading as a
   placed module. Bounded card, sized to content, not full-bleed. */
.availability-section { padding-block: clamp(32px, 4vw, 56px); }
.availability-card {
  /* Fills the container's full content width (matches every other section
     on the page) instead of an arbitrary narrower cap. The vendor widget's
     own fields don't stretch to fill available space (we don't control its
     internal CSS), so centering it here distributes the leftover width
     evenly instead of dumping it all on one side. */
  display: flex; justify-content: center;
  background: var(--color-panel); border: 1px solid var(--color-line);
  border-radius: 16px; padding: clamp(20px, 2.4vw, 28px);
  box-shadow: 0 10px 28px -12px rgba(20,17,12,0.12);
}
/* The vendor widget stacks its fields with a ".wGridVertical" class (their
   own naming — this is genuinely what they call it) that forces
   display:block. Overriding to a grid puts Period / Guests / coupon link /
   Search button in one row on desktop, matching the rest of this compact
   form instead of a tall stack. No shadow DOM on <inr-be-widget>, so this
   selector can reach in. */
.availability-card .wGrid.wGridVertical {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  align-items: end;
  gap: 14px 18px;
}
@media (max-width: 760px) {
  .availability-card .wGrid.wGridVertical { display: block; }
  /* The card is a flex container (to center the widget on desktop); flex
     items default to a min-width based on their own content, which let the
     "Ospiti" dropdown's un-wrapped "Adulti: 2  Bambini: 0  Camere: 1" button
     text push wider than the card and overflow past its edge on narrow
     screens. Letting the flex child actually shrink, plus wrapping that
     button's text instead of forcing it onto one line, keeps everything
     inside the card. */
  .availability-card { display: block; }
  .availability-card inr-be-widget,
  .availability-card .inr-be-w,
  .availability-card .container-fluid { min-width: 0; width: 100%; }
  .availability-card .btn.dropdown-toggle {
    white-space: normal; text-align: left; font-size: 13px; line-height: 1.5;
    /* Wrapping the text (above) doesn't grow the box on its own — the
       widget's own CSS sets a fixed height/line-height for this button, so
       wrapped lines just overflowed past its edges. Overriding height to
       auto and giving it real vertical padding lets the box grow with its
       content instead of clipping it. */
    height: auto !important; min-height: 54px; padding-top: 10px; padding-bottom: 10px;
  }
}

/* ---------- Cookie consent ---------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
  background: var(--color-ink); color: var(--color-bg);
  border-top: 1px solid rgba(246,241,232,0.14);
  padding: 20px var(--gutter);
}
.cookie-banner-inner {
  max-width: var(--container-max); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.cookie-banner-text {
  font-family: var(--font-ui); font-size: 13px; line-height: 1.6; color: rgba(246,241,232,0.82);
  max-width: 700px;
}
.cookie-banner-text a { color: var(--color-bg); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner-actions { display: flex; gap: 12px; flex-shrink: 0; }
.cookie-banner .btn { padding: 13px 22px; font-size: 11px; }
.cookie-banner .btn-outline { color: var(--color-bg); }
.cookie-banner .btn-outline:hover, .cookie-banner .btn-outline:focus-visible { background: var(--color-bg); color: var(--color-ink); }
@media (max-width: 640px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; }
  .cookie-banner-actions { justify-content: stretch; }
  .cookie-banner-actions .btn { flex: 1; justify-content: center; }
}

/* Placeholder shown in a .consent-gate until the visitor accepts non-essential
   cookies — nothing third-party (Maps iframe, inReception script/widget)
   ever requests before that click. */
.consent-gate-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 40px 24px;
  background: var(--color-bg-alt); border-radius: 12px; min-height: 220px;
  width: 100%;
}
.consent-gate-icon { width: 30px; height: 30px; color: var(--color-ink-faint); }
.consent-gate-placeholder p {
  font-family: var(--font-ui); font-size: 13px; color: var(--color-ink-soft); max-width: 360px; line-height: 1.5;
}
.consent-gate-placeholder .btn { padding: 12px 22px; font-size: 11px; }
.map-frame.consent-gate { display: flex; }
.map-frame.consent-gate .consent-gate-placeholder { min-height: unset; height: 100%; border-radius: 4px; }

.section-sea { background: var(--color-sea); color: var(--color-white); }
.section-sea .section-title { color: var(--color-white); }
.section-sea .section-lede { color: rgba(255,255,255,0.78); }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.section-head .btn { flex-shrink: 0; }

/* ---------- Stay cards (camere / case vacanza) ---------- */
.stay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.stay-grid.stay-grid-2 { grid-template-columns: repeat(2, 1fr); }
.stay-card {
  display: flex;
  flex-direction: column;
  background: transparent;
}
.stay-card-media { display: block; position: relative; aspect-ratio: 3/2; overflow: hidden; }
.stay-card-media img, .stay-card-media .ph-box {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.stay-card:hover .stay-card-media img,
.stay-card:hover .stay-card-media .ph-box { transform: scale(1.045); }
.stay-card-body { padding: 20px 2px 0; display: flex; flex-direction: column; gap: 8px; }
.stay-card-name {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 300;
}
.stay-card-desc {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--color-ink-soft);
  font-size: 15.5px;
  line-height: 1.5;
}
.stay-card-cta {
  margin-top: 10px; align-self: flex-start;
  font-family: var(--font-body); font-style: italic; font-size: 15.5px;
  text-transform: none; letter-spacing: normal; font-weight: 400;
  color: var(--color-terracotta); border-bottom: none; padding-bottom: 0;
}
.stay-card-cta:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.stay-card-cta .btn-arrow { font-family: var(--font-ui); font-style: normal; }

.collection-intro { max-width: 760px; }

/* ---------- Location / numbers strip ---------- */
.strip {
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding-block: 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.strip-item { text-align: center; padding-inline: 12px; border-left: 1px solid var(--color-line); }
.strip-item:first-child { border-left: none; }
.strip-num { font-family: var(--font-display); font-size: clamp(30px, 3vw, 44px); font-weight: 300; color: var(--color-terracotta); }
.strip-label { margin-top: 8px; font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-soft); }

/* ---------- Reviews (Google + TripAdvisor rating cards) ---------- */
.review-source-cards { display: flex; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.review-source-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  flex: 0 1 168px; min-width: 140px;
  padding: 26px 18px 22px;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  text-decoration: none; color: inherit;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s ease;
}
.review-source-card:hover, .review-source-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 18px 36px -16px rgba(33, 29, 23, 0.24);
  border-color: var(--color-terracotta);
}
.review-source-card:focus-visible { outline: 2px solid var(--color-terracotta); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .review-source-card:hover { transform: none; } }
.review-source-icon {
  flex-shrink: 0; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-alt); border-radius: 14px;
  overflow: hidden;
}
.review-source-icon svg { width: 32px; height: 32px; }
/* TripAdvisor's owl mark ships as a raster silhouette (no clean square SVG
   available), so it's applied as a CSS mask over a solid brand-green tile —
   crisp at any size (no upscale blur, no accidental crop from a
   non-square source image) and colored with the real brand mark tone. */
.review-source-icon-tripadvisor { background: #34e0a1; }
.review-source-icon-tripadvisor .brand-mark {
  width: 64%; height: 64%;
  background-color: #0b2b20;
  -webkit-mask-image: url("../img/icons/tripadvisor-mark.png");
  mask-image: url("../img/icons/tripadvisor-mark.png");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.review-source-platform {
  margin-top: 14px;
  font-family: var(--font-ui); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-faint);
}
.review-source-score-badge {
  display: inline-flex; align-items: baseline;
  margin-top: 12px; padding: 9px 18px 8px;
  background: var(--color-terracotta);
  border-radius: 12px;
  transition: background .3s ease;
}
.review-source-card:hover .review-source-score-badge, .review-source-card:focus-visible .review-source-score-badge {
  background: var(--color-terracotta-deep);
}
.review-source-score {
  font-family: var(--font-display); font-weight: 500; font-style: normal;
  font-size: clamp(30px, 2.6vw, 36px); line-height: 1;
  color: var(--color-white);
}
.review-source-max { font-family: var(--font-ui); font-weight: 400; font-size: 13px; color: rgba(255,255,255,0.75); margin-left: 2px; }
.review-source-stars { position: relative; display: inline-block; margin-top: 10px; font-size: 14px; letter-spacing: 2.5px; line-height: 1; white-space: nowrap; }
.review-source-stars-track { color: var(--color-line); }
.review-source-stars-fill { position: absolute; inset: 0; overflow: hidden; width: var(--fill, 100%); color: var(--color-terracotta); }
.review-source-count { margin-top: 6px; font-family: var(--font-ui); font-size: 12px; color: var(--color-ink-soft); }
.review-source-cta {
  margin-top: 16px; padding-top: 14px; width: 100%;
  border-top: 1px solid var(--color-line-soft);
  font-family: var(--font-ui); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-ink-faint);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap;
  transition: color .3s ease;
}
.review-source-cta .btn-arrow { font-family: var(--font-ui); }
.review-source-card:hover .review-source-cta, .review-source-card:focus-visible .review-source-cta {
  color: var(--color-terracotta);
}
.review-source-card:hover .review-source-cta .btn-arrow, .review-source-card:focus-visible .review-source-cta .btn-arrow {
  transform: translateX(4px);
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.review-card {
  padding: 32px 28px;
  background: var(--color-panel);
  border: 1px solid var(--color-line-soft);
  position: relative;
}
.review-card-source {
  position: absolute; top: 28px; right: 28px;
  font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-ink-faint);
}
.review-quote { font-family: var(--font-body); font-style: italic; font-size: 18px; line-height: 1.55; color: var(--color-ink); padding-right: 64px; }
.review-meta { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-faint); }
.review-score { color: var(--color-terracotta); font-weight: 600; }

/* ---------- Guide / Downloads ---------- */
.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 32px); }
.guide-card {
  display: flex; align-items: center; gap: 20px;
  padding: 26px 28px;
  background: var(--color-panel);
  border: 1px solid var(--color-line-soft);
}
.guide-card-icon {
  flex-shrink: 0; min-width: 52px; height: 52px; padding-inline: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-alt);
  font-family: var(--font-display); font-size: 15px; color: var(--color-terracotta);
}
.guide-card-title { font-family: var(--font-display); font-size: 19px; }
.guide-card-desc { font-family: var(--font-ui); font-size: 12.5px; color: var(--color-ink-faint); margin-top: 4px; }
.guide-card-action { margin-left: auto; }
.guide-lang-group { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; flex-shrink: 0; }
.guide-lang-link {
  font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--color-terracotta); border: 1px solid var(--color-line);
  border-radius: 4px; padding: 8px 12px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.guide-lang-link:hover, .guide-lang-link:focus-visible { background: var(--color-terracotta); border-color: var(--color-terracotta); color: var(--color-white); }

/* ---------- Articles ---------- */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.article-card { display: flex; flex-direction: column; }
.article-card-media { aspect-ratio: 4/3; overflow: hidden; margin-bottom: 18px; }
.article-card-media img, .article-card-media .ph-box { width: 100%; height: 100%; object-fit: cover; }
.article-card-date { font-family: var(--font-ui); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-terracotta); }
.article-card-title { font-family: var(--font-display); font-size: 22px; margin-top: 10px; line-height: 1.25; }
.article-card-excerpt { font-family: var(--font-body); color: var(--color-ink-soft); font-size: 15px; margin-top: 10px; line-height: 1.55; }

/* ---------- Prose (editable WP editor content: Ortigia, articoli, room descriptions) ---------- */
.prose { font-family: var(--font-body); font-size: 18px; line-height: 1.7; color: var(--color-ink-soft); max-width: 62ch; }
.prose h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 3vw, 40px); color: var(--color-ink); margin-top: 56px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--color-ink); margin-top: 32px; }
.prose p { margin-top: 18px; }
.prose p:first-child { margin-top: 0; }
.prose ul, .prose ol { margin-top: 18px; padding-left: 0; }
.prose ul { list-style: none; }
.prose ul li { position: relative; padding-left: 24px; }
.prose ul li::before { content: "—"; position: absolute; left: 0; color: var(--color-terracotta); }
.prose ol { list-style: decimal; padding-left: 22px; }
.prose ol li::marker { color: var(--color-terracotta); font-family: var(--font-ui); font-size: 13px; }
.prose li { margin-top: 10px; }
.prose a { color: var(--color-terracotta); text-decoration: underline; text-underline-offset: 3px; }
.prose img { margin-top: 24px; border-radius: 2px; }
.prose strong { color: var(--color-ink); font-weight: 600; }
.prose blockquote { border-left: 2px solid var(--color-terracotta); padding-left: 20px; font-style: italic; margin: 24px 0; }
.prose-note { font-family: var(--font-ui); font-size: 13.5px; letter-spacing: 0.02em; color: var(--color-ink-faint); }

/* ---------- Rules / list blocks (guide pages) ---------- */
.rule-list { display: grid; gap: 14px; margin-top: 22px; }
.rule-list li {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-ink-soft);
  padding-left: 26px;
  position: relative;
  line-height: 1.55;
}
.rule-list li::before { content: "—"; position: absolute; left: 0; color: var(--color-terracotta); }

/* ---------- Feature cards (single stay page: bed, amenities) ---------- */
.feature-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 28px; margin-bottom: 30px; }
.feature-highlight {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  background: var(--color-panel); border: 1px solid var(--color-line); border-radius: 16px; padding: 34px 22px;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s ease;
}
.feature-highlight:hover { transform: translateY(-5px); box-shadow: 0 16px 32px -16px rgba(33, 29, 23, 0.22); border-color: var(--color-terracotta); }
.section-alt.tone-sea .feature-highlight:hover { border-color: var(--color-sea); }
.feature-highlight-text { display: flex; flex-direction: column; gap: 5px; }
.feature-highlight-label { font-family: var(--font-display); font-size: clamp(17px, 1.6vw, 20px); font-style: italic; color: var(--color-ink); line-height: 1.2; }
.feature-highlight-note { font-family: var(--font-ui); font-size: 12.5px; color: var(--color-ink-faint); line-height: 1.45; }
.feature-icon-lg { width: 30px; height: 30px; }
.feature-icon-lg .feature-icon-svg { width: 30px; height: 30px; }

.feature-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px;
  padding-top: 28px; margin-top: 2px; border-top: 1px solid var(--color-line);
}
.feature-item {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  background: var(--color-panel); border: 1px solid var(--color-line); border-radius: 14px; padding: 24px 12px;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s ease;
}
.feature-item:hover { transform: translateY(-4px); box-shadow: 0 12px 26px -14px rgba(33, 29, 23, 0.2); border-color: var(--color-terracotta); }
.section-alt.tone-sea .feature-item:hover { border-color: var(--color-sea); }
.feature-icon { color: var(--color-terracotta); display: flex; align-items: center; justify-content: center; transition: transform .32s cubic-bezier(.34, 1.56, .64, 1), color .28s ease; }
.feature-icon-svg { width: 22px; height: 22px; }
.feature-item:hover .feature-icon, .feature-highlight:hover .feature-icon { transform: scale(1.12) rotate(-6deg); }
.section-alt.tone-sea .feature-item:hover .feature-icon,
.section-alt.tone-sea .feature-highlight:hover .feature-icon { color: var(--color-sea); }
.feature-label { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.02em; color: var(--color-ink-soft); transition: color .28s ease; }
.feature-item:hover .feature-label { color: var(--color-ink); }

/* ---------- Detail gallery + lightbox ---------- */
.detail-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 16px); }
.detail-gallery-item { aspect-ratio: 4/3; overflow: hidden; cursor: pointer; position: relative; }
.detail-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.detail-gallery-item:hover img { transform: scale(1.06); }
.detail-gallery-item:focus-visible { outline: 2px solid var(--color-terracotta); outline-offset: 2px; }

.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15,12,9,.94);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-out);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-img { max-width: min(92vw, 1200px); max-height: 84vh; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox-close, .lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; transition: background .3s, opacity .3s;
}
.lightbox-nav:hover, .lightbox-close:hover { background: rgba(255,255,255,.12); }
.lightbox-nav.prev { left: clamp(12px, 3vw, 40px); }
.lightbox-nav.next { right: clamp(12px, 3vw, 40px); }
.lightbox-close { top: clamp(12px, 3vw, 40px); right: clamp(12px, 3vw, 40px); transform: none; }
.lightbox-counter {
  position: absolute; bottom: clamp(12px, 3vw, 32px); left: 50%; transform: translateX(-50%);
  font-family: var(--font-ui); font-size: 12px; letter-spacing: .1em; color: rgba(255,255,255,.7);
}

/* ---------- CTA band ---------- */
.cta-band { background: var(--color-sea); color: var(--color-white); padding-block: clamp(72px, 10vw, 128px); text-align: center; }
.cta-band .section-title { color: var(--color-white); }
.cta-band .section-lede { color: rgba(255,255,255,0.78); margin-inline: auto; }
.cta-band .hero-actions { justify-content: center; margin-top: 40px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact-form { display: grid; gap: 18px; }
.contact-form label { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-faint); display: block; margin-bottom: 8px; }
.contact-form input, .contact-form textarea {
  width: 100%; border: 1px solid var(--color-line); background: var(--color-panel);
  padding: 14px 16px; font-family: var(--font-body); font-size: 16px; color: var(--color-ink);
  border-radius: 2px;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--color-terracotta); }
.contact-info dt { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-faint); margin-top: 24px; }
.contact-info dt:first-child { margin-top: 0; }
.contact-info dd { font-family: var(--font-body); font-size: 19px; margin: 6px 0 0; }

/* ---------- Contact maps ---------- */
.contact-maps { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px); margin-top: clamp(48px, 6vw, 72px); }
.contact-map-label { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-faint); margin-bottom: 12px; }
.contact-map { display: flex; flex-direction: column; }
.contact-map iframe, .map-frame { width: 100%; aspect-ratio: 4/3; border: 1px solid var(--color-line); border-radius: 4px; overflow: hidden; }
.map-frame iframe { width: 100%; height: 100%; border: none; display: block; filter: grayscale(0.25) contrast(1.02); }

/* ---------- WhatsApp floating button ---------- */
.whatsapp-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  transition: transform .25s var(--ease-out), box-shadow .25s ease;
}
.whatsapp-fab svg { width: 28px; height: 28px; }
.whatsapp-fab:hover { transform: scale(1.08); box-shadow: 0 10px 24px rgba(0,0,0,0.34); }
@media (prefers-reduced-motion: reduce) { .whatsapp-fab:hover { transform: none; } }

/* ---------- Back-to-top button (stacks above WhatsApp) ---------- */
.back-to-top-fab {
  position: fixed; right: 24px; bottom: 92px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--color-ink); color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.24);
  opacity: 0; transform: translateY(10px) scale(0.9); pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), background-color .2s ease;
}
.back-to-top-fab.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.back-to-top-fab svg { width: 20px; height: 20px; }
.back-to-top-fab:hover { background: var(--color-terracotta); }
@media (prefers-reduced-motion: reduce) { .back-to-top-fab { transition: opacity .2s ease; } }

/* ---------- Header social icons (next to language switcher) ---------- */
.nav-social { display: flex; align-items: center; gap: 12px; }
.nav-social-link { display: flex; align-items: center; justify-content: center; transition: transform .2s var(--ease-out), filter .2s ease; filter: saturate(0.85); }
.nav-social-link svg { width: 18px; height: 18px; border-radius: 50%; }
.nav-social-tripadvisor-icon {
  width: 18px; height: 18px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: #34e0a1; display: flex; align-items: center; justify-content: center;
}
.nav-social-tripadvisor-icon .brand-mark {
  width: 60%; height: 60%;
  background-color: #0b2b20;
  -webkit-mask-image: url("../img/icons/tripadvisor-mark.png");
  mask-image: url("../img/icons/tripadvisor-mark.png");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.nav-social-link:hover { transform: translateY(-2px) scale(1.08); filter: saturate(1); }
@media (prefers-reduced-motion: reduce) { .nav-social-link:hover { transform: none; } }
@media (max-width: 1080px) { .nav-social { display: none; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-ink); color: rgba(246,241,232,0.82); padding-top: clamp(64px, 8vw, 96px); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 64px; border-bottom: 1px solid rgba(246,241,232,0.14); }
.footer-brand { font-family: var(--font-display); font-size: 24px; }
.footer-tag { margin-top: 14px; font-family: var(--font-body); font-style: italic; font-size: 15px; opacity: 0.75; max-width: 260px; }
.footer-col-title { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; margin-bottom: 18px; }
.footer-col a, .footer-col p { display: block; font-family: var(--font-ui); font-size: 14px; line-height: 2; opacity: 0.88; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-block: 26px; font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.04em; opacity: 0.5; flex-wrap: wrap; gap: 10px; }

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-slide { transition: opacity .3s linear; }
  .feature-icon { transition: color .2s ease; }
  .feature-item:hover .feature-icon, .feature-highlight:hover .feature-icon { transform: none; }
  .feature-item:hover, .feature-highlight:hover { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .intro, .intro.intro-reverse { grid-template-columns: 1fr; }
  .intro-media, .intro.intro-reverse .intro-media { order: 0; max-width: 420px; }
  .stay-grid, .article-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-grid .footer-col:last-child { grid-column: span 3; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-maps { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .site-header { padding: 20px 20px; }
  .nav-links, .nav-lang { display: none; }
  .nav-toggle { display: block; color: inherit; }
  .breadcrumb { padding-top: 96px; }
  .hero-content { padding-bottom: 64px; }
  .hero-actions { flex-direction: column; width: 100%; padding-inline: 32px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .choice-grid { grid-template-columns: 1fr; }
  .choice-card { aspect-ratio: 4/5; }
  .stay-grid, .stay-grid-2, .reviews-grid, .article-grid, .guide-grid { grid-template-columns: 1fr; }
  .detail-gallery { grid-template-columns: repeat(2, 1fr); }
  .feature-list { grid-template-columns: repeat(2, 1fr); }
  .lightbox-nav { width: 40px; height: 40px; }
  .strip { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .strip-item:nth-child(3) { border-left: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid .footer-brand-col { grid-column: span 2; }
  .footer-grid .footer-col:last-child { grid-column: span 2; }
  .section-head { align-items: flex-start; flex-direction: column; }
  .guide-card { flex-wrap: wrap; }
  .guide-card-action { margin-left: 0; }
  :root { --section-space: 76px; }
}