/* ==========================================================================
   Holiday Inn Kolkata Airport — site stylesheet
   Rebuilt for Jain Group. Brand green sampled from the official HI logo.
   ========================================================================== */

:root {
  --hi-green: #216245;
  --hi-green-dark: #163f2d;
  --hi-green-darker: #0f2e21;
  --hi-black: #1a1a1a;
  --hi-gold: #b7893f;
  --hi-cream: #f7f5f0;
  --hi-grey: #58595b;
  --hi-grey-light: #e7e5e0;
  --hi-border: #d9d6cd;
  --hi-white: #ffffff;
  --hi-red: #b3261e;
  --max-width: 1280px;
  --radius: 6px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.12);
  --shadow-md: 0 6px 24px rgba(0,0,0,.16);
  --font-body: "Poppins", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Playfair Display", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Horizontal-overflow safety net.
   ----------------------------------------------------------------------
   Still deliberately NOT "overflow-x: hidden": setting hidden on one axis
   forces the other axis to "auto", which turns the element into a scroll
   container and breaks "position: sticky" on every descendant - that is
   what stopped the navbar sticking previously.

   "overflow-x: clip" is the one that does what was actually wanted here. It
   clips without creating a scroll container, so sticky keeps working, and
   unlike hidden it does not force the other axis. The result: nothing can
   ever cause a horizontal scrollbar, including things that only overflow on
   a real device (a mobile date input's intrinsic minimum width, say) and so
   can't be caught by testing in a desktop browser.

   This is a backstop, not a substitute for fixing causes - genuine overflow
   sources are still fixed at the source below, because clipping a broken
   layout only hides it. Browsers without "clip" support (Safari < 16) simply
   ignore the line and behave exactly as before. */
html { overflow-x: clip; }
body {
  max-width: 100%;
  overflow-x: clip;
}
/* Kill the default blue/grey tap-highlight box mobile browsers flash on
   every tap (that's the "element turns blue when clicked" you're seeing),
   and replace the default focus ring with a subtler brand-green one that
   still shows up for keyboard users. */
* { -webkit-tap-highlight-color: transparent; }
a, button, input, .btn, .card, .feature-card, .rg-button, .nav-toggle { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible,
.card:focus-visible, .feature-card:focus-visible, .nav-toggle:focus-visible {
  outline: 2px solid var(--hi-green);
  outline-offset: 2px;
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--hi-black);
  background: var(--hi-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-head); margin: 0 0 .5em; font-weight: 700; color: var(--hi-green-darker); letter-spacing: .01em; }
p { margin: 0 0 1em; overflow-wrap: break-word; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--hi-green);
  color: #fff; padding: 10px 16px; z-index: 2000; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .03em;
  padding: 13px 28px;
  border-radius: 2px;
  font-size: .92rem;
  text-align: center;
  transition: background .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--hi-green); color: #fff; }
.btn-primary:hover { background: var(--hi-green-dark); }
.btn-outline { background: transparent; border: 2px solid var(--hi-green); color: var(--hi-green); }
.btn-outline:hover { background: var(--hi-green); color: #fff; }
.btn-block { width: 100%; }
.btn-gold { background: var(--hi-gold); color: #fff; }
.btn-gold:hover { background: #96702f; }

/* ---------- Header ---------- */
/* Sticky has to live on the outer .site-header, not .header-inner: a sticky
   element can only "float" within its own parent's box, and .site-header
   used to be exactly as tall as .header-inner, leaving it nowhere to
   stick - so it just scrolled away like normal content. */
.site-header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 650; /* must stay above .main-nav (600) so the toggle button
                   (and its X icon) is never hidden behind the open menu */
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 20px;
  background: #fff;
  border-bottom: 1px solid var(--hi-border);
}
.logo-group { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.logo-link { display: flex; align-items: center; flex-shrink: 0; }
.logo-link img { height: 42px; width: auto; }
.call-link {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--hi-cream); color: var(--hi-green);
}
.call-link:hover { background: var(--hi-green); color: #fff; }
.main-nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.main-nav a {
  font-size: .92rem;
  font-weight: 600;
  color: var(--hi-black);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] { color: var(--hi-green); border-color: var(--hi-green); }

.header-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.best-rate-link {
  font-size: .74rem;
  font-weight: 700;
  color: var(--hi-green);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  position: relative; /* z-index only applies to positioned elements - without
                          this the toggle stayed hidden/unclickable behind the
                          open .main-nav panel (which has z-index: 600) */
  z-index: 650;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 24px; height: 2px; background: var(--hi-black);
  position: relative; transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
/* Open state: hamburger morphs into an X */
.nav-toggle.open span { background: transparent; }
.nav-toggle.open span::before { top: 0; transform: rotate(45deg); }
.nav-toggle.open span::after { top: 0; transform: rotate(-45deg); }

/* Fixed bottom "Book Now" bar - shown only on mobile/tablet (see breakpoint below) */
.mobile-book-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 550;
  background: #fff;
  border-top: 1px solid var(--hi-border);
  box-shadow: 0 -4px 16px rgba(0,0,0,.14);
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.mbb-label { font-size: .72rem; font-weight: 700; color: var(--hi-green); margin-bottom: 6px; }
.mobile-book-bar .btn { padding: 12px 20px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 420px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  color: #fff;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.65) 100%);
}
.hero-content { position: relative; z-index: 1; padding-top: 48px; padding-bottom: 40px; width: 100%; }
.hero-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .8rem; color: #f2d99b; margin-bottom: 10px; }
.hero h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 10px; }
.hero p.lead { max-width: 640px; font-size: 1.05rem; color: #f3f3f3; }
.hero-small { min-height: 260px; }

.stars {
  position: relative; display: inline-block; font-size: 1.3rem; line-height: 1;
  letter-spacing: 2px; color: var(--hi-grey-light);
}
.stars::before { content: "\2605\2605\2605\2605\2605"; }
.stars-fg {
  position: absolute; left: 0; top: 0; display: inline-block; overflow: hidden;
  white-space: nowrap; width: var(--fill); color: var(--hi-gold);
}
.rating-score { display: block; color: var(--hi-green-darker); font-weight: 700; font-size: 1.2rem; margin-top: 2px; }
.rating-max { font-weight: 400; color: var(--hi-grey); font-size: .85rem; }
.rating-label { display: block; color: var(--hi-grey); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }

/* Tagline + guest rating - its own dedicated, centered section between the
   booking widget and the Overview section (matches the real site's
   heading-then-rating pairing in spirit, without crowding either the hero
   photo or the heading text where it kept colliding on narrow screens). */
.tagline-rating-section {
  background: #fff;
  border-bottom: 1px solid var(--hi-border);
  padding: 32px 0;
}
.tagline-rating-inner {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
}
.tagline-centered {
  margin: 0; text-align: center;
  font-weight: 700; font-size: clamp(1.2rem, 2.8vw, 1.6rem);
  color: var(--hi-green-darker);
}
.tagline-divider { width: 64px; height: 3px; background: var(--hi-gold); border-radius: 2px; }
.rating-row {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 14px; text-align: center;
}
.rating-row .stars { font-size: 1.5rem; }
.rating-row .rating-score { display: inline; font-size: 1.3rem; margin-top: 0; }
.rating-row .rating-label {
  display: inline; margin-top: 0; padding-left: 14px; border-left: 1px solid var(--hi-border);
}

/* ---------- Booking widget ---------- */
.booking-widget-wrap {
  background: var(--hi-cream);
  border-bottom: 1px solid var(--hi-border);
}
.booking-widget {
  position: relative;
  margin: -46px auto 0;
  max-width: 1040px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: end;
  z-index: 5;
}
.bw-field { flex: 1 1 200px; min-width: 170px; max-width: 100%; position: relative; }
.bw-field label {
  display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--hi-grey); margin-bottom: 6px;
}
.bw-field input[type="date"],
.bw-field .rg-button {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hi-border);
  border-radius: 4px;
  font-size: .95rem;
  font-family: inherit;
  background: #fff;
  cursor: pointer;
  text-align: left;
  color: var(--hi-black);
}
.bw-field input[type="date"]:focus,
.bw-field .rg-button:focus { outline: 2px solid var(--hi-green); outline-offset: 1px; }

/* ---------- Custom date picker ----------
   The Arrival/Departure fields are buttons, not <input type="date">. The
   native control draws its popup outside the page (it's OS chrome, not DOM),
   so it can't be themed at all -- this is the in-page replacement. See
   initDatePicker() in js/main.js. */
.bw-date-btn {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--hi-border);
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-size: .95rem;
  color: var(--hi-black);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bw-date-btn:hover { border-color: var(--hi-green); }
.bw-date-btn.active,
.bw-date-btn:focus-visible {
  border-color: var(--hi-green);
  box-shadow: 0 0 0 3px rgba(33, 98, 69, .14);
  outline: none;
}
.bw-date-btn .bw-date-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bw-date-text.dp-placeholder { color: var(--hi-grey); }
.bw-date-btn .bw-date-icon { position: static; transform: none; flex: 0 0 auto; }

/* top/left are set by position() in js/main.js, which anchors the calendar to
   whichever field opened it -- see the comment there for why CSS alone can't
   do it once the widget stacks on mobile. */
.dp {
  position: absolute;
  z-index: 60;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--hi-border);
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .16);
  padding: 14px;
  width: max-content;
  max-width: min(520px, calc(100vw - 32px));
}
.dp[hidden] { display: none; }
.dp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.dp-titles {
  flex: 1;
  display: flex;
  justify-content: space-around;
  gap: 16px;
}
.dp-title {
  flex: 1;
  text-align: center;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 700;
  color: var(--hi-green-dark);
}
.dp-nav {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hi-border);
  border-radius: 50%;
  background: #fff;
  color: var(--hi-green);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.dp-nav:hover:not(:disabled) { background: var(--hi-cream); border-color: var(--hi-green); }
.dp-nav:disabled { opacity: .3; cursor: not-allowed; }

.dp-months { display: flex; gap: 16px; }
.dp-month { flex: 1 1 0; min-width: 203px; }
.dp-dow, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.dp-dow { margin-bottom: 2px; }
.dp-dow span {
  text-align: center;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--hi-grey);
  padding: 2px 0;
}
.dp-grid { gap: 1px 0; }
/* The cell carries the range band; the button inside carries the round pill.
   Keeping them on separate elements is what lets the band run edge to edge
   while the selected days still render as circles sitting on top of it. */
.dp-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dp-in-range { background: #e3efe8; }
.dp-range-start { background: linear-gradient(to right, transparent 50%, #e3efe8 50%); }
.dp-range-end { background: linear-gradient(to left, transparent 50%, #e3efe8 50%); }
.dp-day {
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: .8rem;
  color: var(--hi-black);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, color .12s ease;
}
.dp-day:hover:not(:disabled):not(.dp-selected) { background: var(--hi-grey-light); }
.dp-disabled { color: #c4c2bd; cursor: not-allowed; }
.dp-today { font-weight: 700; box-shadow: inset 0 0 0 1px var(--hi-border); }
.dp-selected { background: var(--hi-green); color: #fff; font-weight: 600; }
.dp-selected:hover { background: var(--hi-green-dark); }

.dp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hi-grey-light);
}
.dp-summary { margin: 0; font-size: .78rem; font-weight: 600; color: var(--hi-green-dark); }
.dp-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.dp-clear {
  border: none;
  background: none;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--hi-grey);
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 4px;
}
.dp-clear:hover { color: var(--hi-green); }
.dp-done { padding: 8px 20px; font-size: .82rem; }

/* ---------- Date fields (Arrival / Departure) ----------
   The wrapper is the positioning context for nothing now (the calendar hangs
   off .booking-widget instead), but it still enforces the shrink behaviour
   that stopped these fields overflowing the card on phones: a flex child
   defaults to "min-width: auto", so without an explicit 0 the field refuses
   to shrink below its content width. */
.bw-date { position: relative; display: block; width: 100%; min-width: 0; }
.bw-date-icon { display: flex; color: var(--hi-green); }
/* Same box metrics on the Rooms & Guests button, so all three controls in the
   widget line up exactly rather than sitting a couple of pixels apart. */
.bw-field .rg-button {
  min-height: 46px;
  line-height: 1.3;
  display: flex;
  align-items: center;
}
.bw-field .rg-button:hover { border-color: var(--hi-green); }

/* The "Enquiring about: Standard Room" chip, shown when a Rooms-page
   Book Now sent the visitor here to pick dates first. */
.bw-intent {
  flex: 1 0 100%;
  margin: -4px 0 2px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--hi-green);
}
.bw-cta { flex: 0 0 auto; }
.bw-cta .btn { width: 100%; padding: 13px 30px; }

.rg-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 280px;
  max-width: 90vw;
  background: #fff;
  border: 1px solid var(--hi-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 16px;
  z-index: 20;
}
.rg-panel.open { display: block; }
.rg-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--hi-grey-light); }
.rg-row:last-of-type { border-bottom: none; }
.rg-row-label { font-size: .88rem; font-weight: 600; }
.rg-row-sub { font-size: .72rem; color: var(--hi-grey); }
.rg-stepper { display: flex; align-items: center; gap: 10px; }
.rg-stepper button {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--hi-green);
  background: #fff; color: var(--hi-green); font-size: 1rem; cursor: pointer; line-height: 1;
}
.rg-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.rg-stepper span { min-width: 18px; text-align: center; font-weight: 700; }
.rg-done { margin-top: 10px; width: 100%; }

/* ---------- Sections ---------- */
.section { padding: 56px 0; }
.section-alt { background: var(--hi-cream); }
.section-head { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.section-head p { color: var(--hi-grey); }

.grid { display: grid; gap: 28px; }
.grid > * { min-width: 0; } /* prevent long unbreakable content (emails, phone numbers) from forcing grid tracks to overflow */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Feature icons - brick/pyramid layout: 5 in first row, 4 centered below */
.feature-grid-brick { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 0; }
.feature-card {
  text-align: center;
  padding: 12px 10px;
  flex: 0 0 20%;
  max-width: 20%;
}
.feature-card img { width: 40px; height: 40px; margin: 0 auto 12px; }
.feature-card span { font-size: .85rem; font-weight: 600; }

.overview-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.overview-split img { border-radius: var(--radius); box-shadow: var(--shadow-sm); }

.card {
  background: #fff;
  border: 1px solid var(--hi-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.card-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body h3 { font-size: 1.1rem; margin-bottom: 2px; }
.card-body .meta { font-size: .8rem; color: var(--hi-grey); text-transform: uppercase; letter-spacing: .03em; }
.card-body p { color: var(--hi-grey); font-size: .92rem; margin-bottom: 6px; }
.card-body .card-cta { margin-top: auto; }

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.tag {
  background: var(--hi-cream);
  border: 1px solid var(--hi-border);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: .72rem;
  color: var(--hi-grey);
}

/* Amenity blocks - card treatment so blocks of plain text read as sections */
.amenity-block {
  background: #fff;
  border: 1px solid var(--hi-border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.amenity-block h3 { border-bottom: 2px solid var(--hi-green); display: inline-block; padding-bottom: 4px; margin-bottom: 14px; font-size: 1.05rem; }
.amenity-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; }
.amenity-list li { font-size: .92rem; padding: 4px 0; position: relative; padding-left: 18px; color: var(--hi-black); overflow-wrap: break-word; }
.amenity-list li::before { content: "•"; color: var(--hi-green); position: absolute; left: 0; font-weight: 700; }

.table-scroll { width: 100%; overflow-x: auto; }
.info-table { width: 100%; border-collapse: collapse; font-size: .92rem; table-layout: fixed; }
.info-table th, .info-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--hi-border); }
.info-table td { overflow-wrap: anywhere; }
.info-table th { width: 38%; color: var(--hi-grey); font-weight: 600; }

.offer-badge {
  position: absolute; top: 14px; left: 14px; background: var(--hi-gold); color: #fff;
  font-size: .7rem; font-weight: 700; padding: 4px 10px; border-radius: 3px; letter-spacing: .04em;
}
.card-media { position: relative; }

/* ---------- Photos page: quick-jump tabs + per-category sections ---------- */
.gallery-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 8px; }
.gallery-tabs a {
  display: inline-block;
  border: 1px solid var(--hi-border);
  background: #fff;
  padding: 9px 20px;
  border-radius: 24px;
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  color: var(--hi-grey);
}
.gallery-tabs a:hover { background: var(--hi-green); color: #fff; border-color: var(--hi-green); }
.photo-section { padding: 40px 0; }
.photo-section:not(:last-child) { border-bottom: 1px solid var(--hi-border); }
.photo-section h2 { text-align: center; margin-bottom: 24px; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery-grid figure { margin: 0; border-radius: var(--radius); overflow: hidden; cursor: zoom-in; position: relative; background: var(--hi-grey-light); }
.gallery-grid img { aspect-ratio: 4/3; object-fit: cover; width: 100%; transition: transform .3s; }
.gallery-grid figure:hover img { transform: scale(1.06); }
.gallery-grid figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px;
  background: linear-gradient(0deg, rgba(0,0,0,.7), transparent);
  color: #fff; font-size: .75rem; opacity: 0; transition: opacity .2s;
}
.gallery-grid figure:hover figcaption { opacity: 1; }

.lightbox {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 3000;
  align-items: center; justify-content: center; padding: 30px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 82vh; border-radius: 4px; }
.lightbox-caption { color: #fff; text-align: center; margin-top: 14px; font-size: .9rem; }
.lightbox-close, .lightbox-nav {
  position: absolute; background: rgba(255,255,255,.12); border: none; color: #fff;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 1.3rem;
}
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }

/* Map */
.map-wrap { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--hi-border); min-width: 0; }
.map-wrap iframe { width: 100%; height: 360px; border: 0; display: block; max-width: 100%; }

/* Contact / address card */
.contact-card { background: var(--hi-cream); border-radius: var(--radius); padding: 26px; border: 1px solid var(--hi-border); min-width: 0; }
.contact-card h3 { margin-bottom: 14px; }
.contact-card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: .92rem; }
.contact-card dt { font-weight: 700; color: var(--hi-grey); }
.contact-card dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- Modal (booking inquiry form) ---------- */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(10,20,15,.55);
  z-index: 4000; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: #fff; border-radius: 8px; max-width: 480px; width: 100%;
  max-height: 92vh; overflow-y: auto; padding: 32px 28px 26px; position: relative;
  box-shadow: var(--shadow-md);
}
.modal-close {
  position: absolute; top: 14px; right: 14px; background: none; border: none;
  font-size: 1.4rem; cursor: pointer; color: var(--hi-grey); line-height: 1;
}
.modal-box h2 { font-size: 1.4rem; margin-bottom: 4px; }
.modal-sub { color: var(--hi-grey); font-size: .88rem; margin-bottom: 20px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 6px; }
.form-group input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--hi-border); border-radius: 4px; font-size: .95rem; font-family: inherit;
}
.form-group input:focus { outline: 2px solid var(--hi-green); outline-offset: 1px; }
.form-group input.invalid { border-color: var(--hi-red); }
.field-error { color: var(--hi-red); font-size: .74rem; margin: 5px 0 0; min-height: 0; }
.form-summary {
  background: var(--hi-cream); border: 1px solid var(--hi-border); border-radius: 4px;
  padding: 10px 14px; font-size: .82rem; color: var(--hi-grey); margin-bottom: 18px;
}
.agreement {
  display: flex; gap: 8px; align-items: flex-start; margin: 14px 0;
  font-size: .72rem; line-height: 1.4; color: var(--hi-grey);
}
.agreement input {
  margin: 2px 0 0; width: 13px; height: 13px; flex-shrink: 0; accent-color: var(--hi-green); cursor: pointer;
}
.agreement label { cursor: pointer; }
.form-error { color: var(--hi-red); font-size: .8rem; margin-bottom: 10px; display: none; }
.form-error.show { display: block; }
.form-status { font-size: .85rem; margin-top: 10px; text-align: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--hi-green-darker); color: #d8ddd9; padding: 52px 0 0; font-size: .9rem; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-brand img { height: 40px; margin-bottom: 14px; filter: brightness(0) invert(1); }
.footer-brand p { color: #b7c0ba; font-size: .85rem; max-width: 280px; }
.footer-social { display: flex; gap: 12px; margin-top: 16px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff;
  line-height: 0;
}
.footer-social svg { display: block; }
.footer-col h4 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col a { color: #c7cec9; font-size: .88rem; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-col address { font-style: normal; color: #c7cec9; line-height: 1.7; }
.footer-badges { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.footer-badges img { height: 40px; width: auto; border-radius: 4px; filter: none; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding-top: 20px; padding-bottom: 26px; color: #9aa69f; font-size: .78rem;
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-bottom a { color: #9aa69f; }
.footer-bottom a:hover { color: #fff; }

/* ---------- Thank you page ---------- */
.ty-wrap { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 60px 24px; text-align: center; }
.ty-box { max-width: 520px; }
.ty-icon {
  width: 74px; height: 74px; border-radius: 50%; background: var(--hi-green); color: #fff;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 2.2rem;
}
.ty-box h1 { font-size: 1.9rem; }
.ty-box p { color: var(--hi-grey); }

/* ---------- Responsive ---------- */

/* Hamburger nav + mobile bottom booking bar. This breakpoint is deliberately
   wider than a typical "tablet" cutoff: the header holds a logo, 7 nav links
   and two CTA buttons, and that content starts wrapping onto a second line
   well before 860px (the old, too-narrow threshold). Switching to the
   hamburger earlier, at 1180px, means the nav is never seen wrapping. */
@media (max-width: 1180px) {
  .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: fixed; top: 0; right: -100%; height: 100vh; width: 78%; max-width: 320px;
    background: #fff; flex-direction: column; align-items: flex-start; padding: 90px 28px 28px;
    box-shadow: -8px 0 30px rgba(0,0,0,.2); transition: right .25s ease; gap: 6px; overflow-y: auto;
    z-index: 600;
  }
  .main-nav.open { right: 0; }
  .main-nav a { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--hi-grey-light); }
  .nav-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 400; }
  .nav-scrim.open { display: block; }
  .mobile-book-bar { display: block; }
  body { padding-bottom: 86px; } /* keep page content clear of the fixed bottom bar */
}
@media (max-width: 1024px) {
  .overview-split { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-card { flex: 0 0 25%; max-width: 25%; }
}
@media (max-width: 860px) {
  .feature-card { flex: 0 0 33.33%; max-width: 33.33%; }
}
@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .booking-widget { flex-direction: column; align-items: stretch; margin-top: -30px; gap: 14px; }
  /* .bw-field's "flex: 1 1 200px" sets a 200px *width* basis for the normal
     row layout - once the widget stacks into a column above, that same
     200px becomes a HEIGHT basis instead, forcing every field to 200px tall
     with huge gaps between them. Switch to an auto (content-sized) basis. */
  /* min-width also has to drop to 0 here: the 170px desktop floor combined
     with a date input's own intrinsic width is what let these fields push
     past the card's edge on narrow phones. */
  .bw-field { flex: 1 1 auto; min-width: 0; max-width: 100%; }
  .bw-field .bw-date-btn, .bw-field .rg-button { width: 100%; min-width: 0; }
  .booking-widget { padding: 18px 16px; }
  /* One month, spanning the card, with the footer stacked - two months and a
     side-by-side footer don't fit a phone without horizontal scrolling. */
  .dp { left: 0; right: 0; width: auto; max-width: none; padding: 14px; }
  .dp-months { gap: 0; }
  .dp-month { min-width: 0; }
  .dp-footer { flex-direction: column; align-items: stretch; gap: 10px; }
  .dp-summary { text-align: center; }
  .dp-actions { margin-left: 0; justify-content: space-between; }
  .amenity-list { grid-template-columns: minmax(0, 1fr); }
  .footer-top { grid-template-columns: 1fr; }
  .hero { min-height: 340px; }
  .section { padding: 40px 0; }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .modal-box { padding: 26px 18px 20px; }
  .feature-card { flex: 0 0 50%; max-width: 50%; }
  .mbb-label { font-size: .68rem; }
  .hero { min-height: 300px; }
  .hero-small { min-height: 220px; }
  .hero-content { padding-top: 30px; padding-bottom: 26px; }
  .hero p.lead { font-size: .95rem; }
  .logo-link img { height: 34px; }
  .tagline-rating-section { padding: 24px 0; }
  .tagline-rating-inner { gap: 14px; }
  .rating-row { gap: 6px 10px; }
  .rating-row .stars { font-size: 1.15rem; }
  .rating-row .rating-score { font-size: 1.05rem; }
  .rating-row .rating-label { font-size: .62rem; padding-left: 10px; }
  /* The Overview paragraphs use the browser's plain 16px default with a
     1.6 line-height - fine on desktop, but on a narrow phone that renders
     as a wall of text several screens tall. Sized noticeably smaller and
     tighter than the rest of the site's mobile body copy on purpose, since
     this is two full paragraphs back to back, not a short card blurb. */
  .overview-split p { font-size: .85rem; line-height: 1.45; }
}