/* Villa 6 brand palette: color-only overrides that preserve the existing layout. */
:root {
  --ink: #3a4a47;
  --ink-deep: #263735;
  --cream: #efe8dc;
  --paper: #fbf9f4;
  --coral: #add9db;
  --aqua: #c8edef;
  --gold: #d9eeee;
  --brand-green: #3a4a47;
  --brand-aqua: #add9db;
  --sand: #f1eadd;
  --sand-deep: #e8dece;
  --mist: #dcebea;
  --line: rgba(58, 74, 71, 0.18);
  --muted: #5a6f6b;
}

body {
  color: #293c39;
  background: var(--paper);
}

.site-header,
.site-header.is-scrolled {
  color: var(--brand-green);
  background: rgba(241, 234, 221, 0.97);
  border-bottom-color: rgba(58, 74, 71, 0.16);
  box-shadow: 0 12px 36px rgba(55, 61, 55, 0.14);
}

.brand-mark {
  background: var(--brand-green);
  border-color: rgba(58, 74, 71, 0.2);
  box-shadow: 0 7px 22px rgba(55, 61, 55, 0.16);
}

.brand-copy strong { color: var(--brand-green); }
.brand-copy small { color: #64736f; }

.site-nav > a:not(.button) { color: var(--brand-green); }
.site-nav > a:not(.button)::after { background: #71a8aa; }

.weather-pill {
  color: var(--brand-green);
  background: rgba(173, 217, 219, 0.3);
  border-color: rgba(58, 74, 71, 0.14);
}
.weather-pill:hover,
.weather-pill:focus-visible { background: rgba(173, 217, 219, 0.5); }
.weather-icon,
.weather-reading small { color: #55706b; }

.language-switch {
  color: rgba(58, 74, 71, 0.38);
  border-color: rgba(58, 74, 71, 0.2);
}
.language-switch button { color: rgba(58, 74, 71, 0.66); }
.language-switch button.is-active { color: var(--brand-green); }

.button,
.site-nav .button {
  color: var(--ink-deep);
  background: var(--brand-aqua);
  border-color: var(--brand-aqua);
  box-shadow: 0 14px 30px rgba(27, 48, 44, 0.22);
}
.button:hover,
.button:focus-visible,
.site-nav .button:hover,
.site-nav .button:focus-visible {
  color: var(--ink-deep);
  background: #d5f2f2;
  border-color: #d5f2f2;
  box-shadow: 0 18px 38px rgba(27, 48, 44, 0.28);
}
.button-outline-light {
  color: #fff;
  background: rgba(58, 74, 71, 0.16);
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow: none;
}
.button-outline-light:hover,
.button-outline-light:focus-visible {
  color: var(--ink-deep);
  background: #fff;
  border-color: #fff;
}
.button-dark {
  color: var(--brand-aqua);
  background: var(--brand-green);
  border-color: var(--brand-green);
}
.button-dark:hover,
.button-dark:focus-visible {
  color: #fff;
  background: var(--ink-deep);
  border-color: var(--ink-deep);
}

.eyebrow,
.section-kicker span,
.text-link span,
.room-arrow { color: #5d989a; }

.hero { background: var(--brand-green); }
.hero::before {
  border-color: rgba(173, 217, 219, 0.24);
  box-shadow: 0 0 0 70px rgba(173, 217, 219, 0.035), 0 0 0 140px rgba(173, 217, 219, 0.025);
}
.hero-intro { color: rgba(237, 249, 248, 0.76); }
.hero-visual::after {
  background: linear-gradient(90deg, rgba(58, 74, 71, 0.48), transparent 30%), linear-gradient(0deg, rgba(38, 55, 53, 0.4), transparent 48%);
}
.hero-facts strong { color: var(--brand-aqua); }
.hero-caption {
  background: rgba(38, 55, 53, 0.74);
  border-color: rgba(173, 217, 219, 0.34);
}
.hero-caption .hero-caption-line { background: var(--brand-aqua); }
.rating-card {
  color: var(--ink-deep);
  background: rgba(251, 249, 244, 0.94);
  border-color: rgba(173, 217, 219, 0.45);
  box-shadow: 0 18px 46px rgba(38, 55, 53, 0.17);
}
.rating-value { color: var(--ink-deep); }

.feature-band {
  color: var(--ink-deep);
  background: var(--mist);
}
.feature-band-copy { background: var(--mist); }
.feature-band .eyebrow { color: var(--brand-green); }
.amenity-grid article { border-top-color: rgba(38, 55, 53, 0.25); }
.amenity-grid svg { stroke: var(--brand-green); }
.amenity-grid p { color: rgba(38, 55, 53, 0.72); }

.gallery { background: var(--paper); }
.tour-filters button {
  color: var(--brand-green);
  border-color: rgba(58, 74, 71, 0.25);
}
.tour-filters button:hover,
.tour-filters button:focus-visible,
.tour-filters button.is-active {
  color: var(--brand-aqua);
  background: var(--brand-green);
  border-color: var(--brand-green);
}
.photo { box-shadow: 0 16px 38px rgba(38, 55, 53, 0.12); }
.photo::after { background: linear-gradient(0deg, rgba(38, 55, 53, 0.72), transparent 54%); }
.photo:focus-visible { outline-color: var(--brand-aqua); }

.social-story { background: var(--sand-deep); }
.social-logo {
  background: #f7f2ea;
  border-block-color: rgba(58, 74, 71, 0.1);
}
.social-logo img { filter: drop-shadow(0 18px 44px rgba(38, 55, 53, 0.18)); }

.rooms { background: var(--brand-green); }
.room-list li,
.room-list,
.highlight-grid,
.highlight-grid article,
.highlight-grid article:nth-child(odd) { border-color: rgba(173, 217, 219, 0.2); }
.room-list li > span,
.room-number,
.room-tech svg,
.highlight-grid svg { color: var(--brand-aqua); stroke: var(--brand-aqua); }

.location-image::after { background: rgba(58, 74, 71, 0.16); }
.location-image > p,
.map-pin em { background: rgba(38, 55, 53, 0.86); }
.map-pin span { background: var(--brand-aqua); }

.booking {
  color: var(--ink-deep);
  background: #d3e7e5;
}
.booking .eyebrow { color: var(--brand-green); }
.booking > p:not(.eyebrow),
.booking > small { color: rgba(38, 55, 53, 0.78); }
.booking-glow {
  border-color: rgba(58, 74, 71, 0.22);
  box-shadow: 0 0 0 100px rgba(58, 74, 71, 0.035), 0 0 0 200px rgba(58, 74, 71, 0.025);
}
.platform-card {
  color: var(--ink-deep);
  background: rgba(251, 249, 244, 0.92);
  border-color: rgba(58, 74, 71, 0.18);
}

.site-footer,
.lightbox { background: var(--ink-deep); }
.lightbox::backdrop { background: rgba(25, 39, 37, 0.88); }
.lightbox-close,
.lightbox-nav { background: rgba(38, 55, 53, 0.82); }

@media (max-width: 1050px) {
  .menu-button {
    color: var(--brand-green);
    background: rgba(173, 217, 219, 0.28);
    border-color: rgba(58, 74, 71, 0.2);
  }
  .site-nav { background: var(--ink-deep); }
  .site-nav > a:not(.button) { color: #fff; }
  .site-nav .language-switch {
    color: rgba(255, 255, 255, 0.42);
    border-color: rgba(255, 255, 255, 0.22);
  }
  .site-nav .language-switch button { color: rgba(255, 255, 255, 0.66); }
  .site-nav .language-switch button.is-active { color: var(--brand-aqua); }
}

/* Readable property facts and supporting copy, in both languages. */
.hero-facts { right: clamp(2rem, 5vw, 6rem); width: fit-content; max-width: calc(100% - 4rem); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2.5rem); }
.hero-facts div { grid-template-columns: 1fr; gap: 0.4rem; align-content: start; }
.hero-facts strong { color: #fff; font-size: clamp(1.85rem, 2.5vw, 2.35rem); font-weight: 600; line-height: 1.1; }
.hero-facts span { color: #fff; font-size: 0.9375rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.035em; }
.hero-intro { color: #fff; font-size: clamp(1.1rem, 1.35vw, 1.25rem); line-height: 1.7; }
.amenity-grid p, .section-heading > p, .highlight-grid span, .partner-types p, .discover-facts p, .platform-card p { font-size: 1.0625rem; line-height: 1.65; }
.highlight-grid span, .partner-types p, .discover-facts p, .rooms-copy > p, .room-name small, .partnership-form-intro > p:last-child { color: #fff; }
.amenity-grid h3, .highlight-grid strong, .partner-types strong, .discover-facts strong, .room-name strong { font-size: 1.125rem; line-height: 1.4; }
.room-name small, .local-grid article div > p:not(.nearby-time) { font-size: 1rem; line-height: 1.6; color: #fff; }
.form-field label, .form-note, .nearby-note, .photo span, .tour-filter, .platform-name, .platform-score small, .booking > small, .site-footer > p, .site-footer > div a, .site-footer > small { font-size: 0.9375rem; line-height: 1.5; }
.form-field input, .form-field select, .form-field textarea { font-size: 1rem; }
.site-footer > p, .site-footer > div a, .site-footer > small, .booking > small { color: #fff; }
@media (max-width: 760px) {
  .hero-facts { left: 1.25rem; right: 1.25rem; width: auto; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; }
  .hero-facts strong { font-size: 1.85rem; }
  .hero-facts span { font-size: 0.875rem; }
  .hero-intro { font-size: 1.0625rem; }
}
@media (max-width: 760px) {
  .hero-copy { padding-bottom: 13rem; }
}

/* Destination photography fills the day-trip introduction. */
.daytrip-heading { grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr); gap: 1rem 2.5rem; align-items: start; }
.daytrip-heading .guide-label { grid-column: 1; grid-row: 1; margin: 0; color: var(--ink); }
.daytrip-heading h4 { grid-column: 1; grid-row: 2; max-width: 12ch; }
.daytrip-heading .daytrip-intro { grid-column: 1; grid-row: 3; margin: 0; font-size: 1.0625rem; line-height: 1.65; }
.destination-mosaic { grid-column: 2; grid-row: 1 / 4; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-self: stretch; }
.destination-mosaic figure { position: relative; margin: 0; min-height: 170px; overflow: hidden; background: var(--ink); }
.destination-mosaic figure:first-child { grid-column: 1 / -1; min-height: 235px; }
.destination-mosaic img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.destination-mosaic figcaption { position: absolute; inset: auto 0 0; padding: 2rem 1rem 0.8rem; background: linear-gradient(transparent,rgba(0,0,0,0.78)); color: #fff; font-size: 1rem; font-weight: 700; }
.destination-credit { grid-column: 1 / -1; margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
.destination-credit a { text-decoration: underline; }
@media (max-width: 760px) {
 .daytrip-heading { grid-template-columns: minmax(0,1fr); }
 .daytrip-heading .guide-label, .daytrip-heading h4, .daytrip-heading .daytrip-intro, .destination-mosaic { grid-column: 1; grid-row: auto; }
 .daytrip-heading h4 { max-width: 18ch; }
 .destination-mosaic { margin-top: 0.5rem; }
 .destination-mosaic figure:first-child { min-height: 210px; }
 .destination-mosaic figure { min-height: 160px; }
}

.destination-mosaic { grid-template-columns: 1fr 1fr; }
.destination-mosaic figure, .destination-mosaic figure:first-child { grid-column: auto; min-height: 340px; }
@media(max-width:760px) { .destination-mosaic figure, .destination-mosaic figure:first-child { min-height: 240px; } }
@media(max-width:420px) { .destination-mosaic { grid-template-columns: 1fr; } .destination-mosaic figure, .destination-mosaic figure:first-child { min-height: 210px; } }

.destination-slideshow { grid-column: 2; grid-row: 1 / 4; min-width: 0; align-self: stretch; }
.destination-stage { position: relative; min-height: 360px; height: 100%; max-height: 440px; background: var(--ink); overflow: hidden; }
.destination-stage figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 900ms ease; }
.destination-stage figure.is-active { opacity: 1; z-index: 1; }
.destination-stage img { width: 100%; height: 100%; object-fit: cover; }
.destination-stage figcaption { position: absolute; inset: auto 0 0; padding: 3rem 1.25rem 3.75rem; color: #fff; background: linear-gradient(transparent,rgba(0,0,0,.8)); font-size: 1.2rem; font-weight: 700; }
.destination-controls { position: absolute; z-index: 2; bottom: .75rem; left: 1rem; display: flex; gap: .4rem; }
.destination-controls button { min-width: 44px; min-height: 44px; border: 1px solid #fff; border-radius: 50%; color: #fff; background: #263735; cursor: pointer; font-size: 1rem; }
.destination-controls button[aria-pressed="true"] { background: #fff; color: #263735; }
.destination-controls button:focus-visible { outline: 3px solid var(--brand-aqua); outline-offset: 3px; }
.destination-slideshow .destination-credit { margin-top: .6rem; }
@media(max-width:760px) { .destination-slideshow { grid-column: 1; grid-row: auto; } .destination-stage { height: 300px; min-height: 300px; } }
@media(prefers-reduced-motion:reduce) { .destination-stage figure { transition: none; } }
.destination-stage { height: 380px; }
@media(max-width:760px) { .destination-stage { height: 300px; } }

.destination-controls { align-items: center; }
.destination-controls [data-destination-count] { color: #fff; min-width: 4.4rem; text-align: center; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.destination-credit summary { cursor: pointer; font-size: .9rem; padding: .35rem 0; }
.destination-credit ol { padding-left: 1.4rem; max-height: 220px; overflow: auto; }
.destination-credit li { margin-bottom: .5rem; }

.destination-controls [data-destination-pause] { display: inline-flex; align-items: center; justify-content: center; }

.location-directions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Keep scores together, including after the scheduled review refresh. */
.hero-visual .rating-card { grid-template-columns: 4rem max-content minmax(6.8rem, auto); }
.rating-value { display: inline-flex; align-items: baseline; gap: .15rem; white-space: nowrap; }
.rating-value small { white-space: nowrap; }

/* On phones the beach gets its own unobstructed frame; reviews sit below it. */
@media (max-width: 760px) {
  .hero-visual {
    display: grid;
    grid-template-areas: "media" "reviews";
    grid-template-rows: clamp(17.5rem, 72vw, 30rem) auto;
    height: auto;
    min-height: 0;
  }
  .hero-visual::after { display: none; }
  .hero-visual > .hero-fallback,
  .hero-visual > .hero-video {
    grid-area: media;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
  }
  .hero-visual > .hero-video { position: relative; inset: auto; }
  .hero-visual > .hero-fallback { animation: none; transform: none; }
  .hero-visual .ratings-group {
    grid-area: reviews;
    position: relative;
    inset: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    padding: .8rem 1rem;
    background: var(--brand-green);
  }
  .hero-visual .rating-card {
    grid-template-columns: minmax(0, 1fr) max-content;
    align-content: start;
    gap: .4rem .3rem;
    min-width: 0;
    padding: .65rem .6rem;
    box-shadow: none;
    backdrop-filter: none;
  }
  .hero-visual .rating-platform { font-size: .75rem; letter-spacing: .025em; }
  .hero-visual .rating-value { font-size: 1.3rem; }
  .hero-visual .rating-value small { font-size: .75rem; }
  .hero-visual .rating-detail { grid-column: 1 / -1; }
  .hero-visual .rating-detail strong { display: none; }
  .hero-visual .rating-detail small { margin: 0; font-size: .8125rem; line-height: 1.4; }
}