/* VERSION 20261007b — if you can read this in view-source, the new stylesheet is live */
/* ============================================
   Villa Salacia — stylesheet
   Palette:
     Ink navy    #16323A  (headings, header)
     Aegean teal #2F6F72  (primary accent)
     Antique gold #B9975B (sparing highlight)
     Limestone   #EDE7D8  (background)
     Warm white  #FBF9F3  (cards)
     Deep text   #1E2B2A
   Type: Fraunces (display/serif) + Inter (body/sans)
   ============================================ */

:root {
  --ink: #16323A;
  --teal: #2F6F72;
  --teal-dark: #1F5254;
  --gold: #B9975B;
  --limestone: #EDE7D8;
  --card: #FBF9F3;
  --text: #1E2B2A;
  --text-soft: #4B5B59;
  --line: rgba(22, 50, 58, 0.14);
  --max: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--card);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

h1, h2, h3, .display {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--ink);
  line-height: 1.12;
  margin: 0 0 0.5em;
  font-weight: 500;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 460; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.25rem; font-weight: 600; font-family: 'Inter', sans-serif; }

p { max-width: 62ch; color: var(--text-soft); }
p.wide { max-width: 74ch; }
p.tight { margin: 0; }
p.tight + p.tight { margin-top: 0; }

a { color: var(--teal-dark); }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Header / nav ---------- */
header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 40;
  background: rgba(251, 249, 243, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

/* Pages without the fixed hero photo need their content pushed down by
   the header's height, since a fixed header no longer reserves space
   in normal document flow. */
:root { --header-h: 82px; }
body:not(.has-hero-photo) main { padding-top: var(--header-h); }

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}

.brand {
  font-family: 'Fraunces', serif;
  font-size: 1.35rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}

nav.primary-nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
}

nav.primary-nav a {
  text-decoration: none;
  color: var(--text);
  font-size: 0.95rem;
  position: relative;
}
nav.primary-nav a[aria-current="page"] { color: var(--teal-dark); font-weight: 600; }

.cta-btn {
  display: inline-block;
  background: var(--teal-dark);
  color: #fff !important;
  padding: 11px 22px;
  border-radius: 3px;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  transition: background 0.2s ease;
}
.cta-btn:hover { background: var(--ink); }
.cta-btn.ghost {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink) !important;
}
.cta-btn.ghost:hover { background: var(--ink); color: #fff !important; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--ink);
  cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
  padding: 74px 0 60px;
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.hero .kicker {
  color: var(--teal-dark);
  font-size: 0.95rem;
  margin-bottom: 14px;
  display: block;
}
.hero-photo {
  aspect-ratio: 4 / 5;
  background: linear-gradient(155deg, #274952 0%, #1c363c 55%, #16323A 100%);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-caption {
  position: relative;
  padding: 18px 20px;
  color: #e8e4d8;
  font-size: 0.85rem;
  background: linear-gradient(to top, rgba(0,0,0,0.45), transparent);
  width: 100%;
}

/* ---------- Quick facts strip ---------- */
.facts-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 34px 0;
  margin: 20px 0 60px;
}
.facts-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.fact .num {
  font-family: 'Fraunces', serif;
  font-size: 2.1rem;
  color: var(--teal-dark);
  display: block;
}
.fact .label {
  font-size: 0.88rem;
  color: var(--text-soft);
}

/* ---------- Sections ---------- */
section { padding: 64px 0; }
section.tinted { background: var(--card); }
.section-head { max-width: 640px; margin-bottom: 36px; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.image-block {
  background: linear-gradient(160deg, #3a6b6d, #1F5254);
  border-radius: 4px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dce9e6;
  font-size: 0.9rem;
  text-align: center;
  padding: 24px;
}

.image-block.photo {
  background: none;
  padding: 0;
  min-height: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.image-block.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Taller variant: used alongside a 2-column, 3-row amenity grid, so the
   photo's height matches the grid's height rather than a fixed 3:2 ratio. */
.image-block.photo.tall {
  aspect-ratio: auto;
  align-self: stretch;
  min-height: 100%;
}

/* ---------- Amenity grid ---------- */
.amenity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

/* Split layout: amenity grid on the left (forced 2 columns), photo filling
   the right half at matching height. */
.amenity-split {
  align-items: stretch;
}
.amenity-grid-2col {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) {
  .amenity-grid-2col { grid-template-columns: 1fr; }
}
.amenity-item {
  background: var(--card);
  padding: 26px 24px;
}
.amenity-item h3 { margin-bottom: 8px; }
.amenity-item p { font-size: 0.94rem; margin: 0; }

/* Tighter rows in the 2-column/photo split layout (Amenities page), so the
   text column's overall height sits closer to the photo beside it. */
.amenity-split .amenity-item { padding: 16px 22px; }
.amenity-split .amenity-item h3 { font-size: 1.1rem; margin-bottom: 4px; }
.amenity-split .amenity-item p { font-size: 0.9rem; }

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.faq-item h3 { margin-bottom: 8px; color: var(--ink); }
.faq-item p { margin: 0; }

/* ---------- Location list ---------- */
.place-list { list-style: none; padding: 0; margin: 0; }
.place-list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.place-list .place-name {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--ink);
  font-size: 1.1rem;
  display: block;
  margin-bottom: 4px;
}
.place-list .place-meta {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--teal-dark);
  margin-left: 12px;
}

/* ---------- Map embed (Location page) ---------- */
.map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 640px) {
  .map-embed { aspect-ratio: 4 / 5; }
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--ink);
  color: #EDE7D8;
  text-align: center;
  padding: 70px 0;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #cdd8d6; margin: 0 auto 26px; }

/* ---------- Footer ---------- */
footer.site-footer {
  padding: 46px 0 60px;
  border-top: 1px solid var(--line);
  background: var(--card);
  position: relative;
}
.footer-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 0.9rem;
  color: var(--text-soft);
}
footer.site-footer a { color: var(--text-soft); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero-grid, .two-col { grid-template-columns: 1fr; }
  .facts-row { grid-template-columns: repeat(2, 1fr); }
  .nav-toggle { display: block; }
  nav.primary-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--card);
    border-bottom: 1px solid var(--line);
  }
  nav.primary-nav.open { display: block; }
  nav.primary-nav ul {
    flex-direction: column;
    padding: 20px 28px 26px;
    gap: 16px;
  }
  .nav-row .cta-btn.ghost { display: none; }
}

/* ---------- Fixed hero-photo system (shared by any page that uses it) ---------- */
/* Each page sets its own photo via --hero-photo on <body>, e.g.:
     body.home-hero      { --hero-photo: url('images/....jpg'); }
     body.amenities-hero { --hero-photo: url('images/....jpg'); }
   Both pages then share the exact same positioning/behaviour rules below,
   scoped to body.has-hero-photo (every such page carries that class too). */

/* Desktop: fixed/pinned behind the hero text, full width visible, content
   below scrolls up and over it. */
.hero-photo-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1024 / 684;
  max-height: 100vh;
  z-index: -1;
  background-image: linear-gradient(rgba(22,50,58,0.24), rgba(22,50,58,0.36)), var(--hero-photo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Text scrolls normally (separate from the fixed photo behind it), so it
   moves up and away as the page scrolls, instead of staying pinned. */
.hero-content {
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 684;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-content .kicker { color: #fff; text-shadow: 0 1px 12px rgba(10,30,40,0.55); }
.hero-content h1 { color: #fff; text-shadow: 0 2px 18px rgba(10,30,40,0.5); }
.hero-content h2 { color: #fff; text-shadow: 0 2px 18px rgba(10,30,40,0.5); }
.hero-content p { color: #fff; text-shadow: 0 1px 12px rgba(10,30,40,0.55); }
.hero-content .facts-strip {
  border-top: 1px solid rgba(255,255,255,0.25);
  border-bottom: none;
}
.hero-content .fact .num { color: #fff; text-shadow: 0 1px 12px rgba(10,30,40,0.5); }
.hero-content .fact .label { color: #fff; text-shadow: 0 1px 10px rgba(10,30,40,0.55); }
.hero-content .cta-btn.ghost {
  border-color: #fff;
  color: #fff !important;
}
.hero-content .cta-btn.ghost:hover { background: #fff; color: var(--ink) !important; }

/* Amenities page only: title centered in the top 30% of the photo,
   description centered in the bottom 30%, with the middle of the photo
   left clear — applies the same way on desktop and mobile, since the
   mobile override below only changes the photo's sizing, not this grid. */
body.amenities-hero .hero-content {
  display: grid;
  grid-template-rows: minmax(45%, auto) 1fr minmax(30%, auto);
}
/* Location page: same top/bottom banded layout, title in the top 45%,
   description in the bottom 30% — top band matches Amenities' so the
   title clears the fixed header instead of sitting behind it. */
body.location-hero .hero-content {
  display: grid;
  grid-template-rows: minmax(45%, auto) 1fr minmax(30%, auto);
}
.hero-content-top { grid-row: 1; display: flex; align-items: center; }
.hero-content-bottom { grid-row: 3; display: flex; align-items: center; }

/* Every section that scrolls up over the fixed photo must be opaque, so it
   covers the photo completely (no photo showing through or above it). */
body.has-hero-photo main > section:not(.cta-band) {
  background: var(--card);
  position: relative;
}

/* Header shows the same photo as its background, aligned with the fixed
   photo behind the page (alignment set by JS), so it looks transparent
   but fully hides any text scrolling underneath it. */
body.has-hero-photo header.site-header {
  background-color: #16323A;
  background-image: linear-gradient(rgba(22,50,58,0.24), rgba(22,50,58,0.36)), var(--hero-photo);
  background-repeat: no-repeat;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
body.has-hero-photo header.site-header .brand,
body.has-hero-photo header.site-header nav.primary-nav a,
body.has-hero-photo header.site-header .nav-toggle {
  color: #fff;
}
/* Open mobile menu is always a solid opaque panel, so its links stay dark
   regardless of the header's transparent/solid state above it. */
body.has-hero-photo header.site-header nav.primary-nav.open a {
  color: var(--text) !important;
}
body.has-hero-photo header.site-header nav.primary-nav.open a[aria-current="page"] {
  color: var(--teal-dark) !important;
}

@media (max-width: 860px) {
  /* Tablets and phones: photo and text become ONE element (no fixed pinning). */
  .hero-photo-wrap { display: none; }
  body.has-hero-photo .hero-content {
    aspect-ratio: auto;
    max-height: none;
    margin-top: 0;
  }
}

/* Tablets (601-860px): photo stays behind the text, almost the whole picture visible. */
@media (min-width: 601px) and (max-width: 860px) {
  body.has-hero-photo .hero-content {
    min-height: 78vw;
    background-image: linear-gradient(rgba(22,50,58,0.28), rgba(22,50,58,0.40)), var(--hero-photo);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

/* Phones (up to 600px): the WHOLE photo is shown across the full width as a
   strip at the top (same picture as desktop, just smaller). Only the main
   title sits on the photo; everything else sits below it on dark teal. */
@media (max-width: 600px) {
  body.has-hero-photo .hero-content {
    --strip-h: calc(100vw * 684 / 1024);
    display: block;
    aspect-ratio: auto;
    max-height: none;
    min-height: 0;
    margin-top: 0;
    padding-top: var(--header-h);   /* photo strip starts just below the header */
    padding-bottom: 40px;
    background-color: #16323A;
  }
  body.has-hero-photo .hero-content::before {
    content: "";
    position: absolute;
    top: var(--header-h); left: 0; right: 0;
    height: var(--strip-h);
    background-image: linear-gradient(rgba(22,50,58,0.28), rgba(22,50,58,0.40)), var(--hero-photo);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
  }
  body.has-hero-photo .hero-content > * { position: relative; }
  body.has-hero-photo .hero-content h1 {
    font-size: clamp(1.3rem, 6vw, 2rem);
    line-height: 1.15;
    margin: 0;
  }
  /* title block = the photo area below the header */
  body.has-hero-photo .hero-content-top,
  body.home-hero .hero .container > h1 {
    box-sizing: border-box;
    height: var(--strip-h);
    display: flex;
    align-items: flex-start;
    padding-top: 14px;
  }
  body.has-hero-photo .hero-content-bottom { display: block; padding-top: 24px; }
  /* Home: title first (on the photo), then kicker, text and buttons below it */
  body.home-hero .hero { padding: 0; }
  body.home-hero .hero .container { display: flex; flex-direction: column; }
  body.home-hero .hero .container > h1 { order: -2; }
  body.home-hero .hero .container > .kicker { order: -1; margin: 24px 0 14px; }
}

/* Home page, desktop and tablet: kicker, title and buttons high up on the
   photo; facts strip and the description at the bottom of the photo. */
@media (min-width: 601px) {
  body.home-hero .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: calc(var(--header-h) + 14px) 0 34px;
  }
  body.home-hero .hero { display: contents; }
  body.home-hero .hero .container { display: contents; }
  body.home-hero .hero-content .kicker,
  body.home-hero .hero-content h1,
  body.home-hero .hero-content .hero .container > div,
  body.home-hero .hero-content p.wide {
    width: min(760px, calc(100% - 56px));
    margin-left: auto;
    margin-right: auto;
  }
  body.home-hero .hero-content .kicker { order: 1; }
  body.home-hero .hero-content h1 { order: 2; }
  body.home-hero .hero-content .hero .container > div { order: 3; }
  body.home-hero .hero-content > .container { order: 4; width: 100%; margin-top: auto; }
  body.home-hero .hero-content p.wide { order: 5; margin-top: 0; margin-bottom: 0; }
  body.home-hero .hero-content .facts-strip { margin: 0 0 20px; padding: 26px 0; }
}

/* ---------- Pages without a hero photo: header stays in flow (sticky) ---------- */
body:not(.has-hero-photo) header.site-header { position: sticky; }

/* ---------- Per-page hero photo ---------- */
body.home-hero {
  --hero-photo: url('images/villa-salacia-luxury-villa-sea-view-almyrida-crete.jpg');
}
body.amenities-hero {
  --hero-photo: url('images/villa-salacia-luxury-villa-garden-sea-view-crete.jpg');
}
body.location-hero {
  --hero-photo: url('images/villa-salacia-luxury-villa-overlloking-souda-bay-crete.jpg');
}

/* ---------- About page: video hero ---------- */
/* Title sits in the top 20% of the clip, description in the bottom 20%,
   leaving the middle 60% free of text. Overlay is only dark at the top and
   bottom bands; the centre of the video is left untouched. */
.video-hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  height: min(56.25vw, calc(100vh - 84px));
  min-height: 560px;
  background: #16323A;
}
.video-hero-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.video-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom,
    rgba(10,30,40,0.62) 0%,
    rgba(10,30,40,0.40) 12%,
    rgba(10,30,40,0.00) 24%,
    rgba(10,30,40,0.00) 74%,
    rgba(10,30,40,0.40) 86%,
    rgba(10,30,40,0.66) 100%);
}
.video-hero-grid {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(30%, auto) 1fr minmax(20%, auto);
}
.video-hero-top { grid-row: 1; display: flex; align-items: center; }
.video-hero-bottom { grid-row: 3; display: flex; align-items: center; }
.video-hero h1 {
  color: #fff;
  margin: 0;
  max-width: none;
  text-shadow: 0 2px 18px rgba(10,30,40,0.6);
}
.video-hero p {
  color: #fff;
  margin: 0;
  max-width: 60ch;
  text-shadow: 0 1px 12px rgba(10,30,40,0.7);
}
.sound-toggle {
  position: absolute;
  right: 28px;
  bottom: 6%;
  z-index: 3;
  background: rgba(10,30,40,0.5);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 999px;
  padding: 8px 16px;
  font: 600 0.85rem 'Inter', sans-serif;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.sound-toggle:hover { background: rgba(10,30,40,0.8); }

/* Description text: inside the video on desktop, moved below it (as plain
   body text, same style as the paragraphs further down the page) on mobile. */
.video-desc-mobile { display: none; }

@media (max-width: 860px) {
  .video-hero { height: auto; min-height: 88vh; }
  .video-hero-grid { grid-template-rows: auto 1fr; padding-top: 28px; padding-bottom: 28px; }
  .video-hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .video-desc-desktop { display: none; }
  .video-desc-mobile { display: block; padding: 48px 0 8px; }
  .video-hero-overlay {
    background: linear-gradient(to bottom,
      rgba(10,30,40,0.62) 0%, rgba(10,30,40,0.30) 24%,
      rgba(10,30,40,0.00) 40%, rgba(10,30,40,0.00) 100%);
  }
  .sound-toggle { right: 28px; bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

:focus-visible {
  outline: 2px solid var(--teal-dark);
  outline-offset: 2px;
}

.page-wrap { position: relative; }

/* ---------- Gallery page ---------- */
/* Justified rows: photos read left to right, row by row, in the exact order listed.
   Each photo keeps its own proportions (no cropping); --ar is width / height. */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  --gap: 14px;
  --row-h: 260px;
  gap: var(--gap);
}
.gallery-grid::after { content: ""; flex-grow: 999; }
.gallery-item {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--line);
  cursor: zoom-in;
  flex: calc(var(--ar, 1.5) * 100) 1 calc(var(--ar, 1.5) * var(--row-h));
}
.gallery-item[hidden] { display: none; }
/* First four photos: two per row, all exactly the same 3:2 size */
.gallery-item.is-pinned {
  flex: 0 0 calc((100% - var(--gap)) / 2);
  aspect-ratio: 3 / 2;
}
.gallery-item.is-pinned img { height: 100%; object-fit: cover; }
/* Fixed rows in the All view: two equal photos per row, and a row of four.
   Free-flowing rows are used again when a category tab is chosen or on small phones. */
.gallery-item.is-half { flex: 0 0 calc((100% - var(--gap)) / 2); }
.gallery-item.is-row4 { flex: 0 0 calc((100% - 3 * var(--gap)) * var(--f)); }
.gallery-grid.is-filtered .gallery-item.is-half,
.gallery-grid.is-filtered .gallery-item.is-row4 {
  flex: calc(var(--ar, 1.5) * 100) 1 calc(var(--ar, 1.5) * var(--row-h));
}
@media (max-width: 860px) {
  .gallery-item.is-half, .gallery-item.is-row4 {
    flex: calc(var(--ar, 1.5) * 100) 1 calc(var(--ar, 1.5) * var(--row-h));
  }
}
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.35s ease;
}
.gallery-item:hover img { transform: scale(1.03); }
@media (max-width: 860px) {
  .gallery-grid { --gap: 10px; --row-h: 180px; }
  /* phones and tablets: every photo shown in full, never trimmed */
  .gallery-item.is-pinned { flex: calc(var(--ar, 1.5) * 100) 1 calc(var(--ar, 1.5) * var(--row-h)); aspect-ratio: auto; }
  .gallery-item.is-pinned img { height: auto; object-fit: contain; }
}
@media (max-width: 520px) {
  .gallery-grid { --gap: 8px; --row-h: 130px; }
}

/* Lightbox (created by script.js when a gallery photo is clicked) */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 24, 30, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox img {
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 3px;
}
.lightbox button {
  position: absolute;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 0;
  border-radius: 999px;
  width: 46px;
  height: 46px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox button:hover { background: rgba(255,255,255,0.28); }
.lightbox .lb-close { top: 18px; right: 18px; }
.lightbox .lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 14px; top: 50%; transform: translateY(-50%); }

.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}
.gallery-filter {
  font: 600 0.92rem 'Inter', sans-serif;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.gallery-filter:hover { background: rgba(22,50,58,0.07); }
.gallery-filter.is-active { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }

/* The Area: photo beside each place (stacked on small screens) */
.area-list li { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: center; }
.area-list .place-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; display: block; }
@media (max-width: 700px) {
  .area-list li { grid-template-columns: 1fr; gap: 14px; }
}