/* ================================================================
   SITE THEME — shared public-website design system
   Loaded on every public page after style.css / public-phase2.css.
   Centralizes navbar-solid behavior, logo link fix, page headers,
   section spacing, card/form/button system and responsive rules so
   no page needs its own header/footer/logo hacks.
   ================================================================ */

/* ===== LOGO LINK FIX =====
   The brand logo is rendered as <a class="logo">Arunalaya<span>.</span></a>
   on every public page. These rules guarantee:
   - correct brand color (white on transparent hero, charcoal on solid/scrolled)
   - NO browser-default blue link color
   - NO underline (including :hover and :visited)
   - the "." accent span is always gold
   Specificity is kept high enough to win over generic <a> defaults. */
a.logo,
.logo > a {
    color: #fff;
    text-decoration: none !important;
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
/* Solid / scrolled navbar = dark text (inner pages + homepage after scroll) */
.navbar-solid a.logo,
.navbar-solid .logo > a,
.navbar.scrolled a.logo,
.navbar.scrolled .logo > a {
    color: var(--charcoal);
}
a.logo:hover,
.logo > a:hover {
    color: var(--gold);
    text-decoration: none !important;
}
a.logo:visited,
.logo > a:visited {
    color: inherit;
}
a.logo span,
.logo > a span,
a.logo:visited span,
.logo > a:visited span {
    color: var(--gold);
}
/* Managed logo image: no broken-image border or link artifact */
.logo img {
    border: none;
    outline: none;
    text-decoration: none;
    display: inline-block;
    max-height: 40px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0;
}
.logo img[src=""],
.logo img:not([src]) {
    display: none !important;
}

/* ===== NAVBAR SOLID ON INNER PAGES (Issue 3) =====
   The homepage keeps the transparent->scrolled hero effect. Inner
   pages have no hero behind the navbar, so they need a solid header
   from the start. Add class "navbar-solid" to <nav> on non-home pages. */
.navbar-solid {
    background: rgba(255, 252, 247, 0.96);
    backdrop-filter: blur(20px);
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.06);
    padding: 12px 0;
}
.navbar-solid .logo,
.navbar-solid .logo a,
.navbar-solid a.logo {
    color: var(--charcoal);
}
.navbar-solid .nav-links a {
    color: var(--charcoal);
}
.navbar-solid .hamburger {
    color: var(--charcoal);
}
/* When solid + scrolled, keep the same solid look (style.css adds .scrolled) */
.navbar-solid.scrolled {
    background: rgba(255, 252, 247, 0.98);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}
/* Active nav state */
.nav-links a.active {
    color: var(--gold) !important;
    font-weight: 600;
}
.nav-links a.active::after {
    width: 100%;
}
.nav-links .nav-cta,
.nav-links .nav-cta:link,
.nav-links .nav-cta:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    padding: 12px 30px;
    border-radius: 999px;
    white-space: nowrap;
    text-align: center;
    line-height: 1.2;
}

/* ===== PAGE HEADER (consistent top spacing for inner pages, Issue 3) =====
   Replaces ad-hoc padding-top:140px inline styles. */
.page-header {
    padding: 130px 0 40px;
    background: linear-gradient(180deg, var(--cream) 0%, var(--warm-white) 100%);
    text-align: center;
}
.page-header .section-title {
    margin-bottom: 8px;
}
.page-header .section-sub {
    max-width: 640px;
    margin: 0 auto;
}

/* ===== SECTION SPACING SYSTEM ===== */
.section {
    padding: 70px 0;
}
.section-sm {
    padding: 48px 0;
}
.section-tight {
    padding: 40px 0;
}

/* ===== CARD SYSTEM (Issue 14) ===== */
.card {
    background: #fff;
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}
.card-body {
    padding: 28px;
}
.card-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--gold);
    background: rgba(201, 168, 76, 0.12);
    margin-bottom: 18px;
}
.card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    margin-bottom: 10px;
}
.card p {
    color: #555;
    line-height: 1.7;
    font-size: 0.96rem;
}

/* ===== FORM SYSTEM (Issue 25) ===== */
.form-field {
    margin-bottom: 18px;
}
.form-field label {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--charcoal);
    margin-bottom: 7px;
    letter-spacing: 0.2px;
}
.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    padding: 14px 18px;
    border: 1.5px solid #e4e0d8;
    border-radius: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 0.96rem;
    transition: var(--transition);
    background: #faf8f4;
    color: var(--charcoal);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    border-color: var(--gold);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
    outline: none;
}
.form-field input.error,
.form-field textarea.error {
    border-color: #e53935;
    background: #fff5f5;
}
.form-error {
    color: #e53935;
    font-size: 0.82rem;
    margin-top: 5px;
    display: none;
}
.form-error.show {
    display: block;
}

/* ===== BUTTON SIZE VARIANTS (Issue 24) ===== */
.btn-sm {
    padding: 10px 22px;
    font-size: 0.88rem;
}
.btn-lg {
    padding: 18px 48px;
    font-size: 1.05rem;
}
.btn-block {
    width: 100%;
    justify-content: center;
}
.btn-success {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: #fff;
    box-shadow: 0 8px 30px rgba(46, 204, 113, 0.3);
}
.btn-success:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(46, 204, 113, 0.4);
}
.btn-danger {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    box-shadow: 0 8px 30px rgba(231, 76, 60, 0.3);
}
.btn-danger:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(231, 76, 60, 0.4);
}
.btn:disabled,
.btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ===== STATE HELPERS (Issue 27) ===== */
.state-empty,
.state-error {
    text-align: center;
    padding: 50px 20px;
    color: #999;
}
.state-empty i,
.state-error i {
    font-size: 2.4rem;
    color: #d4cdbf;
    margin-bottom: 14px;
    display: block;
}
.state-loading {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}
.state-loading .spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #eee;
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== GALLERY IMPROVEMENTS (Issue 4,18,28) ===== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
/* When managed grid is empty/hidden, collapse it so no blank space shows */
.gallery-grid:empty {
    display: none;
}
/* Clean empty-state for gallery when no items exist at all */
.gallery-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted, #888);
}
.gallery-empty-state i {
    font-size: 3rem;
    color: var(--gold, #c9a84c);
    opacity: 0.4;
    margin-bottom: 12px;
}
.gallery-empty-state p {
    font-size: 1.1rem;
    margin: 0;
}
.gallery-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #f0ede7;
    aspect-ratio: 4 / 3;
}
.gallery-item img,
.gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #ddd;
    transition: transform 0.35s ease;
}
.gallery-item video {
    background: #111;
}
.gallery-item .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 16px;
    font-weight: 500;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: #fff;
    font-size: 0.9rem;
}
.gallery-item .media-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #b0aaa0;
    gap: 8px;
    text-align: center;
    padding: 20px;
}
.gallery-item .media-error i {
    font-size: 2rem;
}

/* ===== FLOAT BUTTONS REFINEMENT (Issue 7) =====
   Consistent z-index across pages, safe spacing to avoid overlapping
   forms/buttons/gallery/booking controls/footer.  z-index 900 stays
   below modals (1000+) but above normal content. */
.float-buttons {
    position: fixed;
    bottom: 24px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 900;
}
.float-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    border: none;
    cursor: pointer;
    position: relative;
}
.float-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
    text-decoration: none;
}
/* Pulse ring for WhatsApp to draw attention subtly */
.float-btn.whatsapp::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #25d366;
    animation: floatPulse 2.4s ease-out infinite;
}
@keyframes floatPulse {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.5); opacity: 0; }
}
/* Hide pulse animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .float-btn.whatsapp::after { animation: none; }
}

/* ===== MAP CONTAINER (Issue 6) ===== */
.map-container {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    min-height: 380px;
    background: #e8eef0;
}
.map-container iframe {
    width: 100%;
    height: 100%;
    min-height: 380px;
    border: 0;
    display: block;
}
/* Graceful map placeholder when no embed configured */
.map-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 380px;
    text-align: center;
    padding: 40px 24px;
    background: linear-gradient(135deg, #eef3f0, #e3ebe6);
    color: #5a6b62;
}
.map-placeholder i {
    font-size: 3rem;
    color: var(--gold);
    margin-bottom: 16px;
}
.map-placeholder h3 {
    font-family: 'Playfair Display', serif;
    margin-bottom: 8px;
    color: var(--charcoal);
}
.map-placeholder p {
    margin-bottom: 18px;
    max-width: 360px;
}

/* ===== TYPOGRAPHY HELPERS (Issue 23) ===== */
.text-center { text-align: center; }
.text-muted { color: #888; }
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gold);
    display: inline-block;
    margin-bottom: 10px;
}

/* ===== 404 PAGE (Issue 30) ===== */
.error-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 140px 20px 60px;
}
.error-page .error-code {
    font-family: 'Playfair Display', serif;
    font-size: clamp(5rem, 18vw, 9rem);
    line-height: 1;
    color: var(--gold);
    margin-bottom: 10px;
}
.error-page h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    margin-bottom: 14px;
}
.error-page p {
    color: #777;
    max-width: 480px;
    margin: 0 auto 28px;
}
.error-page .btn-group {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== PAGE & SECTION TRANSITIONS ===== */
html {
    scroll-behavior: smooth;
}
body {
    animation: fadeInPage 0.6s ease-out;
}
@keyframes fadeInPage {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== REVEAL ON SCROLL ANIMATION ===== */
.service-card,
.facility-item,
.pricing-card,
.testimonial-card,
.faq-item,
.gallery-item,
.about-grid > div,
.card {
    animation: revealUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.service-card { animation-delay: 0.1s; }
.service-card:nth-child(2) { animation-delay: 0.2s; }
.service-card:nth-child(3) { animation-delay: 0.3s; }
.service-card:nth-child(n+4) { animation-delay: 0.4s; }
.pricing-card:nth-child(1) { animation-delay: 0.1s; }
.pricing-card:nth-child(2) { animation-delay: 0.2s; }
.pricing-card:nth-child(3) { animation-delay: 0.3s; }
.testimonial-card:nth-child(1) { animation-delay: 0.1s; }
.testimonial-card:nth-child(2) { animation-delay: 0.2s; }
.testimonial-card:nth-child(3) { animation-delay: 0.3s; }
.gallery-item:nth-child(1) { animation-delay: 0.05s; }
.gallery-item:nth-child(2) { animation-delay: 0.1s; }
.gallery-item:nth-child(3) { animation-delay: 0.15s; }
.gallery-item:nth-child(n+4) { animation-delay: 0.2s; }

/* ===== INTRO SECTIONS (Enhanced Rhythm) ===== */
.section-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 60px;
    animation: revealUp 0.8s ease-out;
}
.section-intro .eyebrow {
    display: inline-block;
    margin-bottom: 14px;
}
.section-intro h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.2;
    color: var(--charcoal);
}
.section-intro h2 span {
    color: var(--gold);
}
.section-intro p {
    font-size: 1.05rem;
    color: #666;
    line-height: 1.8;
}

/* ===== ENHANCED CARD HOVER EFFECTS ===== */
.service-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
    padding: 36px 28px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}
.service-card:hover::before {
    transform: scaleX(1);
}
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
    border-color: rgba(201, 168, 76, 0.2);
}
.service-card i {
    font-size: 2.4rem;
    color: var(--gold);
    margin-bottom: 16px;
    display: block;
    transition: transform 0.3s ease;
}
.service-card:hover i {
    transform: scale(1.1);
}
.service-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--charcoal);
    font-weight: 600;
}
.service-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* ===== FACILITY ITEM ENHANCEMENTS ===== */
.facility-item {
    border-radius: var(--radius-sm);
    padding: 28px 24px;
    background: linear-gradient(135deg, #fefcf7 0%, #f5f2ed 100%);
    border: 1px solid rgba(201, 168, 76, 0.1);
    text-align: center;
    transition: all 0.4s ease;
}
.facility-item:hover {
    background: linear-gradient(135deg, #fff 0%, #fcf8f0 100%);
    border-color: rgba(201, 168, 76, 0.3);
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(201, 168, 76, 0.15);
}
.facility-item i {
    font-size: 2rem;
    color: var(--gold);
    margin-bottom: 12px;
    display: block;
}
.facility-item h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 6px;
}
.facility-item p {
    font-size: 0.88rem;
    color: #777;
    margin: 0;
}

/* ===== CTA BUTTONS HIERARCHY ===== */
.btn {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.2);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease;
    z-index: -1;
}
.btn:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}
.btn-primary {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 28px rgba(201, 168, 76, 0.25);
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(201, 168, 76, 0.4);
}
.btn-outline {
    border: 2px solid var(--charcoal);
    color: var(--charcoal);
    background: transparent;
}
.btn-outline:hover {
    background: var(--charcoal);
    color: #fff;
    transform: translateY(-3px);
}
.btn-white {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
}
.btn-white:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-3px);
}

/* ===== ICON INDICATORS ===== */
.icon-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ===== RESPONSIVE (Issue 22) ===== */
@media (max-width: 992px) {
    .page-header { padding: 120px 0 32px; }
    .section { padding: 56px 0; }
    .section-intro {
        margin-bottom: 48px;
    }
    .section-intro h2 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .page-header { padding: 110px 0 28px; }
    .section { padding: 44px 0; }
    .section-intro {
        margin-bottom: 40px;
    }
    .section-intro h2 {
        font-size: 1.8rem;
    }
    .section-intro p {
        font-size: 0.95rem;
    }
    .service-card {
        padding: 28px 20px;
    }
    .facility-item {
        padding: 20px 16px;
    }
    .service-card i,
    .facility-item i {
        font-size: 1.8rem;
    }
    .footer-grid { grid-template-columns: 1fr 1fr !important; }
    .nav-links.open {
        background: rgba(255, 252, 247, 0.99);
        border-radius: 16px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
        padding: 16px;
    }
    .navbar-solid .nav-links.open {
        background: rgba(255, 252, 247, 0.99);
    }
    .nav-links.open a {
        color: var(--charcoal) !important;
        padding: 8px 0;
    }
}

@media (max-width: 560px) {
    .footer-grid { grid-template-columns: 1fr !important; }
    .float-buttons { bottom: 14px; right: 12px; gap: 8px; }
    .section-intro h2 {
        font-size: 1.5rem;
    }
    .service-card {
        padding: 24px 16px;
    }
    .facility-item {
        padding: 16px 12px;
    }
    .error-page {
        padding: 100px 20px 40px;
    }
    .error-page .error-code {
        font-size: 6rem;
    }
}

@media (max-width: 480px) {
    .float-btn { width: 44px; height: 44px; font-size: 1.2rem; }
    .gallery-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .page-header .section-title { font-size: 2rem !important; }
}

@media (max-width: 380px) {
    .gallery-grid { grid-template-columns: 1fr; }
    .float-buttons { bottom: 14px; right: 12px; }
}

/* ===== ACCESSIBILITY (Issue 26) ===== */
.btn:focus-visible,
a:focus-visible,
.gallery-item:focus-visible,
.float-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--charcoal);
    color: #fff;
    padding: 10px 18px;
    z-index: 10000;
    border-radius: 0 0 8px 0;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .float-btn.whatsapp::after { animation: none; }
}


/* ================================================================
   RESTRUCTURE COMPONENTS (Phase 5)
   Shared building blocks added during the public-site restructuring:
   gradient hero/visual fallbacks (no broken <img> placeholders),
   trust strip, shared CTA band, hall cards, package cards and
   generic empty states. All reuse the existing design tokens.
   ================================================================ */

/* ===== GRADIENT HERO FALLBACKS (hero slides without managed photos) ===== */
.slide-bg.gradient-1,
.slide-bg.gradient-2,
.slide-bg.gradient-3 {
    background-size: cover;
    background-position: center;
}
.slide-bg.gradient-1 {
    background-image:
        radial-gradient(ellipse at 20% 30%, rgba(201, 168, 76, 0.28), transparent 55%),
        radial-gradient(ellipse at 80% 70%, rgba(232, 212, 139, 0.14), transparent 50%),
        linear-gradient(135deg, #241d0e 0%, #3a2f16 45%, #1a1a1a 100%);
}
.slide-bg.gradient-2 {
    background-image:
        radial-gradient(ellipse at 75% 25%, rgba(201, 168, 76, 0.24), transparent 55%),
        radial-gradient(ellipse at 15% 80%, rgba(232, 212, 139, 0.12), transparent 50%),
        linear-gradient(150deg, #1c1c22 0%, #33291a 50%, #17130b 100%);
}
.slide-bg.gradient-3 {
    background-image:
        radial-gradient(ellipse at 50% 90%, rgba(201, 168, 76, 0.22), transparent 60%),
        radial-gradient(ellipse at 85% 15%, rgba(232, 212, 139, 0.12), transparent 45%),
        linear-gradient(120deg, #2b2113 0%, #1a1a1a 55%, #26200f 100%);
}

/* ===== GRADIENT VISUAL PANEL (replaces missing static photos) ===== */
.gradient-visual {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    min-height: 320px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at 25% 20%, rgba(201, 168, 76, 0.35), transparent 55%),
        radial-gradient(ellipse at 80% 85%, rgba(232, 212, 139, 0.18), transparent 50%),
        linear-gradient(140deg, #2e2413 0%, #1a1a1a 60%, #33291a 100%);
    box-shadow: var(--shadow);
}
.gradient-visual::after {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(201, 168, 76, 0.35);
    border-radius: calc(var(--radius-sm) - 8px);
    pointer-events: none;
}
.gradient-visual .gv-icon {
    font-size: 4rem;
    color: var(--gold);
    opacity: 0.85;
    text-shadow: 0 6px 30px rgba(0, 0, 0, 0.45);
}
.gradient-visual .gv-caption {
    position: absolute;
    bottom: 26px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ===== TRUST STRIP (honest "why choose us" facts) ===== */
.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}
.trust-card {
    background: #fff;
    border: 1px solid #f0ebe0;
    border-radius: var(--radius-sm);
    padding: 28px 24px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.trust-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.trust-card i {
    font-size: 2rem;
    color: var(--gold);
    margin-bottom: 12px;
    display: block;
}
.trust-card h4 {
    margin-bottom: 8px;
    font-size: 1.05rem;
}
.trust-card p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* ===== SHARED CTA BAND (replaces repeated inline gradient sections) ===== */
.cta-band {
    padding: 64px 0;
    background:
        radial-gradient(ellipse at 15% 20%, rgba(201, 168, 76, 0.18), transparent 55%),
        linear-gradient(135deg, var(--charcoal), #2a2a2a);
    color: #fff;
    text-align: center;
}
.cta-band h2 {
    font-size: 2rem;
    margin-bottom: 12px;
    color: #fff;
}
.cta-band h2 span { color: var(--gold); }
.cta-band p {
    font-size: 1rem;
    margin: 0 auto 28px;
    color: #ccc;
    max-width: 620px;
}
.cta-band .btn-group { justify-content: center; }

/* ===== HALL CARDS (Facilities page, config-driven) ===== */
.hall-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 24px;
}
.hall-card {
    position: relative;
    background: #fff;
    border: 1px solid #f0ebe0;
    border-radius: var(--radius-sm);
    padding: 30px 26px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hall-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.hall-card.featured { border: 2px solid var(--gold); }
.hall-card .hall-ribbon {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--gold);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.hall-card > i {
    font-size: 2.2rem;
    color: var(--gold);
    margin-bottom: 14px;
    display: block;
}
.hall-card h3 { font-size: 1.3rem; margin-bottom: 8px; }
.hall-card .hall-desc { color: #666; font-size: 0.92rem; margin-bottom: 16px; line-height: 1.6; }
.hall-meta {
    background: var(--cream);
    padding: 14px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
}
.hall-meta p { margin: 0; font-size: 0.9rem; }
.hall-meta p + p { margin-top: 6px; }
.hall-meta i { color: var(--gold); margin-right: 8px; }
.hall-features { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; }
.hall-features li { padding: 5px 0; color: #555; }
.hall-features i { color: var(--gold); width: 20px; }

/* ===== PACKAGE CARDS (decor / sound on Services; inclusions on Pricing) ===== */
.pkg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.pkg-card {
    background: #fff;
    border: 1px solid #f0ebe0;
    border-left: 4px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 28px 26px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pkg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pkg-card h3 { font-size: 1.15rem; margin-bottom: 4px; }
.pkg-card .pkg-price { color: var(--gold); font-weight: 700; font-size: 1.05rem; margin-bottom: 10px; display: block; }
.pkg-card p { color: #666; font-size: 0.92rem; line-height: 1.6; margin: 0; }
.pkg-card ul { list-style: none; padding: 0; margin: 0; font-size: 0.92rem; }
.pkg-card ul li { padding: 7px 0; color: #555; }
.pkg-card ul li i { color: var(--gold); width: 20px; margin-right: 6px; }

/* ===== GENERIC EMPTY STATE ===== */
.empty-state {
    text-align: center;
    padding: 56px 20px;
    color: #888;
}
.empty-state i {
    font-size: 2.8rem;
    color: var(--gold);
    opacity: 0.4;
    display: block;
    margin-bottom: 12px;
}
.empty-state p { font-size: 1rem; margin: 0; }

/* ===== RESPONSIVE (restructure components) ===== */
@media (max-width: 768px) {
    .gradient-visual { min-height: 220px; }
    .gradient-visual .gv-icon { font-size: 3rem; }
    .cta-band { padding: 48px 0; }
    .cta-band h2 { font-size: 1.6rem; }
    .trust-grid { gap: 16px; }
    .hall-grid, .pkg-grid { gap: 16px; }
}

/* ================================================================
   PHASE 8 — Owner reference-design overhaul
   1. Full-width side-to-side layout (content + footer edge to edge)
   2. Navbar: brand at far-left corner, menu left-aligned beside it,
      CTA button pinned to the far right
   3. Auto photo strip (continuous marquee, no clicks)
   4. Photo headers on service cards
   5. Boxed FAQ columns + search bar
   ================================================================ */

/* ===== 1. FULL-WIDTH SIDE-TO-SIDE LAYOUT ===== */
.container {
    max-width: 100%;
    padding-left: 36px;
    padding-right: 36px;
}

/* ===== 2. NAVBAR — logo corner, menu left, CTA far right ===== */
.navbar .container {
    justify-content: flex-start;
    gap: 10px;
    padding-left: 22px;
    padding-right: 22px;
}
.nav-links {
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 22px;
    margin-left: 14px;
}
/* Push the Book Now CTA (last item) to the far right edge */
.nav-links li:last-child {
    margin-left: auto;
}
/* Keep the mobile hamburger pinned to the right edge */
.navbar .hamburger {
    margin-left: auto;
}

/* ===== 3. AUTO PHOTO STRIP (marquee, left-to-right, no click) ===== */
.photo-strip {
    background: linear-gradient(180deg, #171208 0%, #0f0c06 100%);
    padding: 24px 0;
    overflow: hidden;
    border-top: 1px solid rgba(201, 168, 76, 0.25);
    border-bottom: 1px solid rgba(201, 168, 76, 0.25);
}
.photo-strip-track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: photoStripScroll 45s linear infinite;
}
.photo-strip:hover .photo-strip-track {
    animation-play-state: paused;
}
@keyframes photoStripScroll {
    /* -50% -> 0 keeps the duplicated halves seamless and moves
       the photos visually from left to right */
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}
.photo-strip-item {
    position: relative;
    flex: 0 0 auto;
    width: 280px;
    height: 180px;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid rgba(201, 168, 76, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    background: #241d0e;
}
.photo-strip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.photo-strip-item .strip-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.85);
    background:
        radial-gradient(ellipse at 30% 20%, rgba(201, 168, 76, 0.35), transparent 60%),
        linear-gradient(135deg, #3a2f16 0%, #241d0e 60%, #171208 100%);
}
.photo-strip-item .strip-fallback i {
    font-size: 2rem;
    color: var(--gold);
}
.photo-strip-item .strip-fallback span {
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}
.photo-strip-item .strip-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 14px 10px;
    font-size: 0.8rem;
    color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (prefers-reduced-motion: reduce) {
    .photo-strip-track { animation: none; }
}

/* ===== 4. SERVICE CARD PHOTO HEADERS ===== */
.service-card .card-photo {
    margin: -40px -28px 24px; /* cancels .service-card padding: 40px 28px */
    height: 170px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at 25% 25%, rgba(201, 168, 76, 0.4), transparent 60%),
        linear-gradient(135deg, #3a2f16 0%, #241d0e 55%, #171208 100%);
}
.service-card .card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.service-card .card-photo i {
    font-size: 2.6rem;
    color: var(--gold);
    text-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* ===== 5. FAQ — SEARCH BAR + BOXED 4-COLUMN LAYOUT ===== */
.faq-search-wrap {
    max-width: 640px;
    margin: 0 auto 44px;
    position: relative;
}
.faq-search-wrap input {
    width: 100%;
    padding: 16px 54px 16px 24px;
    border-radius: 60px;
    border: 2px solid rgba(201, 168, 76, 0.45);
    background: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--charcoal);
    outline: none;
    transition: var(--transition);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.faq-search-wrap input:focus {
    border-color: var(--gold);
    box-shadow: 0 12px 36px rgba(201, 168, 76, 0.22);
}
.faq-search-wrap .faq-search-icon {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
    font-size: 1.05rem;
    pointer-events: none;
}

.faq-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    align-items: start;
}
.faq-col {
    background: #fff;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid rgba(201, 168, 76, 0.25);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
}
.faq-col-head {
    background: linear-gradient(135deg, #7b1e2b 0%, #a51323 100%);
    color: #fff;
    padding: 15px 18px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}
.faq-col-head i { color: var(--gold-light); }
.faq-col .faq-item {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #f3eee2;
    box-shadow: none;
}
.faq-col .faq-item:last-child { border-bottom: none; }
.faq-col .faq-item:hover { box-shadow: none; border-color: #f3eee2; }
.faq-col .faq-item.active { border-color: #f3eee2; }
.faq-col .faq-question {
    padding: 15px 16px;
    font-size: 0.9rem;
    gap: 10px;
}
.faq-col .faq-answer { padding: 0 16px; }
.faq-col .faq-item.active .faq-answer { padding: 0 16px 15px; }
.faq-col .faq-answer p { font-size: 0.86rem; line-height: 1.65; }
.faq-no-results {
    display: none;
    text-align: center;
    padding: 40px 20px;
    color: #888;
    background: #fff;
    border-radius: var(--radius-sm);
    border: 1px dashed rgba(201, 168, 76, 0.5);
}
.faq-no-results.show { display: block; }
.faq-no-results i { font-size: 2rem; color: var(--gold); opacity: 0.5; display: block; margin-bottom: 10px; }
.faq-hidden { display: none !important; }

/* ===== PHASE 8 RESPONSIVE ===== */
@media (max-width: 1100px) {
    .nav-links { gap: 14px; }
    .faq-columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .container { padding-left: 20px; padding-right: 20px; }
    .navbar .container { padding-left: 16px; padding-right: 16px; }
    .nav-links { margin-left: 0; }
    /* Inside the mobile dropdown the CTA must not fly to the right */
    .nav-links li:last-child { margin-left: 0; }
    .photo-strip-item { width: 210px; height: 140px; }
    .service-card .card-photo { margin: -40px -28px 16px; height: 140px; }
}
@media (max-width: 560px) {
    .faq-columns { grid-template-columns: 1fr; }
    .photo-strip-item { width: 170px; height: 115px; }
}

/* ================================================================
   PHASE 9 — MASTER DESIGN SYSTEM (all-pages layout unification)
   One shared layout grid, spacing scale, color accents and card
   language across every public page. Everything here is ADDITIVE:
   existing classes keep working; inline quick-fixes on pages now
   have a named utility and pages are migrated to these.
   ================================================================ */

:root {
    /* Layout grid */
    --page-pad: clamp(20px, 4vw, 60px);      /* shared horizontal padding */
    --sec-space: clamp(56px, 7vw, 92px);     /* vertical section rhythm */
    --gap-lg: 32px;
    --gap-md: 24px;
    --gap-sm: 16px;
    /* Brand accents (maroon ties in with the FAQ column headers) */
    --maroon: #7b1e2b;
    --maroon-deep: #4a0e17;
    --maroon-dark: #33050c;
}

/* ===== MASTER LAYOUT GRID ===== */
/* Full available browser width with consistent inner padding.
   Navbar, hero, sections, gallery, FAQ and footer all align to the
   same left/right edges — max-width is applied only where text
   readability genuinely requires it. */
.container {
    max-width: 100%;
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
}

/* Consistent vertical rhythm for every content band */
.section {
    padding-top: var(--sec-space);
    padding-bottom: var(--sec-space);
}

/* Reading-measure helper — centered lead paragraph under a heading.
   Only used for short intro copy; body content stays left-aligned. */
.section-lead {
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
}
.section-lead p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
}

/* Shared section headline + sub-line (replaces inline heading fixes) */
.section-headline {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    text-align: center;
    margin-bottom: 12px;
    color: var(--charcoal);
}
.section-headline span { color: var(--gold); }
.section-head-sub {
    text-align: center;
    color: #888;
    margin-bottom: 40px;
}


/* Sub-section spacing — vertical gap between stacked blocks that share
   one outer .section (e.g. Facilities page halls / amenities / extras). */
.sub-section { margin-bottom: clamp(40px, 6vw, 80px); }
.sub-section:last-child { margin-bottom: 0; }

/* Devanagari (Hindi) glyph support — Inter / Playfair Display contain no
   Devanagari glyphs, so Hindi copy coming from managed config (venue
   description, footer text, help labels) would render as empty boxes.
   Noto Sans Devanagari is loaded by style.css and used as fallback. */
body, .btn, input, textarea, select, .form-field input,
.form-field textarea, .form-field select {
    font-family: 'Inter', 'Noto Sans Devanagari', sans-serif;
}
h1, h2, .footer-logo, .section-headline, .card h3, .service-card h3,
.pricing-card h3, .page-header h1, .error-page h1, a.logo, .logo > a,
.card-icon-lg + h4 {
    font-family: 'Playfair Display', 'Noto Sans Devanagari', serif;
}


/* ===== SHARED CARD / GRID UTILITIES ===== */
/* Responsive card grid used by highlights, amenities, pricing notes,
   location cards and similar blocks. */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--gap-md);
}
.card-icon-lg {
    font-size: 2.2rem;
    color: var(--gold);
    margin-bottom: 12px;
    display: block;
}
.service-card h4 {
    font-family: 'Inter', sans-serif;
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 8px;
}

/* Note card — small informational card with a gold accent edge */
.note-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--gap-md);
}
.note-card {
    padding: 26px 24px;
    background: #fff;
    border: 1px solid #f0ebe0;
    border-left: 4px solid var(--gold);
    border-radius: 14px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.note-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.note-card.alt { background: var(--cream); }
.note-card i {
    font-size: 1.7rem;
    color: var(--gold);
    margin-bottom: 12px;
    display: block;
}
.note-card h4 { margin: 0 0 8px; font-size: 1.08rem; font-weight: 600; }
.note-card p { font-size: 0.9rem; color: #666; margin: 0; line-height: 1.65; }

/* Panel band — soft inset panel grouping related content */
.panel-band {
    background: var(--cream);
    padding: clamp(28px, 5vw, 56px);
    border-radius: 20px;
}

/* Chip cards (hours / quick stats) */
.chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 18px;
}
.chip-card {
    background: var(--cream);
    padding: 22px 18px;
    border-radius: 12px;
    border: 1px solid rgba(201, 168, 76, 0.12);
    text-align: center;
}
.chip-card i {
    font-size: 1.8rem;
    color: var(--gold);
    margin-bottom: 8px;
    display: block;
}
.chip-card .chip-label { margin: 0 0 4px; font-weight: 600; color: var(--charcoal); }
.chip-card .chip-value { margin: 0; font-size: 1.05rem; color: var(--charcoal); }

/* Contact quick-action links (on the dark "methods" band) */
.contact-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 20px;
}
.contact-method {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    text-decoration: none;
    padding: 26px 20px;
    border-radius: 14px;
    background: rgba(201, 168, 76, 0.1);
    border: 1px solid rgba(201, 168, 76, 0.3);
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.contact-method:hover {
    transform: translateY(-4px);
    background: rgba(201, 168, 76, 0.18);
    border-color: rgba(201, 168, 76, 0.55);
    text-decoration: none;
}
.contact-method i { font-size: 2rem; color: var(--gold); }
.contact-method p { margin: 0; font-weight: 600; color: #fff; }
.contact-method .method-sub {
    margin: 8px 0 0;
    color: #ddd;
    font-size: 0.9rem;
    font-weight: 400;
}

/* ===== CTA BAND — premium maroon + gold (matches FAQ headers) ===== */
.cta-band {
    background:
        radial-gradient(ellipse at 18% 18%, rgba(201, 168, 76, 0.2), transparent 55%),
        radial-gradient(ellipse at 88% 82%, rgba(201, 168, 76, 0.1), transparent 50%),
        linear-gradient(135deg, var(--maroon-deep) 0%, var(--maroon) 55%, var(--maroon-dark) 100%);
    border-top: 1px solid rgba(201, 168, 76, 0.35);
    border-bottom: 1px solid rgba(201, 168, 76, 0.35);
    color: #fff;
}
.cta-band p { color: #f2e7dc; }

/* ===== FAQ MANAGED GRID — use the page width (2 columns on desktop) ===== */
.faq-grid {
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

/* ===== LEGAL PAGES (Terms / Privacy) — centralized here so the legal
   pages no longer carry their own inline <style> blocks. Same master
   header, readable max-width content, consistent typography. ===== */
.legal-page {
    padding: 40px 0 84px;
    background: #fff;
}
.legal-page .container {
    max-width: 980px;
    margin: 0 auto;
}
.legal-page h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    margin-bottom: 12px;
    color: var(--charcoal);
}
.legal-page h2 {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    margin-top: 30px;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--charcoal);
}
.legal-page h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    margin-top: 22px;
    margin-bottom: 8px;
    font-weight: 600;
}
.legal-page p {
    color: #444;
    margin-bottom: 12px;
    line-height: 1.8;
}
.legal-page ul,
.legal-page ol {
    padding-left: 24px;
    margin-bottom: 16px;
    color: #444;
    line-height: 1.8;
}
.legal-page li { margin-bottom: 6px; }
.legal-page a { color: var(--gold); }
.legal-page strong { color: var(--charcoal); }

/* ===== NAVBAR — keep the row comfortable on medium screens ===== */
@media (min-width: 769px) and (max-width: 1180px) {
    .nav-links { gap: 12px; }
    .nav-links a { font-size: 0.86rem; }
    .nav-links .nav-cta,
    .nav-links .nav-cta:link,
    .nav-links .nav-cta:visited {
        min-width: 118px;
        padding: 10px 18px;
    }
    .logo img { max-height: 34px; }
    a.logo, .logo > a { font-size: 1.5rem; }
}

/* ===== FOOTER — full width, aligned to the master grid ===== */
.footer-premium {
    width: 100%;
}
.footer-grid {
    align-items: start;
}

/* Reduced motion: skip the whole-page fade as well */
@media (prefers-reduced-motion: reduce) {
    body { animation: none; }
    .service-card, .facility-item, .pricing-card, .testimonial-card,
    .faq-item, .gallery-item, .about-grid > div, .card { animation: none; }
}

/* ===== PHASE 9 RESPONSIVE ===== */
@media (max-width: 992px) {
    .section { padding-top: 56px; padding-bottom: 56px; }
    .section-lead { margin-bottom: 40px; }
    .legal-page { padding-bottom: 64px; }
}
@media (max-width: 640px) {
    .faq-grid { grid-template-columns: 1fr; }
    .section-lead p { font-size: 0.95rem; }
}