/*
Theme Name: Kronkel
Theme URI: https://www.kronkel.co.za
Author: Lead Loud Marketing
Author URI: https://leadloud.co.za
Description: A custom 1:1 WordPress theme for the Kronkel Collection of self-catering stays in Paternoster. Converted from the approved Kronkel HTML design.
Version: 1.0.32
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary — Kronkel / Lead Loud
Text Domain: kronkel
Tags: custom, hospitality, accommodation
*/

/* ═══════════════════════════════════════════════════════
   KRONKEL — Design System
   ═══════════════════════════════════════════════════════ */

:root {
  --color-ink: #1a1a18;
  --color-ink-light: #4a4a46;
  --color-ink-muted: #8a8a84;
  --color-cream: #f7f5f0;
  --color-white: #ffffff;
  --color-sand: #e8e4dc;
  --color-terracotta: #c47a52;
  --color-terracotta-light: #d4956e;
  --color-sage: #7a9a8a;
  --color-sage-light: #a8c4b4;

  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-2xl: 10rem;

  --max-width: 1400px;
  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Bekkie sub-brand */
  --color-bekkie-teal: #588080;
  --color-bekkie-teal-light: #7a9a9a;
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-cream);
  line-height: 1.7;
  font-weight: 300;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ═══════════════ TYPOGRAPHY ═══════════════ */

.t-display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.t-display--xl { font-size: clamp(3rem, 7vw, 6rem); }
.t-display--lg { font-size: clamp(2.2rem, 5vw, 4rem); }
.t-display--md { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
.t-display--sm { font-size: clamp(1.4rem, 2.5vw, 2rem); }

.t-body { font-family: var(--font-body); font-weight: 300; }
.t-body--lg { font-size: 1.125rem; line-height: 1.8; }
.t-body--sm { font-size: 0.875rem; }
.t-body--xs { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; }

.t-spaced {
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.75rem;
}

/* ═══════════════ NAVIGATION ═══════════════ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background var(--transition), padding var(--transition);
}

.nav--scrolled {
  background: rgba(247, 245, 240, 0.95);
  backdrop-filter: blur(20px);
  padding: 1rem 2rem;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

.nav__logo {
  color: var(--color-white);
  transition: color var(--transition);
  position: relative;
  display: inline-block;
  line-height: 0;
}

.nav--scrolled .nav__logo { color: var(--color-ink); }

/* New logo PNGs: two stacked images, fade between them based on nav state. */
.nav__logo-img {
  height: 78px;
  width: auto;
  display: block;
  transition: opacity var(--transition), height var(--transition);
}
.nav__logo-img--dark {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.nav--scrolled .nav__logo-img--light { opacity: 0; }
.nav--scrolled .nav__logo-img--dark  { opacity: 1; }
.nav--scrolled .nav__logo-img        { height: 60px; }

.nav__links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  align-items: center;
}

.nav__link {
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--color-white);
  transition: opacity var(--transition);
  position: relative;
}

.nav--scrolled .nav__link { color: var(--color-ink); }

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width var(--transition);
}

.nav__link:hover::after { width: 100%; }

.nav__link--ext::after { display: none; }
/* Client feedback: all nav items should render at the same brightness
   (original design used opacity:0.6 to de-emphasise external links). */
.nav__link--ext { opacity: 1; }

/* Mobile menu */
.nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 28px;
  height: 20px;
  position: relative;
  z-index: 1001;
}

.nav__toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--color-white);
  position: absolute;
  left: 0;
  transition: var(--transition);
}

.nav--scrolled .nav__toggle span { background: var(--color-ink); }

.nav__toggle span:nth-child(1) { top: 0; }
.nav__toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav__toggle span:nth-child(3) { bottom: 0; }

.nav__toggle--open span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav__toggle--open span:nth-child(2) { opacity: 0; }
.nav__toggle--open span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* Mobile overlay */
.nav__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(247, 245, 240, 0.98);
  z-index: 999;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.nav__overlay--open { display: flex; }

.nav__overlay .nav__link {
  color: var(--color-ink);
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  text-align: center;
  max-width: 80vw;
}

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
}

/* ═══════════════ PAGES (show/hide) ═══════════════ */
/* Original HTML used .page { display: none } + .page--active { display: block }
   to swap between SPA views. WordPress adds class="page" to <body> for every
   Page post type, which collides with that rule and hides the entire site.
   In the WP build each page is its own URL, so the SPA toggle is removed. */

/* ═══════════════ HERO ═══════════════ */

.hero {
  position: relative;
  height: 90vh;
  min-height: 540px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8);
}

/* Homepage hero — anchor the photo to the bottom of the section so the
   foreground stays intact; any cover-crop comes off the top instead. */
#page-home .hero__img {
  object-position: center bottom;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.1) 0%,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.35) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--color-white);
  padding: 0 2rem var(--space-xl);
  max-width: 800px;
}

.hero__tagline {
  font-family: var(--font-display);
  font-weight: 300;
  /* Bumped per client feedback — original was clamp(1rem, 2vw, 1.3rem). */
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  letter-spacing: 0.08em;
  margin-top: 1.25rem;
  opacity: 0.95;
}

/* Hero CTA buttons (Book Now + Enquire) — centred, wrap on mobile. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.hero__logo-mark svg,
.hero__logo-mark img {
  /* New stacked logo (1.46:1) — sized so visual presence matches the
     original wide SVG without overwhelming the hero composition. */
  width: clamp(240px, 32vw, 360px);
  height: auto;
  margin-bottom: 0.5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-white);
  opacity: 0.6;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

.hero__scroll svg { width: 20px; height: 20px; }

/* ═══════════════ SECTIONS ═══════════════ */

.section {
  padding: var(--space-xl) 2rem;
}

.section--cream { background: var(--color-cream); }
.section--white { background: var(--color-white); }
.section--sand { background: var(--color-sand); }
.section--dark { background: var(--color-ink); color: var(--color-cream); }

.section__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section__label {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--color-terracotta);
  margin-bottom: 1.5rem;
}

/* Bigger label variant — used opt-in (e.g. Bekkie "The Stay") per client feedback. */
.section__label--lg {
  font-size: 1rem;
  letter-spacing: 0.25em;
  margin-bottom: 1.75rem;
}

/* ═══════════════ BRAND INTRO ═══════════════ */

.brand-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.brand-intro__text {
  max-width: 520px;
}

.brand-intro__text h2 {
  margin-bottom: 1.5rem;
}

.brand-intro__text p {
  color: var(--color-ink-light);
  margin-bottom: 1rem;
}

.brand-intro__img {
  aspect-ratio: 3/4;
  overflow: hidden;
}

.brand-intro__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.brand-intro__img:hover img { transform: scale(1.03); }

@media (max-width: 900px) {
  .brand-intro { grid-template-columns: 1fr; }
  .brand-intro__img { aspect-ratio: 16/10; }
}

/* ═══════════════ PROPERTY CARDS ═══════════════ */

.properties-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: var(--space-md);
}

.property-card {
  position: relative;
  display: block;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4/5;
}

.property-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.property-card:hover .property-card__img { transform: scale(1.04); }

.property-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.5) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem;
  color: var(--color-white);
}

.property-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.1;
  display: block;
  max-width: 22ch;
}

.property-card__sub {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-top: 0.3rem;
}

.property-card__arrow {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  opacity: 0;
  transform: translateX(-10px);
}

.property-card:hover .property-card__arrow {
  opacity: 1;
  transform: translateX(0);
}

.property-card__arrow svg {
  width: 16px;
  height: 16px;
  stroke: white;
  fill: none;
}

@media (max-width: 900px) {
  .properties-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .properties-grid { grid-template-columns: 1fr; }
  .property-card { aspect-ratio: 3/4; }
}

/* ═══════════════ LIFESTYLE STRIP ═══════════════ */

.lifestyle {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  min-height: 500px;
}

.lifestyle__img {
  overflow: hidden;
}

.lifestyle__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 500px;
}

.lifestyle__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-lg);
  background: var(--color-ink);
  color: var(--color-cream);
}

.lifestyle__text h2 {
  margin-bottom: 1.5rem;
}

.lifestyle__text p {
  color: var(--color-ink-muted);
  max-width: 400px;
}

@media (max-width: 900px) {
  .lifestyle { grid-template-columns: 1fr; }
  .lifestyle__img img { min-height: 300px; }
  .lifestyle__text { padding: var(--space-lg) 2rem; }
}

/* ═══════════════ CTA BANNER ═══════════════ */

.cta-banner {
  text-align: center;
  padding: var(--space-xl) 2rem;
  background: var(--color-white);
}

.cta-banner h2 { margin-bottom: 1rem; }
.cta-banner p {
  color: var(--color-ink-light);
  max-width: 500px;
  margin: 0 auto 2rem;
}

/* Two-button row (Book Now + Enquire) — centres, and wraps on narrow screens. */
.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ═══════════════ BUTTONS ═══════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2.5rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
  border: 1px solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

.btn:hover {
  background: var(--color-ink);
  color: var(--color-cream);
}

.btn--light {
  border-color: var(--color-cream);
  color: var(--color-cream);
}

.btn--light:hover {
  background: var(--color-cream);
  color: var(--color-ink);
}

/* Solid light button — primary CTA on dark hero imagery (cream fill, ink text). */
.btn--light-filled {
  background: var(--color-cream);
  border-color: var(--color-cream);
  color: var(--color-ink);
}

.btn--light-filled:hover {
  background: var(--color-terracotta);
  border-color: var(--color-terracotta);
  color: var(--color-cream);
}

.btn--filled {
  background: var(--color-ink);
  color: var(--color-cream);
}

.btn--filled:hover {
  background: var(--color-terracotta);
  border-color: var(--color-terracotta);
}

.btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  transition: transform var(--transition);
}

.btn:hover svg { transform: translateX(4px); }

/* ═══════════════ DIVIDER ═══════════════ */

.divider {
  width: 60px;
  height: 1px;
  background: var(--color-terracotta);
  margin: 2rem 0;
}

.divider--center { margin: 2rem auto; }

/* ═══════════════ FOOTER ═══════════════ */

.footer {
  background: var(--color-ink);
  color: var(--color-cream);
  padding: var(--space-lg) 2rem var(--space-md);
}

.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-lg);
}

.footer__brand svg,
.footer__brand-img {
  height: 72px;
  width: auto;
  margin-bottom: 1.5rem;
  display: block;
}

.footer__brand p {
  color: var(--color-ink-muted);
  font-size: 0.9rem;
  max-width: 320px;
}

.footer__col h4 {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 1.2rem;
  color: var(--color-ink-muted);
}

.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: 0.6rem; }

.footer__col a {
  font-size: 0.9rem;
  color: var(--color-sand);
  transition: color var(--transition);
}

.footer__col a:hover { color: var(--color-terracotta-light); }

.footer__bottom {
  max-width: var(--max-width);
  margin: var(--space-lg) auto 0;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--color-ink-muted);
}

@media (max-width: 768px) {
  .footer__inner { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .footer__bottom { flex-direction: column; gap: 1rem; text-align: center; }
}

@media (max-width: 480px) {
  .footer__inner { grid-template-columns: 1fr; text-align: center; }
  .footer__brand,
  .footer__col { display: flex; flex-direction: column; align-items: center; }
  .footer__brand svg,
  .footer__brand-img { margin-left: auto; margin-right: auto; }
  .footer__brand p { margin-left: auto; margin-right: auto; }
  .footer__col ul { padding: 0; }
}

/* ═══════════════ PROPERTY PAGE ═══════════════ */

.prop-hero {
  position: relative;
  height: 80vh;
  min-height: 500px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.prop-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.75);
}

.prop-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.4) 100%);
}

.prop-hero__content {
  position: relative;
  z-index: 2;
  color: var(--color-white);
  padding: 0 2rem var(--space-lg);
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}

.prop-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 1.5rem;
  cursor: pointer;
  transition: color var(--transition);
}

.prop-hero__back:hover { color: white; }

.prop-hero__back svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

/* Book Now CTA in the Bekkie hero. */
.prop-hero__book { margin-top: 1.75rem; }

/* Hero slider — Bekkie page */
.prop-hero--slider .hero-slider { position: absolute; inset: 0; }

.hero-slide {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero-slide.is-active { opacity: 1; }

.hero-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.4);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  color: white;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: var(--transition);
}

.hero-slider__btn:hover {
  background: rgba(0,0,0,0.45);
  border-color: white;
}

.hero-slider__btn--prev { left: 1.5rem; }
.hero-slider__btn--next { right: 1.5rem; }

.hero-slider__btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

.hero-slider__dots {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.55rem;
  z-index: 5;
}

.hero-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform var(--transition), background var(--transition);
}

.hero-slider__dot:hover { background: rgba(255,255,255,0.75); }

.hero-slider__dot.is-active {
  background: white;
  transform: scale(1.3);
}

@media (max-width: 600px) {
  .hero-slider__btn { width: 40px; height: 40px; }
  .hero-slider__btn--prev { left: 0.75rem; }
  .hero-slider__btn--next { right: 0.75rem; }
  .hero-slider__dots { bottom: 1rem; }
}

/* Bekkie sub-brand accents */
.bekkie-mark {
  display: block;
  width: 220px;
  max-width: 70vw;
  margin: 0 auto 1.25rem;
  height: auto;
}

#page-bekkie .section__label {
  color: var(--color-bekkie-teal);
}

#page-bekkie .divider,
#page-bekkie .divider--center {
  background: var(--color-bekkie-teal);
  opacity: 0.8;
}

#page-bekkie .experience-quote__mark {
  color: var(--color-bekkie-teal);
}

#page-bekkie .experience-section {
  background: linear-gradient(180deg, var(--color-cream) 0%, #e6ecec 50%, var(--color-cream) 100%);
}

#page-bekkie .editorial-strip__label {
  color: rgba(255,255,255,0.92);
}

/* Sonsak coming-soon hero variant */
.prop-hero--sonsak {
  align-items: center;
  height: 75vh;
  min-height: 460px;
}

.prop-hero__back--floating {
  position: absolute;
  top: 6rem;
  left: 2rem;
  z-index: 3;
  margin-bottom: 0;
}

.prop-hero__content--centered {
  padding: 0 2rem;
  text-align: center;
  display: flex;
  justify-content: center;
}

.prop-hero__content--centered .sonsak-mark {
  width: 320px;
  max-width: 75vw;
}

@media (max-width: 600px) {
  .prop-hero__back--floating { top: 5rem; left: 1.25rem; }
  .prop-hero__content--centered .sonsak-mark { width: 240px; }
}

/* Property overview */
.prop-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.prop-overview__text p {
  color: var(--color-ink-light);
  margin-bottom: 1rem;
}

.prop-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

.prop-highlight {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.prop-highlight__icon {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-sand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.prop-highlight__icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-terracotta);
  fill: none;
}

.prop-highlight__label {
  font-size: 0.85rem;
  color: var(--color-ink-light);
}

.prop-highlight__value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
}

@media (max-width: 768px) {
  .prop-overview { grid-template-columns: 1fr; }
}

/* Gallery grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.gallery-grid__item {
  overflow: hidden;
  aspect-ratio: 4/3;
}

.gallery-grid__item--tall { 
  grid-row: span 2;
  aspect-ratio: auto;
}

.gallery-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.gallery-grid__item:hover img { transform: scale(1.04); }

@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
}

/* Amenities */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.amenity {
  padding: 1.5rem;
  border: 1px solid var(--color-sand);
  text-align: center;
}

.amenity__icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--color-terracotta);
  fill: none;
  margin-bottom: 0.75rem;
}

.amenity__name {
  font-size: 0.85rem;
  color: var(--color-ink-light);
}

/* Experience quote */
.experience-quote {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.experience-quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-ink);
}

/* Centered overview (new for Bekkie) */
.prop-overview--centered {
  display: block;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.prop-overview--centered p {
  text-align: left;
}

@media (min-width: 769px) {
  .prop-overview--centered p {
    column-gap: 2rem;
  }
}

/* Editorial full-bleed image strip */
.editorial-strip {
  position: relative;
  /* Client confirmed a "thin" banner — keeping the original 60vh / 380px. */
  height: 60vh;
  min-height: 380px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.editorial-strip__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  /* Top-anchored so we see the sky/ocean/horizon instead of the rocky foreground
     getting cropped in. Any cover-crop comes off the bottom of the image. */
  background-position: center top;
  transform: scale(1.06);
  transition: transform 1.4s ease-out;
}

.editorial-strip:hover .editorial-strip__bg { transform: scale(1.0); }

.editorial-strip__overlay {
  position: absolute;
  inset: 0;
  /* Dark navy tint for text legibility against the bright sea/sky.
     Heavier in the centre band where the heading sits. */
  background:
    linear-gradient(180deg,
      rgba(12, 28, 52, 0.30) 0%,
      rgba(12, 28, 52, 0.55) 50%,
      rgba(12, 28, 52, 0.30) 100%);
}

.editorial-strip__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--color-white);
  padding: 0 2rem;
}

.editorial-strip__label {
  display: block;
  color: rgba(255,255,255,0.85);
  margin-bottom: 1rem;
}

.editorial-strip__motto {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.3;
  color: var(--color-white);
}

/* Book Now CTA under the editorial-strip motto. */
.editorial-strip__book { margin-top: 1.75rem; }

/* Gallery — editorial layout */
.gallery-section { padding: var(--space-lg) 0.5rem var(--space-xl); }
.gallery-intro { text-align: center; margin-bottom: var(--space-md); }

.gallery-grid--editorial {
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(180px, 26vh);
  gap: 0.5rem;
}

.gallery-grid--editorial .gallery-grid__item { aspect-ratio: auto; }
.gallery-grid--editorial .gallery-grid__item:nth-child(1) { grid-column: span 4; grid-row: span 2; }
.gallery-grid--editorial .gallery-grid__item:nth-child(2) { grid-column: span 2; }
.gallery-grid--editorial .gallery-grid__item:nth-child(3) { grid-column: span 2; }
.gallery-grid--editorial .gallery-grid__item:nth-child(4) { grid-column: span 3; }
.gallery-grid--editorial .gallery-grid__item:nth-child(5) { grid-column: span 3; }

@media (max-width: 800px) {
  .gallery-grid--editorial { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(180px, 30vh); }
  .gallery-grid--editorial .gallery-grid__item:nth-child(n) { grid-column: auto; grid-row: auto; }
  .gallery-grid--editorial .gallery-grid__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
}

/* Experience section: soft sand band with quotation mark */
.experience-section {
  background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-sand) 50%, var(--color-cream) 100%);
  position: relative;
}

.experience-quote {
  position: relative;
  padding: 2rem 0;
}

.experience-quote__mark {
  display: block;
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 0.6;
  color: var(--color-terracotta);
  opacity: 0.4;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

/* Booking CTA */
.booking-cta {
  text-align: center;
  padding: var(--space-xl) 2rem;
  position: relative;
  overflow: hidden;
}

.booking-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.3);
}

.booking-cta__content {
  position: relative;
  z-index: 2;
  color: var(--color-white);
}

.booking-cta__content h2 { margin-bottom: 1rem; }
.booking-cta__content p {
  max-width: 480px;
  margin: 0 auto 2rem;
  opacity: 0.8;
}

/* ═══════════════ COOKIE CONSENT BANNER ═══════════════ */

.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1600;            /* above the WhatsApp FAB */
  background: var(--color-ink);
  color: var(--color-cream);
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.12);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  max-width: 920px;
  margin: 0 auto;
}

.cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cookie-banner__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.1rem 1.5rem;
}

.cookie-banner__copy {
  flex: 1;
  color: rgba(247, 245, 240, 0.85);
}

.cookie-banner__copy strong {
  color: var(--color-cream);
  font-weight: 500;
  margin-right: 0.35rem;
}

.cookie-banner__link {
  color: var(--color-terracotta-light);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
  margin-left: 0.2rem;
}

.cookie-banner__link:hover { border-color: var(--color-terracotta-light); }

.cookie-banner__actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

.cookie-banner__btn {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  padding: 0.7rem 1.2rem;
  border: 1px solid rgba(247, 245, 240, 0.35);
  background: transparent;
  color: var(--color-cream);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.cookie-banner__btn--ghost:hover {
  border-color: var(--color-cream);
  background: rgba(247, 245, 240, 0.08);
}

.cookie-banner__btn--filled {
  background: var(--color-terracotta);
  border-color: var(--color-terracotta);
}

.cookie-banner__btn--filled:hover {
  background: var(--color-terracotta-light);
  border-color: var(--color-terracotta-light);
}

@media (max-width: 700px) {
  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1rem 1.1rem;
  }
  .cookie-banner__actions { justify-content: stretch; }
  .cookie-banner__btn { flex: 1; padding: 0.75rem 0.8rem; }
}

/* ═══════════════ WHATSAPP FLOATING BUTTON ═══════════════ */

.whatsapp-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;       /* official WhatsApp green */
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.10);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  background: #1ebe5a;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22), 0 3px 6px rgba(0,0,0,0.12);
  outline: none;
}

.whatsapp-fab svg {
  width: 32px;
  height: 32px;
  display: block;
}

@media (max-width: 600px) {
  .whatsapp-fab {
    right: 1rem;
    bottom: 1rem;
    width: 54px;
    height: 54px;
  }
  .whatsapp-fab svg { width: 28px; height: 28px; }
}

/* ═══════════════ ANIMATIONS ═══════════════ */

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════ SONSAK PLACEHOLDER ═══════════════ */

.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 2rem;
}

.coming-soon__icon {
  width: 120px;
  margin-bottom: 2rem;
  opacity: 0.6;
}

.coming-soon p {
  color: var(--color-ink-muted);
  max-width: 400px;
  margin-bottom: 2rem;
}

/* ═══════════════ CONTACT ═══════════════ */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.contact-info h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.contact-info p {
  color: var(--color-ink-light);
  margin-bottom: 2rem;
}

.contact-info a {
  color: var(--color-terracotta);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}

.contact-info a:hover { border-color: var(--color-terracotta); }

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--color-sand);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 300;
  margin-bottom: 1rem;
  transition: border-color var(--transition);
  outline: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--color-terracotta);
}

.contact-form textarea { min-height: 150px; resize: vertical; }

@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; }
}