/* Castellino Naxos – the one stylesheet for the whole site.
   "Boutique editorial": cool whitewash neutrals, one navy, the logo teals, Literata serif
   headings, Commissioner for text and small uppercase labels, hairline rules, generous
   photography and an 8px spacing rhythm. Change colours, fonts and spacing in the tokens below.

   Sections, in order:
     Tokens · Base & a11y helpers · Layout · Buttons & icons · Header & nav · Hero & booking box ·
     Room cards & story cards · Gallery & lightbox · Walk/place links · Host & reviews ·
     Prices, review scores, notices · Comparison table · Book band · Contact page · Room page ·
     Guide pages · Text pages · Footer · Cookie banner · WhatsApp button · No JavaScript ·
     Reduced motion
   Each component keeps its media queries right after its own rules.

   Breakpoints (max-width; the matching min-width is one pixel more):
     1023  small laptops/tablets: two studio cards per row, two footer columns
      899  phones and tablets: folded menu, one-column layouts, comparison table as cards
           (>= 900: photo mosaic, sticky boxes)
      639  swipeable studio cards (>= 640: two stay steps per row)
      599  phones: compact home hero, cookie banner, one footer column
      399  small phones: smaller logo and header Book button, review scores
   Exception: the floating WhatsApp button is hidden from 768px (phones only).

   Conventions:
     - Labels: small uppercase tracked text (kickers, buttons, eyebrows, menu, box titles…) shares
       one rule in Base (--font-label, --tracking-label); the smaller ones get --label-sm there
       too. Add a new label's selector to those lists instead of repeating the declarations.
     - Lead text (the intro under a heading): one shared rule in Base (--step-lead, 300, 1.6).
     - Focus: :focus-visible draws a var(--focus) ring. Set --focus on a container to recolour
       it (white on dark backgrounds, see Base).
     - Motion: hover zooms use scale(var(--hover-scale)), arrow nudges var(--hover-nudge); both go
       neutral under prefers-reduced-motion, so new hover effects should use them too.
   Every text colour is checked for WCAG AA (>= 4.5:1) on the backgrounds it is used on. */

/* ==== Tokens ========================================================== */
:root {
  /* Colours. Ratios are for text on white / --paper / --tint (WCAG AA needs 4.5:1). */
  --primary: #028090;       /* brand teal: buttons and fills (white text on it: 4.7:1) */
  --primary-rgb: 2 128 144; /* --primary as channels: rgb(var(--primary-rgb) / alpha) */
  --primary-ink: #027480;   /* brand teal for text, links and icons: 5.5 / 5.1 / 4.7 */
  --primary-dark: #035761;  /* the logo's dark teal: hover fills, the "Ready to book" band (white text 8.3:1) */
  --dark: #10132d;          /* the one navy: headings, footer, cookie bar, photo shades (white text 18.2:1) */
  --dark-rgb: 16 19 45;     /* --dark as channels, for shades: rgb(var(--dark-rgb) / alpha) */
  --text: #343a4f;          /* navy-tinted slate body text: 11.3 / 10.4 / 9.6 */
  --muted: #5a6175;         /* secondary text and icons: 6.2 / 5.7 / 5.3 */
  --line: #d9e2e3;          /* cool hairlines */
  --paper: #f3f6f6;         /* whitewash: alternate section background */
  --tint: #e6eeef;          /* sea mist: boxes, the host section */
  --white: #fff;
  --on-dark: #c4c8d6;       /* secondary text on --dark: 10.9:1 */
  --sand: #faeccc;          /* the hero eyebrow on the navy-shaded photo */
  --whatsapp: #1a7f4b;      /* WhatsApp green, deep enough for white text (5.0:1) */
  --whatsapp-hover: #146a3e;
  --rating-google: #e8a000;         /* Google yellow, a touch deeper for white backgrounds */
  --rating-google-on-teal: #ffcf4d; /* brighter: visible on the teal booking box */
  --rating-tripadvisor: #00aa6c;    /* Tripadvisor green (unreadable on teal: white there) */
  --notice-bg: #fff4e5;     /* seasonal notice: warm paper… */
  --notice-ink: #6b3d00;    /* …with brown text (8.4:1) */
  --focus: var(--primary-ink); /* focus ring; white on dark backgrounds (see Base) */

  /* Type. Both families have Greek letters, so Greek pages use the same fonts (fonts.css). */
  --font-heading: "Literata", Georgia, "Times New Roman", serif;
  --font-body: "Commissioner", system-ui, sans-serif;
  --label: 0.75rem;         /* small uppercase labels… */
  --label-sm: 0.7rem;       /* …and the smaller ones (header button, footer headings, table/spec labels) */
  --font-label: 600 var(--label)/1.3 var(--font-body);
  --tracking-label: 0.12em;
  --step-display: clamp(2.4rem, 5.8vw, 4.6rem); /* home hero title */
  --step-h1: clamp(2.1rem, 4.4vw, 3.4rem);
  --step-h2: clamp(1.75rem, 3.1vw, 2.5rem);
  --step-h3: clamp(1.2rem, 1.8vw, 1.375rem);
  --step-lead: clamp(1.15rem, 1.9vw, 1.35rem);  /* lead text */

  /* Layout and spacing */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 80px;         /* 68px at <= 899px */
  --space-section: clamp(64px, 10vw, 128px); /* .section top/bottom, between guide items */
  --space-band: clamp(56px, 8vw, 96px);      /* coloured bands, footer top */
  --space-lg: clamp(48px, 6vw, 72px);        /* between blocks inside a section */
  --space-md: clamp(40px, 6vw, 64px);        /* compact sections */

  /* Surfaces and motion */
  --radius: 4px;            /* quiet, architectural corners */
  --shadow: 0 18px 40px -18px rgb(var(--dark-rgb) / 0.28);
  --shadow-soft: 0 2px 14px rgb(var(--dark-rgb) / 0.06);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --hover-scale: 1.04;      /* photo/button zoom on hover (1 with reduced motion) */
  --hover-nudge: 4px;       /* arrow icons slide on hover (0 with reduced motion) */
}

/* ==== Base & a11y helpers ============================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: hidden; background: var(--white); color: var(--text);
  font: 400 1.0625rem/1.65 var(--font-body); -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--primary-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--primary-dark); }
/* On photos and dark/teal fills the dark-teal hover colour would be unreadable: keep the colour
   (an underline shows the hover instead) */
.hero a:not(.button):hover, .booking-box a:hover, .room-card a:hover { color: inherit; }
/* Literata is a variable font (200–900): large headings at 400, small ones at 500. */
h1, h2, h3, h4 { margin: 0 0 0.6em; font-family: var(--font-heading); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; color: var(--dark); text-wrap: balance; }
h3, h4 { font-weight: 500; }
h1 { font-size: var(--step-h1); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); }
p { margin: 0 0 1em; text-wrap: pretty; }
strong { font-weight: 600; }
address { font-style: normal; }
[hidden] { display: none !important; } /* also on elements that set their own display */

/* Small uppercase labels (see "Conventions" at the top) */
.kicker, .button, .site-nav__link, .header-book, .hero__eyebrow, .booking-box__title,
.room-card__number, .story__more, .gallery__all, .room-intro__back, .room-intro__eyebrow,
.room-specs dt, .booking-card__title, .host__greeting footer, .stay-step__link, .maps-link,
.site-footer__heading, .compare__table thead th, .compare__table td::before {
  font: var(--font-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.header-book, .room-card__number, .room-specs dt, .site-footer__heading,
.compare__table thead th, .compare__table td::before { font-size: var(--label-sm); }

/* Lead text: the larger, lighter intro under a heading */
.section-head__intro, .hero__subtitle, .room-intro__summary, .host__text, .book-band p,
.stay__intro, .guide-intro > p:first-child { font-size: var(--step-lead); font-weight: 300; line-height: 1.6; }

/* Focus ring: teal; white on dark backgrounds (also on the transparent header, but only on
   pages that start with it, and not inside its white dropdown panels) */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.hero, .book-band, .cookie-notice, .lightbox, .site-footer,
body:not(.header-solid) .site-header:not(.is-solid):not(.is-open) { --focus: var(--white); }
.site-nav__submenu { --focus: var(--primary-ink); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 14px; background: var(--white); }
.skip-link:focus { left: 8px; }
#main:focus { outline: 0; } /* site.js focuses it after a cookie choice */

/* ==== Layout ========================================================== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 780px; }
/* Tablets: full width, so it doesn't sit a few pixels in from the hero title and photos */
@media (max-width: 899px) { .container--narrow { max-width: none; } }
.section { padding-block: var(--space-section); }
.section--compact { padding-block: var(--space-md) 0; }
.section--compact-end { padding-bottom: var(--space-md); } /* short bands: compact at both ends */
.section--flush-top { padding-top: clamp(32px, 5vw, 56px); }
.section--tinted { background: var(--tint); }
.section--paper { background: var(--paper); }
.section-title { margin-bottom: 1.2em; text-align: center; }
.section-title--left { text-align: left; }
.section-title--small { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }

/* Section head: kicker, title and intro above a section's content */
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head__title { margin-bottom: 0.35em; }
.section-head__intro { margin: 0; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .kicker { justify-content: center; }

/* Kicker: the small uppercase line above an editorial heading, after a short rule (and before
   one too when centred) */
.kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; color: var(--primary-ink); }
.kicker::before, .section-head--center .kicker::after { content: ""; flex: none; width: 32px; height: 1px; background: currentColor; }

/* ==== Buttons & icons ================================================= */
.icon { flex: none; width: 1.4em; height: 1.4em; }
.icon--sm { width: 1.05em; height: 1.05em; }
.icon--lg { width: 2rem; height: 2rem; stroke-width: 1.25; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 48px; padding: 0.85em 1.8em; border: 1px solid var(--primary); border-radius: var(--radius);
  background: var(--primary); color: var(--white); line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.button:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); }
.button--light { background: var(--white); border-color: var(--white); color: var(--primary-ink); }
.button--light:hover { background: transparent; border-color: var(--white); color: var(--white); }
/* Every WhatsApp button (not the floating one) is WhatsApp green with the WhatsApp icon */
.button--whatsapp { background: var(--whatsapp); border-color: var(--whatsapp); color: var(--white); }
.button--whatsapp:hover { background: var(--whatsapp-hover); border-color: var(--whatsapp-hover); }
.button--outline { background: transparent; border-color: var(--dark); color: var(--dark); }
.button--outline:hover { background: var(--dark); border-color: var(--dark); }
.button--ghost { background: transparent; border-color: currentColor; color: inherit; }
.button--small { min-height: 44px; padding: 0.6em 1.2em; }
.button--block { width: 100%; }

/* ==== Header & nav ==================================================== */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h);
  color: var(--white); transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
}
/* Soft shade behind the transparent header so white links stay readable on bright photos */
.site-header::before {
  content: ""; position: absolute; inset: 0 0 -30px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--dark-rgb) / 0.45), transparent); transition: opacity 0.3s;
}
/* Solid white header: after scrolling (.is-solid), with the phone menu open (.is-open) and on
   pages without a hero (body.header-solid) */
.site-header.is-solid, .header-solid .site-header, .site-header.is-open { background: rgb(255 255 255 / 0.97); color: var(--dark); box-shadow: 0 1px 0 var(--line); }
.site-header.is-solid::before, .header-solid .site-header::before, .site-header.is-open::before { opacity: 0; }
.header-solid main { padding-top: var(--header-h); }
/* The logo lines up with the content */
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
/* White logo on the photo, coloured logo on the solid header (cross-faded) */
.site-header__logo { display: block; position: relative; width: 168px; }
.site-header__logo .logo { width: 168px; height: auto; transition: opacity 0.3s; }
.site-header__logo .logo--colored { position: absolute; inset: 0; opacity: 0; }
.site-header.is-solid .logo--white, .header-solid .site-header .logo--white, .site-header.is-open .logo--white { opacity: 0; }
.site-header.is-solid .logo--colored, .header-solid .site-header .logo--colored, .site-header.is-open .logo--colored { opacity: 1; }
/* Phones: a "Book direct" button that stays in the bar while the menu is folded away */
.header-book { display: none; }

.nav-toggle { display: none; padding: 8px; background: none; border: 0; color: inherit; cursor: pointer; }
.nav-toggle .icon { width: 28px; height: 28px; stroke-width: 1.5; }
.nav-toggle__close { display: none; }

.site-nav__list { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.site-nav__item { position: relative; }
.site-nav__link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 14px;
  background: none; border: 0; border-radius: var(--radius); color: inherit; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.site-nav__link:hover, .site-nav__link[aria-current="page"] { color: var(--primary-ink); }
/* On the transparent header: white links, underlined on hover and for the current page */
.site-header:not(.is-solid):not(.is-open) .site-nav__item:not(.site-nav__item--cta) > .site-nav__link:is(:hover, [aria-current="page"]) {
  color: var(--white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px;
}
.site-nav__item--cta { margin-left: 8px; }
.site-nav__item--cta > .site-nav__link { padding-inline: 22px; background: var(--primary); color: var(--white); }
.site-nav__item--cta > .site-nav__link:hover { background: var(--primary-dark); }

/* Dropdowns (Explore, language) */
.site-nav__submenu {
  list-style: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 230px; margin: 0; padding: 10px 0;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  /* Hide after the fade-out, but show instantly so keyboard focus can move straight in. */
  transition: opacity 0.18s, transform 0.18s, visibility 0s linear 0.18s;
}
.site-nav__submenu a { display: block; padding: 9px 20px; font-size: 0.95rem; font-weight: 400; color: var(--dark); text-decoration: none; }
.site-nav__submenu a:hover { background: var(--paper); color: var(--primary-ink); }
/* Open: .is-open (site.js: button, hover, Escape, focus leaving); without JavaScript on hover/focus */
.has-children > .site-nav__link .icon { transition: transform 0.2s; }
.has-children.is-open > .site-nav__link .icon { transform: rotate(180deg); } /* open submenu: chevron points up */
.has-children.is-open > .site-nav__submenu,
.no-js .has-children:is(:hover, :focus-within) > .site-nav__submenu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.site-nav__item--lang .site-nav__submenu { left: auto; right: 0; min-width: 170px; }
.site-nav__item--lang .site-nav__submenu a[aria-current] { font-weight: 600; color: var(--primary-ink); }
.site-nav__lang-name { display: none; }

/* Small laptops and tablets in landscape (900–1023px): a tighter menu, so the longest labels
   (Greek, German, Italian) stay on one line */
@media (min-width: 900px) and (max-width: 1023px) {
  .site-header__inner { gap: 16px; }
  .site-header__logo, .site-header__logo .logo { width: 148px; }
  .site-nav__list { gap: 0; }
  .site-nav__link { padding-inline: 9px; letter-spacing: 0.07em; }
  .site-nav__item--cta { margin-left: 6px; }
  .site-nav__item--cta > .site-nav__link { padding-inline: 14px; }
}

/* Phones and tablets: logo, Book button and menu button in the bar; the menu folds out below */
@media (max-width: 899px) {
  :root { --header-h: 68px; }
  .site-header__inner { gap: 12px; }
  .site-header__logo, .site-header__logo .logo { width: 148px; }
  .header-book {
    display: inline-flex; align-items: center; min-height: 40px; margin-left: auto; padding: 0 16px;
    border-radius: var(--radius); background: var(--primary); color: var(--white);
    line-height: 1; white-space: nowrap; text-decoration: none; text-shadow: none;
  }
  .header-book:hover { background: var(--primary-dark); color: var(--white); }
  .nav-toggle { display: block; }
  .site-header.is-open .nav-toggle__open { display: none; }
  .site-header.is-open .nav-toggle__close { display: block; }
  .site-nav {
    display: none; position: fixed; inset: var(--header-h) 0 auto; max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    padding: 8px var(--gutter) 28px; background: var(--white); color: var(--dark); box-shadow: 0 12px 20px rgb(0 0 0 / 0.08);
  }
  .site-header.is-open .site-nav { display: block; }
  /* While the menu is open the page behind it is dimmed (a click there closes the menu, site.js)
     and doesn't scroll */
  .site-header.is-open::after { content: ""; position: fixed; inset: var(--header-h) 0 0; z-index: -1; background: rgb(var(--dark-rgb) / 0.45); }
  .menu-open { overflow: hidden; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__item { border-bottom: 1px solid var(--line); }
  .site-nav__item--cta { display: none; } /* the bar's .header-book does this here */
  .site-nav__link { width: 100%; justify-content: space-between; padding: 16px 4px; border-radius: 0; font-size: 0.85rem; }
  .site-nav__item--lang { margin: 8px 0 0; border-bottom: 0; }
  .site-nav__item--lang .site-nav__link { justify-content: flex-start; gap: 8px; }
  /* Globe, "Language", then the current language's code on the right */
  .site-nav__item--lang .site-nav__link > .icon:last-child { order: 2; }
  .site-nav__lang-code { order: 1; margin-left: auto; color: var(--muted); }
  .site-nav__lang-name { display: inline; }
  .site-nav__submenu { display: none; position: static; padding: 0 0 8px; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .has-children.is-open > .site-nav__submenu { display: block; }
  .site-nav__submenu a { padding: 10px 14px; }
}
@media (max-width: 399px) {
  .site-header__logo, .site-header__logo .logo { width: 120px; }
  .header-book { padding: 0 12px; letter-spacing: 0.08em; }
}

/* ==== Hero & booking box ============================================== */
.hero {
  position: relative; isolation: isolate; display: flex; align-items: flex-end;
  min-height: clamp(420px, 64vh, 640px); padding: calc(var(--header-h) + 56px) 0 clamp(44px, 7vw, 88px);
  background: var(--dark); color: var(--white);
}
.hero--large { min-height: clamp(600px, 94vh, 920px); }
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__bg picture, .hero__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Navy shade over the photo/video (like the original site) so white text stays legible on
   bright sky and whitewashed walls, a little deeper at the bottom where the text ends. Lighter
   on guide, contact and other heroes (beach and village photos keep their colour), deeper on
   the home page. */
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(var(--dark-rgb) / 0.4) 0%, rgb(var(--dark-rgb) / 0.35) 50%, rgb(var(--dark-rgb) / 0.72) 100%);
}
.hero--large .hero__bg::after { background: linear-gradient(180deg, rgb(var(--dark-rgb) / 0.58) 0%, rgb(var(--dark-rgb) / 0.6) 50%, rgb(var(--dark-rgb) / 0.82) 100%); }
.hero__video { position: absolute; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
.hero__video.is-playing { opacity: 1; }
.hero__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__content { text-shadow: 0 1px 24px rgb(0 0 0 / 0.25); }
.hero__eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; color: var(--sand); }
.hero__title { max-width: 18ch; margin-bottom: 0.25em; font-size: var(--step-h1); line-height: 1.05; color: var(--white); }
.hero--large .hero__title { max-width: 17ch; font-size: var(--step-display); text-wrap: balance; } /* two lines in every language */
/* Short laptop screens (1280×720, 1366×768): less space above the headline and the booking box,
   so the booking box stays above the fold */
@media (min-width: 900px) and (max-height: 820px) {
  .hero--large { padding-top: calc(var(--header-h) + 24px); }
  .hero--large .booking-box { margin-top: 32px; }
}
.hero__subtitle { max-width: 48ch; margin-bottom: 0; }
.hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Booking box (macro bookingBox): brand teal; under the home headline slightly see-through (as
   on the original site) and lifted off the photo; solid on the guides' grey band */
.booking-box {
  --focus: var(--white);
  max-width: 980px; margin-top: clamp(28px, 6vw, 84px); padding: 20px clamp(16px, 2.4vw, 28px) 16px;
  border-radius: var(--radius); background: rgb(var(--primary-rgb) / 0.72); color: var(--white); text-align: left;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-shadow: none;
}
.booking-box__title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: var(--white); }
.booking-box__trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 0.35); }
.booking-box .review-scores { justify-content: flex-start; margin: 0; color: var(--white); }
.booking-box .review-scores__logo { color: var(--white); }
.booking-box .rating--star { color: var(--rating-google-on-teal); }
.booking-box .rating--circle { color: var(--white); }
.booking-box .why-direct { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 0.88rem; }
.booking-box .why-direct__title, .booking-box .why-direct__icon { color: var(--white); }
hostex-search-widget, hostex-booking-widget { display: block; min-height: 56px; }

/* Pulse around a booking box when a "Book direct" link lands on it (site.js → flashBooking);
   white around the teal box on the dark hero */
[data-flash] { --flash: var(--primary); }
.hero [data-flash] { --flash: var(--white); }
.is-flashing { animation: book-flash 1.3s var(--ease) 2; }
@keyframes book-flash {
  0% { outline: 3px solid var(--flash); outline-offset: 0; }
  70% { outline: 3px solid var(--flash); outline-offset: 14px; }
  100% { outline: 3px solid transparent; outline-offset: 18px; }
}

/* Phones. Home page: headline + date search on the first screen (the one-line eyebrow says
   where); the "why book direct" reasons are on the room pages. Other heroes are lower, and
   their buttons (contact) full width. */
@media (max-width: 599px) {
  .hero__eyebrow { font-size: var(--label-sm); }
  .hero--large { min-height: 0; padding-top: calc(var(--header-h) + 24px); padding-bottom: 28px; }
  .hero--large .hero__eyebrow { margin-bottom: 12px; }
  .hero--large .hero__title { font-size: var(--step-h1); }
  .hero--large .hero__subtitle { display: none; }
  .booking-box { margin-top: 20px; box-shadow: none; }
  .booking-box .why-direct { display: none; }
  /* Other heroes (contact, guides): less empty photo above a short title */
  .hero:not(.hero--large) { min-height: clamp(300px, 50vh, 440px); padding-top: calc(var(--header-h) + 40px); padding-bottom: 36px; }
  .hero__buttons .button { flex: 1 1 100%; }
}

/* ==== Room cards & story cards ======================================== */
/* Studio cards: a list (<ul class="room-grid" role="list">), three across, two on tablets, and
   on phones one swipeable row with the next card peeking in (scroll-snap, no JavaScript).
   .room-grid--compact (guides, "You may also like"): smaller cards, three across down to 900px. */
.room-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 32px); margin: 0; padding: 0; }
@media (max-width: 1023px) { .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) and (max-width: 1023px) { .room-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Two across: "You may also like" (three cards) shows two, so none is left alone on a row */
@media (min-width: 640px) and (max-width: 899px) { .room-grid--compact > :nth-child(3):last-child { display: none; } }
@media (max-width: 639px) {
  .room-grid {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px; scroll-padding-inline: var(--gutter);
    scrollbar-width: thin;
  }
  .room-grid > .room-card { flex: 0 0 85vw; max-width: 380px; scroll-snap-align: start; }
}
/* The card is the photo (4:3); number, price, name and facts sit on a navy shade that only
   covers the bottom of the photo, so the rooms stay bright. Grid stacks photo and caption in
   one cell (minmax(0, 1fr) stops portrait photos from stretching it). The card is the only
   positioned box, so the title link's ::after covers the whole card. */
.room-card {
  position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--dark); color: var(--white);
}
.room-card > picture, .room-card > .room-card__img, .room-card__caption { grid-area: 1 / 1; }
.room-card picture, .room-card__img { width: 100%; height: 100%; object-fit: cover; object-position: var(--cover-position, 50% 50%); transition: transform 0.9s var(--ease); }
.room-card:hover .room-card__img { transform: scale(var(--hover-scale)); }
.room-card__caption {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 16px;
  align-self: end; z-index: 1; padding: 44px 20px 16px;
  /* Only as tall as its text, so most of the photo stays bright; >= 0.6 navy from the number
     down keeps white text >= 4.5:1 even on white walls */
  background: linear-gradient(180deg, rgb(var(--dark-rgb) / 0) 0%, rgb(var(--dark-rgb) / 0.62) 30%, rgb(var(--dark-rgb) / 0.85) 100%);
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.35);
}
/* Number, then the name, then facts (left) and price (right) on the bottom row: the bottom rows
   line up across a row of cards whatever the name length. Flex, not grid: on narrow cards in
   long languages the price wraps under the facts instead of overlapping them (the facts shrink
   to their longest item, then the price moves down). */
.room-card__number { flex: 0 0 100%; line-height: 1; }
.room-card__title { flex: 0 0 100%; margin: 6px 0 4px; font: 500 1.35rem/1.2 var(--font-heading); color: var(--white); text-wrap: balance; }
.room-card__link, .room-card__link:hover { color: var(--white); text-decoration: none; }
.room-card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.room-card:hover .room-card__link { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* Facts separated by a gap, not "·" (a separator would start a wrapped line in long languages) */
.room-card__meta { flex: 1 1 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0 14px; margin: 0; padding: 0; font-size: 0.8rem; line-height: 1.5; }
.room-card__meta li, .room-intro__eyebrow span { white-space: nowrap; } /* "Sleeps 2 + 1" stays together */
.room-card__price { flex: none; margin: 0 0 0 auto; font-size: 0.85rem; white-space: nowrap; text-align: right; }
.room-card__price strong { font: 700 1.15rem var(--font-heading); }
/* Small cards: name, size, sleeps, outdoor space and price */
.room-grid--compact .room-card__caption { padding: 36px 16px 14px; }
.room-grid--compact .room-card__title { font-size: 1.15rem; }
@media (min-width: 900px) and (max-width: 1023px) { .room-grid--compact .room-card__title { font-size: 1.05rem; } } /* three across */
.room-grid--compact .room-card__meta li:nth-child(3) { display: none; } /* no view: size, sleeps, outdoor space */

/* Story cards (home "Explore Naxos" guides): photo, title and "Read more"; a thumbnail list on
   phones and tablets */
.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(32px, 4vw, 48px) clamp(20px, 2.5vw, 36px); }
.story { position: relative; display: flex; flex-direction: column; }
.story__image { overflow: hidden; aspect-ratio: 3 / 2; margin-bottom: 14px; border-radius: var(--radius); background: var(--tint); }
.story__image picture, .story__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.story:hover .story__image img { transform: scale(var(--hover-scale)); }
.story__title { margin-bottom: 0.4em; font-size: 1.25rem; }
.story__title a { color: var(--dark); text-decoration: none; }
.story__title a::after { content: ""; position: absolute; inset: 0; } /* whole card is the link */
.story:hover .story__title a { color: var(--primary-ink); }
.story__more { display: inline-flex; align-items: center; gap: 8px; color: var(--primary-ink); }
.story__more .icon { transition: transform 0.3s var(--ease); }
.story:hover .story__more .icon { transform: translateX(var(--hover-nudge)); }
@media (max-width: 899px) {
  .story-grid { grid-template-columns: 1fr; gap: 12px; }
  .story { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 16px; }
  .story__image { grid-row: 1 / span 2; aspect-ratio: 1; margin: 0; }
  .story__title { align-self: end; margin: 0 0 4px; font-size: 1.15rem; }
  .story__more { align-self: start; }
}

/* Both cards are links through their title: the focus ring goes around the whole card */
.room-card__link:focus-visible, .story__title a:focus-visible { outline: 0; }
.room-card:has(.room-card__link:focus-visible), .story:has(.story__title a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ==== Gallery & lightbox ============================================== */
/* Photo strip: swipes (scroll-snap) with arrow buttons; a mosaic on wide screens (--mosaic) */
.gallery { position: relative; }
.gallery__track {
  list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__item { --focus: var(--white); flex: 0 0 80%; overflow: hidden; border-radius: var(--radius); scroll-snap-align: start; }
.gallery__item a { display: block; height: 100%; }
.gallery__item a:focus-visible { outline-offset: -4px; }
.gallery__item picture { display: block; height: 100%; }
.gallery__item img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--photo-position, 50% 50%); transition: transform 0.9s var(--ease); }
.gallery__item a:hover img { transform: scale(var(--hover-scale)); }
.gallery__nav {
  position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.92); color: var(--dark); box-shadow: var(--shadow-soft);
  transform: translateY(-50%); cursor: pointer;
}
.gallery__nav--prev { left: 10px; }
.gallery__nav--next { right: 10px; }
.gallery__nav[aria-disabled="true"] { opacity: 0; pointer-events: none; }
.gallery__nav[aria-disabled="true"]:focus-visible { opacity: 0.5; } /* stays focusable: keep focus visible */
.gallery__all {
  position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  max-width: calc(100% - 28px); text-align: center; /* long labels (Greek) wrap inside the photo */
  min-height: 40px; padding: 8px 16px; border: 0; border-radius: var(--radius);
  background: rgb(255 255 255 / 0.95); color: var(--dark); box-shadow: var(--shadow-soft); cursor: pointer;
}
.gallery__all:hover { background: var(--white); color: var(--primary-ink); }

/* Mosaic (home + room pages, wide screens): one large photo and up to four small ones.
   Photos 6+ are only in the lightbox ("View all photos"). */
@media (min-width: 900px) {
  .gallery--mosaic .gallery__track {
    display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px;
    height: clamp(420px, 42vw, 620px); overflow: hidden;
  }
  .gallery--mosaic .gallery__item { min-height: 0; }
  .gallery--mosaic .gallery__item img { aspect-ratio: auto; }
  .gallery--mosaic .gallery__item:first-child { grid-row: span 2; }
  .gallery--mosaic .gallery__item:nth-child(n+6) { display: none; }
  /* 4 photos: the last small one spans the bottom row; 3 photos: two stacked; 2: side by side */
  .gallery--mosaic .gallery__item:first-child:nth-last-child(4) ~ .gallery__item:last-child { grid-column: span 2; }
  .gallery--mosaic .gallery__track:has(> :first-child:nth-last-child(3)) { grid-template-columns: 2fr 1fr; }
  .gallery--mosaic .gallery__track:has(> :first-child:nth-last-child(2)) { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .gallery--mosaic .gallery__track:has(> :first-child:nth-last-child(2)) .gallery__item:first-child { grid-row: auto; }
  .gallery--mosaic .gallery__nav { display: none; }
  /* "View all N photos" only when the mosaic leaves some out */
  .gallery--mosaic .gallery__track:not(:has(> :nth-child(6))) ~ .gallery__all { display: none; }
  /* Home: a slightly lower mosaic */
  .home-gallery .gallery--mosaic .gallery__track { height: clamp(400px, 40vw, 540px); }
}
.home-gallery { padding-bottom: 0; } /* the location section below starts with the gap */

/* Lightbox (<dialog>): one photo at a time, full screen */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(var(--dark-rgb) / 0.96); color: var(--white); }
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; padding-block: 16px; }
.lightbox::backdrop { background: rgb(var(--dark-rgb) / 0.6); }
.lightbox__img { width: auto; height: auto; max-width: min(94vw, 1600px); max-height: 100%; object-fit: contain; }
.lightbox__caption { margin: 0; padding: 12px 16px 0; min-height: 2.6em; font-size: 0.9rem; text-align: center; opacity: 0.85; }
.lightbox__btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgb(var(--dark-rgb) / 0.6); color: var(--white); cursor: pointer; } /* visible over light photos (3:1) */
.lightbox__btn:hover { background: rgb(var(--dark-rgb) / 0.85); }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }

/* ==== Walk/place links ================================================ */
/* Home "location" section: intro beside the walk line in a paper box */
.location__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.location__intro { color: var(--muted); }
.location .walk { --walk-pad: clamp(18px, 3vw, 28px); padding: var(--walk-pad); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
@media (max-width: 899px) { .location__grid { grid-template-columns: 1fr; } }

/* Walk line (macro neighbourhood): icons joined by a dotted path, the place on the left, the
   walking time on the right. --walk-pad is the list's padding, so the path lines up. */
.walk { --walk-pad: 0px; position: relative; list-style: none; margin: 0; padding: 0; }
.walk:not(.walk--compact)::before {
  content: ""; position: absolute; left: calc(var(--walk-pad) + 16px); top: calc(var(--walk-pad) + 20px); bottom: calc(var(--walk-pad) + 20px);
  border-left: 1px dashed var(--primary);
}
.walk__item { position: relative; display: flex; align-items: center; gap: 14px; padding: 5px 0; }
.walk__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid var(--primary); border-radius: 50%; background: var(--white); color: var(--primary-ink); }
.walk__text { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; min-width: 0; line-height: 1.4; }
/* Linked or not, every name is as tall as a touch target, so the rows and tiles line up */
.walk__name { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.95rem; color: var(--dark); }
a.walk__name { text-decoration-color: color-mix(in srgb, var(--primary-ink) 45%, transparent); }
a.walk__name:hover { color: var(--primary-ink); }
.walk__time { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--primary-ink); }
/* Compact (room pages): small tiles between hairlines */
.walk--compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 0 24px; border-top: 1px solid var(--line); }
.walk--compact .walk__item { align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.walk--compact .walk__icon { width: 30px; height: 30px; }
.walk--compact .walk__name { min-height: 30px; hyphens: auto; }
.walk--compact .walk__text { flex-direction: column; align-items: flex-start; justify-content: center; overflow-wrap: anywhere; }
@media (max-width: 599px) { .walk--compact { grid-template-columns: 1fr 1fr; gap: 0 16px; } }

/* Map + Getting here buttons under the walking times (macro placeLinks) */
.place-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }

/* ==== Host & reviews ================================================== */
/* components/host.njk. Sea-mist band: Eddie's portrait beside his text and the guest quote, then
   (home page) the Google reviews carousel. .host--compact: the small white card on /contact/. */
.host { --host-gap: clamp(24px, 3vw, 36px); padding-block: var(--space-section); background: var(--tint); } /* --host-gap: between text, quote, reviews and button */
.host__inner { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px clamp(32px, 5vw, 72px); }
.host__body { min-width: 0; } /* the reviews carousel must not stretch the column */
.host__avatar { width: 120px; height: 120px; overflow: hidden; border-radius: 50%; }
.host__avatar picture, .host__avatar img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .host__inner { grid-template-columns: 200px minmax(0, 760px); }
  .host__avatar { width: 200px; height: 200px; }
}
.host__title { margin-bottom: 0.35em; font-size: var(--step-h2); } /* as .section-head__title */
.host__text { max-width: 46ch; }
.host__greeting { margin: 0 0 1.4em; padding-left: 18px; border-left: 1px solid currentColor; font: 400 1.15rem/1.5 var(--font-heading); }
.host__greeting p { margin-bottom: 0.3em; }
.host__cta { margin: var(--host-gap) 0 0; }
/* The guest testimonial */
.host__review { margin: var(--host-gap) 0 0; padding-left: clamp(16px, 2vw, 24px); border-left: 2px solid var(--primary); }
.host__review blockquote { margin: 0; }
.host__review p { margin-bottom: 0.8em; font: 400 clamp(1.2rem, 2vw, 1.5rem)/1.45 var(--font-heading); color: var(--dark); }
.host__review figcaption { font-size: var(--label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.host__review figcaption strong { letter-spacing: 0.08em; }
/* What Eddie can help with (room pages) */
.host__help-title { margin: clamp(36px, 4vw, 48px) 0 0.8em; font-size: 1.15rem; }
.host__help { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 0 28px; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.host__help li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; line-height: 1.45; }
.host__help .icon { margin-top: 0.15em; color: var(--primary-ink); }
/* Home: Google reviews right under the guest quote, in the same style – a swipeable row
   (scroll-snap, no script, no autoplay) with the next review peeking in */
.google-reviews { margin: var(--host-gap) 0 0; min-width: 0; }
.google-reviews__title { margin: 0 0 14px; font: var(--font-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.google-reviews__list {
  list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: min(85%, 340px); gap: 24px;
  margin: 0; padding: 0 0 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.google-review { display: flex; flex-direction: column; gap: 12px; padding-left: 18px; border-left: 2px solid var(--primary); scroll-snap-align: start; }
.google-review blockquote { margin: 0; }
.google-review blockquote p { margin: 0; font: 400 1.05rem/1.55 var(--font-heading); color: var(--dark); }
.google-review__meta { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 0.82rem; color: var(--muted); }
.google-review__meta strong { color: var(--dark); font-weight: 600; }
.google-review__stars { display: inline-flex; color: var(--rating-google); }
.google-reviews__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 0; }
.google-reviews__more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 0.9rem; font-weight: 600; }
.google-reviews__toggle {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%;
  background: var(--white); color: var(--primary-ink); cursor: pointer;
}
.google-reviews__toggle:hover { border-color: var(--primary-ink); }
.google-reviews__toggle[hidden] { display: none; }
.google-reviews__toggle .autoscroll__play, .google-reviews__toggle[aria-pressed="true"] .autoscroll__pause { display: none; }
.google-reviews__toggle[aria-pressed="true"] .autoscroll__play { display: block; }
/* Compact card */
.host--compact { margin-bottom: 16px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.host--compact .host__inner { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.host--compact .host__avatar { width: 72px; height: 72px; }
.host--compact .kicker { margin-bottom: 12px; }
.host__title--small { font-size: 1.5rem; }
.host--compact .host__text { font-size: 0.98rem; font-weight: 400; }
.host--compact .host__cta { margin-top: 16px; }

/* ==== Prices, review scores, notices ================================== */
.price-from { white-space: nowrap; }
.price-from strong { font-weight: 700; }

/* Review scores (macro reviewScores): logo, score and rating shapes per review site */
.review-scores { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 14px 0 0; padding: 0; }
.review-scores a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 0.95rem; color: inherit; text-decoration: none; }
.review-scores a:hover strong { text-decoration: underline; }
.review-scores strong { font-size: 1.05rem; }
.review-scores--compact { justify-content: flex-start; margin: 0 6px 12px; color: var(--dark); }
.review-scores--compact .review-scores__logo { color: var(--primary-ink); }
/* Small phones: both scores on one line */
@media (max-width: 399px) {
  .review-scores { gap: 4px 14px; }
  .review-scores a { gap: 4px; }
  .review-scores strong { font-size: 0.95rem; }
  .review-scores .rating { width: 62px; }
  .review-scores--compact { margin-inline: 0; }
}
/* Rating shapes (ratingIcons shortcode): the filled part in the review site's colour, the rest
   as an outline */
.rating { display: block; overflow: visible; }
.rating__empty { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0.55; }
.rating__full { fill: currentColor; stroke: currentColor; stroke-width: 1.5; }
.rating--star { color: var(--rating-google); }
.rating--circle { color: var(--rating-tripadvisor); }

/* Seasonal notice (macro seasonNotice; site.js shows it inside the date window) */
.season-notice {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radius);
  background: var(--notice-bg); color: var(--notice-ink); font-size: 0.92rem; line-height: 1.4; text-align: left;
}

/* ==== Comparison table ================================================ */
/* Home: all studios side by side in a fold-out table; on phones and tablets one small card per
   studio with labelled facts (data-label), no sideways scroll */
.price-note { margin: 18px 0 0; font-size: 0.85rem; color: var(--muted); }
.compare { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.compare__toggle { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; font: 400 clamp(1.2rem, 2vw, 1.45rem)/1.3 var(--font-heading); color: var(--dark); cursor: pointer; }
.compare__toggle::-webkit-details-marker { display: none; }
.compare__toggle .icon { color: var(--primary-ink); transition: transform 0.2s; }
.compare[open] .compare__toggle .icon { transform: rotate(180deg); }
.compare__scroll { overflow-x: auto; border-top: 1px solid var(--dark); }
.compare__table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 0.95rem; }
.compare__table th, .compare__table td { padding: 16px 14px 16px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.compare__table tbody tr:last-child > * { border-bottom: 0; } /* .compare's own rule closes it */
.compare__table thead th { padding-block: 14px; color: var(--muted); }
.compare__table tbody th { font: 400 1.05rem/1.35 var(--font-heading); }
.compare__table tbody th a { color: var(--dark); text-decoration: none; }
.compare__table tbody th a:hover { color: var(--primary-ink); text-decoration: underline; }
.compare__table tbody tr:hover { background: rgb(255 255 255 / 0.6); }
.compare__price strong { font: 400 1.15rem var(--font-heading); color: var(--dark); }
@media (min-width: 900px) {
  .compare__table td:nth-child(2), .compare__table td:nth-child(5), .compare__table td:nth-child(7) { white-space: nowrap; }
}
@media (max-width: 899px) {
  .compare__scroll { overflow: visible; }
  .compare__table { display: block; min-width: 0; }
  .compare__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare__table tbody { display: block; }
  .compare__table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
  .compare__table tbody tr:last-child { border-bottom: 0; }
  .compare__table tbody tr:hover { background: none; }
  .compare__table th, .compare__table td { display: block; padding: 0; border: 0; }
  .compare__table tbody th { grid-column: 1 / -1; font-size: 1.2rem; }
  .compare__table td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--muted); }
}

/* ==== Book band ======================================================= */
/* "Ready to book?" (macro bookBand, end of /contact/) */
.book-band { padding-block: var(--space-band); background: var(--primary-dark); color: var(--white); }
.book-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.book-band__text { flex: 1 1 420px; }
.book-band__title { margin-bottom: 0.35em; color: var(--white); }
.book-band p { max-width: 56ch; margin: 0; }

/* ==== Contact page ==================================================== */
/* Main column (map, stay steps) beside the sidebar (host card, contact cards); the sidebar
   comes first on phones and tablets */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); align-items: start; gap: clamp(28px, 5vw, 72px); }
/* Sticky only where the whole sidebar fits on screen */
@media (min-width: 900px) and (min-height: 1060px) { .contact-layout__side { position: sticky; top: calc(var(--header-h) + 24px); } }
@media (max-width: 899px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-layout__side { order: -1; }
}

/* Contact cards (macro contactCards): email, WhatsApp and the address, stacked in the sidebar;
   the icon on the left, title and details beside it */
.contact-cards { display: grid; gap: 16px; }
.contact-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 16px;
  padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  color: var(--text); text-decoration: none;
}
.contact-card .icon { grid-row: span 2; color: var(--primary-ink); }
.contact-card__title { font: 400 1.4rem/1.3 var(--font-heading); color: var(--dark); }
.contact-card__text { font-size: 0.95rem; color: var(--primary-ink); overflow-wrap: anywhere; }
a.contact-card:hover .contact-card__title, .contact-card__head:hover .contact-card__title { color: var(--primary-ink); }
/* Address: the title links to Google Maps; both addresses under it, in line with the title */
.contact-card--address { display: block; }
.contact-card__head { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.contact-card__addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 24px; margin: 6px 0 0 calc(2rem + 16px); font-size: 0.92rem; }

/* Map: loads after cookie consent; until then a placeholder with a "Show map" button */
.map-embed { aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: var(--space-lg); border-radius: var(--radius); background: var(--tint); }
.map-embed iframe { width: 100%; height: 100%; border: 0; }
.map-embed__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 100%; padding: 24px; color: var(--muted); text-align: center; }
.map-embed__placeholder .icon { color: var(--primary-ink); }
.map-embed__placeholder p { max-width: 36ch; margin: 0; font-size: 0.9rem; }

/* "What your stay is like" (macro stayTimeline): two steps per row from 640px */
.stay { margin: 0; }
.stay__title { margin-bottom: 0.35em; }
.stay__intro { margin-bottom: 28px; }
.stay-steps { list-style: none; display: grid; gap: 0 32px; margin: 0; padding: 0; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .stay-steps { grid-template-columns: 1fr 1fr; } }
.stay-step { position: relative; display: flex; flex-direction: column; padding: 22px 0 22px 52px; border-bottom: 1px solid var(--line); }
.stay-step__icon { position: absolute; left: 0; top: 22px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--primary); border-radius: 50%; color: var(--primary-ink); }
.stay-step__title { margin: 4px 0 0.4em; font-size: 1.2rem; }
.stay-step p { margin-bottom: 0.6em; font-size: 0.95rem; }
.stay-step__link { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; margin-top: auto; padding-block: 6px; text-decoration: none; } /* margin-top: links line up across a row */
.stay-step__link:hover { text-decoration: underline; }

/* FAQ: its own centred band under the two columns */
.contact-faq__inner { max-width: 820px; }
.faq { border-top: 1px solid var(--dark); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; position: relative; padding: 22px 48px 22px 0; font: 400 1.15rem/1.4 var(--font-heading); color: var(--dark); cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: 300 1.8rem/1 var(--font-body); color: var(--primary-ink); }
.faq__item[open] summary::after { content: "–"; }
.faq__item summary:hover { color: var(--primary-ink); }
.faq__answer { max-width: 68ch; padding: 0 0 22px; }
.faq__answer p:last-child { margin: 0; }

/* ==== Room page ======================================================= */
/* Intro: back link, eyebrow, name, summary, price + "check availability", then the photos */
.room-intro { padding-top: clamp(20px, 3vw, 36px); }
.room-intro__back { margin: 0 0 clamp(16px, 2.5vw, 28px); }
.room-intro__back a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-block: 8px; text-decoration: none; }
.room-intro__back .icon { transition: transform 0.3s var(--ease); }
.room-intro__back a:hover .icon { transform: translateX(calc(-1 * var(--hover-nudge))); }
.room-intro__head { max-width: 640px; margin-bottom: clamp(24px, 3.5vw, 40px); }
.room-intro__eyebrow { display: flex; flex-wrap: wrap; margin: 0 0 18px; color: var(--primary-ink); }
.room-intro__eyebrow span + span::before { content: "·"; margin: 0 0.6em; }
.room-intro__size { text-transform: none; } /* "28 m²", not "28 M²" */
.room-intro__title { margin: 0 0 0.3em; }
.room-intro__summary { margin: 0; }
.room-intro__book { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 18px 0 0; }
.room-intro__price { font-size: 1rem; color: var(--dark); }
.room-intro__price strong { font: 700 1.35rem var(--font-heading); }

/* Main: description and details on the left, the booking card on the right (first on phones) */
.room-main { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); grid-template-rows: auto 1fr; align-items: start; gap: 0 clamp(32px, 5vw, 80px); }
.room-main__intro { grid-column: 1; grid-row: 1; }
.room-main__details { grid-column: 1; grid-row: 2; }
.room-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 var(--space-lg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.room-specs > div { padding: 18px 16px 18px 0; }
.room-specs dt { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--muted); }
.room-specs dt .icon { width: 1.25rem; height: 1.25rem; color: var(--primary-ink); stroke-width: 1.5; }
.room-specs dd { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--dark); overflow-wrap: break-word; hyphens: auto; }
/* Sleeps (the longest value) is two columns wide: three columns = size and sleeps, then beds,
   view and outdoor space; on phones (two columns, filled densely) size and beds, sleeps, then
   view and outdoor space */
.room-specs { grid-auto-flow: row dense; }
.room-specs > div:nth-child(2) { grid-column: span 2; }
@media (max-width: 639px) { .room-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.room-heading { margin-bottom: 0.8em; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.room-heading--spaced { margin-top: var(--space-lg); }
.room-description { margin-bottom: var(--space-lg); }

/* Booking card: price, review scores, Hostex calendar, why book direct, policies */
.room-main__booking {
  grid-column: 2; grid-row: 1 / span 2; min-height: 420px; padding: 22px 16px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow);
}
/* Keep the card beside the text while it scrolls, only where the whole card fits on screen */
@media (min-width: 900px) and (min-height: 1060px) {
  .room-main__booking { position: sticky; top: calc(var(--header-h) + 24px); }
}
.booking-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 12px; padding: 0 6px 14px; border-bottom: 1px solid var(--line); }
.booking-card__title { margin: 0; color: var(--primary-ink); }
.booking-card__price { margin: 0; font-size: 1.05rem; color: var(--dark); }
.booking-card__price strong { font: 700 1.5rem var(--font-heading); }
.booking-card__rate { display: block; font-size: 0.75rem; color: var(--muted); text-align: right; }
.booking-card__extras { margin: 14px 6px 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.booking-card__ask { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 8px 0 4px; font-size: 0.95rem; font-weight: 600; }
/* Why book direct (macro whyDirect; also in the home booking box) */
.why-direct { list-style: none; display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; padding: 0; font-size: 0.92rem; }
.why-direct__item { display: flex; align-items: center; gap: 10px; }
.why-direct__icon { color: var(--primary-ink); }
.why-direct__title { display: block; font-weight: 600; color: var(--dark); }
/* Check-in/out times and the folded payment/cancellation answers (macro stayPolicies) */
.stay-policies { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 0; padding: 0; font-size: 0.85rem; color: var(--muted); }
.stay-policies li { display: inline-flex; align-items: center; gap: 6px; }
.stay-faq { margin-top: 10px; border-top: 1px solid var(--line); }
.stay-faq__item { border-bottom: 1px solid var(--line); }
.stay-faq__item:last-child { border-bottom: 0; } /* the card's own border closes it */
.stay-faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 0.9rem; font-weight: 600; color: var(--dark); cursor: pointer; }
.stay-faq__item summary::-webkit-details-marker { display: none; }
.stay-faq__item summary::after { content: "+"; font: 300 1.5rem/1 var(--font-body); color: var(--primary-ink); }
.stay-faq__item[open] summary::after { content: "–"; }
.stay-faq__answer { padding: 0 0 12px; font-size: 0.88rem; color: var(--text); }
.stay-faq__answer p { margin: 0; }

/* Amenities: compact two-column icon list (one column on phones) */
.amenity-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px 40px; margin: 0; padding: 0; }
.amenity { display: flex; align-items: flex-start; gap: 12px; }
.amenity__icon { width: 20px; height: 20px; margin-top: 0.2em; color: var(--primary-ink); stroke-width: 1.6; }
.amenity p { margin: 0; font-size: 0.95rem; line-height: 1.55; }
.amenity__title { display: block; color: var(--dark); }
.room-features { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.95rem; }

/* Phones and tablets: one column; the photo strip runs edge to edge and swipes */
@media (max-width: 899px) {
  .room-intro__photos { padding-inline: 0; }
  .room-intro .gallery__track { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .room-intro .gallery__item { flex-basis: 86%; }
  .room-main { grid-template-columns: 1fr; grid-template-rows: none; }
  .room-main__intro, .room-main__details, .room-main__booking { grid-column: 1; grid-row: auto; }
  .room-main__booking { margin-bottom: clamp(48px, 8vw, 64px); padding: 16px; box-shadow: var(--shadow-soft); }
}
/* Tablets: calendar on the left, the reasons and policies beside it */
@media (min-width: 640px) and (max-width: 899px) {
  .room-main__booking { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: 28px; padding: 22px; }
  .room-main__booking > :not(hostex-booking-widget, .booking-card__extras) { grid-column: 1 / -1; }
  .booking-card__extras { grid-column: 2; margin: 0; padding-top: 4px; border-top: 0; }
}
@media (max-width: 599px) {
  .room-intro .gallery__all { right: calc(var(--gutter) + 8px); }
}

/* ==== Guide pages ===================================================== */
/* Intro, then items with the photo alternating left/right (one column on phones and tablets),
   then the studios and the date search */
.guide-intro > p:first-child { color: var(--dark); }
.guide-item { display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); align-items: center; gap: clamp(28px, 4.5vw, 64px); }
.guide-item + .guide-item { margin-top: var(--space-section); }
.guide-item:nth-child(even) { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
.guide-item:nth-child(even) .guide-item__image { order: 2; }
.guide-item--text, .guide-item--text:nth-child(even) { grid-template-columns: minmax(0, 700px); justify-content: center; } /* lines up with the intro column */
.guide-item__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.guide-item h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.guide-item h2::before { content: ""; display: block; width: 40px; height: 2px; margin-bottom: 20px; background: var(--primary); }
.maps-link { display: inline-flex; align-items: center; gap: 6px; padding-block: 6px; text-decoration: none; }
.maps-link:hover { text-decoration: underline; }
.guide-outro { padding-top: 0; } /* the last item's gap is above it */
.guide-stay .booking-box { margin: 28px 0 0; background: var(--primary); box-shadow: var(--shadow); }
@media (max-width: 899px) {
  .guide-item, .guide-item:nth-child(even) { grid-template-columns: 1fr; }
  .guide-item:nth-child(even) .guide-item__image { order: 0; }
}

/* ==== Text pages ====================================================== */
/* layouts/page.njk (privacy policy) and the 404 page */
/* Prose blocks start and end flush, so the section's padding (or the grid's gap) is the only
   space around them: no paragraph or heading margin on top of it */
.prose > :first-child { margin-top: 0; }
.prose > :last-child, .prose li:last-child { margin-bottom: 0; }
.page-header { padding-block: clamp(48px, 7vw, 88px) clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line); background: var(--paper); }
.page-header h1 { margin: 0; }
.page-header + .section { padding-top: var(--space-md); } /* text follows the title band, like a guide intro after its hero */
.prose--document h2 { margin-top: 1.6em; font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.prose h3 { margin-top: 1.4em; }
.prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--line); }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.4em; }

/* ==== Footer ========================================================== */
/* Navy: brand + tagline, a column per menu group, contact details, the Book box with partners */
.site-footer { padding-top: var(--space-band); background: var(--dark); color: var(--on-dark); font-size: 0.95rem; }
.site-footer a:not(.button) { color: var(--white); text-decoration: none; }
.site-footer a:not(.button):hover { color: var(--white); text-decoration: underline; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(260px, 1.1fr); align-items: start; gap: 40px clamp(24px, 4vw, 56px); }
.site-footer__logo { display: inline-block; }
.site-footer__logo img { width: 180px; height: auto; }
.site-footer__tagline { max-width: 22ch; margin: 18px 0 0; font: 400 1.2rem/1.45 var(--font-heading); color: var(--white); }
.site-footer__heading { margin: 6px 0 18px; color: var(--on-dark); }
.site-footer__list { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.site-footer__list a { display: inline-block; line-height: 1.5; }
.site-footer__list address { display: inline; }
.site-footer__book { padding-top: 6px; } /* a plain column, level with the headings beside it */
.site-footer__partners { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 20px; }
.site-footer__partners p { margin: 0; font-size: 0.85rem; }
.partner-logos { list-style: none; display: flex; gap: 12px; margin: 0; padding: 0; }
.partner-logos a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(255 255 255 / 0.14); transition: background-color 0.2s; }
.partner-logos a:hover { background: var(--primary); }
.partner-logos img { width: 18px; height: 18px; }
/* Social links (macro socialLinks): round icon links, outlined in white in the footer */
.social-links { list-style: none; display: flex; gap: 10px; margin: 24px 0 0; padding: 0; }
.social-links a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); }
.social-links a:hover { background: var(--paper); color: var(--primary-ink); }
.social-links .icon { width: 18px; height: 18px; }
.site-footer .social-links a { border-color: rgb(255 255 255 / 0.25); color: var(--white); }
.site-footer .social-links a:hover { background: var(--white); color: var(--dark); text-decoration: none; }
/* Bottom line: copyright, privacy policy, cookie settings */
.site-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px;
  margin-top: var(--space-lg); padding-block: 22px; font-size: 0.82rem; color: var(--on-dark);
  /* hairline aligned with the content (not the container's padding) */
  background: linear-gradient(rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.14)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.site-footer__bottom p { margin: 0; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.link-button { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.site-footer .site-footer__links :is(a, .link-button) { color: var(--on-dark); text-decoration: underline; }
.site-footer .site-footer__links :is(a, .link-button):hover { color: var(--white); }
@media (max-width: 1023px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
.site-footer__bottom { padding-bottom: 96px; } /* room under the floating chat button */
@media (max-width: 599px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ==== Cookie banner =================================================== */
.cookie-notice {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 760px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px;
  padding: 18px 22px; border-radius: var(--radius); background: var(--dark); color: var(--white); box-shadow: var(--shadow);
  font-size: 0.88rem; line-height: 1.5;
}
.cookie-notice p { flex: 1 1 320px; margin: 0; }
.cookie-notice a { color: var(--white); }
.cookie-notice__actions { display: flex; gap: 10px; }
.cookie-notice__actions .button { min-width: 7.5em; }
@media (max-width: 599px) {
  .cookie-notice { left: 8px; right: 8px; bottom: 8px; gap: 10px; padding: 12px 14px; font-size: 0.8rem; }
  .cookie-notice p { flex-basis: 100%; }
  .cookie-notice__actions { width: 100%; }
  .cookie-notice__actions .button { flex: 1; }
}

/* ==== Chat button + panel (partials/chat.njk) =========================== */
/* Round teal button bottom right on every page (like the Hostex booking site's). It fades out
   (body classes from site.js) while the cookie banner shows, the phone menu is open, a room's
   calendar or a photo strip is under it on phones; never while the chat
   is open. The panel is a chat-style form that sends through WhatsApp; full screen on phones. */
.chat__button {
  --focus: var(--dark); /* it floats over light pages */
  position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; background: var(--primary); color: var(--white); box-shadow: 0 10px 24px rgb(var(--dark-rgb) / 0.25);
  transition: transform 0.2s, opacity 0.25s, visibility 0s;
}
.chat__button:hover { background: var(--primary-dark); color: var(--white); transform: scale(var(--hover-scale)); }
.chat__button:focus-visible { box-shadow: 0 0 0 5px var(--white); }
.chat__button .icon { width: 26px; height: 26px; }
.chat__icon-close, .chat-open .chat__icon-open { display: none; }
.chat-open .chat__icon-close { display: block; }
body:not(.chat-open):is(.has-cookie-notice, .menu-open) .chat__button {
  opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0s linear 0.25s;
}
/* Phones only: there the calendar and photo strips run under the button. (On wide screens the
   room booking card is a sticky column that is nearly always on screen.) */
@media (max-width: 767px) {
  body:not(.chat-open):is(.booking-in-view, .strip-under-fab) .chat__button { opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0s linear 0.25s; }
}
/* Stays put (no fade) when moving between pages */
.chat__button { view-transition-name: chat-button; }
@media (min-width: 768px) { .chat__button { right: 24px; bottom: 24px; width: 60px; height: 60px; } }
.chat__panel {
  position: fixed; right: 24px; bottom: 100px; z-index: 60; display: flex; flex-direction: column;
  width: min(360px, calc(100vw - 32px)); height: min(460px, calc(100vh - 140px)); overflow: hidden;
  border-radius: 12px; background: var(--white); box-shadow: 0 24px 60px -12px rgb(var(--dark-rgb) / 0.45);
}
.chat__panel[hidden] { display: none; }
.chat__bar { display: flex; align-items: center; gap: 12px; flex: none; padding: 12px 8px 12px 16px; background: var(--primary); color: var(--white); }
.chat__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 2px solid rgb(255 255 255 / 0.6); }
.chat__avatar picture, .chat__avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat__head { display: flex; flex-direction: column; flex: 1; min-width: 0; margin: 0; line-height: 1.3; }
.chat__title { font: 500 1.1rem/1.25 var(--font-heading); }
.chat__status { font-size: 0.8rem; } /* solid white: 4.7:1 on teal */
.chat__close { --focus: var(--white); display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--white); cursor: pointer; }
.chat__close:hover { background: rgb(255 255 255 / 0.15); }
.chat__body { flex: 1; overflow-y: auto; padding: 20px 16px; background: var(--paper); }
.chat__bubble { max-width: 85%; margin: 0; padding: 12px 14px; border-radius: 4px 14px 14px 14px; background: var(--white); color: var(--dark); box-shadow: var(--shadow-soft); font-size: 0.95rem; line-height: 1.5; }
.chat__form { display: flex; align-items: flex-end; gap: 8px; flex: none; padding: 12px; border-top: 1px solid var(--line); background: var(--white); }
.chat__input {
  flex: 1; min-height: 44px; max-height: 140px; padding: 10px 12px; resize: none; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 1rem; color: var(--dark); background: var(--white);
}
.chat__input:focus-visible { outline: 2px solid var(--primary-ink); outline-offset: 0; border-color: transparent; }
.chat__send { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--whatsapp); color: var(--white); cursor: pointer; }
.chat__send:hover { background: var(--whatsapp-hover); }
.chat__note { display: flex; align-items: center; gap: 6px; flex: none; margin: 0; padding: 0 12px 12px; background: var(--white); font-size: 0.75rem; color: var(--muted); }
.chat__note .icon { color: var(--whatsapp); }
@media (max-width: 599px) {
  /* Phones: the chat fills the screen; its bar has the close button, so the round one hides */
  .chat__panel { inset: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; }
  .chat-open .chat__button { display: none; }
  .chat-open { overflow: hidden; }
}

/* ==== Page transitions =============================================== */
/* A short cross-fade between pages (cross-document View Transitions; browsers without support
   just load the page as usual). Off with "reduce motion". The header and the chat button keep
   their own names, so they stay still while the page content fades. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; animation-timing-function: ease; }
.site-header { view-transition-name: site-header; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ==== No JavaScript =================================================== */
/* The menu button and gallery arrows can't work: show the menu as a plain list on small screens
   (submenus expanded) and hide the arrows (the photo strip still scrolls). */
.no-js .gallery__nav { display: none; }
@media (max-width: 899px) {
  .no-js .nav-toggle { display: none; }
  .no-js .site-header { position: relative; height: auto; background: var(--white); color: var(--dark); }
  .no-js .site-header__inner { flex-wrap: wrap; padding-block: 12px; }
  .no-js .site-header .logo--white { opacity: 0; }
  .no-js .site-header .logo--colored { opacity: 1; }
  .no-js .site-nav { display: block; position: static; width: 100%; max-height: none; padding: 0; box-shadow: none; }
  .no-js .site-nav__submenu { display: block; }
  .no-js .hero { padding-top: 48px; }
  .no-js.header-solid main, .no-js .header-solid main { padding-top: 0; }
}

/* ==== Reduced motion ================================================== */
/* No transitions, animations or smooth scrolling; hover zooms and nudges go neutral
   (--hover-scale, --hover-nudge); the booking-box pulse becomes a steady outline. */
@media (prefers-reduced-motion: reduce) {
  :root { --hover-scale: 1; --hover-nudge: 0px; }
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .is-flashing { outline: 3px solid var(--flash); outline-offset: 6px; }
}