/* ============================================
   Southern Stars Caravan Park - SilverStripe Theme
   ============================================ */

/* --- CSS Custom Properties (from index.css) --- */
:root {
    --background: 210 5% 98%;
    --foreground: 210 6% 12%;
    --border: 210 6% 88%;
    --card: 210 5% 96%;
    --card-foreground: 210 6% 15%;
    --card-border: 210 5% 91%;
    --primary: 200 85% 42%;
    --primary-foreground: 200 85% 98%;
    --secondary: 210 8% 86%;
    --secondary-foreground: 210 8% 22%;
    --muted: 210 10% 90%;
    --muted-foreground: 210 10% 35%;
    --accent: 210 12% 88%;
    --accent-foreground: 210 12% 25%;
    --destructive: 0 72% 48%;
    --destructive-foreground: 0 72% 98%;
    --input: 210 12% 70%;
    --ring: 200 85% 42%;
    --primary-hover: 200 85% 38%;
    --primary-dark: 200 85% 35%;
    --radius: 0.5rem;

    --shadow-sm: 0px 2px 0px 0px hsl(210 10% 10% / 0.04), 0px 1px 2px -1px hsl(210 10% 10% / 0.08);
    --shadow: 0px 2px 0px 0px hsl(210 10% 10% / 0.05), 0px 1px 2px -1px hsl(210 10% 10% / 0.10);
    --shadow-md: 0px 2px 0px 0px hsl(210 10% 10% / 0.04), 0px 2px 4px -1px hsl(210 10% 10% / 0.12);
    --shadow-lg: 0px 2px 0px 0px hsl(210 10% 10% / 0.03), 0px 4px 6px -1px hsl(210 10% 10% / 0.15);
    --shadow-xl: 0px 2px 0px 0px hsl(210 10% 10% / 0.02), 0px 8px 10px -1px hsl(210 10% 10% / 0.18);

    --font-sans: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --green-accent: #4a8c3f;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { -webkit-appearance: none; appearance: none; background: transparent; border: none; font: inherit; color: inherit; cursor: pointer; }
html { scroll-behavior: smooth; }

/* Honeypot field — hidden from humans, bots fill it in */
.newsletter-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

/* reCAPTCHA v3 badge — hide if using invisible mode */
.grecaptcha-badge { visibility: hidden; }

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.7;
    color: hsl(var(--foreground));
    background: hsl(var(--background));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 600;
    line-height: 1.2;
    color: hsl(var(--foreground));
    letter-spacing: -0.01em;
}

p, li, td, th, blockquote, address {
    font-family: var(--font-body);
    line-height: 1.625;
}

a { color: hsl(var(--primary)); text-decoration: none; transition: color 0.2s; }
a:hover { color: hsl(var(--primary-dark)); }
img { max-width: 100%; height: auto; display: block; }
address { font-style: normal; }

/* --- Container (max-w-7xl = 1280px) --- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .container { padding: 0 2rem; } }
.container--narrow { max-width: 896px; }
.container--tight { max-width: 768px; }

/* --- Buttons (matching shadcn/ui) --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    border-radius: calc(var(--radius) - 2px);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    min-height: 2.25rem;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    position: relative;
}
.btn--primary {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-color: hsl(var(--primary));
}
.btn--primary:hover { background: hsl(var(--primary-hover)); color: hsl(var(--primary-foreground)); }

.btn--outline {
    background: transparent;
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
    box-shadow: 0px 2px 0px 0px hsl(210 10% 10% / 0.05);
}
.btn--outline:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

.btn--ghost { background: transparent; border-color: transparent; color: hsl(var(--foreground)); }
.btn--ghost:hover { background: hsl(var(--accent)); }

.btn--large { min-height: 2.5rem; padding: 0.5rem 2rem; font-size: 1rem; }
.btn--full { width: 100%; }
.btn--cta {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.btn--hero {
    backdrop-filter: blur(12px);
    background: hsl(var(--primary) / 0.9);
    color: hsl(var(--primary-foreground));
    padding: 1.5rem 2rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    box-shadow: var(--shadow-xl);
    min-width: 200px;
}
.btn--hero:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

.btn--white-outline {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(4px);
    border-color: rgba(255,255,255,0.3);
    color: #fff;
}
.btn--white-outline:hover { background: rgba(255,255,255,0.2); color: #fff; }

.btn--round { border-radius: 9999px; padding: 0.75rem 2.5rem; }

/* ============================================
   NAVIGATION (fixed, transparent-to-solid)
   ============================================ */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    transition: all 0.3s;
    background: transparent;
}
.site-header.scrolled {
    background: hsl(var(--background) / 0.97);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 hsl(var(--border));
}

.header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5rem;
}
@media (min-width: 768px) {
    .header-inner { padding: 0 2rem; height: 5rem; }
}

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    background: #fff;
    border-radius: 0.625rem;
    padding: 0.5rem 1rem;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s, transform 0.2s;
}
.site-logo:hover {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 6px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}
.site-logo__image { height: 2.5rem; width: auto; }
@media (min-width: 768px) { .site-logo__image { height: 3rem; } }
.site-logo__text {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    transition: color 0.3s;
}
.site-logo__text { color: hsl(var(--foreground)); }

/* Desktop Nav */
.main-nav--desktop { display: none; }
@media (min-width: 1024px) {
    .main-nav--desktop { display: flex; align-items: center; }
}

.main-nav__list { display: flex; list-style: none; align-items: center; gap: 0.25rem; }

.main-nav__item { position: relative; display: flex; align-items: center; }

.main-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #fff;
    transition: color 0.2s, background 0.2s;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    white-space: nowrap;
    letter-spacing: 0.01em;
    text-decoration: none;
}
.has-submenu .main-nav__link {
    padding-right: 0;
}
.main-nav__link:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.1); }

/* Dropdown chevron toggle - blends seamlessly with the nav link */
.main-nav__toggle {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.25rem;
    margin: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    color: #fff;
    opacity: 0.6;
    transition: opacity 0.2s;
    font-size: 0;
    line-height: 1;
}
.main-nav__toggle:hover,
.main-nav__toggle:focus { opacity: 1; outline: none; }
.scrolled .main-nav__toggle { color: hsl(var(--muted-foreground)); }
.scrolled .main-nav__toggle:hover { color: hsl(var(--foreground)); opacity: 1; }

.scrolled .main-nav__link {
    font-weight: 500;
    color: hsl(var(--muted-foreground));
}
.scrolled .main-nav__link:hover {
    color: hsl(var(--foreground));
    background: hsl(var(--muted));
}

.main-nav__link--active { color: #fff; }
.scrolled .main-nav__link--active { color: hsl(var(--primary)); }

.main-nav__chevron {
    width: 0.75rem; height: 0.75rem;
    transition: transform 0.2s;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.6;
}

/* Dropdown */
.submenu {
    position: absolute;
    top: calc(100% + 0.25rem); left: 0;
    min-width: 180px;
    background: hsl(var(--background));
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid hsl(var(--border));
    padding: 0.375rem;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
}
.main-nav__item:hover .submenu,
.main-nav__item.is-open .submenu {
    opacity: 1;
    visibility: visible;
}
.submenu--right { left: auto; right: 0; min-width: 180px; }

.submenu__item {}
.submenu__link {
    display: block;
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    transition: color 0.15s, background 0.15s;
    border-radius: calc(var(--radius) - 2px);
}
.submenu__link:hover {
    color: hsl(var(--foreground));
    background: hsl(var(--muted));
}

/* Header CTA */
.header-cta {
    display: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    border-radius: 9999px;
    padding: 0.4rem 1.25rem;
    min-height: auto;
    font-weight: 600;
}
@media (min-width: 1024px) { .header-cta { display: inline-flex; } }

/* Header Social Icons */
.header-social { display: none; align-items: center; gap: 0.25rem; }
@media (min-width: 1024px) { .header-social { display: flex; } }
.header-social__icon {
    display: flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem;
    color: #fff;
    opacity: 0.7;
    transition: opacity 0.2s;
    border-radius: 50%;
}
.header-social__icon:hover { opacity: 1; color: #fff; }
.scrolled .header-social__icon { color: hsl(var(--muted-foreground)); opacity: 0.8; }
.scrolled .header-social__icon:hover { color: hsl(var(--primary)); opacity: 1; }

/* Mobile Toggle */
.mobile-toggle {
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; padding: 0.5rem;
    color: #fff; transition: color 0.3s;
}
.scrolled .mobile-toggle { color: hsl(var(--foreground)); }
@media (min-width: 1024px) { .mobile-toggle { display: none; } }

.mobile-toggle svg { width: 1.5rem; height: 1.5rem; }

/* Mobile Nav */
.mobile-nav {
    display: none;
    background: hsl(var(--background) / 0.98);
    backdrop-filter: blur(12px);
    border-top: 1px solid hsl(var(--border));
}
.mobile-nav.is-open { display: block; }
@media (min-width: 1024px) { .mobile-nav { display: none !important; } }

.mobile-nav__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.mobile-nav__list { list-style: none; display: flex; flex-direction: column; gap: 0; }
.mobile-nav__link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 1rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    padding: 0.5rem 0;
    transition: color 0.2s;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-sans);
    width: 100%;
    text-align: left;
}
.mobile-nav__link:hover { color: hsl(var(--primary)); }

.mobile-nav__submenu {
    list-style: none;
    padding-left: 1rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.mobile-nav__sublink {
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    padding: 0.25rem 0;
    transition: color 0.2s;
}
.mobile-nav__sublink:hover { color: hsl(var(--primary)); }

/* ============================================
   HERO (85vh, gradient overlays)
   ============================================ */
.hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #111;
}
.hero__media {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}
.hero__bg {
    width: 100%; height: 100%;
    object-fit: cover;
}
video.hero__bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.5));
}
.hero__content {
    position: relative;
    z-index: 10;
    max-width: 896px;
    margin: 0 auto;
    padding: 5rem 1rem;
    text-align: center;
    color: #fff;
}
.hero__title {
    font-size: 3rem;
    font-weight: 300;
    color: #fff;
    letter-spacing: -0.025em;
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .hero__title { font-size: 3.75rem; } }
@media (min-width: 1024px) { .hero__title { font-size: 4.5rem; } }

.hero__subtitle {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.625;
    color: rgba(255,255,255,0.95);
    margin-bottom: 2rem;
    max-width: 672px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 768px) { .hero__subtitle { font-size: 1.25rem; } }

/* Hero Image Carousel */
.hero__carousel {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
}
.hero__carousel-track {
    display: flex;
    width: 100%; height: 100%;
    transition: transform 1s ease;
}
.hero__carousel-slide {
    min-width: 100%; height: 100%;
    position: relative;
}
.hero__carousel-slide img.hero__bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

/* Hero inline booking form (date picker CTA mode) */
.hero__booking-form {
    margin: 2rem auto 0;
    max-width: 960px;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 1rem;
    box-shadow: var(--shadow-xl);
}
.hero__booking-heading {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 1rem;
    text-align: center;
}
.hero__booking-fields {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
    align-items: end;
}
@media (min-width: 768px) {
    .hero__booking-fields {
        grid-template-columns: 1fr 1fr 1fr auto;
    }
}
.hero__booking-field {
    display: flex;
    flex-direction: column;
    text-align: left;
}
.hero__booking-label {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}
.hero__booking-input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.92);
    color: #111;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.2;
    min-height: 2.75rem;
}
.hero__booking-input:focus {
    outline: none;
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.25);
}
.hero__booking-submit {
    min-height: 2.75rem;
    white-space: nowrap;
}
@media (max-width: 767px) {
    .hero__booking-submit { width: 100%; }
}

/* Interior page hero (primary bg fallback) */
.listing-hero {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: hsl(var(--primary));
    text-align: center;
}
.listing-hero .container {
    position: relative;
    z-index: 2;
    padding-top: 6rem;
    padding-bottom: 3rem;
}
.listing-hero__title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
@media (min-width: 768px) { .listing-hero__title { font-size: 3rem; } }
@media (min-width: 1024px) { .listing-hero__title { font-size: 3.75rem; } }

.listing-hero__subtitle {
    font-family: var(--font-body);
    color: rgba(255,255,255,0.9);
    font-size: 1.125rem;
    margin-top: 1rem;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Interior hero with background image (85vh, matches React pages) */
.interior-hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.interior-hero__media {
    position: absolute; inset: 0;
}
.interior-hero__bg {
    width: 100%; height: 100%; object-fit: cover;
}
.interior-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.5));
}
.interior-hero__overlay--up {
    background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.3) 50%, transparent);
}
.interior-hero__content {
    position: relative; z-index: 10;
    text-align: center; padding: 5rem 1rem;
}
.interior-hero__title {
    font-size: 2.25rem; font-weight: 700; color: #fff;
    text-transform: uppercase; letter-spacing: -0.025em;
}
.interior-hero__title--light { font-weight: 300; }
@media (min-width: 768px) { .interior-hero__title { font-size: 3rem; } }
@media (min-width: 1024px) { .interior-hero__title { font-size: 3.75rem; } }

.interior-hero__subtitle {
    font-family: var(--font-body);
    color: rgba(255,255,255,0.95);
    font-size: 1.125rem;
    margin-top: 1.5rem;
    max-width: 672px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.625;
}
@media (min-width: 768px) { .interior-hero__subtitle { font-size: 1.25rem; } }

.interior-hero__bg--fallback {
    width: 100%; height: 100%;
    background: hsl(var(--primary));
}

/* Detail page hero */
.detail-hero, .accom-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #222;
}
.detail-hero__bg, .accom-hero__bg {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.detail-hero__overlay, .accom-hero__overlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.6));
    z-index: 1;
}
.detail-hero__content, .accom-hero__content {
    position: relative; z-index: 2;
    text-align: center; color: #fff;
    padding: 5rem 1rem;
}
.detail-hero__title, .accom-hero__title {
    font-size: 2.25rem; font-weight: 700; color: #fff;
    text-transform: uppercase;
}
@media (min-width: 768px) { .detail-hero__title, .accom-hero__title { font-size: 3rem; } }
@media (min-width: 1024px) { .detail-hero__title, .accom-hero__title { font-size: 3.75rem; } }

.detail-hero__subtitle, .accom-hero__subtitle {
    font-family: var(--font-body);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.8);
    margin-bottom: 0.5rem;
}

/* ============================================
   SECTIONS
   ============================================ */
.section { padding: 4rem 0; }
@media (min-width: 768px) { .section { padding: 6rem 0; } }

.section__title {
    font-size: 1.875rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .section__title { font-size: 2.25rem; margin-bottom: 2rem; } }
@media (min-width: 1024px) { .section__title { font-size: 3rem; } }

.section__subtitle {
    font-family: var(--font-body);
    color: var(--green-accent);
    font-size: 1.125rem;
    text-align: center;
    margin-top: -1rem;
    margin-bottom: 2rem;
}
@media (min-width: 768px) { .section__subtitle { font-size: 1.25rem; } }

.section__intro {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.625;
    color: hsl(var(--muted-foreground));
    text-align: center;
    max-width: 896px;
    margin: 0 auto 2rem;
}

.section--muted { background: hsl(var(--muted) / 0.3); }
.section--card { background: hsl(var(--card)); border-top: 1px solid hsl(var(--border)); }

/* CTA Band on primary bg */
.section--cta {
    background: hsl(var(--primary));
    padding: 3rem 0;
    text-align: center;
}
@media (min-width: 768px) { .section--cta { padding: 4rem 0; } }

.section--cta .section__title,
.section--cta h2 { color: hsl(var(--primary-foreground)); }
.section--cta p { color: hsl(var(--primary-foreground)); font-family: var(--font-body); margin-bottom: 1.5rem; }

/* ============================================
   PAGE CONTENT (offset for fixed header)
   ============================================ */
.page-content {
    padding: 3rem 0 4rem;
}
.page-content h1.page-title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-top: 5rem;
}

/* ============================================
   WELCOME SECTION (matches WelcomeSection.tsx)
   py-16 md:py-24 bg-background
   ============================================ */
.section--welcome { padding: 4rem 0; background: hsl(var(--background)); }
@media (min-width: 768px) { .section--welcome { padding: 6rem 0; } }

.welcome-wrapper { max-width: 896px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .welcome-wrapper { padding: 0 2rem; } }

.welcome-header { text-align: center; margin-bottom: 2.5rem; }
.welcome-header__title {
    font-size: 1.5rem; font-weight: 600;
    color: hsl(var(--foreground));
}
@media (min-width: 768px) { .welcome-header__title { font-size: 1.875rem; } }
@media (min-width: 1024px) { .welcome-header__title { font-size: 2.25rem; } }

.welcome-header__subtitle {
    font-size: 1.125rem;
    color: var(--green-accent);
    margin-top: 0.5rem;
}
@media (min-width: 768px) { .welcome-header__subtitle { font-size: 1.25rem; } }

.welcome-body p {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.625;
    color: hsl(var(--foreground));
    margin-bottom: 1.5rem;
}
/* Respect TinyMCE alignment classes */
.welcome-body [style*="text-align"] { text-align: inherit; }
.welcome-body .text-center, .welcome-body p[style*="center"] { text-align: center; }
.welcome-body .text-right, .welcome-body p[style*="right"] { text-align: right; }
@media (min-width: 768px) { .welcome-body p { font-size: 1.125rem; } }

.welcome-body h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: hsl(var(--primary));
    margin-bottom: 0.5rem;
    margin-top: 1.5rem;
}
@media (min-width: 768px) { .welcome-body h3 { font-size: 1.25rem; } }

.welcome-body a {
    font-weight: 700;
    color: hsl(var(--primary));
    text-decoration: underline;
}
.welcome-body a:hover { opacity: 0.8; }

.welcome-footer { text-align: center; margin-top: 3rem; }
.welcome-footer__closing {
    font-size: 1.5rem;
    font-weight: 300;
    color: hsl(var(--muted-foreground));
    margin-bottom: 2rem;
}
@media (min-width: 768px) { .welcome-footer__closing { font-size: 1.875rem; } }
@media (min-width: 1024px) { .welcome-footer__closing { font-size: 2.25rem; } }

/* ============================================
   STAY / ACCOMMODATION SECTION (AccommodationSection.tsx)
   relative min-h-[60vh] with hero image overlay
   ============================================ */
.stay-section {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.stay-section__media { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.stay-section__bg { width: 100%; height: 100%; object-fit: cover; }
.stay-section__overlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
}
.stay-section__content {
    position: relative; z-index: 10;
    max-width: 896px; margin: 0 auto;
    padding: 5rem 1rem;
    text-align: center;
}
@media (min-width: 768px) { .stay-section__content { padding: 5rem 2rem; } }

.stay-section__title {
    font-size: 2.25rem; font-weight: 600; color: #fff;
}
@media (min-width: 768px) { .stay-section__title { font-size: 3rem; } }
@media (min-width: 1024px) { .stay-section__title { font-size: 3.75rem; } }

.stay-section__text {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.625;
    color: rgba(255,255,255,0.95);
    max-width: 768px;
    margin: 1.5rem auto 0;
}
@media (min-width: 768px) { .stay-section__text { font-size: 1.25rem; } }

.stay-section__cta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
}
@media (min-width: 640px) { .stay-section__cta { flex-direction: row; } }

/* ============================================
   KEY OFFERINGS (KeyOfferings.tsx)
   py-20 md:py-32, 2-col cards with images
   ============================================ */
.section--offerings-large { padding: 5rem 0; background: hsl(var(--background)); }
@media (min-width: 768px) { .section--offerings-large { padding: 8rem 0; } }

.section--offerings-large .offerings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) {
    .section--offerings-large .offerings-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

a.offering-card-large, .offering-card-large {
    display: block;
    text-decoration: none;
    color: inherit;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--card-border));
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s;
    cursor: pointer;
}
a.attraction-card-img { text-decoration: none; color: inherit; cursor: pointer; }
a.attraction-card-img:hover { opacity: 0.9; }
.offering-card-large:hover { box-shadow: var(--shadow-md); }

.offering-card-large__image { aspect-ratio: 4/3; overflow: hidden; }
.offering-card-large__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.offering-card-large:hover .offering-card-large__image img { transform: scale(1.05); }

.offering-card-large__body { padding: 2rem; }
@media (min-width: 768px) { .offering-card-large__body { padding: 2.5rem; } }

.offering-card-large__title {
    font-size: 1.875rem; font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 1.25rem;
}
@media (min-width: 768px) { .offering-card-large__title { font-size: 2.25rem; } }

.offering-card-large__desc {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.625;
    color: hsl(var(--muted-foreground));
    margin-bottom: 1.25rem;
}
@media (min-width: 768px) { .offering-card-large__desc { font-size: 1.25rem; } }

.offering-card-large__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: hsl(var(--primary));
}
.offering-card-large__link:hover { text-decoration: underline; }

/* ============================================
   NEARBY ATTRACTIONS (WhatsOn.tsx homepage)
   py-16 md:py-24 bg-muted/30, 3-col cards with images
   ============================================ */
.section--attractions { padding: 4rem 0; background: hsl(var(--muted) / 0.3); }
@media (min-width: 768px) { .section--attractions { padding: 6rem 0; } }

.section--attractions .section__title { margin-bottom: 3rem; }
@media (min-width: 768px) { .section--attractions .section__title { margin-bottom: 4rem; } }

.attractions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) { .attractions-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

.attraction-card-img {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--card-border));
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s;
    cursor: pointer;
}
.attraction-card-img:hover { box-shadow: var(--shadow-md); }

.attraction-card-img__image { aspect-ratio: 16/9; overflow: hidden; }
.attraction-card-img__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.attraction-card-img:hover .attraction-card-img__image img { transform: scale(1.05); }

.attraction-card-img__body { padding: 1rem; }
.attraction-card-img__body h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.attraction-card-img__body p {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.625;
    color: hsl(var(--muted-foreground));
}

/* ============================================
   PROMO SECTION (PromoSection.tsx)
   py-20 md:py-32 bg-card, 2/5 + 3/5 grid
   ============================================ */
.section--promo { padding: 5rem 0; background: hsl(var(--card)); }
@media (min-width: 768px) { .section--promo { padding: 8rem 0; } }

.promo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .promo-grid { grid-template-columns: 2fr 3fr; gap: 3rem; }
}

.promo-icon { display: flex; justify-content: center; }
.promo-icon__circle {
    width: 12rem; height: 12rem;
    background: hsl(var(--primary) / 0.1);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 768px) { .promo-icon__circle { width: 16rem; height: 16rem; } }
.promo-icon__svg {
    width: 6rem; height: 6rem;
    color: hsl(var(--primary));
}
@media (min-width: 768px) { .promo-icon__svg { width: 8rem; height: 8rem; } }

.promo-content {}
.promo-content__title {
    font-size: 1.875rem; font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .promo-content__title { font-size: 2.25rem; } }

.promo-content__text p {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.625;
    color: hsl(var(--foreground));
    margin-bottom: 1rem;
}
@media (min-width: 768px) { .promo-content__text p { font-size: 1.125rem; } }

/* ============================================
   NEWSLETTER (Newsletter.tsx)
   py-16 md:py-24 bg-background, centered form
   ============================================ */
.section--newsletter { padding: 4rem 0; background: hsl(var(--primary-dark)); color: #fff; }
@media (min-width: 768px) { .section--newsletter { padding: 6rem 0; } }

.newsletter-wrapper { max-width: 672px; margin: 0 auto; padding: 0 1rem; text-align: center; }
@media (min-width: 768px) { .newsletter-wrapper { padding: 0 2rem; } }

.newsletter__title {
    font-size: 1.875rem; font-weight: 600;
    margin-bottom: 2rem;
    color: #fff;
}

.newsletter__fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 768px) { .newsletter__fields { flex-direction: row; } }

.newsletter__input {
    flex: 1;
    padding: 0.625rem 0.75rem;
    border: 1px solid hsl(var(--input));
    border-radius: calc(var(--radius) - 2px);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    transition: border-color 0.2s, box-shadow 0.2s;
}
.newsletter__input:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}
.newsletter__fields .btn {
    width: 100%;
}
@media (min-width: 768px) { .newsletter__fields .btn { width: auto; } }

/* ============================================
   FEATURES GRID (homepage)
   ============================================ */
.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) { .features-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media (min-width: 1024px) { .features-grid { grid-template-columns: repeat(4, 1fr); } }

.feature-card {
    text-align: center;
    padding: 1.5rem;
}
.feature-card__icon { width: 4rem; height: 4rem; margin: 0 auto 1rem; }
.feature-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.feature-card__title { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; }
.feature-card__desc { font-family: var(--font-body); color: hsl(var(--muted-foreground)); font-size: 0.875rem; }

/* ============================================
   TESTIMONIALS (dark bg)
   ============================================ */
.section--testimonials { background: hsl(210 6% 8%); color: #fff; }
.section--testimonials .section__title { color: #fff; }

.testimonials-slider {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) { .testimonials-slider { grid-template-columns: repeat(3, 1fr); } }

.testimonial {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.75rem;
    padding: 2rem;
}
.testimonial__text {
    font-family: var(--font-body);
    font-style: italic;
    line-height: 1.75;
    margin-bottom: 1rem;
    color: rgba(255,255,255,0.85);
}
.testimonial__author cite {
    font-style: normal;
    font-weight: 600;
    color: hsl(var(--primary));
}

/* ============================================
   STAY HOLDER PAGE
   ============================================ */
.stay-section {
    padding: 4rem 0;
    background: hsl(var(--background));
}
@media (min-width: 768px) { .stay-section { padding: 5rem 0; } }

.stay-section--alt { background: hsl(var(--card)); }

.stay-section__inner {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 768px) { .stay-section__inner { padding: 0 2.5rem; } }

.stay-section__header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.stay-section__heading {
    font-size: 1.875rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 0.75rem;
}
@media (min-width: 768px) { .stay-section__heading { font-size: 2.25rem; } }

.stay-section__desc {
    font-family: var(--font-body);
    font-size: 1.125rem;
    color: hsl(var(--muted-foreground));
    max-width: 640px;
    margin: 0 auto 1.5rem;
    line-height: 1.625;
}

/* ============================================
   ACCOMMODATION GRID (Cabins/Sites listing)
   ============================================ */
.listing-intro {
    max-width: 896px;
    margin: 0 auto 3rem;
    text-align: center;
}
.listing-intro h2 {
    font-size: 1.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.listing-intro p {
    font-family: var(--font-body);
    color: hsl(var(--muted-foreground));
    font-size: 1.125rem;
    line-height: 1.625;
}

.accommodation-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
@media (min-width: 768px) { .accommodation-grid { grid-template-columns: repeat(2, 1fr); } }

.accommodation-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--card-border));
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s;
}
.accommodation-card:hover { box-shadow: var(--shadow-md); }

.accommodation-card__image { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.accommodation-card__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.accommodation-card:hover .accommodation-card__image img { transform: scale(1.05); }

.accommodation-card__body { padding: 1.5rem; }
.accommodation-card__type {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: hsl(var(--primary));
    margin-bottom: 0.25rem;
}
.accommodation-card__title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.accommodation-card__desc {
    font-family: var(--font-body);
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.accommodation-card__specs {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    font-family: var(--font-body);
}
.accommodation-card__price {
    font-size: 1.25rem;
    font-weight: 600;
    color: hsl(var(--primary));
    margin-bottom: 1rem;
}

/* ============================================
   LISTING INTRO SECTION (Cabins/Sites)
   ============================================ */
.listing-intro-section {
    padding: 3rem 0;
    background: hsl(var(--background));
}
@media (min-width: 768px) { .listing-intro-section { padding: 4rem 0; } }

.listing-intro-section__inner {
    max-width: 896px;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
}
@media (min-width: 768px) { .listing-intro-section__inner { padding: 0 2rem; } }

.listing-intro-section__heading {
    font-size: 1.875rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .listing-intro-section__heading { font-size: 2.25rem; } }
@media (min-width: 1024px) { .listing-intro-section__heading { font-size: 3rem; } }

.listing-intro-section__text {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.625;
    color: hsl(var(--muted-foreground));
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .listing-intro-section__text { font-size: 1.25rem; } }

.listing-intro-section__cta {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   OVERLAY CARD GRID (Cabins/Sites listing)
   ============================================ */
.overlay-grid-section {
    background: hsl(var(--background));
    padding: 1rem;
}
@media (min-width: 768px) { .overlay-grid-section { padding: 2.5rem; } }

.overlay-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
@media (min-width: 768px) { .overlay-grid { grid-template-columns: repeat(2, 1fr); } }
/* Centre when only one card */
.overlay-grid--single {
    max-width: 640px;
    margin: 0 auto;
}
@media (min-width: 768px) { .overlay-grid--single { grid-template-columns: 1fr; } }

.overlay-card {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 0.5rem;
    text-decoration: none;
    cursor: pointer;
}
.overlay-card__img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.overlay-card:hover .overlay-card__img { transform: scale(1.05); }

.overlay-card__img--fallback {
    background: hsl(var(--muted));
}

.overlay-card__gradient {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.3) 50%, transparent);
}

.overlay-card__content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 1.5rem;
}
@media (min-width: 768px) { .overlay-card__content { padding: 2rem; } }

.overlay-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5rem;
}
@media (min-width: 768px) { .overlay-card__title { font-size: 1.5rem; } }
@media (min-width: 1024px) { .overlay-card__title { font-size: 1.875rem; } }

.overlay-card__desc {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 768px) { .overlay-card__desc { font-size: 1rem; } }

.overlay-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    transition: color 0.3s;
}
@media (min-width: 768px) { .overlay-card__link { font-size: 1rem; } }
.overlay-card:hover .overlay-card__link { color: hsl(var(--primary)); }
.overlay-card__link svg {
    transition: transform 0.3s;
}
.overlay-card:hover .overlay-card__link svg { transform: translateX(4px); }

/* ============================================
   LISTING CTA SECTION
   ============================================ */
.listing-cta {
    padding: 3rem 0;
    background: hsl(var(--primary));
}
@media (min-width: 768px) { .listing-cta { padding: 4rem 0; } }

.listing-cta__inner {
    max-width: 896px;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
}
@media (min-width: 768px) { .listing-cta__inner { padding: 0 2rem; } }

.listing-cta__heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: hsl(var(--primary-foreground));
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .listing-cta__heading { font-size: 1.875rem; } }

.listing-cta__buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}
@media (min-width: 640px) { .listing-cta__buttons { flex-direction: row; } }

.btn--glass {
    display: inline-block;
    padding: 0.75rem 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-decoration: none;
    transition: background 0.3s;
    cursor: pointer;
}
.btn--glass:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}
@media (min-width: 768px) { .btn--glass { font-size: 1rem; } }

/* ============================================
   ACCOMMODATION DETAIL PAGE
   ============================================ */
.accom-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 1024px) {
    .accom-detail { grid-template-columns: 1fr 350px; gap: 3rem; }
}

.accom-detail__description {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.625;
    color: hsl(var(--muted-foreground));
    margin-bottom: 2rem;
}

.accom-detail__specs {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--card-border));
    border-radius: calc(var(--radius) - 2px);
}
.spec-item { text-align: center; }
.spec-item strong { display: block; font-size: 1.5rem; font-weight: 700; color: hsl(var(--foreground)); }
.spec-item span { font-family: var(--font-body); font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }

.accom-detail__included h3,
.accom-detail__amenities h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: hsl(var(--primary));
}
.accom-detail__included ul,
.accom-detail__amenities ul { list-style: none; }
.accom-detail__included li,
.amenity-item {
    font-family: var(--font-body);
    padding: 0.5rem 0;
    border-bottom: 1px solid hsl(var(--border));
    color: hsl(var(--muted-foreground));
    font-size: 0.9375rem;
}
.amenity-item::before {
    content: "✓";
    color: hsl(var(--primary));
    font-weight: 700;
    margin-right: 0.75rem;
}

/* Booking sidebar card */
.booking-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--card-border));
    border-radius: 0.75rem;
    padding: 1.5rem;
    position: sticky;
    top: 7rem;
}
.booking-card__price {
    font-size: 1.125rem;
    font-family: var(--font-body);
    margin-bottom: 1rem;
    color: hsl(var(--muted-foreground));
}
.booking-card__price strong {
    font-size: 1.5rem;
    color: hsl(var(--foreground));
}
.booking-card__info {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.75rem;
}
.booking-card__badge {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--green-accent);
    margin-top: 0.5rem;
}

/* ============================================
   FACILITIES LISTING (full-width alternating rows)
   Matches Facilities.tsx exactly
   ============================================ */
.facility-row {
    display: grid;
    grid-template-columns: 1fr;
    text-decoration: none;
    color: inherit;
    background: hsl(var(--background));
}
@media (min-width: 1024px) { .facility-row { grid-template-columns: 1fr 1fr; } }

.facility-row__image { aspect-ratio: 4/3; overflow: hidden; background: hsl(var(--muted)); }
@media (min-width: 1024px) { .facility-row__image { aspect-ratio: auto; min-height: 400px; } }
.facility-row__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.facility-row__body {
    background: hsl(var(--background));
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (min-width: 768px) { .facility-row__body { padding: 3rem; } }
@media (min-width: 1024px) { .facility-row__body { padding: 4rem; } }

.facility-row__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: hsl(var(--foreground));
}
@media (min-width: 768px) { .facility-row__title { font-size: 1.5rem; } }

.facility-row__divider {
    width: 100%;
    border-bottom: 1px dotted hsl(var(--foreground) / 0.3);
    margin-bottom: 1.5rem;
}

.facility-row__desc {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.625;
    color: hsl(var(--muted-foreground));
    margin-bottom: 1rem;
}
.facility-row__note {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground) / 0.7);
    margin-top: 1rem;
}
.facility-row__readmore {
    color: hsl(var(--primary));
    font-weight: 500;
    margin-top: 1rem;
    display: inline-block;
}
.facility-row__readmore:hover { text-decoration: underline; }

/* Alt layout: body first, image second on desktop */
@media (min-width: 1024px) {
    .facility-row--alt .facility-row__body { order: 1; }
    .facility-row--alt .facility-row__image { order: 2; }
}

/* ============================================
   CTA NEWSLETTER BAND (on primary bg)
   ============================================ */
.cta-newsletter {
    background: hsl(var(--primary));
    padding: 3rem 0;
}
@media (min-width: 768px) { .cta-newsletter { padding: 4rem 0; } }

.cta-newsletter__inner {
    max-width: 896px;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
}
@media (min-width: 768px) { .cta-newsletter__inner { padding: 0 2rem; } }

.cta-newsletter__label {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: hsl(var(--primary-foreground) / 0.8);
    margin-bottom: 1.5rem;
}
.cta-newsletter__form {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 768px) { .cta-newsletter__form { flex-direction: row; } }

.cta-newsletter__input {
    flex: 1;
    padding: 0.625rem 0.75rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: calc(var(--radius) - 2px);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.9375rem;
}
.cta-newsletter__input::placeholder { color: rgba(255,255,255,0.6); }
.cta-newsletter__input:focus {
    outline: none;
    border-color: rgba(255,255,255,0.6);
}

/* ============================================
   INTERIOR HERO VARIANTS
   ============================================ */
.interior-hero--70vh { min-height: 70vh; }
.interior-hero--60vh { min-height: 60vh; }
.interior-hero--50vh { min-height: 50vh; }

/* ============================================
   EXPERIENCE GRID (3-col card layout)
   ============================================ */
.exp-grid-section {
    padding: 4rem 0;
    background: hsl(var(--background));
}
@media (min-width: 768px) { .exp-grid-section { padding: 5rem 0; } }

.exp-grid-section__inner {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 768px) { .exp-grid-section__inner { padding: 0 2rem; } }

.exp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) { .exp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .exp-grid { grid-template-columns: repeat(3, 1fr); } }

.exp-card {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}

.exp-card__image {
    aspect-ratio: 3/2;
    overflow: hidden;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
}
.exp-card__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.exp-card:hover .exp-card__image img { transform: scale(1.05); }

.exp-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 0.75rem;
}

.exp-card__desc {
    font-family: var(--font-body);
    color: hsl(var(--muted-foreground));
    line-height: 1.625;
    margin-bottom: 1rem;
}

.exp-card__link {
    font-weight: 500;
    color: hsl(var(--primary));
    text-decoration: none;
}
.exp-card__link:hover { text-decoration: underline; }

/* ============================================
   NEWSLETTER FORM (inside listing-cta)
   ============================================ */
.listing-cta__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    margin-bottom: 1.5rem;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 640px;
    margin: 0 auto;
}
@media (min-width: 768px) { .newsletter-form { flex-direction: row; } }

.newsletter-form__input {
    flex: 1;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-family: var(--font-body);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius);
    color: #fff;
    outline: none;
}
.newsletter-form__input::placeholder { color: rgba(255,255,255,0.6); }
.newsletter-form__input:focus {
    border-color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.15);
}

/* Newsletter SS Form (replaces plain HTML newsletter-form) */
.newsletter-styled-form {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 768px) {
    .newsletter-styled-form { flex-direction: row; align-items: flex-start; }
}
.newsletter-styled-form fieldset {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}
@media (min-width: 768px) {
    .newsletter-styled-form fieldset { flex-direction: row; }
}
.newsletter-styled-form .field {
    flex: 1;
    min-width: 0;
}
.newsletter-styled-form .field label,
.newsletter-styled-form .field .form-label { display: none; }
.newsletter-styled-form .field .middleColumn { width: 100%; }
.newsletter-styled-form .field.hidden,
.newsletter-styled-form .field input.hidden { display: none; }
.newsletter-styled-form input[type="text"],
.newsletter-styled-form input[type="email"],
.newsletter-styled-form input.text,
.newsletter-styled-form input.email {
    width: 100%;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-family: var(--font-body);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius);
    color: #fff;
    outline: none;
    box-sizing: border-box;
}
.newsletter-styled-form input::placeholder { color: rgba(255,255,255,0.6); }
.newsletter-styled-form input:focus {
    border-color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.15);
}
.newsletter-styled-form .clear { display: none; }
.newsletter-styled-form .btn-toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
}
@media (max-width: 767px) {
    .newsletter-styled-form .btn-toolbar { width: 100%; }
    .newsletter-styled-form .btn-toolbar .action { width: 100%; }
}
.newsletter-styled-form .btn-toolbar .action {
    display: inline-block;
    padding: 0.625rem 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    transition: background 0.3s;
    font-family: var(--font-sans);
    white-space: nowrap;
}
.newsletter-styled-form .btn-toolbar .action:hover {
    background: rgba(255,255,255,0.2);
}
.newsletter-styled-form .message {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.875rem;
    margin-bottom: 1rem;
    text-align: center;
    width: 100%;
}
.newsletter-styled-form .message.good {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

/* Vision6 embed newsletter form */
.em_wfe_form {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 768px) {
    .em_wfe_form { flex-direction: row; align-items: flex-start; }
}
.em_wfe_form .wfe_component {
    flex: 1;
    min-width: 0;
}
.em_wfe_form input[type="text"],
.em_wfe_form input[type="email"] {
    width: 100%;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-family: var(--font-body);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius);
    color: #fff;
    outline: none;
    box-sizing: border-box;
}
.em_wfe_form input::placeholder { color: rgba(255,255,255,0.6); }
.em_wfe_form input:focus {
    border-color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.15);
}
.em_wfe_form .wfe_button {
    display: inline-block;
    padding: 0.625rem 2rem;
    font-size: 0.875rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    transition: background 0.3s;
    font-family: var(--font-sans) !important;
    white-space: nowrap;
}
.em_wfe_form .wfe_button:hover {
    background: rgba(255,255,255,0.2);
}
@media (max-width: 767px) {
    .em_wfe_form .wfe_button { width: 100%; }
}

/* FAQ SS Form styling */
.faq-styled-form fieldset {
    border: none;
    padding: 0;
    margin: 0;
}
.faq-styled-form .field {
    margin-bottom: 1.5rem;
}
.faq-styled-form .field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    margin-bottom: 0.5rem;
    font-family: var(--font-sans);
}
.faq-styled-form .requiredField label::after {
    content: ' *';
    color: hsl(var(--destructive));
}
.faq-styled-form input[type="text"],
.faq-styled-form input[type="email"],
.faq-styled-form input[type="tel"],
.faq-styled-form textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.875rem;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.faq-styled-form input:focus,
.faq-styled-form textarea:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}
.faq-styled-form textarea { min-height: 140px; resize: vertical; }
.faq-styled-form .clear { display: none; }
.faq-styled-form .btn-toolbar { text-align: center; margin-top: 0.5rem; }
.faq-styled-form .btn-toolbar .action {
    display: inline-block;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-sans);
    color: hsl(var(--primary-foreground));
    background: hsl(var(--primary));
    border: 1px solid hsl(var(--primary));
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s;
}
.faq-styled-form .btn-toolbar .action:hover { background: hsl(var(--primary-hover)); }
.faq-styled-form .message {
    padding: 1rem;
    border-radius: var(--radius);
    font-family: var(--font-body);
    margin-bottom: 1.5rem;
}
.faq-styled-form .message.good {
    background: hsl(142 70% 95%);
    color: hsl(142 70% 30%);
    border: 1px solid hsl(142 70% 80%);
}

/* ============================================
   EXPERIENCE BOTTOM SECTION
   ============================================ */
.exp-bottom-section {
    padding: 4rem 0;
    background: hsl(var(--card));
}
@media (min-width: 768px) { .exp-bottom-section { padding: 5rem 0; } }

.exp-bottom-section__inner {
    max-width: 896px;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
}
@media (min-width: 768px) { .exp-bottom-section__inner { padding: 0 2rem; } }

.exp-bottom-section__heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .exp-bottom-section__heading { font-size: 1.875rem; } }

.exp-bottom-section__text {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.625;
    color: hsl(var(--muted-foreground));
    margin-bottom: 2rem;
}

.exp-bottom-section__buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}
@media (min-width: 640px) { .exp-bottom-section__buttons { flex-direction: row; } }

/* ============================================
   EXPERIENCE DETAIL PAGE
   ============================================ */
.exp-detail-section {
    padding: 3rem 0;
    background: hsl(var(--background));
}
@media (min-width: 768px) { .exp-detail-section { padding: 4rem 0; } }

.exp-detail-section__inner {
    max-width: 768px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 768px) { .exp-detail-section__inner { padding: 0 2rem; } }

.exp-detail__back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: hsl(var(--primary));
    text-decoration: none;
    margin-bottom: 2rem;
}
.exp-detail__back:hover { text-decoration: underline; }

.exp-detail__intro {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.625;
    color: hsl(var(--foreground));
    margin-bottom: 2.5rem;
}
@media (min-width: 768px) { .exp-detail__intro { font-size: 1.25rem; } }
.exp-detail__intro p { margin-bottom: 1rem; }

.exp-detail__gallery {
    margin-bottom: 3rem;
}
.exp-detail__gallery-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .exp-detail__gallery-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .exp-detail__gallery-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
/* 4+ images: 2-col on tablet, 3-col on desktop */
@media (min-width: 768px) {
    .exp-detail__gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .exp-detail__gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Override back to specific counts */
.exp-detail__gallery-grid--1 { grid-template-columns: 1fr !important; }
@media (min-width: 768px) {
    .exp-detail__gallery-grid--2 { grid-template-columns: repeat(2, 1fr) !important; }
    .exp-detail__gallery-grid--3 { grid-template-columns: repeat(3, 1fr) !important; }
}
.exp-detail__gallery-item {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 0.375rem;
}
.exp-detail__gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.exp-detail__sections {
    margin-bottom: 2.5rem;
}
.exp-detail__sections h2,
.exp-detail__sections h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: hsl(var(--primary));
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
}
@media (min-width: 768px) {
    .exp-detail__sections h2,
    .exp-detail__sections h3 { font-size: 1.5rem; }
}
.exp-detail__sections p {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.625;
    color: hsl(var(--muted-foreground));
    margin-bottom: 1rem;
}
@media (min-width: 768px) { .exp-detail__sections p { font-size: 1.125rem; } }

.exp-detail__tips {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--card-border));
    border-radius: 0.375rem;
    padding: 1.5rem;
    margin-top: 3rem;
    margin-bottom: 2rem;
}
@media (min-width: 768px) { .exp-detail__tips { padding: 2rem; } }

.exp-detail__tips-heading {
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 1rem;
}

.exp-detail__tips-content {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.625;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) { .exp-detail__tips-content { grid-template-columns: 1fr 1fr; } }
.exp-detail__tips-content p { margin: 0; }
.exp-detail__tips-content strong {
    font-weight: 600;
    color: hsl(var(--primary));
    display: block;
    font-size: 0.875rem;
}

.exp-detail__actions {
    margin-top: 2rem;
    text-align: center;
}

/* ============================================
   DETAIL PAGES (Facility, Experience - legacy)
   ============================================ */
.detail-content {
    max-width: 896px;
    margin-bottom: 2rem;
}
.detail-content p {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.625;
    color: hsl(var(--muted-foreground));
    margin-bottom: 1rem;
}
.detail-content h2, .detail-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: hsl(var(--primary));
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.detail-info, .detail-note {
    font-family: var(--font-body);
    margin-bottom: 1.5rem;
}
.detail-note {
    color: hsl(var(--destructive));
    font-style: italic;
}
.detail-tips {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--card-border));
    border-radius: calc(var(--radius) - 2px);
    padding: 1.5rem;
    margin-bottom: 2rem;
}
@media (min-width: 768px) { .detail-tips { padding: 2rem; } }
.detail-tips h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--primary));
    margin-bottom: 1rem;
}

.detail-actions { margin-bottom: 2rem; }

/* ============================================
   PETS PAGE
   ============================================ */
.pets-section {
    padding: 4rem 0;
    background: hsl(var(--background));
}
@media (min-width: 768px) { .pets-section { padding: 5rem 0; } }

.pets-section--card { background: hsl(var(--card)); }

.pets-section__inner {
    max-width: 896px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 768px) { .pets-section__inner { padding: 0 2rem; } }

.pets-section__icon-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.pets-section__icon-heading h2,
.pets-section__icon-heading h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}
@media (min-width: 768px) {
    .pets-section__icon-heading h2 { font-size: 1.875rem; }
    .pets-section__icon-heading h3 { font-size: 1.5rem; }
}

.pets-section__heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .pets-section__heading { font-size: 1.5rem; } }

.pets-section__subtext {
    font-family: var(--font-body);
    color: hsl(var(--muted-foreground));
    margin-bottom: 2rem;
}

.pets-section__text {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.625;
    color: hsl(var(--muted-foreground));
}
.pets-section__text p { margin-bottom: 1.5rem; }

/* Pets icons */
.pets-icon { flex-shrink: 0; }
.pets-icon--lg { width: 2rem; height: 2rem; }
.pets-icon--primary { color: hsl(var(--primary)); }
.pets-icon--destructive { color: hsl(var(--destructive)); }

/* Restricted dates list */
.pets-restricted-list ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.pets-restricted-list li {
    font-family: var(--font-body);
    color: hsl(var(--muted-foreground));
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.pets-restricted-list li::before {
    content: '-';
    font-weight: 700;
    color: hsl(var(--destructive));
    flex-shrink: 0;
}

/* Rules list with check icons */
.pets-rules-list ol {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.pets-rules-list li {
    font-family: var(--font-body);
    color: hsl(var(--foreground));
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    line-height: 1.5;
}
.pets-rules-list li::before {
    content: '';
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='hsl(200,85%25,42%25)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Warning box */
.pets-warning-box {
    margin-top: 2rem;
    padding: 1rem;
    background: hsl(var(--muted));
    border-radius: 0.375rem;
}
.pets-warning-box p {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.5;
}

/* CTA text line */
.listing-cta__text {
    font-family: var(--font-body);
    color: hsl(var(--primary-foreground) / 0.8);
    margin-bottom: 1.5rem;
}

/* ============================================
   EVENTS / WHAT'S ON
   ============================================ */
.whatson-section {
    padding: 4rem 0;
    background: hsl(var(--background));
}
@media (min-width: 768px) { .whatson-section { padding: 5rem 0; } }

.whatson-section__inner {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 768px) { .whatson-section__inner { padding: 0 2rem; } }

.whatson-section__header {
    text-align: center;
    margin-bottom: 3rem;
}
.whatson-section__heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 1rem;
}
@media (min-width: 768px) { .whatson-section__heading { font-size: 1.875rem; } }

.whatson-section__desc {
    font-family: var(--font-body);
    color: hsl(var(--muted-foreground));
    max-width: 672px;
    margin: 0 auto;
}

.whatson-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) { .whatson-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .whatson-grid { grid-template-columns: repeat(3, 1fr); } }

.whatson-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s;
}
a.whatson-card, .whatson-card--link {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}
a.whatson-card:hover, .whatson-card--link:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.whatson-card__readmore {
    display: inline-block;
    margin-top: 0.75rem;
    color: hsl(var(--primary));
    font-weight: 500;
    font-size: 0.875rem;
}
.whatson-card__image {
    aspect-ratio: 3/2;
    overflow: hidden;
}
.whatson-card__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.whatson-card:hover .whatson-card__image img { transform: scale(1.05); }

.whatson-card__body { padding: 1.25rem; }

.whatson-card__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 0.75rem;
}

.whatson-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}
.whatson-card__meta svg { flex-shrink: 0; }
.whatson-card__meta--date { color: hsl(var(--primary)); }
.whatson-card__meta--location { color: hsl(var(--muted-foreground)); margin-bottom: 0.75rem; }

.whatson-card__desc {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.625;
}

/* ============================================
   GENERIC PAGE CONTENT
   ============================================ */
.generic-page__content {
    max-width: 896px;
    margin: 0 auto;
}

/* ============================================
   BOOKING POLICY PAGE
   ============================================ */
.booking-policy-content {
    max-width: 768px;
    margin: 0 auto;
    padding: 4rem 0;
    text-align: center;
}
@media (min-width: 768px) { .booking-policy-content { padding: 5rem 0; } }

.booking-policy-content__icon {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}
.booking-policy-content__icon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: hsl(var(--primary));
    padding: 1.25rem;
    box-sizing: content-box;
    background: hsl(var(--primary) / 0.1);
    border-radius: 9999px;
}

.booking-policy-content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .booking-policy-content h2 { font-size: 1.875rem; } }

.booking-policy-content p {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.625;
    color: hsl(var(--muted-foreground));
    margin-bottom: 2rem;
}

.booking-policy-content .btn {
    margin-top: 0.5rem;
}

/* ============================================
   SPECIAL OFFERS
   ============================================ */
.specials-main {
    padding: 4rem 0;
    background: hsl(var(--background));
}
@media (min-width: 768px) { .specials-main { padding: 6rem 0; } }

.specials-main__inner {
    max-width: 768px;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
}
@media (min-width: 768px) { .specials-main__inner { padding: 0 2rem; } }

.specials-main__heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .specials-main__heading { font-size: 1.875rem; } }

.specials-main__text {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.625;
    color: hsl(var(--muted-foreground));
    margin-bottom: 2rem;
}

.specials-main__social {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 3rem;
}
@media (min-width: 640px) { .specials-main__social { flex-direction: row; } }

.btn--icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.btn--icon svg { flex-shrink: 0; }

.specials-main__divider {
    border-top: 1px solid hsl(var(--border));
    padding-top: 3rem;
}

.specials-main__links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}
@media (min-width: 640px) { .specials-main__links { flex-direction: row; } }

.specials-grid-section {
    padding: 0 0 4rem;
    background: hsl(var(--background));
}
.specials-grid-section__inner {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 768px) { .specials-grid-section__inner { padding: 0 2rem; } }

/* ============================================
   FAQ PAGE
   ============================================ */
.faq-intro-section {
    padding: 4rem 0;
    background: hsl(var(--background));
}
@media (min-width: 768px) { .faq-intro-section { padding: 5rem 0; } }

.faq-intro-section__inner {
    max-width: 896px;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
}
@media (min-width: 768px) { .faq-intro-section__inner { padding: 0 2rem; } }

.faq-intro-section__text {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.625;
    color: hsl(var(--muted-foreground));
}

/* FAQ Accordion */
.faq-accordion-section {
    padding: 0 0 4rem;
    background: hsl(var(--background));
}
@media (min-width: 768px) { .faq-accordion-section { padding: 0 0 5rem; } }

.faq-accordion-section__inner {
    max-width: 896px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 768px) { .faq-accordion-section__inner { padding: 0 2rem; } }

.faq-accordion-item {
    border-bottom: 1px solid hsl(var(--border));
}

.faq-accordion-item__trigger {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    padding: 1.25rem 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: color 0.2s;
    text-align: left;
}
.faq-accordion-item__trigger:hover { color: hsl(var(--primary)); }
.faq-accordion-item__trigger::-webkit-details-marker { display: none; }

.faq-accordion-item__chevron {
    flex-shrink: 0;
    transition: transform 0.2s;
    color: hsl(var(--muted-foreground));
}
.faq-accordion-item[open] .faq-accordion-item__chevron {
    transform: rotate(180deg);
}

.faq-accordion-item__content {
    padding: 0 0 1.25rem;
    font-family: var(--font-body);
    color: hsl(var(--muted-foreground));
    line-height: 1.625;
}
.faq-accordion-item__content p { margin-bottom: 0.5rem; }

/* FAQ Form Section */
.faq-form-section {
    padding: 4rem 0;
    background: hsl(var(--card));
}
@media (min-width: 768px) { .faq-form-section { padding: 5rem 0; } }

.faq-form-section__inner {
    max-width: 672px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 768px) { .faq-form-section__inner { padding: 0 2rem; } }

.faq-form-section__heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    text-align: center;
    margin-bottom: 1rem;
}
@media (min-width: 768px) { .faq-form-section__heading { font-size: 1.875rem; } }

.faq-form-section__desc {
    font-family: var(--font-body);
    color: hsl(var(--muted-foreground));
    text-align: center;
    margin-bottom: 2rem;
}

.faq-form { display: flex; flex-direction: column; gap: 1.5rem; }

.faq-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) { .faq-form__row { grid-template-columns: 1fr 1fr; } }

.faq-form__field { display: flex; flex-direction: column; }

.faq-form__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    margin-bottom: 0.5rem;
}

.faq-form__required { color: hsl(var(--destructive)); }

.faq-form__input,
.faq-form__textarea {
    font-family: var(--font-body);
    font-size: 0.875rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius);
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
}
.faq-form__input:focus,
.faq-form__textarea:focus {
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.faq-form__textarea { resize: vertical; }

.faq-form__submit { text-align: center; }

/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-section {
    padding: 4rem 0;
    background: hsl(var(--background));
}
@media (min-width: 768px) { .contact-section { padding: 5rem 0; } }

.contact-section__inner {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 768px) { .contact-section__inner { padding: 0 2rem; } }

.contact-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
@media (min-width: 1024px) { .contact-layout { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.contact-layout__heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 1rem;
}
@media (min-width: 768px) { .contact-layout__heading { font-size: 1.875rem; } }

.contact-layout__desc {
    font-family: var(--font-body);
    color: hsl(var(--muted-foreground));
    margin-bottom: 2rem;
}

/* Contact form (SilverStripe Form) */
.contact-styled-form fieldset {
    border: none;
    padding: 0;
    margin: 0;
}
.contact-styled-form .field {
    margin-bottom: 1.5rem;
}
.contact-styled-form .middleColumn {
    width: 100%;
}
.contact-styled-form .form-label,
.contact-styled-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    margin-bottom: 0.5rem;
    font-family: var(--font-sans);
}
.contact-styled-form .field[id*="_Name_Holder"] label::after,
.contact-styled-form .field[id*="_Email_Holder"] label::after,
.contact-styled-form .field[id*="_Message_Holder"] label::after {
    content: ' *';
    color: hsl(var(--destructive));
}
.contact-styled-form input[type="text"],
.contact-styled-form input[type="email"],
.contact-styled-form input[type="tel"],
.contact-styled-form input.text,
.contact-styled-form input.email,
.contact-styled-form textarea,
.contact-styled-form textarea.textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.875rem;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.contact-styled-form input:focus,
.contact-styled-form textarea:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}
.contact-styled-form textarea,
.contact-styled-form textarea.textarea {
    min-height: 140px;
    resize: vertical;
    rows: 5;
}
.contact-styled-form .clear { display: none; }
.contact-styled-form .btn-toolbar {
    margin-top: 0.5rem;
}
.contact-styled-form .btn-toolbar .action {
    display: inline-block;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--font-sans);
    color: hsl(var(--primary-foreground));
    background: hsl(var(--primary));
    border: 1px solid hsl(var(--primary));
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.2s;
    text-transform: none;
}
.contact-styled-form .btn-toolbar .action:hover {
    background: hsl(var(--primary-hover));
}
.contact-styled-form .message {
    padding: 1rem;
    border-radius: var(--radius);
    font-family: var(--font-body);
    margin-bottom: 1.5rem;
}
.contact-styled-form .message.good {
    background: hsl(142 70% 95%);
    color: hsl(142 70% 30%);
    border: 1px solid hsl(142 70% 80%);
}
.contact-styled-form input.hidden { display: none; }

/* Contact info list */
.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contact-info-item__icon {
    width: 1.5rem;
    height: 1.5rem;
    color: hsl(var(--primary));
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.contact-info-item__label {
    font-weight: 500;
    color: hsl(var(--foreground));
    margin-bottom: 0.125rem;
}

.contact-info-item__value {
    font-family: var(--font-body);
    color: hsl(var(--muted-foreground));
    text-decoration: none;
    transition: color 0.2s;
}
.contact-info-item__value:hover { color: hsl(var(--primary)); }

/* Reception hours card */
.contact-hours {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    padding: 1.5rem;
}

.contact-hours__heading {
    font-size: 1.25rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 1rem;
}

.contact-hours__list {
    font-family: var(--font-body);
    color: hsl(var(--muted-foreground));
}
.contact-hours__list p { margin-bottom: 0.5rem; }

/* Map section */
.contact-map-section {
    padding: 4rem 0;
    background: hsl(var(--card));
}
@media (min-width: 768px) { .contact-map-section { padding: 5rem 0; } }

.contact-map-section__inner {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 768px) { .contact-map-section__inner { padding: 0 2rem; } }

.contact-map-section__heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    text-align: center;
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .contact-map-section__heading { font-size: 1.875rem; } }

.contact-map-section__desc {
    font-family: var(--font-body);
    color: hsl(var(--muted-foreground));
    text-align: center;
    max-width: 768px;
    margin: 0 auto 2.5rem;
    line-height: 1.625;
}

.contact-map-section__map {
    border-radius: 0.375rem;
    overflow: hidden;
    border: 1px solid hsl(var(--border));
}
/* Strip the <p> wrapper that TinyMCE adds around the iframe */
.contact-map-section__map p {
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
}
.contact-map-section__map iframe {
    display: block;
    width: 100%;
    min-height: 450px;
    border: 0;
}

/* ============================================
   GALLERY
   ============================================ */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }

.gallery-item { aspect-ratio: 4/3; overflow: hidden; border-radius: calc(var(--radius) - 2px); }
.gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.gallery-item:hover img { transform: scale(1.05); }

/* Lightbox */
.lightbox {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.lightbox.is-active { opacity: 1; visibility: visible; }
.lightbox__overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.92);
}
.lightbox__content {
    position: relative; z-index: 1;
    max-width: 90vw; max-height: 85vh;
    display: flex; flex-direction: column; align-items: center;
}
.lightbox__img {
    max-width: 90vw; max-height: 80vh;
    object-fit: contain;
    border-radius: 0.375rem;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.lightbox__caption {
    color: rgba(255,255,255,0.8);
    margin-top: 0.75rem;
    font-size: 0.9rem;
}
.lightbox__counter {
    color: rgba(255,255,255,0.5);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}
.lightbox__close,
.lightbox__prev,
.lightbox__next {
    position: absolute; z-index: 2;
    background: none; border: none;
    color: #fff; cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
    opacity: 0.7;
}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover { opacity: 1; }
.lightbox__close {
    top: 1.5rem; right: 1.5rem;
    font-size: 2.5rem; line-height: 1;
}
.lightbox__prev,
.lightbox__next {
    top: 50%; transform: translateY(-50%);
    font-size: 3.5rem; line-height: 1;
    padding: 0.5rem;
}
.lightbox__prev { left: 1rem; }
.lightbox__next { right: 1rem; }
@media (min-width: 768px) {
    .lightbox__prev { left: 2rem; }
    .lightbox__next { right: 2rem; }
}

.accom-gallery { margin-top: 3rem; }
.accom-gallery h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1.5rem; }

/* ============================================
   CABIN DETAIL PAGE (matches live site)
   ============================================ */

/* Cabin Hero - 70vh full image */
.cabin-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #1a1a1a;
}
.cabin-hero__bg {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.cabin-hero__overlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 1;
}
.cabin-hero__content {
    position: relative; z-index: 2;
    text-align: center; color: #fff;
    padding: 2rem 1rem;
}
.cabin-hero__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
}
@media (min-width: 768px) { .cabin-hero__title { font-size: 3.5rem; } }
@media (min-width: 1024px) { .cabin-hero__title { font-size: 4rem; } }

/* Cabin Description - centered white bg */
.cabin-description {
    background: #fff;
    padding: 3rem 1rem 1.5rem;
}
.cabin-description__inner {
    max-width: 56rem;
    margin: 0 auto;
    text-align: center;
}
.cabin-description__title {
    font-size: 1.875rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin-bottom: 1.5rem;
}
.cabin-description__text {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.8;
    color: hsl(var(--muted-foreground));
    margin-bottom: 2rem;
    text-align: left;
}
.cabin-description__text p { margin-bottom: 1rem; }

/* Cabin Gallery Carousel */
.cabin-gallery { background: #fff; padding: 0 0 1rem; }
.cabin-gallery__carousel {
    position: relative;
    max-width: 56rem;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 0.75rem;
}
/* Facility gallery section — no white background */
.facility-gallery-section {
    background: hsl(var(--background));
    padding: 0 0 1rem;
}
.cabin-gallery__track {
    display: flex;
    transition: transform 0.4s ease;
}
.cabin-gallery__slide {
    min-width: 100%;
    aspect-ratio: 16/10;
}
.cabin-gallery__slide img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.cabin-gallery__prev,
.cabin-gallery__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 3rem; height: 3rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: background 0.2s;
}
.cabin-gallery__prev:hover,
.cabin-gallery__next:hover { background: #fff; }
.cabin-gallery__prev { left: 1rem; }
.cabin-gallery__next { right: 1rem; }
.cabin-gallery__prev svg,
.cabin-gallery__next svg { width: 1.25rem; height: 1.25rem; }
.cabin-gallery__dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0;
}
.cabin-gallery__dot {
    width: 0.625rem; height: 0.625rem;
    border-radius: 50%;
    background: hsl(var(--muted-foreground));
    opacity: 0.3;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}
.cabin-gallery__dot--active { opacity: 1; background: hsl(var(--primary)); }

/* Specs Bar (below gallery) — vertical icon layout matching template */
.cabin-specs-bar {
    display: flex;
    justify-content: center;
    gap: 3rem;
    max-width: 56rem;
    margin: 0 auto;
    padding: 2rem 0;
    border-top: 1px solid hsl(var(--border));
}
.cabin-specs-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-body);
    text-align: center;
}
.cabin-specs-bar__icon {
    width: 1.75rem; height: 1.75rem;
    color: hsl(var(--foreground));
    margin-bottom: 0.25rem;
}
.cabin-specs-bar__item strong {
    font-size: 1.5rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    line-height: 1;
}
.cabin-specs-bar__item span {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
}

/* Included & Amenities grid */
.cabin-amenities-section {
    background: hsl(var(--background));
    border-top: 1px solid hsl(var(--border));
}
.cabin-amenities-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 56rem;
    margin: 0 auto;
}
@media (min-width: 768px) { .cabin-amenities-grid { grid-template-columns: auto 1fr; } }

.cabin-included__title,
.cabin-amenities__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.cabin-included__list,
.cabin-amenities__list {
    list-style: none;
    padding: 0; margin: 0;
}
.cabin-included__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: hsl(var(--muted-foreground));
}
.cabin-included__icon {
    width: 1.25rem; height: 1.25rem;
    color: hsl(var(--primary));
    flex-shrink: 0;
}
.cabin-amenities__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: hsl(var(--muted-foreground));
    border-bottom: 1px solid hsl(var(--border));
}
.cabin-amenities__item:last-child { border-bottom: none; }
.cabin-amenities__check {
    width: 1.125rem; height: 1.125rem;
    color: hsl(var(--primary));
    flex-shrink: 0;
    margin-top: 0.125rem;
}
.cabin-amenities__bullet {
    color: hsl(var(--muted-foreground));
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
}

/* More Room Options */
.cabin-more-rooms { background: hsl(var(--muted)); }
.cabin-more-rooms__title {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2.5rem;
    color: hsl(var(--foreground));
}
.cabin-more-rooms__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 640px) { .cabin-more-rooms__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cabin-more-rooms__grid { grid-template-columns: repeat(3, 1fr); } }

.cabin-card {
    display: block;
    text-decoration: none;
    background: hsl(var(--card));
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid hsl(var(--card-border));
    transition: transform 0.2s, box-shadow 0.2s;
}
.cabin-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}
.cabin-card__image {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
}
.cabin-card__body { padding: 1.25rem; }
.cabin-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 0.25rem;
}
.cabin-card__meta {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
}

/* Facilities Grid (on cabin detail pages) */
.cabin-facilities { background: #fff; }
.cabin-facilities__title {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2.5rem;
    color: hsl(var(--foreground));
}
.cabin-facilities__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) { .cabin-facilities__grid { grid-template-columns: repeat(2, 1fr); } }
.cabin-facility-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--card-border));
    border-radius: 0.75rem;
    overflow: hidden;
}
.cabin-facility-card__image { aspect-ratio: 3/2; overflow: hidden; }
.cabin-facility-card__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.cabin-facility-card:hover .cabin-facility-card__image img { transform: scale(1.05); }
.cabin-facility-card__body { padding: 1.25rem; }
.cabin-facility-card__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: 0.5rem;
}
.cabin-facility-card__desc {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.6;
}

/* CTA Band */
.cabin-cta {
    background: hsl(var(--primary));
    padding: 4rem 1rem;
}
.cabin-cta__inner {
    max-width: 56rem;
    margin: 0 auto;
    text-align: center;
}
.cabin-cta__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2rem;
}
@media (min-width: 768px) { .cabin-cta__title { font-size: 2.25rem; } }
.cabin-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* ============================================
   PARK MAP
   ============================================ */
.park-map-section { padding: 1.5rem 0; }
@media (min-width: 768px) { .park-map-section { padding: 2rem 0; } }
.park-map { margin: 0; }
.park-map__image { width: 100%; border-radius: calc(var(--radius) - 2px); display: block; }
.park-map__download { text-align: center; margin: 1.5rem 0; }
.park-map__legend { max-width: 896px; margin: 0 auto; }

/* ============================================
   POI (Local Area)
   ============================================ */
.poi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) { .poi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .poi-grid { grid-template-columns: repeat(3, 1fr); } }

.poi-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--card-border));
    border-radius: 0.75rem;
    overflow: hidden;
}
.poi-card__image { aspect-ratio: 3/2; overflow: hidden; }
.poi-card__image img { width: 100%; height: 100%; object-fit: cover; }
.poi-card__body { padding: 1.25rem; }
.poi-card__category {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: hsl(var(--primary));
    display: block;
    margin-bottom: 0.25rem;
}
.poi-card__title { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; }
.poi-card__desc { font-family: var(--font-body); color: hsl(var(--muted-foreground)); font-size: 0.875rem; }
.poi-card__distance {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: hsl(var(--primary));
    margin-top: 0.5rem;
}

/* ============================================
   SPECIAL CARDS
   ============================================ */
.specials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
}
@media (min-width: 768px) { .specials-grid { grid-template-columns: repeat(2, 1fr); } }

.special-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--card-border));
    border-radius: 0.75rem;
    overflow: hidden;
}
.special-card__image { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.special-card__image img { width: 100%; height: 100%; object-fit: cover; }
.special-card__badge {
    position: absolute;
    top: 1rem; right: 1rem;
    background: hsl(var(--primary));
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
}
.special-card__body { padding: 1.5rem; }
.special-card__title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; }
.special-card__summary { font-family: var(--font-body); color: hsl(var(--muted-foreground)); margin-bottom: 0.75rem; }
.special-card__dates { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); margin-bottom: 0.75rem; }
.special-card__terms { margin-top: 0.75rem; color: hsl(var(--muted-foreground)); }

/* ============================================
   FOOTER (matches React Footer component)
   ============================================ */
.site-footer {
    background: hsl(var(--card));
    border-top: 1px solid hsl(var(--border));
    padding: 4rem 0 2rem;
    color: hsl(var(--foreground));
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); gap: 3rem; } }

.footer-logo {
    height: auto;
    max-height: 4.5rem;
    width: auto;
    margin-bottom: 1rem;
    background: #fff;
    border-radius: 0.625rem;
    padding: 0.5rem 1rem;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.footer-heading {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: hsl(var(--foreground));
}
.footer-tagline {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.footer-links { list-style: none; }
.footer-link {
    display: block;
    padding: 0.25rem 0;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    transition: color 0.2s;
}
.footer-link:hover { color: hsl(var(--primary)); }

.footer-contact-list { list-style: none; }
.footer-contact-list li {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin-bottom: 0.5rem;
}
.footer-contact-list a { color: hsl(var(--muted-foreground)); }
.footer-contact-list a:hover { color: hsl(var(--primary)); }

.footer-social { display: flex; gap: 1rem; }
.footer-social__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    transition: color 0.2s;
    text-decoration: none;
}
.footer-social__icon:hover { color: hsl(var(--primary)); }
.footer-social__icon svg { width: 1.25rem; height: 1.25rem; }

.footer-newsletter {
    text-align: center;
    padding: 1.5rem 0;
    margin-bottom: 1.5rem;
}
.footer-newsletter p {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.footer-bottom {
    border-top: 1px solid hsl(var(--border));
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}
@media (min-width: 768px) {
    .footer-bottom { flex-direction: row; justify-content: space-between; }
}
.footer-legal a {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
}
.footer-legal a:hover { color: hsl(var(--primary)); }
.footer-bottom p {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
}

/* ============================================
   SKIP LINK
   ============================================ */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: hsl(var(--primary));
    color: #fff;
    padding: 0.5rem 1rem;
    z-index: 9999;
}
.skip-link:focus { top: 0; }

/* ============================================
   BREADCRUMBS
   ============================================ */
.breadcrumbs-wrapper {
    padding-top: 6rem;
    font-size: 0.8125rem;
    font-family: var(--font-body);
}
.breadcrumbs-wrapper a { color: hsl(var(--muted-foreground)); }
.breadcrumbs-wrapper a:hover { color: hsl(var(--primary)); }

/* ============================================
   SS FORM MESSAGES
   ============================================ */
.message {
    padding: 1rem;
    border-radius: calc(var(--radius) - 2px);
    margin-bottom: 1rem;
    font-family: var(--font-body);
}
.message.good { background: hsl(150 60% 95%); color: hsl(150 60% 25%); border: 1px solid hsl(150 60% 85%); }
.message.bad { background: hsl(0 72% 95%); color: hsl(0 72% 30%); border: 1px solid hsl(0 72% 85%); }

/* ============================================
   UTILITY: hide SilverStripe admin bar in dev
   ============================================ */
#SilverStripeNavigator { z-index: 9999; }