/* =============================================================
   RESIDENZA DELLA BOLLENTE — Main Stylesheet
   Figma: https://www.figma.com/design/1pABCuIE7LwBdJ4pE8cQIE/
   ============================================================= */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  --color-bg:         #2C3E2D;  /* main dark green */
  --color-bg-footer:  #19241A;  /* darker green for footer */
  --color-bg-light:   #FFFBF2;  /* cream sections */
  --color-cream:      #EDE3D5;  /* primary text */
  --color-taupe:      #DED9D5;  /* secondary text */
  --color-tan:        #BDA078;  /* borders, secondary accents */
  --color-gold:       #E9BD51;  /* hero heading accent — rgba(233,189,81,1) */
  --color-brown:      #5C432F;  /* tertiary text */
  --color-rust:       #975532;  /* logo bg, accents */
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul { list-style: none; }
a  { text-decoration: none; color: inherit; }
img { display: block; }

/* ── Base ───────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: var(--color-bg);
  color: var(--color-cream);
  max-width: 1920px;
  margin: 0 auto;
}

/* =============================================================
   SITE HEADER
   Figma: Frame 7939 — 1920 × 170 px
   Layout: 3-column grid  [nav-left | logo | nav-right+lang]
   ============================================================= */
.site-header {
  width: 100%;
  height: 71px;
  background-color: var(--color-bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 clamp(20px, 13vw, 250px);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ── Primary navigation (shared) ───────────────────────────── */
.nav-primary ul {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.7vw, 32px);  /* 32px на 1920, сжимается */
}

.nav-primary a {
  font-size: clamp(14px, 0.94vw, 18px);  /* 18/1920 ≈ 0.94vw */
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-cream);
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.nav-primary a:hover { opacity: 0.65; }

.nav-primary--left  ul { justify-content: flex-start; }
.nav-primary--right ul { justify-content: flex-end; }

/* Apartments: text + chevron aligned to baseline */
.has-dropdown {
  display: flex;
  align-items: flex-end;     /* Figma: alignItems flex-end */
  gap: 2px;                  /* Figma: gap 2px */
}

.chevron { margin-bottom: 5px; flex-shrink: 0; }

/* ── Logo ───────────────────────────────────────────────────── */
.site-logo {
  position: absolute;
  left: 50%;
  top: 6px;                            /* Figma y:6 */
  transform: translateX(-50%);
  z-index: 101;
}

.site-logo img {
  width: clamp(70px, 6.9vw, 132px);   /* 132/1920 ≈ 6.9vw */
  height: clamp(70px, 6.9vw, 132px);  /* 132×132 */
  object-fit: contain;
}

/* ── Header end (right nav + language) ─────────────────────── */
.header-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 1.7vw, 32px);
}

/* ── Language switcher ─────────────────────────────────────── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 16px;                 /* Figma: gap 16px between options */
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 6px;                  /* Figma: gap 6px (flag + label) */
  font-size: 16px;           /* Figma: style_R9V88Y — 16px */
  font-weight: 400;
  color: var(--color-cream);
  transition: opacity 0.2s ease;
}

.lang-option:hover { opacity: 0.65; }

/* Flag icon size override (flag-icons CDN defaults to 1.33em) */
.lang-option .fi {
  width: 20px;               /* Figma: 20 × 20 px */
  height: 20px;
  border-radius: 2px;
  background-size: cover;
  flex-shrink: 0;
}

/* =============================================================
   HERO
   Figma: Frame 13 — 1920 × 1003 px
   Layers (bottom→top):
     1. hero-bg.png        — main photo (x:-54, y:-52, 1974×1149)
     2. hero-overlay-img   — freepik photo + colour grading on top
     3. Ellipse 9          — blurred glow (825×484, blur 300px, op 0.18)
     4. Heading text       — x:242, y:183, 695×282 px
   ============================================================= */
.hero {
  position: relative;
  width: 100%;
  height: clamp(500px, 52.2vw, 1003px);  /* 1003/1920 ≈ 52.2% */
  overflow: hidden;

  background-image: url('../assets/images/hero-bg.png');
  background-size: cover;
  background-position: center;
}

/* Layer 2 — background video (replaces hero-rendered.png) */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Layer 3 — decorative blurred glow ellipse */
.hero__blur {
  position: absolute;
  left:   7%;                /* 135/1920 ≈ 7% */
  top:    9%;                /* 89/1003 ≈ 9% */
  width:  43%;               /* 825/1920 ≈ 43% */
  height: 48%;               /* 484/1003 ≈ 48% */
  background-color: #24283A;
  border-radius: 50%;
  filter: blur(300px);
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
}

/* Layer 4 — text content */
.hero__content {
  position: absolute;
  top:   18.2%;              /* 183/1003 ≈ 18.2% */
  left:  12.6%;              /* 242/1920 ≈ 12.6% */
  width: 36.2%;              /* 695/1920 ≈ 36.2% */
  z-index: 2;
}

/* Heading: Italiana uppercase */
.hero__heading {
  font-family: 'Italiana', serif;
  font-size: clamp(36px, 4.17vw, 80px);  /* 80/1920 ≈ 4.17vw */
  font-weight: 400;
  line-height: 1.178em;
  text-transform: uppercase;
  color: #ffffff;
}

/* "Where sunny" — золотой акцент (character override в Figma) */
.hero__heading .accent {
  color: var(--color-gold);    /* rgba(233, 189, 81, 1) = #E9BD51 */
}

/* =============================================================
   APARTMENTS SECTION — adaptive layout
   ============================================================= */
.apts-section {
  width: 100%;
  background-color: var(--color-bg);
}

/* ── Hotel intro hero (bg photo + text overlay) ──────────── */
.apts-hero {
  position: relative;
  width: 100%;
  min-height: clamp(400px, 52.9vw, 1016px);  /* 1016/1920 ≈ 52.9% */
  padding: 140px 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.apts-hero__bg {
  position: absolute;
  inset: 0;
  width: 88%;                       /* 1686/1920 ≈ 88% */
  height: 100%;
  object-fit: cover;
}

/* Gradient fade — плавное затухание фото в фон снизу и справа */
.apts-hero__fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--color-bg) 0%, transparent 30%),
    linear-gradient(270deg, var(--color-bg) 0%, transparent 40%);
  pointer-events: none;
  z-index: 1;
}

.apts-hero__text {
  position: relative;
  width: clamp(300px, 25vw, 486px);
  margin: 0 auto;                   /* центрирование по горизонтали */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(14px, 1.04vw, 20px);
  font-weight: 300;
  line-height: 1.5em;
  text-align: center;
  color: #DED9D5;
  z-index: 1;
}

.apts-hero__address {
  margin-top: 20px;
}

/* ── Apartment row (shared) ──────────────────────────────── */
.apt-row {
  padding: 0 clamp(40px, 11vw, 210px) clamp(40px, 4vw, 80px);
}

.apt-row__title {
  font-family: 'Italiana', serif;
  font-size: clamp(36px, 3.44vw, 66px);
  font-weight: 400;
  line-height: 1.178em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-cream);
  margin-bottom: clamp(20px, 2vw, 40px);
}

.apt-row__content {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}

/* Media container: takes half, equal with desc */
.apt-row__media {
  flex: 1 1 0;
  min-width: 0;
}

/* Photo fills its container */
.apt-row__photo {
  width: 100%;
  aspect-ratio: 710 / 533;
  object-fit: cover;
  display: block;
}

/* Description: takes other half */
.apt-row__desc {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2vw, 40px);
}

.apt-row__desc p {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(16px, 1.04vw, 20px);
  font-weight: 300;
  line-height: 1.5em;
  color: var(--color-cream);
}

/* ── No.2 reverse: desc LEFT, photo RIGHT ──────────────────── */
.apt-row--reverse .apt-row__content {
  flex-direction: row-reverse;
}

/* Reverse: no extra overrides — gap handles spacing */

.apt-row__desc--right {
  align-items: flex-end;
}

.apt-row__desc--right p {
  text-align: right;
}

/* ── Pill button (shared) ──────────────────────────────────── */
/* Figma: row, center, gap:10, padding 16px 32px               */
/* border 1px #BDA078, borderRadius 50px, Poppins 300 20px     */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border: 1px solid var(--color-tan); /* #BDA078 */
  border-radius: 50px;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5em;
  color: var(--color-cream);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.btn-pill {
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-pill:hover {
  background-color: var(--color-tan);  /* #BDA078 заливка */
}
.btn-pill:hover svg path {
  stroke: var(--color-cream);          /* стрелка → #EDE3D5 */
}

/* =============================================================
   ATTRACTIONS SECTION — adaptive layout
   ============================================================= */
.attractions {
  width: 100%;
  background-color: var(--color-bg);
  padding: clamp(40px, 4vw, 80px) clamp(40px, 11vw, 210px);
}

/* Title: Italiana 66px UPPER CENTER */
.attractions__title {
  font-family: 'Italiana', serif;
  font-size: clamp(36px, 3.44vw, 66px);
  font-weight: 400;
  line-height: 1.178em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-cream);
  margin-bottom: clamp(30px, 3vw, 60px);
}

/* ── Attraction row (shared) ─────────────────────────────── */
.attr-row {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  margin-bottom: clamp(40px, 4vw, 80px);
}

/* Reversed row: text left, photo right */
.attr-row--reverse {
  flex-direction: row-reverse;
}

/* Media container: takes remaining space after gap */
.attr-row__media {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  align-self: flex-start;    /* не растягивается по высоте */
}

/* Photo fills its container */
.attr-row__media img {
  width: 100%;
  aspect-ratio: 710 / 481;
  object-fit: cover;
  display: block;
}

/* Region button on photo — centered at bottom */
.btn-region {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 24px;
  border-radius: 50px;
  background-color: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  font-family: 'Poppins', sans-serif;
  font-size: clamp(14px, 0.94vw, 18px);
  font-weight: 300;
  line-height: 1.5em;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  z-index: 2;
}

/* Text column: takes remaining space after gap */
.attr-row__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 40px);
}

.attr-row__label {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(16px, 1.04vw, 20px);
  font-weight: 300;
  line-height: 1.5em;
  color: var(--color-cream);
}

.attr-row__text p {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(16px, 1.04vw, 20px);
  font-weight: 300;
  line-height: 1.5em;
  color: var(--color-cream);
}

/* Right-aligned text for reversed row */
.attr-row__text--right {
  align-items: flex-end;
}
.attr-row__text--right p {
  text-align: right;
}

/* Reverse: no extra overrides needed — gap handles spacing */

/* =============================================================
   REVIEWS SECTION — adaptive layout
   ============================================================= */
.reviews {
  width: 100%;
  background-color: var(--color-bg);
  padding: clamp(40px, 4vw, 80px) clamp(40px, 11vw, 210px);
}

.reviews__inner {
  max-width: 718px;
  margin: 0 auto;
}

.reviews__title {
  font-family: 'Italiana', serif;
  font-size: clamp(36px, 3.44vw, 66px);
  font-weight: 400;
  line-height: 1.178em;
  text-transform: uppercase;
  color: var(--color-cream);
  margin-bottom: clamp(20px, 2vw, 40px);
}

/* Quote + text side by side */
.reviews__body {
  display: flex;
  gap: 12px;
  margin-bottom: clamp(20px, 2vw, 30px);
}

.reviews__quote {
  width: clamp(40px, 4vw, 73px);
  height: auto;
  opacity: 0.6;
  flex-shrink: 0;
  align-self: flex-start;
}

.reviews__text {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(14px, 0.94vw, 18px);
  font-weight: 300;
  line-height: 1.5em;
  color: var(--color-cream);
}

.reviews__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: clamp(20px, 2vw, 30px);
}

.reviews__author-name {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(16px, 1.04vw, 20px);
  font-weight: 300;
  line-height: 1.5em;
  color: var(--color-cream);
}

.reviews__author-country {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(16px, 1.04vw, 20px);
  font-weight: 300;
  line-height: 1.5em;
  color: var(--color-cream);
  opacity: 0.5;
}

.reviews__stars {
  width: 106px;
  height: auto;
}

/* =============================================================
   BOOKING SECTION — adaptive layout
   ============================================================= */
.booking {
  width: 100%;
  background-color: var(--color-bg);
  padding: clamp(40px, 5vw, 100px) clamp(20px, 5vw, 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(30px, 3vw, 60px);
}

.booking__title {
  font-family: 'Italiana', serif;
  font-size: clamp(36px, 3.44vw, 66px);
  font-weight: 400;
  line-height: 1.178em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-cream);
}

.booking__form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 20px 16px;
  background-color: #FFFBF2;
  border: 1px solid var(--color-tan);
  border-radius: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

.booking__field {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.booking__field--dates {
  gap: 10px;
  padding: 0 10px;
}

.booking__field--adults {
  gap: 8px;
  padding: 0 clamp(10px, 2vw, 40px);
}

.booking__field--apts {
  gap: 9px;
  padding: 0 clamp(10px, 2vw, 43px);
}

.booking__icon { flex-shrink: 0; }
.booking__arrow { flex-shrink: 0; }

.booking__input-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.booking__label {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5em;
  text-align: center;
  color: #5C432F;
  white-space: nowrap;
}

.booking__count {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.395em;
  text-align: center;
  color: #5C432F;
}

.booking__divider {
  width: 1px;
  height: 54px;
  background-color: var(--color-tan);
  flex-shrink: 0;
}

.booking__counter-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.booking__apt-btn {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.395em;
  color: #5C432F;
  background: none;
  border: 1px solid var(--color-tan);
  padding: 4px 10px;
  cursor: pointer;
}

.booking__apt-btn--active {
  background-color: rgba(189, 160, 120, 0.15);
}

.booking__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 48px;
  background-color: var(--color-tan);
  border: 1px solid var(--color-tan);
  border-radius: 98px;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5em;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.booking__submit:hover { opacity: 0.85; }

/* =============================================================
   FOOTER — adaptive layout
   ============================================================= */
.site-footer {
  width: 100%;
  background-color: #19241A;
  padding: clamp(20px, 3vw, 30px) clamp(40px, 13vw, 250px);
}

/* 3-column grid: contacts | brand | nav */
.footer__grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 40px);
}

/* Brand: centered column */
.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.footer__logo img {
  width: clamp(90px, 7vw, 136px);
  height: clamp(90px, 7vw, 136px);
  border-radius: 50%;
  object-fit: cover;
}

.footer__name {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(16px, 1.04vw, 20px);
  font-weight: 300;
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: center;
  color: #DED9D5;
}

.footer__city {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(14px, 0.83vw, 16px);
  font-weight: 300;
  line-height: 1.5em;
  text-align: center;
  color: #DED9D5;
}

/* (footer__columns removed — replaced by footer__grid) */

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;                         /* Figma gap:16 */
}

.footer__col--right {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(20px, 2vw, 40px);
}

.footer__label {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(14px, 0.83vw, 16px);
  font-weight: 400;
  line-height: 1.5em;
  color: rgba(222, 217, 213, 0.6);
}

.footer__value {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(14px, 0.94vw, 18px);
  font-weight: 300;
  line-height: 1.5em;
  color: #DED9D5;
  text-decoration: none;
}

.footer__address,
.footer__email {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer__social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer__social-link {
  display: flex;
  align-items: center;
  color: #ffffff;
  transition: opacity 0.2s ease;
}
.footer__social-link:hover { opacity: 0.7; }

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer__nav a {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(14px, 0.94vw, 18px);
  font-weight: 300;
  line-height: 1.5em;
  color: #DED9D5;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.footer__nav a:hover { opacity: 0.7; }

.footer__scroll-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width:  50px;
  height: 50px;
  background-color: #1C291D;
  border: 1px solid var(--color-tan);
  border-radius: 50%;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}
.footer__scroll-top:hover { opacity: 0.85; }

/* =============================================================
   BURGER MENU (hidden on desktop)
   ============================================================= */
.burger {
  display: none;             /* visible only in @media */
  background: none;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px;
  z-index: 200;
}

.burger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-cream);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Burger → X animation */
.nav-open .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-open .burger span:nth-child(2) { opacity: 0; }
.nav-open .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* =============================================================
   RESPONSIVE — Tablet (≤1024px)
   ============================================================= */
@media (max-width: 1024px) {

  /* Header: show burger, hide nav */
  .burger { display: flex; }

  .site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
  }

  .site-header .nav-primary,
  .site-header .header-end { display: none; }

  .site-header .site-logo { order: -1; }
  .site-header .site-logo img {
    width: 62px;
    height: 62px;
  }

  /* Mobile nav overlay */
  .nav-open .nav-primary,
  .nav-open .header-end {
    display: flex;
  }

  .nav-open {
    flex-wrap: wrap;
    align-content: flex-start;
    position: fixed;
    inset: 0;
    background-color: var(--color-bg);
    padding: 80px 20px 40px;
    overflow-y: auto;
    z-index: 150;
  }

  .nav-open .nav-primary {
    width: 100%;
    margin-bottom: 20px;
  }

  .nav-open .nav-primary ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .nav-open .nav-primary a { font-size: 24px; }

  .nav-open .header-end {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .nav-open .header-end .nav-primary ul {
    flex-direction: column;
  }

  .nav-open .burger {
    position: fixed;
    top: 10px;
    right: 20px;
  }

  .nav-open .site-logo {
    position: fixed;
    top: 10px;
    left: 20px;
  }

  /* Hero heading: Figma mobile 53px */
  .hero__heading { font-size: 42px; }
  .hero__content { width: 80%; left: 5%; }

  /* Section paddings */
  .apt-row { padding: 30px 20px; }
  .apt-row__content { flex-wrap: wrap; gap: 20px; }
  .apt-row__media { flex: 1 1 100%; margin: 0 -20px; }  /* выход за padding */
  .apt-row__photo { width: 100%; }
  .apt-row__desc { flex: 1 1 100%; padding: 0 20px; }

  .apt-row__title { font-size: 36px; }

  .attractions { padding: 30px 20px; }
  .attractions__title { font-size: 36px; }
  .attr-row { flex-wrap: wrap; gap: 20px; padding: 0; }
  .attr-row__media { flex: 1 1 100%; margin: 0 -20px; }  /* выход за padding секции */
  .attr-row__media img { width: 100%; }
  .attr-row__text { flex: 1 1 100%; padding: 0 20px; }
  .attr-row--reverse { flex-direction: column; }

  /* Apts hero text */
  .apts-hero__text {
    width: 80%;
    max-width: none;
    font-size: 16px;
  }

  /* Reviews */
  .reviews { padding: 40px 20px; }
  .reviews__title { font-size: 36px; }

  /* Booking */
  .booking { padding: 40px 20px; }
  .booking__title { font-size: 36px; }

  .booking__form { flex-direction: column; gap: 16px; }
  .booking__divider { width: 100%; height: 1px; }
  .booking__field--dates,
  .booking__field--adults,
  .booking__field--apts { padding: 0; }

  /* Footer */
  .site-footer { padding: 30px 20px; }

  .footer__grid { flex-direction: column; align-items: center; }

  .footer__col--right {
    flex-direction: column;
    gap: 20px;
  }
}

/* =============================================================
   RESPONSIVE — Mobile (≤480px)
   ============================================================= */
@media (max-width: 480px) {

  /* Hero */
  .hero { height: clamp(400px, 120vw, 465px); }
  .hero__heading { font-size: 36px; }
  .hero__content { width: 90%; left: 5%; top: 12%; }

  /* Apts hero: shrink photo area */
  .apts-hero { aspect-ratio: auto; height: 350px; }
  .apts-hero__text { font-size: 14px; width: 90%; }

  /* Apartment rows: text has padding, photos bleed full width */
  .apt-row { padding: 20px 0; }
  .apt-row__title { font-size: 32px; padding: 0 20px; }
  .apt-row__content { padding: 0; }
  .apt-row__photo {
    flex-basis: 100%;
    max-width: 100%;
    width: 100vw;
    margin-left: 0;
    border-radius: 0;
  }
  .apt-row__desc { max-width: 100%; flex-basis: 100%; padding: 0 20px; }
  .apt-row__desc p { font-size: 16px; }

  /* Attractions */
  .attractions { padding: 20px 0; }
  .attractions__title { font-size: 32px; padding: 0 20px; }
  .attr-row { padding: 0; margin-bottom: 30px; }
  .attr-row { flex-wrap: wrap; gap: 20px; }
  .attr-row__media { flex: 1 1 100%; }
  .attr-row__media img { width: 100%; }
  .attr-row__text { flex: 1 1 100%; padding: 0 20px; }
  .attr-row__text p { font-size: 16px; }

  /* Reverse row: text above photo on mobile */
  .attr-row--reverse { flex-direction: column; }

  /* Reviews */
  .reviews__title { font-size: 32px; }
  .reviews__text { font-size: 16px; }
  .reviews__body { flex-direction: column; }

  /* Booking */
  .booking__title { font-size: 32px; }
  .booking__field--dates { width: 100%; }

  /* Footer */
  .footer__nav { gap: 6px; }
  .footer__nav a { font-size: 16px; }
}