@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Poppins:wght@300;400;500;600&display=swap');

:root {
    --gold: #d4a34b;
    --gold-light: #e6c581;
    --gold-hover: #b88636;
    --dark-bg: #111413;
    --dark-footer: #1c1c1c;
    --text-dark: #222222;
    --text-gray: #666666;
    --white: #ffffff;
    --bg-light: #fbfbfb;
    --bg-cream: #faf5eb;
    
    --font-head: 'Playfair Display', serif;
    --font-body: 'Poppins', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--white);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
[id] { scroll-margin-top: 140px; }
/* In-page anchors (the History hero's CTA, the Kapruk section on the reservation page)
   used to jump instantly. Landing 700px down with no motion, and only a #fragment added
   to the URL to show for it, reads as though the page reloaded itself — which is exactly
   how the History CTA was reported. Animating the move makes it legible as a scroll.
   Overridden under prefers-reduced-motion below. */
html { scroll-behavior: smooth; }
.text-gold { color: var(--gold); }
.text-center { text-align: center; }
.relative { position: relative; }
.z-10 { z-index: 10; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    cursor: pointer;
}
.btn-gold {
    background-color: var(--gold);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(212, 163, 75, 0.4);
}
.btn-gold:hover { background-color: var(--gold-hover); transform: translateY(-2px); }

.btn-outline {
    background-color: transparent;
    border: 1px solid rgba(255,255,255,0.4);
    color: var(--white);
}
.btn-outline i { margin-left: 8px; font-size: 1.1rem; }
.btn-outline:hover { background-color: rgba(255,255,255,0.1); border-color: var(--white); }

/* Header */
.header {
    position: fixed;
    top: 20px; left: 50%;
    transform: translateX(-50%);
    width: 96%; max-width: 1600px;
    z-index: 100;
}
.nav-container {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px 10px 25px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
}
.logo-area { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo-icon {
    width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #a32929 0%, #d4a34b 100%);
    display: flex; align-items: center; justify-content: center;
    color: white; border: 2px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.logo-text { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.logo-title { font-weight: 600; font-size: 0.85rem; color: #333; }
.logo-sinhala { font-size: 0.75rem; color: #555; font-weight: 500; }
.logo-subtitle { font-size: 0.65rem; color: #888; }

.nav-links { display: flex; flex-wrap: nowrap; gap: 2px; align-items: center; }
.nav-links li { flex-shrink: 0; }
.nav-links li a {
    font-size: 0.82rem; font-weight: 500; color: #444; white-space: nowrap;
    padding: 6px 12px; border-radius: 20px; transition: all 0.3s;
}
.nav-links li a:hover { color: var(--gold); }
.nav-links li a.active { border: 1px solid var(--gold); color: var(--gold); }
.nav-links li a i { font-size: 0.6rem; margin-left: 3px; }

.nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-actions .btn { padding: 10px 18px; font-size: 0.82rem; white-space: nowrap; }
.lang-switch {
    background: #f0f0f0; padding: 8px 16px; border-radius: 20px; white-space: nowrap;
    font-size: 0.85rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 5px;
    position: relative;
}
.lang-switch i { font-size: 0.6rem; }
.lang-switch .dropdown-menu { min-width: 140px; }
.lang-switch .dropdown-menu li a.active { color: var(--gold); font-weight: 600; }

/* Dropdown menu (About Us) */
.nav-links li.has-dropdown { position: relative; }
.nav-links li.has-dropdown::after,
.lang-switch.has-dropdown::after {
    content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
}
.dropdown-menu {
    position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
    background: var(--white); border-radius: 16px; box-shadow: 0 20px 45px rgba(0,0,0,0.15);
    padding: 8px; min-width: 220px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 50;
}
.nav-links li.has-dropdown:hover .dropdown-menu,
.nav-links li.has-dropdown.open .dropdown-menu,
.lang-switch.has-dropdown:hover .dropdown-menu,
.lang-switch.has-dropdown.open .dropdown-menu {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.dropdown-menu li a {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px;
    font-size: 0.85rem; font-weight: 500; color: #444; white-space: nowrap;
}
.dropdown-menu li a i { width: 16px; text-align: center; font-size: 0.85rem; margin: 0; color: var(--gold); }
.dropdown-menu li a:hover { background: var(--bg-cream); color: var(--gold); }
.nav-links li.has-dropdown > a i.fa-chevron-down { transition: transform 0.25s ease; }
.nav-links li.has-dropdown:hover > a i.fa-chevron-down,
.nav-links li.has-dropdown.open > a i.fa-chevron-down { transform: rotate(180deg); }

/* Mobile nav toggle */
.nav-toggle {
    display: none; background: none; border: none; font-size: 1.2rem; color: #333;
    cursor: pointer; padding: 8px 12px; border-radius: 50%; transition: background 0.3s;
}
.nav-toggle:hover { background: rgba(0,0,0,0.05); }

.nav-links-mobile-actions { display: none; }

@media (max-width: 1150px) {
    .nav-container { position: relative; flex-wrap: wrap; }
    .logo-subtitle { display: none; }
    .nav-toggle { display: flex; align-items: center; justify-content: center; order: 3; }
    .nav-actions { order: 2; }
    .nav-actions .btn-gold { padding: 10px 18px; font-size: 0.8rem; }
    .lang-switch span, .lang-switch { font-size: 0.8rem; }

    .nav-links {
        position: absolute; top: calc(100% + 12px); left: 0; right: 0; order: 4;
        background: var(--white); border-radius: 20px; flex-direction: column; align-items: stretch;
        gap: 2px; padding: 14px; box-shadow: 0 20px 45px rgba(0,0,0,0.18);
        opacity: 0; visibility: hidden; transform: translateY(-10px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
        max-height: 80vh; overflow-y: auto;
    }
    .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); }
    .nav-links li { width: 100%; }
    .nav-links li a { display: flex; justify-content: space-between; padding: 13px 14px; border-radius: 10px; }
    .nav-links li a.active { border: none; background: var(--bg-cream); }

    .nav-links .dropdown-menu {
        position: static; transform: none; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto;
        display: none; padding: 2px 0 6px 12px; min-width: 0; margin-top: 2px;
    }
    .nav-links li.has-dropdown.open .dropdown-menu { display: block; transform: none; }
    .nav-links .dropdown-menu li a { justify-content: flex-start; gap: 10px; }

    .lang-switch.has-dropdown.open .dropdown-menu {
        display: block; opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
    }
}
@media (max-width: 560px) {
    .nav-actions .btn-gold { display: none; }

    /* .nav-links is absolutely positioned at these widths, so the bar itself holds only
       the logo, the language switch and the toggle. .nav-container wraps and .logo-area
       was flex-shrink: 0 with nowrap text, so on narrow phones (344px, 360px) the logo
       could not give up any width and the toggle was pushed onto a second row inside the
       pill — leaving it stranded under the logo instead of beside the language switch.
       Let the logo shrink instead; the ellipsis only shows up when the width demands it. */
    .nav-container { flex-wrap: nowrap; }
    .logo-area { flex-shrink: 1; min-width: 0; }
    .logo-text { min-width: 0; }
    .logo-title, .logo-sinhala { overflow: hidden; text-overflow: ellipsis; }
    .nav-links-mobile-actions {
        display: flex; flex-direction: column; gap: 10px; width: 100%;
        padding: 6px 4px 2px; margin-top: 6px; border-top: 1px solid rgba(0,0,0,0.08);
    }
    .nav-links-mobile-actions .btn-gold {
        width: 100%; padding: 13px 14px; justify-content: center; border-radius: 30px;
    }
}
@media (max-width: 480px) {
    .nav-container { padding: 8px 10px 8px 14px; }
    .logo-area { gap: 8px; }
    .logo-icon { width: 38px; height: 38px; }
    .logo-title { font-size: 0.72rem; }
    .logo-sinhala { font-size: 0.62rem; }
}
/* At 360px and below the 28-character English name is within a few pixels of the space
   left by the language switch and the toggle. One step down buys it back, so the brand
   name reads in full rather than falling back on the ellipsis above. */
@media (max-width: 380px) {
    .logo-title { font-size: 0.67rem; }
    .logo-sinhala { font-size: 0.58rem; }
}

/* Home Hero Section — background image stays fixed while content scrolls over it */
.hero {
    position: relative;
    min-height: 900px;
    background-color: #111;
    background-image:
        linear-gradient(90deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.6) 40%, rgba(0,0,0,0) 100%),
        url('hero-stupa-night.webp');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat;
    background-attachment: fixed, fixed;
    overflow: hidden;
}

/* iOS/tablets handle fixed backgrounds poorly — fall back to normal scroll */
@media (max-width: 1024px) {
    .hero { background-attachment: scroll, scroll; }
}
.hero-content { position: relative; z-index: 2; padding-top: 180px; }
.hero-text { max-width: 600px; color: var(--white); }
.hero-tagline { color: var(--gold); font-size: 0.9rem; font-weight: 500; margin-bottom: 15px; }
.hero-title { font-family: var(--font-head); font-size: 4rem; line-height: 1.1; margin-bottom: 25px; font-weight: 700; }
.hero-desc { font-size: 1rem; color: #ddd; margin-bottom: 40px; }
.hero-btns { display: flex; gap: 15px; flex-wrap: wrap; }
.hero-wave {
    /* Colour the wave's lower band ends in — white on every page but History, which
       blends into its cream section. Used by the seam backfill below. */
    --wave-end: #fff;
    position: absolute; bottom: -1px; left: 0; width: 100%; height: auto; z-index: 5;
    pointer-events: none;
}
.hero-wave svg { display: block; width: 100%; height: 180px; }
/* The svg's bottom edge and the hero's own clipped bottom edge are two independently
   rounded subpixel boundaries. Where a viewport's device-pixel ratio makes them land on
   different physical pixels, the hero's dark background showed through underneath the
   wave as a hairline — reported across phone, tablet and desktop widths alike. So:
   bottom:-1px pushes the svg a whole pixel past the edge, and this strip backfills the
   band in the colour the wave ends in, leaving nothing behind it to show through.
   Overshooting with transform:translateY() was the previous attempt; a transform
   promotes the wave to its own composited layer, which is what let the two edges round
   apart to begin with. */
.hero-wave::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: var(--wave-end);
}
.hero-wave-cream { --wave-end: var(--bg-cream); }

/* Page Hero Section (for internal pages) */
.page-hero {
    position: relative;
    min-height: 820px;
    background-color: #111;
    background-image:
        linear-gradient(90deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.1) 100%),
        url('history-hero-day.svg');
    background-size: cover, cover;
    background-position: center, center 78%;
    background-repeat: no-repeat;
    background-attachment: fixed, fixed;
    overflow: hidden;
}
@media (max-width: 1024px) {
    .page-hero { background-attachment: scroll, scroll; }
}
/* .hero-wave sits at z-index 5 and covers the bottom 180px of the hero, while this
   content is at z-index 2 — so anything in that band gets hidden behind the gold
   wave. The hero only has a min-height, so reserving the band as padding lets it
   grow instead: on desktop the 820px floor already clears it and nothing moves, but
   on phones (where the hero shrinks and the text wraps to more lines) it stops the
   description being cut off. Same reasoning as .hero-content on small screens. */
.page-hero-content { position: relative; z-index: 2; padding-top: 180px; padding-bottom: 195px; max-width: 800px; }
.page-title { font-family: var(--font-head); font-size: 4.5rem; line-height: 1.1; margin-bottom: 25px; font-weight: 700; color: white; }
.page-title span { color: var(--gold); }
/* Sinhala sets ascenders and descenders well outside the Latin x-height band, so the
   1.1 display line-height that suits the English headings makes stacked Sinhala lines
   collide and look cramped. Loosen the leading (and the gap down to the description)
   for Sinhala only — these are ratios, so they hold at every breakpoint. */
html[lang="si"] .page-title,
html[lang="si"] .hero-title { line-height: 1.45; margin-bottom: 30px; }
html[lang="si"] .hero-tagline { line-height: 1.7; margin-bottom: 18px; }
html[lang="si"] .hero-desc { line-height: 1.9; }

/* News detail hero. A post title is real, arbitrary-length content — unlike the fixed
   one or two words the other page heroes carry — so it gets its own smaller scale that
   still steps down with the viewport. These were inline styles on the element, which
   outrank every media query and left long Sinhala titles at desktop size on a phone,
   overflowing into the wave. */
.news-detail-hero { min-height: 420px; }
.news-detail-hero .page-title { font-size: 2.6rem; }
@media (max-width: 1024px) {
    .news-detail-hero .page-title { font-size: 2.2rem; }
}
@media (max-width: 768px) {
    .news-detail-hero .page-title { font-size: 1.9rem; }
}
@media (max-width: 480px) {
    .news-detail-hero .page-title { font-size: 1.6rem; }
}

/* Hero / Page hero — mobile & tablet type scale.
   Must stay after the base .hero-title/.page-title rules above: these overrides have
   the same specificity, so source order is what makes them win. */
@media (max-width: 1024px) {
    /* Both titles used to hold their full desktop size all the way down to 768px, so on
       a tablet a long title (e.g. the Incumbent's full name) filled the hero and wrapped
       to three lines. Step them down across the 769–1024px band. */
    .hero-title { font-size: 3.2rem; }
    .page-title { font-size: 3.4rem; }

    /* .hero-wave is anchored to the bottom of the hero and overlaps its last ~178px, but
       the hero is only min-height — so once the copy is tall enough to reach that band,
       the CTAs end up underneath the gold wave. Sinhala hits this well before English
       does: it sets larger line-heights (title 1.45 vs 1.1, description 1.9) and the
       translations run longer, which is why the buttons broke out of the carousel at
       430, 440, 540 and 768px in Sinhala only. Reserving the band as padding lets the
       hero grow past its floor instead; where the copy is short the min-height still
       wins and nothing moves. .page-hero-content already does exactly this. */
    .hero-content { padding-bottom: 195px; }
}
@media (max-width: 768px) {
    .hero { min-height: 640px; }
    .hero-content { padding-top: 145px; }
    .hero-title { font-size: 2.6rem; }

    .page-hero { min-height: 560px; }
    .page-hero-content { padding-top: 145px; }
    .page-title { font-size: 2.8rem; }
}
@media (max-width: 480px) {
    .hero { min-height: 600px; }
    .hero-content { padding-top: 140px; }
    .hero-title { font-size: 2.1rem; }
    .hero-desc { font-size: 0.9rem; margin-bottom: 28px; }
    .hero-btns .btn { padding: 11px 22px; font-size: 0.85rem; }

    .page-hero { min-height: 480px; }
    .page-hero-content { padding-top: 140px; }
    .page-title { font-size: 2.1rem; }
}
/* Small phones: the two hero CTAs stop fitting side by side, and because they are
   sized by their own label they wrap into two ragged pills of different widths.
   The exact wrap point is locale-dependent (~333px in English, ~357px in Sinhala),
   so stack them above both thresholds and let each fill the row — consistent
   equal-width buttons instead of a layout that changes shape with the translation. */
@media (max-width: 420px) {
    .hero-btns { flex-direction: column; align-items: stretch; gap: 12px; }
    .hero-btns .btn { width: 100%; }
    /* Stacking adds a row; the wave-clearing padding-bottom that keeps the second button
       out from under the gold wave is inherited from the 1024px block above. */
}

/* Section Titles */
.section-title { margin-bottom: 50px; }
.lotus-icon { color: var(--gold); font-size: 1.8rem; margin-bottom: 10px; }
.section-title h2, .section-heading { font-family: var(--font-head); font-size: 2.5rem; color: var(--text-dark); margin-bottom: 10px; }
.title-divider {
    width: 80px; height: 2px; background: var(--gold); margin: 15px auto 0; position: relative;
}
.title-divider::before {
    content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 10px; height: 10px; background: var(--gold);
}
.title-divider-left {
    width: 80px; height: 2px; background: var(--gold); margin: 15px 0; position: relative;
}
.title-divider-left::before {
    content: ''; position: absolute; top: -4px; left: 20px; transform: rotate(45deg);
    width: 10px; height: 10px; background: var(--gold);
}
@media (max-width: 480px) {
    .section-title h2, .section-heading { font-size: 1.9rem; }
}

/* History Content */
.history-content-section { padding: 120px 0; background: var(--bg-cream); position: relative; z-index: 1; overflow: hidden; }
.history-content-section::before, .history-content-section::after {
    content: '';
    position: absolute;
    width: 500px; height: 500px;
    background: url('mandala-bg.webp') center / contain no-repeat;
    opacity: 0.15;
    z-index: -1;
}
.history-content-section::before { top: 0%; left: -250px; }
.history-content-section::after { bottom: 0%; right: -250px; }
.history-flex { display: flex; align-items: center; gap: 80px; }
.history-text { flex: 1; padding-right: 20px; }
.subtitle-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.subtitle-wrap span { font-weight: 700; letter-spacing: 2px; font-size: 0.85rem; color: var(--gold); text-transform: uppercase; }
.history-text h2 { font-family: var(--font-head); font-size: 3.5rem; color: var(--text-dark); margin-bottom: 30px; font-weight: 600; line-height: 1.1; }
.history-p { margin-bottom: 25px; color: #555; font-size: 1rem; line-height: 1.9; }
.history-images { flex: 1; position: relative; display: flex; align-items: stretch; justify-content: flex-end; gap: 4px; }
.hist-img { width: 48%; border-radius: 12px; object-fit: cover; height: 450px; box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
.img-old { filter: sepia(0.6) grayscale(0.5); }
.play-btn-center {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 60px; height: 60px; background: rgba(255,255,255,1); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1.3rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15), 0 0 0 10px rgba(255,255,255,0.4); z-index: 2; cursor: pointer; transition: 0.3s;
}
.play-btn-center:hover { transform: translate(-50%, -50%) scale(1.1); color: var(--gold-hover); box-shadow: 0 5px 20px rgba(0,0,0,0.2), 0 0 0 10px rgba(255,255,255,0.6); }

/* 1024, not the old 900, to match the breakpoint the rest of the page steps at. In the
   901–1024px band the two columns were still side by side, which left the image pair
   about 200px wide each while they kept their 450px height — object-fit: cover then
   cropped them to slivers. */
@media (max-width: 1024px) {
    .history-content-section { padding: 90px 0; }
    .history-flex { flex-direction: column; gap: 40px; }
    .history-text { padding-right: 0; }
    .history-text h2 { font-size: 2.8rem; }
    .history-images { justify-content: center; }
    .hist-img { height: 320px; }
}
@media (max-width: 768px) {
    .history-content-section { padding: 75px 0; }
    .history-text h2 { font-size: 2.6rem; }
    .hist-img { height: 280px; }
}
@media (max-width: 480px) {
    .history-content-section { padding: 70px 0; }
    .history-text h2 { font-size: 2.4rem; }
    .history-images { flex-direction: column; }
    .hist-img { width: 100%; height: 240px; }
}

/* Dark Features (History) */
/* One flat colour, the same --dark-footer the footer uses, so the band reads as a single
   black. Anything with a left-to-right component — a diagonal gradient, or the old
   right-hand mandala overlay — showed up as two different blacks meeting in a seam. */
.dark-features {
    position: relative; color: white; padding: 120px 0; overflow: hidden;
    background: var(--dark-footer);
}
.dark-features-bg { position: absolute; inset: 0; pointer-events: none; }
.buddha-face {
    position: absolute; left: -5%; top: 0; height: 100%; width: 45%;
    background: url('footer-buddha.webp') center right / contain no-repeat;
    opacity: 0.9;
    mix-blend-mode: screen;
    mask-image: linear-gradient(to right, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
}
.features-grid { display: flex; justify-content: flex-end; gap: 40px; position: relative; z-index: 2; margin-left: 35%; }
.feature-item { flex: 1; border-left: 1px solid rgba(255,255,255,0.1); padding-left: 30px; }
.feature-item .f-icon { width: 60px; height: 60px; color: var(--gold); font-size: 1.8rem; margin-bottom: 25px; border: 1px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.feature-item h4 { font-family: var(--font-head); font-size: 1.3rem; margin-bottom: 15px; font-weight: 500; letter-spacing: 0.5px; }
.feature-item p { color: #999; font-size: 0.9rem; line-height: 1.8; }
@media (max-width: 1024px) {
    .features-grid { margin-left: 0; flex-direction: column; background: rgba(0,0,0,0.6); padding: 30px; border-radius: 20px; }
    /* Stacked, the figure is a centred watermark behind the whole panel rather than a
       shape pulled off the left edge behind a right-hand column of text. left: -5% and
       the right-hand background anchor both belong to that desktop composition, and
       neither survives the change: at `contain` the artwork scales to fit the box width
       (the box is far taller than the 1549x1662 image), so it already fills the width and
       there is nothing for the right anchor to slide. That left -5% was the only
       horizontal offset still applying, which is what pushed it off centre. */
    .buddha-face {
        left: 0; width: 100%; opacity: 0.3;
        background-position: center center;
        mask-image: none; -webkit-mask-image: none;
    }
}

/* Attractive Places */
.attractive-places { padding: 100px 0; background: var(--bg-cream); position: relative; overflow: hidden; }
.attractive-places::before {
    content: ''; position: absolute; inset: 0; background: url('mandala-bg.webp') center / cover no-repeat; opacity: 0.05; z-index: 0; pointer-events: none;
}
.places-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; position: relative; z-index: 1; }
.place-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.06); transition: transform 0.3s; }
.place-card:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
.place-card img { width: 100%; height: 180px; object-fit: cover; }
.place-info { padding: 15px; text-align: center; }
.place-info h5 { font-family: var(--font-head); font-size: 1.05rem; margin-bottom: 5px; color: var(--text-dark); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; }
.place-info h5 i { color: var(--gold); font-size: 0.9rem; }
.place-info p { font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: 1px; }
/* Services — closing note */
.services-closing-section { padding: 0 0 80px; background: var(--white); }
.services-closing-card {
    max-width: 900px; margin: 0 auto; background: var(--bg-cream);
    border-radius: 18px; padding: 30px 34px; border-left: 4px solid var(--gold);
}
.services-closing-card p { font-size: 0.93rem; color: var(--text-gray); line-height: 1.9; }

/* History — uniqueness of the Chaitya */
.history-unique-section { padding: 20px 0 80px; background: var(--white); }
.history-unique-intro { max-width: 820px; margin: 0 auto 30px; text-align: center; color: var(--text-gray); line-height: 1.9; }
.history-unique-list { display: flex; flex-direction: column; gap: 18px; max-width: 900px; margin: 0 auto; }
.history-unique-item { background: var(--bg-light); border-left: 4px solid var(--gold); border-radius: 14px; padding: 22px 26px; }
.history-unique-item p { font-size: 0.95rem; color: var(--text-gray); line-height: 1.85; }

/* This block had no tablet step at all, so it kept the desktop 80px tail and 26px card
   padding right down to the phone breakpoint. */
@media (max-width: 1024px) {
    .history-unique-section { padding: 20px 0 60px; }
    .history-unique-item { padding: 20px 22px; }
}
@media (max-width: 768px) {
    .history-unique-section { padding: 10px 0 50px; }
    .history-unique-list { gap: 14px; }
    .history-unique-item { padding: 18px 18px; }
}

.place-body { margin-top: 12px; text-align: left; border-top: 1px solid #eee; padding-top: 12px; }
.place-body p { font-size: 0.85rem; color: #555; text-transform: none; letter-spacing: 0; line-height: 1.65; margin-bottom: 10px; }
.place-body p:last-child { margin-bottom: 0; }

/* Stepped on the site's own 1024/768/480 breakpoints. The old 640 and 400 left a
   641–768px band showing three cards barely 200px wide, and a 401–480px band showing
   two around 140px — narrower than the 180px-tall photo above them. */
@media (max-width: 1024px) {
    .attractive-places { padding: 80px 0; }
    .places-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .attractive-places { padding: 65px 0; }
    .places-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 480px) {
    .places-grid { grid-template-columns: 1fr; }
}

/* ============ Sacred Sites — section layout ============
   Each shrine is a full-width row (image beside prose, sides alternating) rather than a
   cell in the 5-up .places-grid, which is built for one-line teasers: in that grid the
   text column was 186px / ~27 characters per line, far below the 45-75 that reads
   comfortably, and stretched each card to ~2400px tall. */
.sacred-sites-section { padding: 20px 0 90px; background: var(--white); }

.site-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 0 auto 20px; }
.site-jump a {
    font-size: 0.8rem; font-weight: 500; color: var(--text-gray);
    background: var(--bg-cream); border: 1px solid #efe7d6; border-radius: 20px;
    padding: 8px 16px; transition: 0.25s;
}
.site-jump a:hover, .site-jump a:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--white); }

.site-row {
    display: flex; align-items: flex-start; gap: 50px;
    max-width: 1080px; margin: 0 auto;
    padding: 55px 0; border-top: 1px solid #eee;
    scroll-margin-top: 130px;   /* the header is position:fixed — keep anchored rows clear of it */
}
.site-row:nth-of-type(even) { flex-direction: row-reverse; }
.site-media { flex: 0 0 40%; }
.site-media img {
    width: 100%; height: 340px; object-fit: cover;
    border-radius: 20px; box-shadow: 0 15px 40px rgba(0,0,0,0.10);
}
.site-content { flex: 1 1 auto; min-width: 0; }
.site-eyebrow { font-size: 0.75rem; color: var(--gold); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; }
/* The shrine icon is under a third the size of the name beside it. As a centred flex
   item it tracked the middle of the whole block, so the moment a name wrapped it slid
   down to sit against the second line, detached from the words it belongs to — which is
   most names on a phone, and nearly every one in Sinhala, where the script sets wider.
   Inline instead: the glyph rides the first line's baseline at any width or font size,
   with no breakpoint-by-breakpoint offsets to keep in sync. */
.site-name { font-family: var(--font-head); font-size: 1.75rem; color: var(--text-dark); line-height: 1.5; margin-top: 8px; }
.site-name i { color: var(--gold); font-size: 1.05rem; margin-right: 10px; }
/* Sinhala stacks vowel and consonant marks above and below the base glyph, so two
   wrapped lines nearly collide at the leading that suits the Latin headings. Ratios,
   not pixels, so this holds at every breakpoint. */
html[lang="si"] .site-eyebrow { line-height: 1.8; }
html[lang="si"] .site-name { line-height: 1.75; }
/* Caps the measure in characters rather than pixels, so the line length stays in the
   readable 45-75 band at every breakpoint. Side by side the text column is already
   narrower than this, so the cap only bites once the row stacks. */
.site-body { margin-top: 22px; max-width: 65ch; }
.site-body p { font-size: 1rem; line-height: 1.9; color: var(--text-gray); margin-bottom: 20px; }
.site-body p:last-child { margin-bottom: 0; }

.site-more { margin-top: 4px; }
.site-more > summary {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: 0.85rem; font-weight: 600; color: var(--gold);
    list-style: none; padding: 6px 0;
}
.site-more > summary::-webkit-details-marker { display: none; }
.site-more > summary::after {
    content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.7rem;
    transition: transform 0.25s ease;
}
.site-more[open] > summary::after { transform: rotate(180deg); }
/* Swap the toggle's label with its open state so an expanded section doesn't keep
   inviting you to "Read more". Both labels are in the markup; only one is shown. */
.site-more > summary .site-less-label,
.site-more[open] > summary .site-more-label { display: none; }
.site-more[open] > summary .site-less-label { display: inline; }
.site-more > summary:hover { color: var(--gold-hover); }
.site-more > p { margin-top: 18px; }

/* Tablet. Stacking at 900px meant an iPad-width screen got a full-bleed image with the
   text below it still capped at the reading measure, leaving a wide empty gutter down
   the right. There is room for the side-by-side row at that width — the text column is
   then naturally about 50 characters — so hold the two-column layout to 768px, matching
   the breakpoints the rest of the site uses. */
@media (max-width: 1024px) {
    .site-row { gap: 34px; padding: 45px 0; }
    .site-media { flex: 0 0 38%; }
    .site-media img { height: 280px; }
    .site-name { font-size: 1.55rem; }
    .site-body p { font-size: 0.95rem; line-height: 1.85; margin-bottom: 16px; }
}
@media (max-width: 768px) {
    .site-row, .site-row:nth-of-type(even) { flex-direction: column; gap: 26px; padding: 40px 0; }
    .site-media { flex: none; width: 100%; }
    .site-media img { height: 240px; border-radius: 16px; }
    .site-name { font-size: 1.45rem; }
    /* Stacked, the text spans the row instead of a column, so allow a slightly longer
       measure — otherwise it re-creates the same empty gutter on narrow tablets. */
    .site-body { margin-top: 16px; max-width: 75ch; }
}

/* Footer Straight Variant */
.footer-straight::before { display: none; }
.footer-straight { border-top: 4px solid var(--gold); padding-top: 20px; }


/* Incumbent Section */
.incumbent-section {
    position: relative;
    background: var(--white);
    padding: 0 0 5px;
    z-index: 10;
}
.incumbent-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('mandala-bg.webp') center 0px / cover no-repeat;
    opacity: 0.45;
    pointer-events: none;
}
.incumbent-flex { display: flex; align-items: center; position: relative; z-index: 2; }
.incumbent-card {
    background: linear-gradient(135deg, #ffffff 40%, #faf3e4 100%); padding: 50px; border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08); width: 45%; position: relative; z-index: 4; margin-right: -40px; margin-top: 30px;
}
.badge {
    background: linear-gradient(90deg, #c99712, #e6c581); color: var(--white); padding: 7px 16px; border-radius: 15px;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 1.5px; margin-bottom: 20px; display: inline-block;
}
.incumbent-card h2 { font-family: var(--font-head); font-size: 2.2rem; color: var(--text-dark); line-height: 1.2; margin-bottom: 20px; }
.incumbent-card p { font-size: 0.9rem; color: var(--text-gray); margin-bottom: 20px; }
.signature { height: 40px; opacity: 0.8; }
.inc-arrow {
    position: absolute; right: -25px; top: 50%; transform: translateY(-50%);
    width: 50px; height: 50px; background: var(--gold); border-radius: 50%;
    color: white; display: flex; align-items: center; justify-content: center;
    border: 5px solid var(--white); font-size: 1.1rem; cursor: pointer;
}
.inc-img-wrap { width: 60%; position: relative; z-index: 3; margin-top: -200px; }
.inc-img-wrap .inc-img {
    width: 100%; height: 500px; object-fit: cover; object-position: center 20%;
    border-radius: 40px; border: 10px solid var(--white);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
}
.deco { position: absolute; pointer-events: none; z-index: 1; }
.deco-left { left: -30px; bottom: 40px; width: 170px; opacity: 0.9; }
/* right: 0, not -20px. .incumbent-section cannot clip its overflow — .inc-img-wrap uses a
   -200px top margin to overlap the hero above, so overflow:hidden would cut the portrait
   off — which left this lotus sticking 20px past the right edge of the viewport and giving
   the home page a horizontal scrollbar. Both decorations are hidden below 1024px, so the
   overflow only ever showed on desktop. 20px on a decorative flower is not a visible
   difference; a page that scrolls sideways is. */
.deco-lotus { right: 0; bottom: -80px; width: 220px; z-index: 5; }

@media (max-width: 1024px) {
    .incumbent-flex { flex-direction: column; align-items: stretch; }
    .inc-img-wrap { width: 100%; margin-top: 0; order: 1; }
    .inc-img-wrap .inc-img { height: 360px; border-radius: 24px; border-width: 6px;
        /* Stacked layout puts this image flush against the bottom of the hero (desktop pulls
           it up 200px instead). The default 0 25px 60px shadow reaches 35px ABOVE the image
           (blur - y-offset), painting a soft grey ramp over the hero that stopped dead at the
           image's white border — a hairline across the full width. Negative spread keeps the
           shadow entirely below the top edge: -30 + 40 - 10 = 0px of upward reach. */
        box-shadow: 0 30px 40px -10px rgba(0, 0, 0, 0.18); }
    .incumbent-card { width: 100%; margin: -60px 0 0; order: 2; }
    .inc-arrow, .deco-left, .deco-lotus { display: none; }
}
@media (max-width: 480px) {
    .incumbent-card { padding: 32px 24px; margin-top: -40px; }
    .incumbent-card h2 { font-size: 1.7rem; }
    .inc-img-wrap .inc-img { height: 260px; }
}

/* Welcome */
.welcome-section { padding: 40px 0 100px; background: var(--white); }
.welcome-text { font-size: 1rem; color: var(--text-gray); max-width: 700px; margin: 0 auto 50px; }

/* Welcome Slideshow (latest gallery items) */
.welcome-slideshow {
    position: relative; max-width: 900px; margin: -20px auto 50px;
    border-radius: 16px; overflow: hidden; aspect-ratio: 16/7;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}
.ws-slide {
    position: absolute; inset: 0; opacity: 0; visibility: hidden;
    transition: opacity 0.9s ease;
}
.ws-slide.active { opacity: 1; visibility: visible; }
.ws-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-caption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 24px 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    color: var(--white); font-size: 0.95rem; text-align: left;
}
.ws-dots { position: absolute; right: 18px; bottom: 14px; display: flex; gap: 8px; z-index: 2; }
.ws-dot {
    width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.35); cursor: pointer; padding: 0;
}
.ws-dot.active { background: var(--gold); border-color: var(--gold); }
@media (max-width: 700px) {
    .welcome-slideshow { aspect-ratio: 4/3; margin-top: 0; }
}

.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
@media (max-width: 900px) {
    .video-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 560px) {
    .video-grid { grid-template-columns: 1fr; }
}
.video-card { position: relative; border-radius: 15px; overflow: hidden; aspect-ratio: 16/9; box-shadow: 0 10px 20px rgba(0,0,0,0.1); cursor: pointer; }
.video-card img,
.video-card video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }

/* Video Lightbox */
.video-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; }
.video-lightbox.open { display: block; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.85); cursor: pointer; }
.lightbox-inner {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(90vw, 1000px);
}
.lightbox-player { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 25px 80px rgba(0,0,0,0.6); }
.lightbox-player iframe,
.lightbox-player video { width: 100%; height: 100%; display: block; border: 0; }
.lightbox-close {
    position: absolute; top: -46px; right: 0;
    width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,0.15); color: #fff; font-size: 1rem;
    display: flex; align-items: center; justify-content: center; transition: background 0.3s;
}
.lightbox-close:hover { background: var(--gold); }
.video-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%); }
.play-overlay {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 50px; height: 50px; background: rgba(255,255,255,0.9); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: var(--gold); box-shadow: 0 0 0 8px rgba(255,255,255,0.3); z-index: 2;
}
.video-label { position: absolute; bottom: 15px; left: 20px; color: var(--white); font-weight: 500; font-size: 0.9rem; z-index: 2; }

/* Legacy Section */
.legacy-section {
    background-color: #0f1e14;
    background-image:
        linear-gradient(90deg, rgba(8,15,10,0.8) 0%, rgba(8,15,10,0.4) 45%, rgba(8,15,10,0.05) 100%),
        url('legacy-stupa.webp');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat;
    background-attachment: fixed, fixed;
    padding: 85px 0 55px; position: relative; color: var(--white);
}
.legacy-overlay { display: none; }
.legacy-content { display: flex; align-items: center; position: relative; z-index: 2; }
.legacy-text { flex: 0 0 40%; padding-left: 85px; }
.legacy-text h2 { font-family: var(--font-head); font-size: 2.5rem; line-height: 1.3; margin-bottom: 12px; }
.legacy-text .title-divider-left { width: 32px; margin: 0 0 24px; }
.legacy-text .title-divider-left::before { display: none; }
.legacy-text p { font-size: 0.92rem; color: #e6e6e6; max-width: 380px; margin-bottom: 34px; line-height: 1.9; }
.legacy-visuals { flex: 1; position: relative; min-height: 440px; }
.stupa-outline {
    position: absolute; top: -20px; left: -55px; width: 480px;
    mix-blend-mode: screen;
    mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 55%, transparent 82%);
    -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, black 55%, transparent 82%);
}
/* Legacy auto-sliding gallery (3 visible) */
.legacy-gallery {
    position: absolute; left: 40px; bottom: 4px;
    display: flex; align-items: center; gap: 12px;
}
.lg-viewport { width: 540px; overflow: hidden; border-radius: 14px; }
.lg-track { display: flex; gap: 18px; transition: transform 0.6s ease; }
.lg-track img {
    width: 168px; height: 100px; flex: 0 0 168px; object-fit: cover; border-radius: 14px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); transition: border-color 0.3s; cursor: pointer;
}
.lg-track img:hover { border-color: var(--gold); }
.lg-arrow {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.45);
    color: var(--white); font-size: 0.85rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s;
}
.lg-arrow:hover { background: var(--gold); border-color: var(--gold); }

@media (max-width: 1024px) {
    .legacy-section { background-attachment: scroll, scroll; }
    .legacy-content { flex-direction: column; align-items: stretch; }
    .legacy-text { padding-left: 0; flex: 1 1 auto; }
    .legacy-text p { max-width: 100%; }
    .legacy-visuals { min-height: 380px; width: 100%; }
    .stupa-outline { left: 50%; transform: translateX(-50%); }
    .legacy-gallery { left: 50%; transform: translateX(-50%); max-width: 92vw; }
    .lg-viewport { width: min(540px, 85vw); }
}
@media (max-width: 480px) {
    .legacy-visuals { min-height: 300px; }
    .lg-track img { width: 120px; height: 76px; flex-basis: 120px; }
    .lg-viewport { width: min(400px, 80vw); }
}

/* News */
.news-section { padding: 100px 0; background: var(--bg-light); position: relative; overflow: hidden; z-index: 0; }
.news-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('mandala-bg.webp') center / cover no-repeat;
    opacity: 0.4;
    pointer-events: none;
}
.news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; position: relative; z-index: 1; }
.news-item {
    background: var(--white); border-radius: 18px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    position: relative; cursor: pointer;
}
.news-item:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); }
.news-media { position: relative; height: 200px; overflow: hidden; }
.news-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.news-item:hover .news-img { transform: scale(1.08); }
.news-media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 45%);
    pointer-events: none;
}
.news-date {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    background: linear-gradient(160deg, #e6c581, var(--gold));
    color: var(--white); width: 60px; height: 66px; border-radius: 12px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}
.date-day { font-size: 1.4rem; font-weight: 700; line-height: 1; }
.date-mo { font-size: 0.62rem; letter-spacing: 1px; margin-top: 3px; }
.date-yr { font-size: 0.6rem; opacity: 0.9; }
.news-content { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.news-content h4 { font-family: var(--font-head); font-size: 0.98rem; line-height: 1.45; margin-bottom: 14px; color: var(--text-dark); flex: 1; }
@media (max-width: 1024px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
}
/* The hero wave already lays ~90px of white above this section, so the full 100px
   desktop padding on top of it reads as dead space once the viewport is short. */
@media (max-width: 768px) {
    .news-section { padding: 55px 0 70px; }
}
@media (max-width: 640px) {
    .news-grid { grid-template-columns: 1fr; }
}
.read-more { color: var(--gold); font-size: 0.85rem; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }

/* Whole-card link.
   The title anchor stretches an invisible ::after over the entire card, so a click
   anywhere navigates while the card still exposes exactly ONE real link — named with
   the article title — to keyboard and screen-reader users. z-index 3 clears the
   .news-date badge (z-index 2). "Read More" stays a working <a> underneath as the
   no-CSS fallback, but is taken out of the tab order as a duplicate. */
.news-title-link { color: inherit; display: block; }
.news-title-link::after {
    content: ''; position: absolute; inset: 0; z-index: 3;
}
.news-title-link:focus { outline: none; }
.news-title-link:focus-visible::after { outline: 3px solid var(--gold); outline-offset: -3px; }
.news-item:hover .news-content h4,
.news-item:focus-within .news-content h4 { color: var(--gold); }
.news-content h4 { transition: color 0.25s ease; }
.news-item:hover .read-more { gap: 9px; }
.read-more { transition: gap 0.25s ease; }

/* Services */
.services-section { padding: 2px 0 100px; background: var(--bg-light); position: relative; overflow: hidden; }
.services-lotus {
    position: absolute;
    right: -60px;
    bottom: -70px;
    width: 300px;
    opacity: 0.9;
    pointer-events: none;
    z-index: 0;
}
.services-panel { background: var(--bg-cream); border-radius: 30px; padding: 70px 50px; box-shadow: 0 10px 30px rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.05); }
@media (max-width: 640px) {
    .services-panel { padding: 40px 22px; border-radius: 20px; }
    .services-lotus { width: 180px; right: -40px; bottom: -40px; }
}
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 50px; }
.service-card {
    background: var(--white); border-radius: 20px; overflow: hidden; text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06); transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.service-card:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(0,0,0,0.12); }
.service-media { position: relative; height: 150px; overflow: hidden; }
.service-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.service-card:hover .service-media img { transform: scale(1.08); }
.service-media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,0.35) 100%);
}
.service-icon-wrap {
    width: 62px; height: 62px; margin: -31px auto 0; position: relative; z-index: 2;
    background: var(--white); border: 1px solid var(--gold); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1.4rem;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    transition: background 0.3s ease, color 0.3s ease;
}
.service-card:hover .service-icon-wrap { background: var(--gold); color: var(--white); }
.service-body { padding: 18px 20px 32px; }
.service-card h4 { font-family: var(--font-head); font-size: 1.1rem; margin-bottom: 10px; }
.service-card p { font-size: 0.8rem; color: var(--text-gray); }
@media (max-width: 1024px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .services-grid { grid-template-columns: 1fr; }
}

/* Footer */
.footer { background: var(--dark-footer); color: #ddd; position: relative; }
.footer::before {
    content: ''; position: absolute; top: -30px; left: 0; width: 100%; height: 60px;
    background: var(--dark-footer); border-radius: 50% 50% 0 0 / 100% 100% 0 0; z-index: 0;
}
/* The dark background is repeated here (same colour as .footer) so that .footer-buddha,
   which sits at z-index -1 inside this stacking context, has an opaque backdrop to blend
   its mix-blend-mode: screen against. Without it the watermark renders as a grey box. */
.footer-container { position: relative; z-index: 1; padding: 60px 20px 40px; max-width: 1200px; margin: 0 auto; background: var(--dark-footer); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: 30px; }
.f-logo-area { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; }
.f-logo-icon { width: 45px; height: 45px; background: linear-gradient(135deg, #a32929, #d4a34b); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; border: 1px solid white; }
.f-logo-text h4 { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: white; }
.f-logo-text p { font-size: 0.75rem; color: #888; }
.f-desc { font-size: 0.85rem; color: #aaa; margin-bottom: 25px; line-height: 1.6; }
.social-links { display: flex; gap: 10px; }
.social-links a { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: white; transition: 0.3s; }
.social-links a:hover { background: var(--gold); border-color: var(--gold); }
.footer-links h5, .footer-contact h5 { font-family: var(--font-head); font-size: 1.1rem; color: white; margin-bottom: 25px; }
.footer-links ul li { margin-bottom: 12px; }
.footer-links ul li a { color: #aaa; font-size: 0.85rem; transition: 0.3s; }
.footer-links ul li a:hover { color: var(--gold); }
.footer-contact ul li { display: flex; align-items: flex-start; gap: 12px; color: #aaa; font-size: 0.85rem; margin-bottom: 15px; }
.c-icon { width: 30px; height: 30px; background: rgba(212,163,75,0.1); border-radius: 50%; color: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.8rem; }
.footer-buddha {
    position: absolute; right: 4%; bottom: 12px;
    width: clamp(110px, 20vw, 230px);  /* scales with the viewport instead of stepping at one breakpoint */
    height: auto;
    max-width: 40%;                    /* never let it dominate a narrow single-column footer */
    mix-blend-mode: screen; /* melts the black canvas into the dark footer */
    pointer-events: none;
    z-index: -1;            /* sits behind the footer text, so it can only ever read as a watermark */
}
/* Same dark as the rest of the footer — the bar used to be solid gold, which split the
   footer into two colour blocks. A hairline rule now does the separating instead, and it
   is width-matched to .footer-container so it lines up with the columns above it. */
.footer-bottom {
    background: var(--dark-footer); color: #8d8d8d; font-size: 0.8rem; font-weight: 400;
    border-top: 1px solid rgba(255,255,255,0.09);
    max-width: 1200px; margin: 0 auto;
    padding: 18px 20px; display: flex; align-items: center; gap: 20px;
}
.footer-bottom-copyright { flex: 1; text-align: left; }
.footer-bottom-credits { text-align: right; line-height: 1.5; }

@media (max-width: 700px) {
    .footer-bottom { flex-direction: column; text-align: center; gap: 6px; }
    .footer-bottom-copyright, .footer-bottom-credits { text-align: center; }
}

@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
}
@media (max-width: 560px) {
    .footer-grid { grid-template-columns: 1fr; gap: 34px; }
    /* Single-column footer: the CONNECT block and the scroll-to-top button now occupy the
       bottom-right corner, so soften the watermark further and keep it clear of them. */
    .footer-buddha { opacity: 0.45; bottom: 0; right: 2%; }
}

/* Falling temple flowers (araliya) */
.flower-rain {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 60; /* above sections, below the floating header (z-index 100) */
}
.falling-flower {
    position: absolute;
    top: -60px;
    animation: flowerFall linear infinite;
    will-change: transform;
}
.falling-flower img {
    display: block;
    width: 100%;
    height: 100%;
    animation: flowerSway ease-in-out infinite alternate;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12));
    will-change: transform;
}
@keyframes flowerFall {
    from { transform: translateY(-8vh); }
    to   { transform: translateY(112vh); }
}
@keyframes flowerSway {
    from { transform: translateX(-22px) rotate(-40deg); }
    to   { transform: translateX(22px) rotate(220deg); }
}
@media (prefers-reduced-motion: reduce) {
    .flower-rain { display: none; }
    /* Anchors still land in the right place, they just get there without the travel. */
    html { scroll-behavior: auto; }
}

/* About Intro Section */
.about-intro-section { padding: 100px 0 60px; background: var(--white); position: relative; overflow: hidden; }
.about-intro-section::before, .about-intro-section::after {
    content: ''; position: absolute; width: 600px; height: 600px;
    background: url('mandala-bg.webp') center / contain no-repeat;
    opacity: 0.08; z-index: 0; pointer-events: none;
}
.about-intro-section::before { top: -200px; right: -250px; }
.about-intro-section::after { bottom: -200px; left: -250px; }
.about-intro-grid { display: flex; gap: 60px; align-items: center; position: relative; z-index: 1; }
.intro-img-wrap { flex: 1; }
/* object-position keeps the stupa's spire in frame — a centred crop cuts the top off
   once the box is wider than the photo's 4:3 ratio (tablet and mobile especially). */
.intro-img-wrap img { width: 100%; height: 400px; object-fit: cover; object-position: center top; border-radius: 80px 80px 15px 15px; box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
.intro-text-wrap { flex: 1.2; padding-right: 20px; }
.intro-text-wrap h3 { font-family: var(--font-head); font-size: 2.2rem; color: var(--text-dark); margin-bottom: 25px; line-height: 1.3; font-weight: 600; }
.intro-text-wrap p { font-size: 0.95rem; color: #555; margin-bottom: 20px; line-height: 1.8; }
.intro-text-wrap .divider-line { width: 100%; height: 1px; background: #eee; margin: 25px 0; }

/* Playfair Display carries no Sinhala glyphs, so Sinhala headings fall back to a system
   font whose vowel marks sit well above and below the baseline. The 1.3 leading tuned for
   Latin leaves those marks nearly touching between lines — give Sinhala its own leading
   and a little more room before the divider. Ratios, so the 480px font-size step follows. */
html[lang="si"] .intro-text-wrap h3 { line-height: 1.7; margin-bottom: 32px; }

@media (max-width: 900px) {
    .about-intro-grid { flex-direction: column; gap: 40px; }
    .intro-text-wrap { padding-right: 0; }
    .intro-img-wrap img { height: 320px; }
    /* .hero-wave overlays the bottom 180px of the hero and its lower ~70px are already
       blank white sitting over the top of this section, so the desktop 100px top padding
       lands on top of that and reads as a big empty band once the hero shrinks. The wave
       supplies the breathing room here — the padding only needs to clear it. */
    .about-intro-section { padding: 45px 0 40px; }
}
@media (max-width: 480px) {
    .about-intro-section { padding: 25px 0 30px; }
    .intro-text-wrap h3 { font-size: 1.7rem; }
    .intro-img-wrap img { height: 240px; border-radius: 40px 40px 15px 15px; }
    /* A 560px-tall portrait fills most of a phone screen on its own — rein it in a
       little, while still showing the stupa whole. */
    .timeline-photo { max-height: 420px; }
}

/* The historical photographs between the timeline paragraphs.
   These were letterboxed into a fixed 250px band with object-fit: cover, so both were
   centre-cropped — and the stupa shot is a portrait taken from below, which meant the
   crop threw away the pinnacle and left only a slice of the dome. The whole stupa was
   in the photo all along; the box was the problem.

   So: no cropping. width/height are left to the image and bounded instead, which suits
   either orientation — the portrait stupa is held to 560px tall and centred, while the
   landscape procession shot still spans the column. */
.timeline-photo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 560px;
    margin: 0 auto;
    border-radius: 12px;
}

/* Timeline Section */
/* overflow-x: clip, not overflow: hidden. The decorative mandala below hangs 300px off the
   right edge and still has to be trimmed, but `hidden` makes this a scroll container, and a
   scroll container is exactly what stops position: sticky working inside it — which the text
   column relies on. `clip` trims without creating one. */
.timeline-section { padding: 40px 0 120px; background: var(--white); position: relative; overflow-x: clip; }
.timeline-section::before {
    content: ''; position: absolute; right: -300px; top: 100px; width: 800px; height: 800px;
    background: url('mandala-bg.webp') center / contain no-repeat;
    opacity: 0.06; z-index: 0; pointer-events: none;
}
.timeline-flex { display: flex; gap: 60px; position: relative; z-index: 1; }
/* The timeline beside this runs far longer than the text, so the left column used to end
   halfway down and leave a tall band of white while the reader carried on scrolling. Holding
   it in place keeps the explanation next to the entries it explains.

   Three parts, and it needs all three:

   - align-self, because a flex child stretches to the row's full height by default, and
     something already as tall as its container has nowhere to travel;
   - top: 130px, to clear the header, which is fixed and floats 20px from the top;
   - max-height, which is the one that actually made it hold. This column carries two
     full-width photographs as well as the text, so it is taller than the screen — and a
     sticky element taller than the viewport travels with the page until its own bottom
     arrives, which looks exactly like not being sticky at all. Capping it to the viewport
     gives it somewhere to stick, and its own overflow takes what does not fit. */
.timeline-text-side {
    flex: 1.2;
    position: sticky; top: 130px; align-self: flex-start;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    /* Keeps the scrollbar off the words rather than overlapping them. */
    padding-right: 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 163, 75, 0.5) transparent;
}
/* WebKit ignores scrollbar-color, so the gold thumb is repeated here — a default grey bar
   inside a cream section reads as a rendering fault rather than a control. */
.timeline-text-side::-webkit-scrollbar { width: 6px; }
.timeline-text-side::-webkit-scrollbar-track { background: transparent; }
.timeline-text-side::-webkit-scrollbar-thumb { background: rgba(212, 163, 75, 0.5); border-radius: 3px; }
.timeline-text-side:hover::-webkit-scrollbar-thumb { background: rgba(212, 163, 75, 0.8); }
.timeline-text-side p { font-size: 0.95rem; color: #555; margin-bottom: 25px; line-height: 1.9; }
.timeline-text-side h5 { font-family: var(--font-head); font-size: 1.2rem; color: var(--text-dark); margin-top: 40px; margin-bottom: 15px; font-weight: 600; }
.timeline-text-side ol { margin-left: 20px; color: #555; font-size: 0.95rem; margin-bottom: 30px; line-height: 1.8; }
.timeline-text-side ol li { margin-bottom: 8px; }
.timeline-text-side img { width: 100%; border-radius: 12px; margin: 30px 0; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.timeline-visual-side { flex: 1; position: relative; padding-left: 40px; margin-top: 20px; }
.timeline-line { position: absolute; left: 40px; top: 15px; bottom: 0; width: 2px; background: rgba(212, 163, 75, 0.25); }
.timeline-item { position: relative; margin-bottom: 35px; display: flex; align-items: stretch; gap: 20px; }
.timeline-dot {
    position: absolute; left: -7.5px; top: 25px; width: 16px; height: 16px;
    background: var(--gold); border: 3px solid var(--white); border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(212, 163, 75, 0.15); z-index: 2;
}
.timeline-card {
    background: var(--white); border: 1px solid rgba(212, 163, 75, 0.15);
    border-radius: 15px; padding: 18px 24px; display: flex; align-items: center; gap: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.03); flex: 1; margin-left: 25px; transition: 0.3s; min-height: 70px;
}
.timeline-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.06); border-color: rgba(212, 163, 75, 0.5); }
.tl-icon { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; background: #fff; }
.tl-text { flex: 1; font-size: 0.85rem; color: #444; font-weight: 500; line-height: 1.5; }
.tl-text span { display: block; font-size: 0.75rem; color: #888; font-weight: 400; margin-top: 4px; }

@media (max-width: 900px) {
    /* Once .timeline-flex stacks, the text column runs straight into the timeline cards,
       so the section's own padding is the only gap left to trim. */
    .timeline-section { padding: 20px 0 80px; }
    /* Stacked, the text sits above the timeline rather than beside it — there is no second
       column to hold it against, and a sticky block would just cover the entries. */
    .timeline-flex { flex-direction: column; gap: 30px; }
    .timeline-text-side { position: static; max-height: none; overflow-y: visible; padding-right: 0; }
    .timeline-visual-side { padding-left: 20px; }
    .timeline-line { left: 20px; }
    .timeline-dot { left: -7.5px; }
    .timeline-card { margin-left: 15px; }
}
@media (max-width: 480px) {
    .timeline-section { padding: 10px 0 70px; }
    .timeline-card { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 18px; }
}

/* ============ Rituals Page ============ */
.rituals-intro-section { padding: 110px 0 60px; background: var(--white); text-align: center; }
.rituals-intro-section p { max-width: 700px; margin: 20px auto 0; color: var(--text-gray); font-size: 0.98rem; line-height: 1.9; }

.schedule-section { padding: 60px 0 110px; background: var(--bg-light); position: relative; overflow: hidden; }
.schedule-section::before {
    content: ''; position: absolute; inset: 0; background: url('mandala-bg.webp') center / cover no-repeat;
    opacity: 0.3; pointer-events: none; z-index: 0;
}
.schedule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; position: relative; z-index: 1; }
.schedule-card {
    background: var(--white); border-radius: 20px; padding: 38px 30px; text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05); border-top: 3px solid var(--gold);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.schedule-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0,0,0,0.1); }
.schedule-time {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: linear-gradient(90deg, #e6c581, var(--gold)); color: var(--white);
    padding: 8px 20px; border-radius: 30px; font-weight: 600; font-size: 0.85rem; margin-bottom: 22px;
}
.schedule-card h4 { font-family: var(--font-head); font-size: 1.3rem; margin-bottom: 12px; color: var(--text-dark); }
.schedule-card p { font-size: 0.88rem; color: var(--text-gray); line-height: 1.7; }

.ritual-types-section { padding: 100px 0; background: var(--white); }
.ritual-types-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 50px; }
.ritual-type-card {
    display: flex; gap: 22px; background: var(--bg-cream); border-radius: 18px; padding: 28px;
    align-items: flex-start; transition: transform 0.3s ease;
}
.ritual-type-card:hover { transform: translateY(-5px); }
.ritual-type-icon {
    width: 58px; height: 58px; border-radius: 50%; background: var(--white); color: var(--gold);
    border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; flex-shrink: 0;
}
.ritual-type-card h4 { font-family: var(--font-head); font-size: 1.1rem; margin-bottom: 8px; color: var(--text-dark); }
.ritual-type-card p { font-size: 0.85rem; color: var(--text-gray); line-height: 1.7; }

@media (max-width: 1024px) {
    .schedule-grid { grid-template-columns: 1fr; }
    .ritual-types-grid { grid-template-columns: 1fr; }
}
/* These paddings are tuned for a tall desktop viewport. On a phone the hero wave already
   lays white above the intro, and the schedule's 110px bottom meets the ritual types'
   100px top — 210px of empty page between two sections. Tighten both. */
@media (max-width: 768px) {
    .rituals-intro-section { padding: 55px 0 35px; }
    .schedule-section { padding: 40px 0 60px; }
    .ritual-types-section { padding: 55px 0 60px; }
}
@media (max-width: 480px) {
    .schedule-card { padding: 28px 22px; }
    .ritual-type-card { padding: 22px; flex-direction: column; text-align: center; align-items: center; }
    .contact-info-card { padding: 28px 20px; }
}

/* ============ Services Page (detail) ============ */
.services-hero-intro { padding: 110px 0 20px; background: var(--white); text-align: center; }
.services-hero-intro p { max-width: 700px; margin: 20px auto 0; color: var(--text-gray); font-size: 0.98rem; line-height: 1.9; }
.services-full-section { padding: 60px 0 110px; background: var(--bg-light); }
.services-full-section .services-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .services-full-section .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .services-full-section .services-grid { grid-template-columns: 1fr; } }

.cta-band {
    background: var(--dark-bg); color: var(--white); padding: 70px 0; text-align: center;
    position: relative; overflow: hidden;
}
.cta-band::before {
    content: ''; position: absolute; inset: 0; background: url('mandala-bg.webp') center / cover no-repeat;
    opacity: 0.12; pointer-events: none;
}
.cta-band h3 { font-family: var(--font-head); font-size: 2.2rem; margin-bottom: 16px; position: relative; z-index: 1; }
.cta-band p { color: #ccc; margin-bottom: 30px; position: relative; z-index: 1; }
.cta-band .btn { position: relative; z-index: 1; }
@media (max-width: 480px) {
    .cta-band { padding: 50px 0; }
    .cta-band h3 { font-size: 1.6rem; }
}

/* ============ Gallery Page ============ */
.gallery-filter { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 40px 0 50px; }
.gallery-filter button {
    padding: 9px 22px; border-radius: 30px; border: 1px solid rgba(0,0,0,0.1); background: var(--white);
    color: var(--text-gray); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.3s;
}
.gallery-filter button.active, .gallery-filter button:hover { background: var(--gold); border-color: var(--gold); color: var(--white); }

.gallery-section { padding: 30px 0 110px; background: var(--white); }
.gallery-masonry { columns: 4 260px; column-gap: 22px; }
.gallery-item {
    break-inside: avoid; margin-bottom: 22px; border-radius: 16px; overflow: hidden; position: relative;
    cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}
.gallery-item img { width: 100%; display: block; transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item::after {
    content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 45%);
    opacity: 0; transition: opacity 0.3s ease;
}
.gallery-item:hover::after { opacity: 1; }
.gallery-caption {
    position: absolute; left: 16px; bottom: 14px; color: var(--white); font-weight: 500; font-size: 0.85rem;
    opacity: 0; transform: translateY(8px); transition: all 0.3s ease; z-index: 1;
}
.gallery-item:hover .gallery-caption { opacity: 1; transform: translateY(0); }
.gallery-zoom {
    position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,0.9); color: var(--gold); display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: all 0.3s ease; font-size: 0.85rem;
}
.gallery-item:hover .gallery-zoom { opacity: 1; }

.image-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; }
.image-lightbox.open { display: block; }
.image-lightbox .lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.9); cursor: pointer; }
.image-lightbox .lightbox-inner {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    max-width: 90vw; max-height: 86vh;
}
.image-lightbox img { max-width: 90vw; max-height: 86vh; border-radius: 10px; display: block; box-shadow: 0 25px 80px rgba(0,0,0,0.6); }
.image-lightbox .lightbox-close {
    position: absolute; top: -46px; right: 0; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,0.15); color: #fff; font-size: 1rem;
    display: flex; align-items: center; justify-content: center; transition: background 0.3s;
}
.image-lightbox .lightbox-close:hover { background: var(--gold); }

/* Step through the gallery without closing and re-opening for every photo.

   The arrows overlay the picture's edges rather than sitting outside it. Outside was a
   mistake: the image is capped at 90vw, so the gutter beside it is 5vw whatever the
   screen — 38px on an iPad, where a 46px button offset by 66px lands off the side of the
   viewport. Only a monitor wider than 2200px would ever have had room. Overlaid, they
   land in the same place at every size, so there is no width where they go missing. */
.image-lightbox .lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
    /* Dark rather than translucent white: these sit on the photograph itself now, and a
       pale wash disappears against a bright sky. */
    background: rgba(0,0,0,0.55); color: #fff; font-size: 1.05rem;
    display: flex; align-items: center; justify-content: center; transition: background 0.3s;
}
.image-lightbox .lightbox-nav:hover { background: var(--gold); }
.image-lightbox .lightbox-prev { left: 12px; }
.image-lightbox .lightbox-next { right: 12px; }
/* A single visible photo has nothing to step to — JS hides both arrows via this flag. */
.image-lightbox[data-single="true"] .lightbox-nav { display: none; }
.image-lightbox .lightbox-counter {
    position: absolute; bottom: -34px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.75); font-size: 0.8rem; letter-spacing: 1px;
}
.image-lightbox[data-single="true"] .lightbox-counter { display: none; }

@media (max-width: 700px) {
    /* Smaller targets so the pair does not cover a phone-width photo, but still the 40px
       minimum a thumb needs. */
    .image-lightbox .lightbox-nav { width: 40px; height: 40px; font-size: 0.95rem; }
    .image-lightbox .lightbox-prev { left: 8px; }
    .image-lightbox .lightbox-next { right: 8px; }
    .image-lightbox .lightbox-counter { bottom: -28px; }
}

@media (max-width: 1024px) { .gallery-masonry { columns: 3 220px; } }
@media (max-width: 640px) { .gallery-masonry { columns: 2 160px; column-gap: 14px; } .gallery-item { margin-bottom: 14px; } }

/* ============ Pagination ============ */
.site-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 50px; flex-wrap: wrap; }
.pg-link {
    min-width: 38px; height: 38px; padding: 0 6px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 500; color: var(--text-dark); border: 1px solid rgba(0,0,0,0.08); background: var(--white);
    transition: 0.25s;
}
.pg-link:hover { border-color: var(--gold); color: var(--gold); }
.pg-active { background: var(--gold); color: var(--white); border-color: var(--gold); }
.pg-disabled { opacity: 0.35; pointer-events: none; }

/* ============ News Detail Page ============ */
.news-detail-section { padding: 100px 0 110px; background: var(--white); }
.news-detail-hero-img { width: 100%; height: 420px; object-fit: cover; border-radius: 20px; margin-bottom: 40px; box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
.news-detail-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; color: var(--gold); font-size: 0.85rem; font-weight: 600; flex-wrap: wrap; }
.news-detail-section h1 { font-family: var(--font-head); font-size: 2.3rem; color: var(--text-dark); margin-bottom: 25px; line-height: 1.25; }
@media (max-width: 640px) {
    .news-detail-section { padding: 40px 0 70px; }
    .news-detail-hero-img { height: 220px; margin-bottom: 26px; }
    .news-detail-section h1 { font-size: 1.7rem; }
}
.news-detail-body { font-size: 1rem; color: #555; line-height: 1.95; max-width: 780px; }
.news-detail-body p { margin-bottom: 22px; }
.news-related { margin-top: 70px; padding-top: 50px; border-top: 1px solid #eee; }
.news-related h3 { font-family: var(--font-head); font-size: 1.4rem; margin-bottom: 28px; }

/* ============ Contact Page ============ */
.contact-info-section { padding: 100px 0 60px; background: var(--white); }
.contact-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.contact-info-card {
    background: var(--bg-cream); border-radius: 20px; padding: 36px 28px; text-align: center;
    transition: transform 0.3s ease;
}
.contact-info-card:hover { transform: translateY(-6px); }
.contact-info-icon {
    width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 18px;
    background: linear-gradient(160deg, #e6c581, var(--gold)); color: var(--white);
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
    box-shadow: 0 8px 20px rgba(212,163,75,0.35);
}
.contact-info-card h4 { font-family: var(--font-head); font-size: 1.1rem; margin-bottom: 10px; color: var(--text-dark); }
.contact-info-card p { font-size: 0.88rem; color: var(--text-gray); line-height: 1.7; }

.contact-form-section { padding: 40px 0 110px; background: var(--white); }
.contact-form-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: stretch; }
.contact-form-wrap { background: var(--bg-light); border-radius: 24px; padding: 46px; }
.contact-form-wrap h3 { font-family: var(--font-head); font-size: 1.7rem; margin-bottom: 8px; color: var(--text-dark); }
.contact-form-wrap > p { color: var(--text-gray); font-size: 0.9rem; margin-bottom: 30px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 0.8rem; font-weight: 600; color: var(--text-dark); }
.form-field input, .form-field textarea {
    padding: 13px 16px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.1); background: var(--white);
    font-family: var(--font-body); font-size: 0.9rem; color: var(--text-dark); resize: vertical; transition: border-color 0.3s;
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--gold); }
.contact-form-wrap .btn { border: none; margin-top: 6px; }

.map-wrap {
    border-radius: 24px; overflow: hidden; position: relative; min-height: 380px;
    background:
        linear-gradient(160deg, rgba(212,163,75,0.16), rgba(17,20,19,0.05)),
        repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 40px),
        var(--bg-cream);
    display: flex; align-items: center; justify-content: center;
}
.map-pin {
    display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 20px;
}
.map-pin i { font-size: 2.6rem; color: var(--gold); }
.map-pin h5 { font-family: var(--font-head); font-size: 1.15rem; color: var(--text-dark); }
.map-pin p { font-size: 0.85rem; color: var(--text-gray); max-width: 240px; }

@media (max-width: 1024px) {
    .contact-info-grid { grid-template-columns: 1fr; }
    .contact-form-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .contact-info-section { padding: 70px 0 40px; }
    .contact-form-section { padding: 20px 0 70px; }
    .contact-form-wrap { padding: 28px 22px; border-radius: 18px; }
    .contact-form-wrap h3 { font-size: 1.4rem; }
    .map-wrap { min-height: 260px; }
}

/* ============ Reservation Page ============ */
.reservation-hero {
    position: relative; padding: 200px 0 90px; background: var(--bg-cream); overflow: hidden;
}
.reservation-hero::before {
    content: ''; position: absolute; inset: 0; background: url('mandala-bg.webp') center / cover no-repeat;
    opacity: 0.35; pointer-events: none;
}
.reservation-hero-img {
    position: absolute; top: 0; right: 0; width: 46%; height: 100%; z-index: 0;
    object-fit: cover; object-position: left center;
    mask-image: linear-gradient(to right, transparent 0%, black 30%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%);
    opacity: 0.9;
}
.reservation-hero-content { position: relative; z-index: 1; max-width: 560px; }
.reservation-hero-content h1 { font-family: var(--font-head); font-size: 3rem; color: var(--text-dark); margin-bottom: 4px; }
.reservation-hero-content p { color: var(--text-gray); font-size: 1rem; margin-top: 18px; }

.reservation-section { padding: 0 0 120px; background: var(--bg-cream); position: relative; }
.reservation-card {
    background: var(--white); border-radius: 28px; box-shadow: 0 30px 70px rgba(0,0,0,0.1);
    padding: 50px; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 55px;
    position: relative; z-index: 2; margin-top: -40px;
}
.reservation-col-title {
    display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
}
.reservation-col-title .rc-icon {
    width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(160deg, #e6c581, var(--gold));
    color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(212,163,75,0.35);
}
.reservation-col-title h3 { font-family: var(--font-head); font-size: 1.3rem; color: var(--text-dark); }

/* Calendar widget */
.calendar-widget { background: var(--bg-light); border-radius: 18px; padding: 22px; }
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cal-header h4 { font-family: var(--font-head); font-size: 1.1rem; color: var(--text-dark); }
.cal-nav {
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); background: var(--white);
    color: var(--text-gray); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.25s;
}
.cal-nav:hover { background: var(--gold); border-color: var(--gold); color: var(--white); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.cal-dow { font-size: 0.7rem; font-weight: 600; color: #999; letter-spacing: 0.5px; padding-bottom: 8px; }
.cal-day {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%;
    font-size: 0.85rem; color: var(--text-dark); cursor: pointer; transition: 0.2s; border: none; background: none;
}
.cal-day:hover:not(.cal-day--disabled) { background: rgba(212,163,75,0.15); }
.cal-day--muted { color: #ccc; cursor: default; pointer-events: none; }
.cal-day--disabled { color: #ddd; cursor: not-allowed; pointer-events: none; }
.cal-day--today { font-weight: 700; color: var(--gold); }
.cal-day--selected, .cal-day--selected:hover { background: var(--gold); color: var(--white); font-weight: 600; }
.cal-note { font-size: 0.72rem; color: #aaa; margin-top: 16px; text-align: center; }
.cal-note strong { color: var(--gold); font-weight: 600; }

/* Radios / checkbox */
.field-label { font-size: 0.8rem; font-weight: 600; color: var(--text-dark); margin-bottom: 10px; display: block; }
.radio-group { display: flex; flex-direction: column; gap: 10px; }
/* flex-start, not center: the offering labels are a full phrase and wrap to two or
   three lines on a phone (more often in Sinhala, which sets wider), and centring
   floats the control against the middle of the block instead of its first line. */
.radio-option, .checkbox-option {
    display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: #444;
    cursor: pointer; line-height: 1.5;
}
.radio-option input, .checkbox-option input {
    accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer;
    flex-shrink: 0; margin-top: 0.2em;
}
/* Applied via JS to offering options that are already booked for the selected date */
.radio-option.is-disabled, .checkbox-option.is-disabled { opacity: 0.45; cursor: not-allowed; }
.radio-option.is-disabled input, .checkbox-option.is-disabled input { cursor: not-allowed; }
/* Shown via JS when every offering option is booked for the selected date */
#offeringAvailabilityNote { color: #d64545; font-weight: 500; font-size: 0.8rem; margin-top: 10px; }
.form-field select {
    padding: 13px 16px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.1); background: var(--white);
    font-family: var(--font-body); font-size: 0.9rem; color: var(--text-dark); cursor: pointer;
}
.form-field select:focus { outline: none; border-color: var(--gold); }
.reservation-form .form-row { margin-bottom: 20px; }
.reservation-form .form-field.block { margin-bottom: 22px; }
.reservation-confirm {
    text-align: center; padding: 40px 20px; display: none;
}
.reservation-confirm.show { display: block; }
.reservation-confirm i { font-size: 2.6rem; color: var(--gold); margin-bottom: 16px; }
.reservation-confirm h4 { font-family: var(--font-head); font-size: 1.4rem; margin-bottom: 10px; color: var(--text-dark); }
.reservation-confirm p { color: var(--text-gray); font-size: 0.9rem; }

@media (max-width: 1024px) {
    .reservation-card { grid-template-columns: 1fr; padding: 32px; }
    .reservation-hero-img { display: none; }
    .reservation-hero { padding-top: 170px; }
}
@media (max-width: 640px) {
    .reservation-hero { padding: 150px 0 60px; }
    .reservation-hero-content h1 { font-size: 2.1rem; }
    .reservation-card { padding: 22px; border-radius: 20px; margin-top: -20px; }
    .calendar-widget { padding: 16px; }
    .cal-grid { gap: 4px; }
    .cal-day { font-size: 0.78rem; }
}