@import "variables.css";

/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:focus-visible {
  outline: 2px solid var(--color-accent-secondary);
  outline-offset: 2px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--line-height-tight);
}

h1 { font-size: var(--font-size-3xl); font-style: italic; }
h2 { font-family: var(--font-body); font-size: 20px; font-weight: 500; font-style: normal; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: var(--space-lg); }
h3 { font-size: var(--font-size-xl); margin-bottom: var(--space-md); }

p {
  margin-bottom: var(--space-md);
  line-height: var(--line-height-relaxed);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent-secondary);
  margin-bottom: var(--space-sm);
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Section */
.section {
  padding: var(--space-2xl) 0;
  scroll-margin-top: 90px;
}

/* Background alternation — the two visual variants used across all content
   sections. Applied explicitly per section (see template.html) rather than
   derived from DOM position/nth-child: this site's sections get reordered
   from time to time, and a couple of them render conditionally (reviews),
   so any position-based rule silently drifts the moment order or presence
   changes. Explicit is the only version of this that stays correct — to
   change the alternation, edit the class on the <section> tag, not here. */
.bg-plain {
  background-color: var(--color-bg-card);
}

.bg-marmo {
  background-color: var(--color-bg-primary);
  background-image:
    linear-gradient(rgba(245, 240, 232, 0.07), rgba(245, 240, 232, 0.07)),
    url('../images/municipio/texture-marmo/marmo.png');
  background-size: cover;
  background-position: center;
}

/* WebP texture (~3 KiB vs ~275 KiB PNG) for the browsers that support
   image-set() — the PNG above stays as the fallback layer for the rest. */
@supports (background-image: image-set(url('../images/municipio/texture-marmo/marmo.webp') 1x)) {
  .bg-marmo {
    background-image:
      linear-gradient(rgba(245, 240, 232, 0.07), rgba(245, 240, 232, 0.07)),
      image-set(url('../images/municipio/texture-marmo/marmo.webp') 1x);
  }
}

/* CTA Buttons — unified to the uppercase/letter-spacing language shared by
   .btn-outline-accent / .btn-form-submit / .btn-wa-solid (2026-07-16) */
.cta-primary {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--color-accent-secondary);
  color: white;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--border-radius-btn);
  cursor: pointer;
  transition: background-color var(--transition-normal);
  text-align: center;
  white-space: nowrap;
}

.cta-primary:hover {
  background-color: var(--color-accent-secondary-dark);
}

/* ===== HEADER ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--color-bg-card);
  background-image:
    linear-gradient(rgba(245, 240, 232, 0.07), rgba(245, 240, 232, 0.07)),
    url('../images/municipio/texture-marmo/marmo.png');
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--color-border);
  z-index: var(--z-header);
  padding: 10px 0;
}

@supports (background-image: image-set(url('../images/municipio/texture-marmo/marmo.webp') 1x)) {
  .header {
    background-image:
      linear-gradient(rgba(245, 240, 232, 0.07), rgba(245, 240, 232, 0.07)),
      image-set(url('../images/municipio/texture-marmo/marmo.webp') 1x);
  }
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  gap: var(--space-md);
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.logo-img {
  height: 44px;
  width: auto;
  display: block;
}

.nav {
  flex: 1;
}

.nav-list {
  display: flex;
  list-style: none;
  gap: var(--space-md);
}

.nav-link {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text-primary);
  padding: var(--space-xs) 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition-normal);
  white-space: nowrap;
}

.nav-link:hover {
  border-bottom-color: var(--color-accent-secondary);
}

.header-cta {
  margin: 0;
  font-size: 15px;
}

.social-icons {
  display: flex;
  gap: var(--space-md);
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-text-primary);
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transition: border-color var(--transition-normal), color var(--transition-normal);
  white-space: nowrap;
}

.lang-switch:hover {
  border-color: var(--color-accent-secondary);
  color: var(--color-accent-secondary);
}

.lang-switch-flag {
  display: inline-flex;
  width: 16px;
  height: 12px;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.lang-switch-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lang-switch--desktop {
  display: none;
}

@media (min-width: 1281px) {
  .lang-switch--desktop {
    display: inline-flex;
  }
}

.social-icon {
  width: 24px;
  height: 24px;
  color: var(--color-text-primary);
  transition: color var(--transition-normal);
}

.social-icon:hover {
  color: var(--color-accent-secondary);
}

.icon-sprite {
  display: none;
}

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  width: 24px;
  height: 24px;
}

.nav-toggle span {
  width: 100%;
  height: 2px;
  background-color: var(--color-text-primary);
  transition: all var(--transition-normal);
}

/* ===== HERO ===== */
.hero {
  position: relative;
  height: calc(100vh - 110px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  overflow: hidden;
  margin-top: 70px;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero-slide.is-active {
  opacity: 1;
}

.hero-slide picture,
.hero-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(107, 58, 31, 0.3), rgba(160, 120, 64, 0.2));
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 780px;
  width: 100%;
  padding: var(--space-lg);
  /* No entrance animation: this is above the fold, already in view at
     load — animation-fill-mode: both (the previous fadeInUp) held it at
     opacity: 0 for the first 0.2s, a genuine invisible initial render for
     the hero's text content. */
}

.hero-eyebrow {
  display: block;
  font-size: var(--font-size-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  opacity: 0.9;
}

.hero-title {
  font-size: clamp(32px, 8vw, 64px);
  margin-bottom: var(--space-md);
  font-style: italic;
}

.hero-subtitle {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-lg);
  line-height: var(--line-height-relaxed);
  opacity: 0.95;
}

.hero .cta-primary {
  background-color: white;
  color: var(--color-accent-secondary);
  font-size: var(--font-size-lg);
  padding: var(--space-md) var(--space-2xl);
}

.hero .cta-primary:hover {
  background-color: var(--color-accent-secondary-dark);
  color: white;
}

.scroll-indicator-wrap {
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--arrow-color, rgba(255, 255, 255, 0.75));
  text-decoration: none;
  transition: color 0.5s ease;
  animation: scroll-bounce 2.2s ease-in-out infinite;
  /* Only transform is animated (translateY, see @keyframes below), which the
     compositor can run on its own thread with no layout/paint — but Chrome
     still needs the hint to promote this element to its own layer ahead of
     time, otherwise it can fall back to main-thread animation anyway. */
  will-change: transform;
}

.scroll-indicator:hover {
  color: white;
}

.scroll-line {
  display: block;
  width: 1px;
  height: 28px;
  background: currentColor;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(7px); }
}

/* ===== ABOUT ===== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.about-text h2 {
  margin-top: var(--space-md);
}

.about-image {
  overflow: hidden;
  border-radius: 6px;
}

.about-image img {
  width: 100%;
  height: 540px;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.about-transport {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.about-transport-eyebrow {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-secondary);
  margin-bottom: var(--space-sm);
}

.about-transport-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.transport-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.transport-icon {
  flex-shrink: 0;
  color: var(--color-accent-secondary);
  margin-top: 1px;
}

.transport-text {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.transport-text strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* ===== SERVICES ===== */
.services > .container {
  max-width: 1400px;
  padding-left: 20px;
  padding-right: 20px;
}

/* Visually hidden — accessibility utility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Services blocks */
.services-block {
  margin-bottom: var(--space-2xl);
}

.services-block--additional {
  margin-bottom: var(--space-xl);
}

.services-block-head {
  margin-bottom: var(--space-lg);
}

.services-eyebrow {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.375rem;
}

.services-eyebrow--accent {
  color: var(--color-accent-secondary);
}

.services-eyebrow--muted {
  color: var(--color-text-secondary);
}

.services-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--font-size-xl);
  color: var(--color-text-primary);
  margin: 0;
}

/* Services grid — large photo cards, 3+2 centered, no orphan stretching.
   Flexbox (not CSS Grid) because flex-wrap gives each wrapped row its own
   justify-content: center, which is exactly what centers the last row's 2
   cards without a hacky :nth-child/grid-column span rule. */
.services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
}

/* Service card — full-bleed background photo, bottom-anchored content */
.service-card {
  position: relative;
  flex: 0 0 calc(33.333% - (var(--space-lg) * 2 / 3));
  max-width: 400px;
  min-height: 280px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  cursor: default;
  outline: none;
  background-color: var(--color-text-primary);
}

.service-card:focus-visible {
  outline: 2px solid var(--color-accent-secondary);
  outline-offset: 2px;
}

.service-card-media,
.service-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.service-card-img {
  object-fit: cover;
  display: block;
}

/* Bottom-anchored gradient, not a flat tint — keeps contrast where the text
   sits regardless of how bright/dark each photo is (parking is near-black,
   the boat tour is nearly all sky/sea), without darkening the whole photo. */
.service-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(30, 26, 22, 0.88) 0%,
    rgba(30, 26, 22, 0.5) 35%,
    rgba(30, 26, 22, 0.08) 65%,
    rgba(30, 26, 22, 0) 85%
  );
}

/* No photo yet (e.g. NCC) — flat dark neutral instead of photo + gradient */
.service-card--noimage .service-card-overlay {
  background: none;
}

.service-card-content {
  position: relative;
  z-index: 1;
  padding: var(--space-md);
  width: 100%;
  color: white;
}

.service-card-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--font-size-xl);
  margin-bottom: 0.375rem;
}

.service-card-desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: var(--space-sm);
}

.service-card-wa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--border-radius-btn);
  color: white;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

.service-card-wa:hover {
  background-color: white;
  color: var(--color-text-primary);
}

/* Standalone check-in/check-out block — sits between Chi Siamo and Galleria.
   A single background layer comes from .section + .bg-marmo on the <section>
   tag (see template.html); .checkin-info is just the content row, no
   background/border of its own, so it doesn't float as a separate panel. */
.checkin-info {
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
}

.checkin-item {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
}

/* ===== GALLERY ===== */
.gallery h2 {
  text-align: center;
  margin-bottom: var(--space-md);
}

.gallery-intro {
  max-width: 620px;
  margin: 0 auto var(--space-2xl);
  text-align: center;
  color: var(--color-text-secondary);
}

.gallery-group {
  margin-bottom: var(--space-xs);
  scroll-margin-top: 100px;
}

.room-number {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent-secondary);
  margin-bottom: var(--space-sm);
}

.gallery-group-title {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: 0.625rem;
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-style: italic;
  font-weight: 400;
}

.feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.3rem 0.8rem 0.3rem 0.6rem;
  background-color: transparent;
  color: var(--color-accent-secondary);
  border: 1px solid var(--color-accent-secondary);
  font-family: var(--font-body);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--border-radius-btn);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  vertical-align: middle;
}

.feature-badge-icon {
  flex-shrink: 0;
  opacity: 0.9;
}

/* Room amenities — icon row between the gallery photos and the nav arrows,
   no box/border. Lives inside .gallery-embla (100vw breakout), so it needs
   its own container-matching max-width/padding to stay centered & aligned
   with the gallery-group text above it. */
/* Hint line + "+N" toggle only exist for the mobile scrollable row —
   hidden here so desktop renders exactly as before; both are switched on
   inside the max-width: 768px block below. */
.room-amenities-hint {
  display: none;
}

.room-amenity-more {
  display: none;
}

/* Mobile-only shared amenity panel — hidden on desktop, see the
   max-width: 768px block for its actual (floating-over-the-photo) styling. */
.room-amenity-overlay {
  display: none;
}

.room-amenities {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem var(--space-lg) 0.375rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem 1.75rem;
}

.room-amenity {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--color-text-primary);
  cursor: default;
  outline: none;
}

.room-amenity:focus-visible {
  outline: 2px solid var(--color-accent-secondary);
  outline-offset: 4px;
  border-radius: 4px;
}

.room-amenity-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: color var(--transition-fast);
}

.room-amenity-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

@media (hover: hover) {
  .room-amenity:hover .room-amenity-icon {
    color: var(--color-terracotta);
  }
}

.room-amenity.tooltip-active .room-amenity-icon {
  color: var(--color-terracotta);
}

.room-amenity-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-text-secondary);
  text-align: center;
}

/* Tooltip — dark warm-black bg, light stone text (distinct from the light service tooltip) */
.room-amenity-tooltip {
  --tooltip-shift: 0px;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(calc(-50% + var(--tooltip-shift))) translateY(6px);
  background: var(--color-text-primary);
  border-radius: 8px;
  padding: 10px 14px;
  width: 200px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 50;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.room-amenity-tooltip strong {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-bg-primary);
  margin-bottom: 3px;
}

.room-amenity-tooltip span {
  display: block;
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--color-border);
}

@media (hover: hover) {
  .room-amenity:hover .room-amenity-tooltip {
    opacity: 1;
    transform: translateX(calc(-50% + var(--tooltip-shift))) translateY(0);
    pointer-events: auto;
  }
}

.room-amenity.tooltip-active .room-amenity-tooltip {
  opacity: 1;
  transform: translateX(calc(-50% + var(--tooltip-shift))) translateY(0);
  pointer-events: auto;
}

/* ── Embla Carousel wrapper — full-width breakout ── */
.gallery-embla {
  position: relative; /* positioning context for .room-amenity-overlay (mobile only, see below) — no offsets set, zero visual effect on desktop */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: 0;
}

.gallery-embla__viewport {
  overflow: hidden;
  padding: 12px 0 20px;
}

.gallery-embla__container {
  display: flex;
  /* No gap here — spacing is on slides via margin so looped slides keep
     the same gap as regular adjacent slides (gap: on container only applies
     between DOM siblings, not across Embla's loop-transform boundaries). */
}

.gallery-embla .gallery-image {
  /* 3 central slides ≈ 72% width + generous peek on both sides.
     margin: 0 8px gives 16px between any two slides, including looped ones.
     Fixed height decouples vertical size from slide width. */
  flex: 0 0 calc(15% - 16px);
  margin: 0 8px;
  height: 160px;
  min-width: 0;
}

.gallery-embla__nav {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0 0.625rem;
}

/* Slide base — just a flex child, no visual decoration */
.gallery-image {
  display: block;
}

/* Clip container: overflow + border-radius live here */
.gallery-parallax {
  height: 100%;
  overflow: hidden;
  border-radius: 6px;
  background-color: var(--color-bg-card);
  transition: box-shadow 0.35s ease;
}

.gallery-parallax:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Parallax layer — wider than the clip so it can slide without gaps.
   4rem extra (2rem each side) accommodates ~6% max translateX at any snap. */
.gallery-parallax__layer {
  height: 100%;
  width: calc(100% + 4rem);
  margin-left: -2rem;
  will-change: transform;
}

.gallery-parallax__layer picture {
  display: block;
  width: 100%;
  height: 100%;
}

.gallery-parallax__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}


/* ===== PLACES (Da Visitare) ===== */
.places h2 {
  text-align: center;
}

.places .container {
  max-width: 1600px;
  padding-left: 20px;
  padding-right: 20px;
}

.places-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.place-card {
  background-color: var(--color-bg-card-fill);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 2px 14px rgba(30, 26, 22, 0.07);
}

.place-card h3 {
  color: var(--color-accent-secondary);
  font-size: 1.25rem;
  font-style: italic;
  margin-bottom: 0.75rem;
}

.place-card-img-wrap {
  position: relative;
  overflow: hidden;
  width: calc(100% + 2 * var(--space-lg));
  margin-left: calc(-1 * var(--space-lg));
  margin-bottom: var(--space-sm);
}

.place-card-img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s ease;
}

.place-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  background: rgba(250, 250, 250, 0.93);
  border: 1px solid var(--color-accent-gold);
  border-radius: 20px;
  color: var(--color-accent-gold);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  line-height: 1;
}

.place-badge svg {
  flex-shrink: 0;
}

.place-card p {
  margin-bottom: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* Hover: elevation + photo zoom — desktop pointer devices only */
@media (hover: hover) {
  .place-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(30, 26, 22, 0.13);
  }
  .place-card:hover .place-card-img {
    transform: scale(1.04);
  }
}

/* Staggered fade-in — desktop 4-col grid only */
@media (min-width: 1281px) {
  .place-card.fade-in-ready:not(.is-visible):nth-child(4n+2) { transition-delay: 80ms; }
  .place-card.fade-in-ready:not(.is-visible):nth-child(4n+3) { transition-delay: 160ms; }
  .place-card.fade-in-ready:not(.is-visible):nth-child(4n+4) { transition-delay: 240ms; }
}

/* ===== REVIEWS ===== */
.reviews .container {
  max-width: 1600px;
  padding-left: 20px;
  padding-right: 20px;
}

/* Header row: title centered */
.reviews-section-head {
  text-align: center;
  margin-bottom: var(--space-xl);
}

/* Arrows row — centered below the card strip */
.reviews-nav-row {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Horizontal scroll container — no wrap, free scroll (no scroll-snap-type).
   Removed deliberately: on this element specifically (overflowing fixed-
   px-width flex children + mask-image), scroll-snap-type broke Largest
   Contentful Paint detection for the ENTIRE page, not just this section —
   confirmed via bisection and reproduced/fixed with this single property.
   .places-grid and .services-grid use the same overflow-x+snap pattern
   elsewhere without this problem, so it's specific to this element's setup,
   not scroll-snap in general — worth re-testing before reintroducing snap
   here. scroll-behavior:smooth still gives the swipe some inertia/ease. */
.reviews-overflow {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* padding lets card shadows breathe before the clip edge */
  padding: 8px 2px 28px;
  margin-bottom: var(--space-sm);
  /* fade out both edges to make the peek look intentional */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 40px,
    #000 calc(100% - 90px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 40px,
    #000 calc(100% - 90px),
    transparent 100%
  );
}

.reviews-overflow::-webkit-scrollbar {
  display: none;
}

/* Single flex row — cards never wrap */
.reviews-slider {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-md);
}

.review-card {
  flex: 0 0 420px;
  scroll-snap-align: start;
  background-color: var(--color-bg-card-fill);
  border: 1px solid rgba(221, 213, 200, 0.5);
  border-radius: 10px;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* two-layer shadow: contact + diffuse */
  box-shadow:
    0 2px 6px rgba(30, 26, 22, 0.06),
    0 8px 28px rgba(30, 26, 22, 0.09);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

@media (hover: hover) {
  .review-card:hover {
    box-shadow:
      0 4px 10px rgba(30, 26, 22, 0.08),
      0 14px 40px rgba(30, 26, 22, 0.12);
    transform: translateY(-3px);
  }
}

.review-card-header {
  margin-bottom: var(--space-sm);
}

.review-author-name {
  display: block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
}

.review-divider {
  border: none;
  border-top: 1px solid var(--color-accent-secondary);
  margin: 0 0 var(--space-md) 0;
}

.review-body {
  flex: 1;
  position: relative;
  padding-top: var(--space-xs);
}

.review-quote-mark {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1;
  color: var(--color-text-secondary);
  opacity: 0.18;
  position: absolute;
  top: -8px;
  left: -4px;
  pointer-events: none;
  user-select: none;
}

.review-text {
  font-family: var(--font-body);
  font-size: 15px;
  font-style: normal;
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
  text-align: justify;
  hyphens: auto;
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
  padding-left: var(--space-lg);
}

.review-stars {
  color: #FFC107;
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 1;
  margin-top: auto;
  display: block;
  padding-top: var(--space-sm);
}

/* Slider nav buttons — circular */
.slider-nav {
  display: flex;
  gap: var(--space-sm);
}

.slider-btn {
  width: 46px;
  height: 46px;
  background-color: var(--color-accent-secondary);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color var(--transition-normal), transform var(--transition-normal);
}

.slider-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.slider-btn:hover {
  background-color: var(--color-accent-secondary-dark);
  transform: scale(1.08);
}


/* Mobile: card più stretta + frecce sotto il titolo */
@media (max-width: 768px) {
  .review-card {
    flex: 0 0 min(310px, 82vw);
  }
  .reviews-overflow {
    /* On mobile, smaller fade zones (container is narrower) */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 20px,
      #000 78%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 20px,
      #000 78%,
      transparent 100%
    );
  }
}


/* ===== CONTACT ===== */

.contact h2 {
  text-align: center;
  margin-bottom: var(--space-xl);
}

/* Info box */
.contact-info-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: var(--space-xl) var(--space-2xl);
  max-width: 900px;
  margin: 0 auto var(--space-xl);
  background-color: var(--color-bg-card-fill);
}

.contact-info-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-secondary);
  margin-bottom: var(--space-md);
}

.contact-info-left p {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-sm);
}

.contact-info-left p:last-child {
  margin-bottom: 0;
}

.contact-info-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  justify-content: center;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.contact-icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--color-accent-secondary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}

.contact-info-item-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-accent-secondary);
}

.contact-info-item-value {
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  text-decoration: none;
  line-height: var(--line-height-normal);
}

.contact-info-item-value:hover {
  color: var(--color-accent-secondary);
}

.contact-phone {
  white-space: nowrap;
}

/* Action buttons */
.contact-action-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  max-width: 900px;
  margin: 0 auto var(--space-xl);
}

.btn-wa-solid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 18px var(--space-lg);
  background-color: var(--color-whatsapp-green);
  color: white;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: var(--border-radius-btn);
  transition: background-color var(--transition-normal);
}

.btn-wa-solid:hover {
  background-color: var(--color-whatsapp-green-hover);
  color: white;
}

.btn-outline-accent {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px var(--space-lg);
  background-color: transparent;
  color: var(--color-accent-secondary);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid var(--color-accent-secondary);
  border-radius: var(--border-radius-btn);
  transition: background-color var(--transition-normal), color var(--transition-normal);
  text-align: center;
}

.btn-outline-accent:hover {
  background-color: var(--color-accent-secondary);
  color: white;
}

/* Contact Form */
.contact-form {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}

.form-group {
  margin-bottom: var(--space-lg);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.form-row .form-group {
  margin-bottom: 0;
}

.form-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: var(--space-xs);
  color: var(--color-text-primary);
}

.form-input {
  width: 100%;
  padding: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: var(--color-bg-card-fill);
  color: var(--color-text-primary);
  transition: border-color var(--transition-normal);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-accent-secondary);
}

.form-submit-row {
  text-align: center;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

.btn-form-submit {
  display: inline-block;
  padding: 12px var(--space-2xl);
  background-color: transparent;
  color: var(--color-accent-secondary);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1.5px solid var(--color-accent-secondary);
  border-radius: var(--border-radius-btn);
  cursor: pointer;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

.btn-form-submit:hover {
  background-color: var(--color-accent-secondary);
  color: white;
}

.form-success {
  text-align: center;
  color: green;
  margin-top: var(--space-md);
}

/* ===== SCROLL FADE-IN ===== */
.fade-in-ready {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease-out, transform 0.55s ease-out, box-shadow 0.4s ease;
}

.fade-in-ready.is-visible {
  opacity: 1;
  transform: translateY(0);
  /* Faster transition for subsequent interactions (hover) once card is visible */
  transition: opacity 0.55s ease-out, transform 0.35s ease, box-shadow 0.35s ease;
}

/* ===== TOLEDO16 PROMO ===== */
.toledo16-promo {
  background-color: var(--color-bg-card);
  border-top: 1px solid var(--color-border);
  padding: var(--space-2xl) 0;
}

.toledo16-promo-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.toledo16-promo-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.toledo16-promo-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 300;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  line-height: 1.15;
  margin: 0;
}

.toledo16-promo-desc {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0;
}

.toledo16-promo-highlight {
  font-size: var(--font-size-base);
  color: var(--color-accent-secondary);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

.toledo16-promo-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 14px 28px;
  background-color: var(--color-text-primary);
  color: white;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--color-text-primary);
  border-radius: var(--border-radius-btn);
  transition: background-color var(--transition-normal), color var(--transition-normal);
  align-self: flex-start;
}

.toledo16-promo-btn:hover {
  background-color: transparent;
  color: var(--color-text-primary);
}

.toledo16-promo-visual {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Card: photo on top, badges below, footer with address */
.toledo16-promo-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 4px 20px rgba(30, 26, 22, 0.08);
}

.toledo16-card-photo {
  width: 100%;
  height: 210px;
  overflow: hidden;
}

.toledo16-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.toledo16-card-body {
  padding: var(--space-md) var(--space-lg);
}

.toledo16-promo-rooms {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.toledo16-room-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px var(--space-md);
  background-color: transparent;
  border: 1px solid var(--color-accent-secondary);
  color: var(--color-accent-secondary);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--border-radius-btn);
}

.toledo16-card-footer {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
}

.toledo16-promo-addr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}

.toledo16-promo-addr svg {
  flex-shrink: 0;
  stroke: var(--color-accent-secondary);
}

.toledo16-promo-metro {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}

@media (max-width: 768px) {
  .toledo16-promo-inner {
    grid-template-columns: 1fr;
  }

  .toledo16-promo-card {
    max-width: 100%;
  }
}

/* ===== FOOTER ===== */
.footer {
  background-color: var(--color-text-primary);
  color: rgba(255, 255, 255, 0.7);
  padding: var(--space-2xl) 0 var(--space-lg);
  font-size: var(--font-size-sm);
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-xl);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo-img {
  height: 40px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.footer-book-btn {
  display: inline-block;
  padding: var(--space-xs) var(--space-lg);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.footer-book-btn:hover {
  border-color: rgba(255, 255, 255, 0.7);
  color: white;
}

.footer-middle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.footer-col-label {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* WCAG AA fix (2026-07-22): was rgba(255,255,255,0.35) — 3.22:1 on the
     footer's #1E1A16 background, short of the 4.5:1 normal-text
     requirement. 0.46 is 4.6:1. */
  color: rgba(255, 255, 255, 0.46);
  margin-bottom: var(--space-sm);
}

.footer-link {
  display: block;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  margin-bottom: 4px;
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: white;
}

.footer-social {
  display: flex;
  gap: var(--space-md);
  margin-top: 2px;
}

.footer-social-link {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--transition-fast);
}

.footer-social-link:hover {
  color: white;
}

.footer-social-link .icon {
  width: 20px;
  height: 20px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-lg);
  text-align: center;
  /* WCAG AA fix (2026-07-22): was rgba(255,255,255,0.35), 3.22:1 — see
     .footer-col-label above for the same fix and the reasoning. */
  color: rgba(255, 255, 255, 0.46);
  line-height: var(--line-height-normal);
}

.footer-bottom p {
  margin-bottom: 0;
}

/* ===== RESPONSIVE ===== */

/* Nav hamburger: trigger at 1280px before items start wrapping */
@media (max-width: 1280px) {
  .header-container {
    padding: 0 var(--space-md);
    gap: var(--space-md);
  }

  .social-icons {
    display: none;
  }

  .header-cta {
    padding: var(--space-xs) var(--space-md);
    font-size: 13px;
  }

  /* Hamburger toggle */
  .nav-toggle {
    display: flex;
    order: -1;
  }

  /* Hamburger → X animation */
  .nav.active .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav.active .nav-toggle span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .nav.active .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Mobile nav panel — slides in from right */
  .nav-list {
    display: flex;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    background-color: var(--color-bg-primary);
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    gap: 0;
    list-style: none;
    z-index: var(--z-mobile-nav);
    overflow-y: auto;
    /* Hidden state */
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  }

  .nav.active .nav-list {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Language switch — first thing in the panel, right under the close (X)
     button, so it's reachable without opening the menu and scrolling past
     the nav links + booking button + social row to reach it at the
     bottom (where it used to live, inside .nav-mobile-social). */
  .nav-mobile-lang {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-lg);
  }

  /* Nav links — Cormorant italic, generous padding */
  .nav-link {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(24px, 6vw, 36px);
    font-weight: 300;
    font-style: italic;
    color: var(--color-text-primary);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
    white-space: normal;
    letter-spacing: 0.01em;
    transition: color var(--transition-fast);
  }
  .nav-link:hover { color: var(--color-accent-secondary); }

  /* Mobile extra: booking button + social — pinned to bottom */
  .nav-mobile-extra {
    display: block;
    margin-top: auto;
    padding-top: var(--space-xl);
  }
  .nav-book-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: var(--space-lg);
  }
  .nav-mobile-social {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
  }
  .nav-mobile-social .social-icon {
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
  }
  .nav-mobile-social .social-icon:hover { color: var(--color-accent-secondary); }
}

/* nav-mobile-extra/nav-mobile-lang hidden on desktop (shown inside 1280px media query above) */
@media (min-width: 1281px) {
  .nav-mobile-extra { display: none; }
  .nav-mobile-lang { display: none; }
}

/* Mobile sticky bar */
.mobile-sticky-bar {
  display: none;
}

@media (max-width: 1280px) {
  .mobile-sticky-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    gap: 6px;
    padding: 6px 6px 0;
    z-index: 998;
    background-color: var(--color-bg-primary);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.45s ease-out, transform 0.45s ease-out;
  }
  .mobile-sticky-bar--visible {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-sticky-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 50px;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    color: white;
    border-radius: 6px 6px 0 0;
    transition: opacity var(--transition-fast);
  }
  .mobile-sticky-btn:hover { opacity: 0.88; }

  .mobile-sticky-wa {
    background-color: var(--color-whatsapp-green);
  }

  .mobile-sticky-book {
    background-color: var(--color-accent-secondary);
  }

  /* Push page content above sticky bar */
  body {
    padding-bottom: 62px;
  }
}

/* Layout breakpoint: stacks columns, reduces spacing */
@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Hide the About photo on mobile only — full-width 540px-tall image read
     as "taking over the screen" after the Chi Siamo text. Hiding the <img>
     (not the .about-image wrapper) keeps the wrapper in the layout at its
     normal scroll position, since main.js observes it via
     IntersectionObserver to reveal the mobile sticky bar — an empty,
     display:none wrapper would report a zero bounding rect and the sticky
     bar would never appear on mobile. */
  .about-image img {
    display: none;
  }

  .gallery-embla .gallery-image {
    flex: 0 0 calc(86vw - 16px); /* effective 86vw, ~7vw peek each side */
  }

  .gallery-group-title {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  /* Restore container padding to match carousel negative-margin on mobile */
  .places .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  /* Places: horizontal swipe carousel */
  .places-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--space-md));
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
  .places-grid::-webkit-scrollbar { display: none; }

  .place-card {
    flex: 0 0 75vw;
    scroll-snap-align: start;
    padding: 0.75rem var(--space-md);
  }

  .place-card-img-wrap {
    width: calc(100% + 2 * var(--space-md));
    margin-left: calc(-1 * var(--space-md));
  }

  .checkin-info {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .hero-content {
    padding: var(--space-lg);
  }

  /* Mobile: title must clearly dominate the subtitle (was reading smaller/
     less important than it) — bigger clamp + tightened spacing around it so
     the block stays balanced and fits the hero's reduced mobile height. */
  .hero-eyebrow {
    margin-bottom: var(--space-sm);
  }

  .hero-title {
    font-size: clamp(32px, 9vw, 48px);
    margin-bottom: var(--space-sm);
  }

  .hero-subtitle {
    margin-bottom: var(--space-md);
  }

  /* Services: horizontal swipe carousel on mobile — same overflow-x +
     scroll-snap pattern as .places-grid (Da Visitare)/.room-amenities.
     justify-content must be reset to flex-start here: the desktop rule
     sets center, and center + overflow-x:auto on a flex row wider than
     its container clips the start of the scroll range in some browsers.
     Full-bleed to the screen edge also mirrors .places-grid: negative
     margin cancels .services > .container's 20px padding, re-added as
     the grid's own padding so cards keep breathing room from the edge. */
  .services-grid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--space-sm);
    padding-bottom: var(--space-md);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .services-grid::-webkit-scrollbar { display: none; }

  .service-card {
    flex: 0 0 75vw;
    max-width: none;
    min-height: 200px;
    scroll-snap-align: start;
  }

  /* .services-block's 64px margin-bottom was sized for the old stacked-card
     layout; now that the carousel is short and already has its own
     padding-bottom for scroll breathing room, it just piles on top of the
     section's own bottom padding before "Da Visitare" starts. Dropping it
     brings the gap in line with how .places-grid meets its own section
     edge (grid padding-bottom + section padding only, no extra block
     margin). */
  .services-block {
    margin-bottom: 0;
  }

  /* Cards are shorter on mobile (200px vs 280px+ on desktop), so the text
     block (title + description + button) occupies a much bigger share of
     the card's height — the desktop gradient's dark zone (0–35%) doesn't
     reach far enough up to sit behind all of it on every photo. Stronger
     and taller here so text stays legible regardless of the photo's own
     brightness, without needing to tune each photo individually. */
  .service-card-overlay {
    background: linear-gradient(
      to top,
      rgba(20, 16, 13, 0.92) 0%,
      rgba(20, 16, 13, 0.78) 45%,
      rgba(20, 16, 13, 0.3) 70%,
      rgba(20, 16, 13, 0) 92%
    );
  }

  /* Room amenities — single horizontally-scrollable row on mobile (was
     wrapping to ~4 rows). Reuses the same overflow-x + scroll-snap native
     pattern as .reviews-overflow/.places-grid, no external library. */
  .room-amenities-hint {
    display: block;
    margin: 0 0 0.5rem;
    padding: 0 var(--space-md);
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-text-secondary);
  }

  .room-amenities {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Without this, mandatory snap ignores the container's own padding: on
       load it auto-scrolls to align the first snap-aligned icon flush with
       the edge, silently cancelling the left padding below. scroll-padding
       tells the snap algorithm to treat that padding as protected space —
       the fix is specific to scroll-snap, plain padding alone doesn't work
       here (verified in isolation) regardless of the value used. */
    scroll-padding-left: var(--space-md);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    gap: 1.25rem;
    padding: 0.375rem var(--space-md) 0.25rem;
  }
  .room-amenities::-webkit-scrollbar {
    display: none;
  }

  .room-amenity {
    flex: 0 0 auto;
    gap: 0;
    cursor: pointer;
    scroll-snap-align: start;
  }

  /* Collapsed by default — only the first 8 amenities show, plus the
     "+N / Vedi tutti" toggle. Expanding reveals the rest in the same row. */
  .room-amenity--extra {
    display: none;
  }

  .room-amenities.is-expanded .room-amenity--extra {
    display: flex;
  }

  .room-amenities.is-expanded .room-amenity-more {
    display: none;
  }

  /* Bordered box makes it visually obvious the icons are tappable — fill
     stays transparent (section background shows through), only the border
     uses the card-fill grey. */
  .room-amenity-icon {
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-btn);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
  }

  .room-amenity-icon svg {
    width: 18px;
    height: 18px;
  }

  .room-amenity.tooltip-active .room-amenity-icon {
    border-color: var(--color-accent-secondary);
    background-color: rgba(139, 26, 26, 0.06);
  }

  /* Old per-icon tooltip is desktop-only now (hover, absolute, positioned
     next to the icon — untouched there). On mobile it's replaced entirely
     by .room-amenity-overlay (below), a single panel per room floating
     over that room's photo instead of nested in the scrollable icon row. */
  .room-amenity-tooltip {
    display: none;
  }

  /* Shared amenity panel — one per room, positioned (via JS, see main.js)
     to float near the bottom of THAT room's photo. Lives outside
     .room-amenities in the DOM specifically so the row's overflow-x can
     never clip it, and it doesn't shift layout since it's an overlay. */
  .room-amenity-overlay {
    display: block;
    position: absolute;
    left: var(--space-md);
    right: var(--space-md);
    z-index: 60;
    background: rgba(30, 26, 22, 0.94);
    border-radius: 10px;
    padding: 12px 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .room-amenity-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .room-amenity-overlay-title {
    display: block;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: white;
    margin-bottom: 3px;
  }

  .room-amenity-overlay-desc {
    display: block;
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
  }

  /* "+N / Vedi tutti" toggle — same bordered-box language as the icons */
  .room-amenity-more {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 56px;
    height: 40px;
    scroll-snap-align: start;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-btn);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    cursor: pointer;
  }

  .room-amenity-more-count {
    font-size: 12px;
    font-weight: 700;
  }

  .room-amenity-more-label {
    font-size: 9px;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
  }

  .container {
    padding: 0 var(--space-md);
  }

  .section {
    padding: var(--space-xl) 0;
  }

  /* Contact info box: stacks to single column */
  .contact-info-box {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding: var(--space-lg);
  }

  /* Action buttons: stack vertically */
  .contact-action-btns {
    grid-template-columns: 1fr;
  }

  /* Form row: stack Email/Telefono */
  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
  }

  .footer-middle {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

@media (max-width: 480px) {
  .hero {
    margin-top: 60px;
    height: calc(100vh - 90px);
  }

  .hero-title {
    font-size: clamp(30px, 10vw, 40px);
  }

  .hero-subtitle {
    font-size: var(--font-size-base);
  }

  .contact-info-box {
    padding: var(--space-md);
  }

  .contact-action-btns {
    gap: var(--space-sm);
  }

  .btn-wa-solid,
  .btn-outline-accent {
    padding: 15px var(--space-md);
    font-size: 12px;
  }
}