/* 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 · Chat button + panel · Page transitions ·
     No JavaScript · Print · 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: 767/768px, the phone/tablet line for the hero video and for moving the floating
   chat button out of the way of photo strips and booking areas (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:not(.button):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); line-height: 1.15; letter-spacing: -0.01em; color: var(--dark); text-wrap: balance; }
h1, h2 { font-weight: 400; }
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; }
summary { list-style: none; cursor: pointer; } /* every <details> has its own open/close mark */
summary::-webkit-details-marker { display: none; }
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, .host__greeting footer, .stay-step__link, .maps-link,
.site-footer__heading, .compare__table thead th, .compare__table td::before, .stay-search__label,
.cal__grid th, .stay-picker__guests label, .google-reviews__title {
  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, .stay-search__label, .cal__grid th,
.stay-picker__guests label { 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 (the header sets its own for each look, and its
   white dropdown panels are teal again) */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.hero, .booking-box, .gallery__item, .book-band, .cookie-notice, .lightbox, .site-footer { --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--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; }
/* An icon in a thin teal ring (travel guide banner, walking times, stay steps) */
.travel-guide__icon, .walk__icon, .stay-step__icon { display: grid; place-items: center; flex: none; border: 1px solid var(--primary); border-radius: 50%; background: var(--white); color: var(--primary-ink); }

.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); }
.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%; }
/* A button that looks like a text link */
.link-button { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ==== Header & nav ==================================================== */
/* Two looks. See-through on the hero photo: white text and logo over a soft shade. Solid white:
   dark text, the coloured logo and a hairline – after scrolling (.is-solid), with the phone menu
   open (.is-open, fully white like the panel under it), on pages without a hero
   (body.header-solid) and without JavaScript on small screens. What differs is set once per look
   as custom properties; the parts read them: */
.site-header {
  --solid: 0;                  /* 0 see-through, 1 solid: the shade and the two logos cross-fade on it */
  --focus: var(--white);
  --nav-hover: var(--white);   /* hovered and current menu links… */
  --nav-line: underline;       /* …underlined on the photo */
  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;
}
.site-header:is(.is-solid, .is-open), .header-solid .site-header {
  --solid: 1; --focus: var(--primary-ink); --nav-hover: var(--primary-ink); --nav-line: none;
  background: var(--header-bg, rgb(255 255 255 / 0.97)); color: var(--dark); box-shadow: 0 1px 0 var(--line);
}
.site-header.is-open { --header-bg: var(--white); }
/* Soft shade behind the see-through 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);
  opacity: calc(1 - var(--solid)); transition: opacity 0.3s;
}
/* Opening/closing the phone menu switches the bar at once (site.js adds .no-fade for a frame):
   a bar fading to or from white lingered as a white strip, also into the next page when a menu
   link was tapped (the page cross-fade keeps the header's last look). */
.site-header.no-fade, .site-header.no-fade::before, .site-header.no-fade .logo { transition: none; }
.header-solid main { padding-top: var(--header-h); }
/* The logo lines up with the content */
.site-header__inner { display: flex; align-items: center; gap: 4px; 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); the menu and the
   language switcher sit on the right */
.site-header__logo { display: block; position: relative; width: 168px; margin-right: auto; }
.site-header__logo .logo { width: 100%; height: auto; transition: opacity 0.3s; }
.site-header__logo .logo--white { opacity: calc(1 - var(--solid)); }
.site-header__logo .logo--colored { position: absolute; inset: 0; opacity: var(--solid); }
/* 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; -webkit-tap-highlight-color: transparent; }
.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:is(:hover, [aria-current="page"]) {
  color: var(--nav-hover, var(--primary-ink)); text-decoration: var(--nav-line, none); 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); text-decoration: none; }
.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; 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:last-child { transition: transform 0.2s; }
.has-children.is-open > .site-nav__link .icon:last-child { 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); }

/* 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: 0; }
  .site-header__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, language switcher, 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 { width: 148px; }
  .header-book {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
    border-radius: var(--radius); background: var(--primary); color: var(--white);
    line-height: 1; white-space: nowrap; text-decoration: 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 .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 .site-nav__link { width: 100%; justify-content: space-between; padding: 16px 4px; border-radius: 0; font-size: 0.85rem; }
  .site-nav .site-nav__submenu { display: none; position: static; padding: 0 0 8px; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .site-nav .has-children.is-open > .site-nav__submenu { display: block; }
  .site-nav .site-nav__submenu a { padding: 10px 14px; }
  /* Language switcher in the bar (left of Book): globe + code, its list drops down as on desktop */
  .site-nav__item--lang { order: -1; }
  .site-header__logo { order: -2; }
  .site-nav__item--lang > .site-nav__link { gap: 4px; padding-inline: 6px; }
  .site-nav__item--lang > .site-nav__link > .icon:last-child { display: none; }
}
@media (max-width: 399px) {
  /* Logo, language, Book and menu button still fit on a 360px phone (the logo gives way on 320px) */
  .site-header__inner { gap: 8px; }
  .site-header__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; line-height: 1.05; color: var(--white); }
.hero--large .hero__title { max-width: 17ch; } /* two lines in every language */
@media (min-width: 600px) { .hero--large .hero__title { font-size: var(--step-display); } } /* (phones: the h1 size) */
/* 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.
   The teal + blur sit on ::before, never on the box itself: a backdrop-filter would make the box
   the containing block for anything position: fixed inside it. */
.booking-box {
  position: relative; isolation: isolate;
  max-width: 980px; margin-top: clamp(28px, 6vw, 84px); padding: 20px clamp(16px, 2.4vw, 28px) 16px;
  border-radius: var(--radius); color: var(--white); text-align: left;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.45); text-shadow: none;
}
.booking-box::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgb(var(--primary-rgb) / 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.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; }
.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); }

/* ==== Booking search & calendars (booking.js; macros staySearch, stayPicker) ============== */
/* Date search in the booking boxes: a white bar (dates · guests · search), the calendar panel
   and the free studios under it. Without JavaScript the two native date inputs show instead of
   the dates button and the form searches on the booking site. */
.stay-search { --focus: var(--primary-ink); position: relative; color: var(--text); }
.stay-search__bar { display: flex; align-items: stretch; min-height: 60px; padding: 6px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-soft); }
.stay-search__field { display: flex; flex: 1 1 0; min-width: 0; }
.stay-search__field--dates { flex-grow: 1.6; }
.stay-search__field--guests { position: relative; flex-direction: column; justify-content: center; padding: 0 16px; border-left: 1px solid var(--line); }
.stay-search__label { display: block; color: var(--muted); }
.stay-search__dates, .stay-search__native { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 0 18px; border: 0; border-radius: var(--radius); background: none; color: var(--dark); font: inherit; text-align: left; cursor: pointer; }
.stay-search__dates:hover { background: var(--paper); }
.stay-search__value { overflow: hidden; font-size: 0.95rem; text-overflow: ellipsis; white-space: nowrap; }
.stay-search__native input { width: 100%; border: 0; background: none; color: var(--dark); font: inherit; font-size: 0.9rem; }
.stay-search.is-enhanced .stay-search__native, .stay-search:not(.is-enhanced) .stay-search__dates { display: none; }
.stay-search select { width: 100%; margin: 0 -4px; padding: 2px 0; border: 0; background: none; color: var(--dark); font: inherit; font-size: 0.95rem; cursor: pointer; }
/* Guests − / + (booking.js replaces the select with it) */
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper__value { min-width: 5.5em; color: var(--dark); font-size: 0.95rem; text-align: center; white-space: nowrap; }
.stepper__button { position: relative; display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--dark); cursor: pointer; }
.stepper__button::after { content: ""; position: absolute; inset: -6px; } /* 44px tap target */
.stepper__button .icon { width: 16px; height: 16px; }
.stepper__button:hover:not(:disabled) { border-color: var(--dark); }
.stepper__button:disabled { opacity: 0.35; cursor: default; }
/* Search: the round teal button at the end of the bar */
.stay-search__submit { display: grid; place-items: center; flex: none; width: 48px; height: 48px; align-self: center; border: 0; border-radius: 50%; background: var(--primary); color: var(--white); cursor: pointer; }
.stay-search__submit:hover { background: var(--primary-dark); }
.stay-panel, .stay-results { margin-top: 10px; padding: 16px clamp(14px, 2vw, 22px); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
/* The calendar floats over the page under the bar (inline on phones) */
.stay-panel { padding-top: 20px; }
.stay-panel__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.stay-panel__hint { flex: 1 1 auto; margin: 0; color: var(--dark); font-weight: 600; }
.stay-panel__clear { display: inline-flex; align-items: center; min-height: 44px; color: var(--primary-ink); font-size: 0.9rem; }
@media (min-width: 600px) {
  /* Right under the bar (booking.js sets --panel-top to the bar's height), over the results
     below it */
  .stay-panel { position: absolute; z-index: 10; top: var(--panel-top, 64px); right: 0; left: 0; max-width: 760px; max-height: calc(100dvh - var(--header-h) - 24px); margin-top: 0; overflow-y: auto; } /* Close reachable on short (landscape) screens */
  .stay-search:has(.stay-panel:not([hidden])) .stay-results { display: none; }
  /* The open calendar stays above what follows the booking box (the box isolates its own
     stacking, so it is lifted too: on guide pages the studio cards come right after it) */
  :is(.hero, .guide-stay):has(.stay-panel:not([hidden])), .booking-box:has(.stay-panel:not([hidden])) { position: relative; z-index: 5; }
}
.stay-results__third { margin: 0 0 4px; font-size: 0.88rem; }
.stay-results__list { list-style: none; margin: 0; padding: 0; }
.stay-result { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; align-items: center; gap: 6px 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.stay-result:last-child { padding-bottom: 0; border-bottom: 0; }
.stay-result__photo-link { display: block; }
.stay-result__photo { display: block; width: 96px; height: 72px; border-radius: var(--radius); object-fit: cover; background: var(--tint); }
.stay-result__name { display: block; color: var(--dark); font: 500 1.1rem var(--font-heading); text-decoration: none; }
.stay-result__name:hover { color: var(--primary-ink); text-decoration: underline; }
.stay-result__facts { display: block; font-size: 0.85rem; color: var(--muted); }
.stay-result__price { min-width: 7em; margin: 0; font-size: 0.85rem; color: var(--muted); text-align: right; white-space: nowrap; } /* a floor for short prices (keeps rows calm); the buttons line up anyway */
.stay-result__price strong { font: 500 1.2rem var(--font-heading); color: var(--dark); }
.stay-result__nightly { display: block; }
/* The list adapts to its own width (container queries): the hero box, the narrower box on guide
   pages and phones each get the layout that fits, without extra breakpoints (one row from 560px) */
.stay-results { container-type: inline-size; }
@container (max-width: 560px) {
  /* Photo beside name/facts; under them the price ("€132 total", ≈ per night) and a compact
     Book now on the same row */
  .stay-result { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "photo info info" "price price book"; gap: 10px 12px; }
  .stay-result__photo-link { grid-area: photo; }
  .stay-result__photo { width: 72px; height: 72px; }
  .stay-result__info { grid-area: info; }
  .stay-result__price { grid-area: price; text-align: left; white-space: normal; }
  .stay-result .button { grid-area: book; }
}
@container (max-width: 260px) {
  /* Small phones: Book now on its own row (long German/Greek labels) */
  .stay-result { grid-template-areas: "photo info info" "price price price" "book book book"; }
}
.stay-results__none { margin: 0 0 12px; font-size: 0.95rem; }
.stay-results__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
@media (max-width: 599px) {
  /* Two rows: the dates, then guests + search (long Greek/German labels need the width) */
  .stay-search__bar { flex-wrap: wrap; row-gap: 6px; }
  .stay-search__field--dates { flex-basis: 100%; min-height: 48px; border-bottom: 1px solid var(--line); }
  .stay-search__dates, .stay-search__native { padding: 0 10px; }
  .stay-search__field--guests { padding: 0 10px; border-left: 0; }
  .stay-panel__hint { flex-basis: 100%; } /* the hint on its own line, Clear and Close side by side */
  .stay-panel__foot { justify-content: space-between; }
  .stay-panel__foot .button { margin-inline-start: auto; } /* Close stays right even on its own line */
}

/* Calendar (search panel and room booking card): one or two months, Monday first. Selected
   check-in/out days are teal fills, the nights between sea mist; days that can't be picked
   are faint. Room calendars show each free night's price under the day. */
.cal { position: relative; }
.cal__nav { position: absolute; inset: -4px 0 auto; display: flex; justify-content: space-between; pointer-events: none; }
.cal__arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--dark); cursor: pointer; pointer-events: auto; }
.cal__arrow:hover { background: var(--paper); }
.cal__arrow:disabled { opacity: 0.3; cursor: default; }
.cal__months { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); }
.cal__title { margin: 6px 0 10px; font: 500 1.05rem var(--font-heading); color: var(--dark); text-align: center; }
.cal__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal__grid th { padding: 0 0 6px; color: var(--muted); text-align: center; }
@media (max-width: 399px) {
  .cal__grid th { letter-spacing: 0.04em; } /* Greek/German weekday names fit side by side */
  .stepper { gap: 6px; }
  .stepper__value { min-width: 4.5em; } /* the guests row fits next to Search down to 240px */
}
.cal__grid abbr { text-decoration: none; }
.cal__grid td { padding: 2px 0; }
/* Round day markers; the cells between check-in and check-out (and half of those two) carry a
   sea-mist band, so the stay reads as one shape */
.cal__grid td.is-between { background: var(--tint); }
.cal__grid td.is-start { background: linear-gradient(90deg, transparent 50%, var(--tint) 50%); }
.cal__grid td.is-end { background: linear-gradient(90deg, var(--tint) 50%, transparent 50%); }
/* 44px circles, smaller only where the column is narrower (small phones) */
.cal__day { display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(44px, 100%); height: auto; aspect-ratio: 1; margin: 0 auto; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--dark); font: inherit; font-size: 0.95rem; line-height: 1.15; cursor: pointer; }
.cal__day:not(.is-disabled, .is-start, .is-end):hover { box-shadow: inset 0 0 0 1.5px var(--dark); }
.cal__day.is-today .cal__num { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.cal__day.is-start, .cal__day.is-end { background: var(--primary-dark); color: var(--white); font-weight: 600; }
/* Unavailable: lighter text (about 3.5:1, still readable), not opacity, so the focus ring stays full strength */
.cal__day.is-disabled { color: rgb(var(--dark-rgb) / 0.5); cursor: default; }
.cal__price { display: block; min-height: 1.2em; font-size: var(--label-sm); line-height: 1.2; color: var(--muted); } /* kept even when empty: all days the same height */
/* Room calendars show a price under each day: taller, softly rounded markers */
.stay-picker .cal__day { width: 100%; max-width: 48px; height: 48px; aspect-ratio: auto; border-radius: var(--radius); }
.cal__day.is-start .cal__price { color: inherit; } /* (the check-out's price is hidden) */
.cal__day.is-disabled .cal__price, .cal__day.is-end .cal__price { visibility: hidden; } /* check-out night isn't part of the stay */
.stay-picker .cal__day.is-today .cal__num { text-underline-offset: 1px; } /* clear of the price under it */
.cal__status { margin: 8px 0 0; font-size: 0.85rem; color: var(--muted); }
.cal__status:empty { margin: 0; } /* always there (a live region), takes no room when empty */
/* Phones, date search: every month in one scrolling list (no arrows), month name kept on top */
.cal--stacked .cal__nav { display: none; }
/* scroll padding: focus never hides under the sticky heads; side/bottom padding: the focus ring isn't cut */
.cal--stacked .cal__months { grid-auto-flow: row; max-height: min(50dvh, 440px); overflow-y: auto; overscroll-behavior: contain; gap: 8px; padding: 0 6px 6px; scroll-padding: 64px 0 8px; }
.cal--stacked .cal__title { position: sticky; top: 0; z-index: 1; height: 32px; margin: 0; padding: 4px 0 0; background: var(--white); }
.cal--stacked .cal__grid thead th { position: sticky; top: 32px; z-index: 1; background: var(--white); } /* weekday names stay visible too */

/* 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); }
  /* Contact, guides: less empty photo above a short title */
  .hero { min-height: clamp(300px, 50vh, 440px); padding-top: calc(var(--header-h) + 40px); padding-bottom: 36px; }
  .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__subtitle { display: none; }
  .booking-box { margin-top: 20px; box-shadow: none; }
  .booking-box .why-direct { display: none; }
  .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 { 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: 500 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; }
}

/* Travel guide banner under the home guide cards (macro travelGuide, site.yaml → travel_guide) */
.travel-guide {
  display: flex; align-items: center; gap: 16px 20px; margin-top: var(--space-lg); padding: 18px clamp(18px, 3vw, 28px);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
.travel-guide__icon { width: 44px; height: 44px; }
.travel-guide__text { flex: 1; margin: 0; color: var(--muted); }
.travel-guide__title { display: block; color: var(--dark); font-family: var(--font-heading); font-size: 1.15rem; font-weight: 500; }
.travel-guide .button { flex: none; gap: 10px; }
.travel-guide__logo { width: 24px; height: 24px; }
/* Stays light on hover (the outline button normally turns navy, which would hide the logo's black lines) */
.travel-guide .button:hover { background: var(--white); border-color: var(--primary); color: var(--primary-ink); }
@media (max-width: 639px) {
  .travel-guide { flex-direction: column; align-items: stretch; }
  .travel-guide__icon { display: none; }
}

/* 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 { 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, .lightbox__next { top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }

/* ==== 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 { width: 34px; height: 34px; }
.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; } /* 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) with the next review peeking in; site.js moves it on every few seconds */
.google-reviews { margin: var(--host-gap) 0 0; min-width: 0; }
.google-reviews__title { margin: 0 0 14px; 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 .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; }

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

/* 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: 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 { margin: 0 0 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; }
}
/* 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;
}

/* ==== 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 { 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); }
.compare__toggle .icon { color: var(--primary-ink); transition: transform 0.2s; }
.compare[open] .compare__toggle .icon { transform: rotate(180deg); }
.compare__scroll { border-top: 1px solid var(--dark); }
.compare__table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.compare__table th, .compare__table td { text-align: left; vertical-align: baseline; }
.compare__table thead th { 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__price strong { font: 500 1.15rem var(--font-heading); color: var(--dark); }
/* Wide screens: a table (scrolls sideways if it must) */
@media (min-width: 900px) {
  .compare__scroll { overflow-x: auto; }
  .compare__table { min-width: 760px; }
  .compare__table th, .compare__table td { padding: 16px 14px 16px 0; border-bottom: 1px solid var(--line); }
  .compare__table tbody tr:last-child > * { border-bottom: 0; } /* .compare's own rule closes it */
  .compare__table thead th { padding-block: 14px; }
  .compare__table tbody tr:hover { background: rgb(255 255 255 / 0.6); }
  .compare__table td:nth-child(2), .compare__table td:nth-child(5), .compare__table td:nth-child(7) { white-space: nowrap; }
}
/* Phones and tablets: one card per studio, each fact with its label (data-label) */
@media (max-width: 899px) {
  .compare__table { display: block; }
  .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 th, .compare__table td { display: block; padding: 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); }
/* Google's colours muted a little so the map sits with the site's palette (the pins stay visible) */
.map-embed iframe { width: 100%; height: 100%; border: 0; filter: saturate(0.6) contrast(0.95) brightness(1.03); }
.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; width: 36px; height: 36px; }
.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 { position: relative; padding: 22px 48px 22px 0; font: 400 1.15rem/1.4 var(--font-heading); color: var(--dark); }
.faq__item summary::after { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.faq__item summary:hover { color: var(--primary-ink); }
/* + / – after a question: shared by the FAQ here and in the room booking card (stay-faq) */
:is(.faq__item, .stay-faq__item) summary::after { content: "+"; font: 300 var(--toggle-size, 1.8rem)/1 var(--font-body); color: var(--primary-ink); }
:is(.faq__item, .stay-faq__item)[open] summary::after { content: "–"; }
.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))); }
/* Name and summary on the left, price + "Check availability" on the right (under them on phones) */
.room-intro__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: baseline;
  grid-template-areas: "eyebrow eyebrow" "title price" "summary book"; margin-bottom: clamp(24px, 3.5vw, 40px);
}
.room-intro__eyebrow { grid-area: eyebrow; margin: 0 0 18px; color: var(--primary-ink); }
.room-intro__title { grid-area: title; margin: 0 0 0.3em; }
.room-intro__price { grid-area: price; justify-self: end; margin: 0; font-size: 1rem; color: var(--dark); white-space: nowrap; }
.room-intro__summary { grid-area: summary; margin: 0; }
.room-intro__book { grid-area: book; align-self: center; justify-self: end; margin: 0; }
@media (max-width: 899px) {
  .room-intro__head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "title" "summary" "price" "book"; }
  .room-intro__price, .room-intro__book { justify-self: start; }
  .room-intro__price { margin-top: 18px; }
  .room-intro__book { margin-top: 10px; }
}
.room-intro__price strong { font: 500 1.35rem var(--font-heading); }

/* Main: description and details on the left, the booking card on the right; one column on
   phones and tablets (in page order: intro, booking card, details) */
.room-main { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 0 clamp(32px, 5vw, 80px); }
@media (min-width: 900px) {
  .room-main { grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); grid-template-rows: auto 1fr; }
  .room-main__intro { grid-column: 1; grid-row: 1; }
  .room-main__details { grid-column: 1; grid-row: 2; }
  .room-main__booking { grid-column: 2; grid-row: 1 / span 2; }
}
/* 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 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; 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; }
.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: review scores, the room calendar, why book direct, policies */
.room-main__booking {
  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); }
}
/* Room calendar (stayPicker): calendar, guests, the stay summary and "Book now" */
.stay-picker__footer { display: grid; gap: 10px; margin-top: 12px; }
.stay-picker__guests { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; color: var(--muted); }
.stay-picker__guests select { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--dark); font: inherit; }
.stay-picker__guests .stepper__button { width: 36px; height: 36px; }
.stay-picker__summary { margin: 0; color: var(--dark); font-weight: 600; }
.stay-picker__nights { margin: -15px 0 0; font-size: 0.9rem; color: var(--muted); }
/* Rate plans: one card-like radio each (name left, total right); the chosen one outlined in teal */
.rate-options { min-width: 0; margin: 4px 0 0; padding: 0; border: 0; }
.rate-options__list { display: grid; gap: 8px; }
.rate-option { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); cursor: pointer; }
.rate-option:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.rate-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.rate-option input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.rate-option__name { flex: 1 1 auto; color: var(--dark); font-size: 0.95rem; }
.rate-option__total { white-space: nowrap; font-size: 0.8rem; line-height: 1.3; color: var(--muted); text-align: right; } /* "total" under the price: the plan name keeps the room */
.rate-option__total strong { display: block; font: 500 1.2rem var(--font-heading); color: var(--dark); }
/* The chosen dates with a pencil ("Modify") right after them: a 44px tap target that doesn't
   make the line taller */
.stay-picker__selected { display: flex; align-items: center; gap: 2px; }
.stay-picker__clear { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -10px 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--primary-ink); cursor: pointer; }
.stay-picker__clear .icon { width: 17px; height: 17px; }
.stay-picker__clear:hover { background: var(--tint); }
.stay-picker__book.is-disabled { border-color: var(--tint); background: var(--tint); color: var(--muted); cursor: default; } /* calm, not washed-out teal */
.stay-picker__note { margin: 0; font-size: 0.88rem; color: var(--muted); }
.booking-card__extras { margin: 14px 0 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 { --toggle-size: 1.5rem; 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 { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-size: 0.9rem; font-weight: 600; color: var(--dark); }
.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__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(.stay-picker, .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, 1fr); align-items: center; gap: clamp(28px, 4.5vw, 64px); }
.guide-item + .guide-item { margin-top: var(--space-section); }
@media (min-width: 900px) {
  .guide-item { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); }
  .guide-item:where(:nth-child(even)) { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
  .guide-item:where(:nth-child(even)) .guide-item__image { order: 2; }
  .guide-item--text { 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; box-shadow: var(--shadow); }
.guide-stay:has(.stay-result) .room-grid { display: none; } /* the results already list the free studios */
.guide-stay:has(.stay-result) .section-head { margin-bottom: 0; } /* …and no gap where the cards were */
.guide-stay .booking-box::before { background: var(--primary); }

/* ==== 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 96px; /* room under the floating chat button */ 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; }
.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; } }
@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; }
/* Out of the way while the date calendar is open (it would cover Clear / Close); back after */
body.dates-open .cookie-notice { visibility: hidden; }
.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. It fades out (body classes from site.js) while
   the cookie banner shows or the phone menu or date calendar is open, and on phones while a
   room's calendar, the search results or a photo strip is under it; 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;
  view-transition-name: chat-button; /* stays put (no fade) when moving between pages */
}
.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, .dates-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; }
}
@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);
  --focus: var(--primary-ink); /* white panel (the chat sits in the footer, whose rings are white) */
}
.chat__bar { --focus: var(--white); 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 { 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-offset: 0; border-color: transparent; } /* the ring replaces the border */
.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; }
.no-js [data-picker-only] { display: none; } /* the room calendar's guests and summary */
@media (max-width: 899px) {
  .no-js .nav-toggle { display: none; }
  .no-js .site-header {
    --solid: 1; --focus: var(--primary-ink); --nav-hover: var(--primary-ink); --nav-line: none;
    position: relative; height: auto; background: var(--white); color: var(--dark);
  }
  .no-js .site-header__inner { flex-wrap: wrap; padding-block: 12px; }
  .no-js .site-nav { display: block; position: static; width: 100%; max-height: none; padding: 0; box-shadow: none; }
  .no-js .site-nav .site-nav__submenu { display: block; }
  .no-js .hero { padding-top: 48px; }
  .no-js .header-solid main { padding-top: 0; }
}

/* ==== Print ============================================================ */
@media print {
  .site-header, .cookie-notice, .chat, .stay-panel, .skip-link { display: none; }
  .header-solid main { padding-top: 0; } /* the space for the (hidden) header */
}

/* ==== 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; }
}