/* ============================================================
   company-hotel.css
   TCV Travels Sri Lanka — Terrace Cinnamon View Hotel Page
   Uses ONLY design tokens from main.css (colors, fonts, spacing,
   radius, shadows). No hardcoded hex/rgb/font values in this file.
   ============================================================ */

/* ─── Shared eyebrow / section-header helpers (page-scoped) ────── */
.th-eyebrow {
    display: inline-block;
    font-family: var(--font-mono, 'Courier New', monospace);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: var(--spacing-3);
}
.th-eyebrow--light { color: var(--color-gold-light); }

.th-section-header { max-width: 760px; margin: 0 auto var(--spacing-8); }

.th-section-title {
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin-bottom: var(--spacing-4);
}
.th-section-title--light { color: var(--color-white); }

.th-section-subtitle {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}
.th-section-subtitle--light { color: var(--color-white-80); }

.th-lead-text {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    color: var(--text-primary);
    margin-bottom: var(--spacing-5);
}

.th-body-text {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-5);
}

/* ─── Section background variants ───────────────────────────── */
.th-section        { padding: var(--spacing-20) 0; }
.th-section-dark   { background: var(--color-navy-deep); color: var(--color-white); }
.th-section-light  { background: var(--color-navy-mid); }

/* ─── Hero copy (hero-slideshow structure is shared/unchanged) ─ */
.th-hero-eyebrow {
    font-family: var(--font-mono, 'Courier New', monospace);
    font-size: var(--text-sm);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-gold-light);
    margin-bottom: var(--spacing-4);
}
.th-hero-title {
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-7xl);
    line-height: var(--leading-tight);
    color: var(--color-white);
    margin-bottom: var(--spacing-5);
}
.th-hero-subtitle {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-white-85, var(--color-white-80));
    max-width: 760px;
    margin: 0 auto var(--spacing-7);
}
.th-hero-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-3);
}
.th-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-full);
    background: var(--color-white-10);
    border: 1px solid var(--color-white-18);
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    backdrop-filter: blur(6px);
}
.th-hero-badge i { color: var(--color-gold-light); }

/* ─── Estate Introduction ───────────────────────────────────── */
.th-intro-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-4);
    margin-top: var(--spacing-6);
}
.th-intro-stat {
    text-align: center;
    padding: var(--spacing-4) var(--spacing-2);
    background: var(--gradient-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}
.th-intro-num {
    display: block;
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-3xl);
    color: var(--color-gold);
    line-height: var(--leading-none);
}
.th-plus { font-size: var(--text-xl); }
.th-intro-label {
    display: block;
    margin-top: var(--spacing-2);
    font-size: var(--text-xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--text-muted);
}

.th-intro-media {
    position: relative;
    min-height: 420px;
}
.th-intro-img {
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-luxury);
    object-fit: cover;
}
.th-intro-img--main {
    width: 88%;
    height: 380px;
    position: relative;
    z-index: var(--z-index-10);
}
.th-intro-img--accent {
    width: 55%;
    height: 200px;
    position: absolute;
    right: 0;
    bottom: -30px;
    z-index: var(--z-index-20);
    border: 5px solid var(--color-navy-deep);
}

/* ─── Estate Life Cards ──────────────────────────────────────── */
.th-life-card {
    height: 100%;
    padding: var(--spacing-6);
    background: var(--gradient-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    transition: var(--transition-smooth);
}
.th-life-card:hover {
    border-color: var(--color-gold);
    box-shadow: var(--shadow-gold);
    transform: translateY(-4px);
}
.th-life-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--color-gold-bg);
    color: var(--color-gold);
    font-size: var(--text-xl);
    margin-bottom: var(--spacing-4);
}
.th-life-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--color-white);
    margin-bottom: var(--spacing-2);
}
.th-life-text {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-white-70);
    margin: 0;
}

/* ─── Why Stay Cards ─────────────────────────────────────────── */
.th-why-card {
    height: 100%;
    padding: var(--spacing-6);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    position: relative;
}
.th-why-num {
    display: block;
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-3xl);
    color: var(--color-gold);
    opacity: 0.55;
    margin-bottom: var(--spacing-2);
}
.th-why-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
}
.th-why-text {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    margin: 0;
}

/* ─── Growth Roadmap ─────────────────────────────────────────── */
.th-roadmap {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}
.th-roadmap-item {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-5);
    background: var(--bg-primary);
    border-left: 3px solid var(--color-gold);
    border-radius: var(--radius-md);
}
.th-roadmap-year {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-lg);
    color: var(--color-gold);
    min-width: 110px;
}
.th-roadmap-text {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

/* ─── Estate Showcase — premium autoplay gallery ────────────────
   Self-contained component: crossfade autoplay stage, category
   filter pills, scrollable thumbnail rail with active sync, and a
   full-screen lightbox. Built entirely on main.css tokens — no
   hardcoded colors/spacing/shadows.
   ──────────────────────────────────────────────────────────────── */

/* Filter pills */
.th-showcase-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-8);
}
.th-showcase-filter {
    padding: var(--spacing-2) var(--spacing-5);
    border-radius: var(--radius-full);
    background: var(--color-white-08);
    border: 1px solid var(--color-white-18);
    color: var(--color-white-80);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--ls-wide);
    cursor: pointer;
    transition: var(--transition-elegant);
    white-space: nowrap;
}
.th-showcase-filter:hover {
    border-color: var(--color-gold);
    color: var(--color-white);
    background: var(--color-gold-bg);
}
.th-showcase-filter.is-active {
    background: var(--gradient-gold);
    border-color: transparent;
    color: var(--color-navy-deep);
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--shadow-gold);
}

/* Showcase shell */
.th-showcase {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

/* Stage */
.th-showcase-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 640px;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: var(--color-navy-abyss);
    box-shadow: var(--shadow-luxury);
    border: 1px solid var(--border-light);
}

.th-showcase-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1), transform 6000ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: var(--z-index-0);
}
.th-showcase-slide.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    z-index: var(--z-index-10);
}
.th-showcase-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gradient scrim so controls/caption stay legible on any photo */
.th-showcase-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 6, 13, 0.05) 0%, rgba(3, 6, 13, 0) 32%, rgba(3, 6, 13, 0) 60%, rgba(3, 6, 13, 0.75) 100%);
    z-index: var(--z-index-20);
    pointer-events: none;
}

/* Arrows */
.th-showcase-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-index-30);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-white-10);
    border: 1px solid var(--color-white-18);
    color: var(--color-white);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    transition: var(--transition-elegant);
}
.th-showcase-arrow:hover {
    background: var(--gradient-gold);
    border-color: transparent;
    color: var(--color-navy-deep);
    box-shadow: var(--shadow-gold);
}
.th-showcase-arrow--prev { left: var(--spacing-4); }
.th-showcase-arrow--next { right: var(--spacing-4); }

/* Top-right icon controls (play/pause, expand) */
.th-showcase-controls {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    z-index: var(--z-index-30);
    display: flex;
    gap: var(--spacing-2);
}
.th-showcase-iconbtn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-white-10);
    border: 1px solid var(--color-white-18);
    color: var(--color-white);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    transition: var(--transition-elegant);
    font-size: var(--text-sm);
}
.th-showcase-iconbtn:hover {
    background: var(--gradient-gold);
    border-color: transparent;
    color: var(--color-navy-deep);
}

/* Caption + counter */
.th-showcase-caption {
    position: absolute;
    left: var(--spacing-5);
    bottom: var(--spacing-5);
    z-index: var(--z-index-30);
    display: flex;
    align-items: baseline;
    gap: var(--spacing-3);
    color: var(--color-white);
}
.th-showcase-count {
    font-family: var(--font-mono, 'Courier New', monospace);
    font-size: var(--text-xs);
    letter-spacing: var(--ls-wider);
    color: var(--color-gold-light);
}
.th-showcase-label {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* Autoplay progress bar */
.th-showcase-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--color-white-10);
    z-index: var(--z-index-30);
    overflow: hidden;
}
.th-showcase-progress-bar {
    height: 100%;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    background: var(--gradient-gold);
}

/* Thumbnail rail */
.th-showcase-rail {
    display: flex;
    gap: var(--spacing-3);
    overflow-x: auto;
    padding: var(--spacing-2) var(--spacing-1) var(--spacing-4);
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gold-dark) transparent;
}
.th-showcase-rail::-webkit-scrollbar { height: 6px; }
.th-showcase-rail::-webkit-scrollbar-thumb { background: var(--color-gold-dark); border-radius: var(--radius-full); }
.th-showcase-rail::-webkit-scrollbar-track { background: transparent; }

.th-showcase-thumb {
    flex: 0 0 auto;
    width: 108px;
    height: 72px;
    border-radius: var(--radius-md);
    overflow: hidden;
    padding: 0;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.55;
    transition: var(--transition-elegant);
}
.th-showcase-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.th-showcase-thumb:hover { opacity: 0.9; }
.th-showcase-thumb.is-active {
    opacity: 1;
    border-color: var(--color-gold);
    box-shadow: var(--shadow-gold);
}
.th-showcase-thumb.is-hidden { display: none; }

/* ─── Full-Screen Lightbox ───────────────────────────────────── */
.th-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-index-modal);
    background: rgba(3, 6, 13, 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1);
    padding: var(--spacing-8);
}
.th-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}
.th-lightbox-frame {
    margin: 0;
    max-width: 1400px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3);
}
.th-lightbox-img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2xl);
}
.th-lightbox-caption {
    color: var(--color-white-85, var(--color-white-80));
    font-family: var(--font-display);
    font-size: var(--text-lg);
    text-align: center;
}
.th-lightbox-close {
    position: absolute;
    top: var(--spacing-6);
    right: var(--spacing-6);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-white-10);
    border: 1px solid var(--color-white-18);
    color: var(--color-white);
    cursor: pointer;
    transition: var(--transition-elegant);
}
.th-lightbox-close:hover { background: var(--gradient-gold); border-color: transparent; color: var(--color-navy-deep); }
.th-lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-white-10);
    border: 1px solid var(--color-white-18);
    color: var(--color-white);
    cursor: pointer;
    transition: var(--transition-elegant);
    font-size: var(--text-lg);
}
.th-lightbox-arrow:hover { background: var(--gradient-gold); border-color: transparent; color: var(--color-navy-deep); }
.th-lightbox-arrow--prev { left: var(--spacing-6); }
.th-lightbox-arrow--next { right: var(--spacing-6); }

body.th-lightbox-open { overflow: hidden; }

/* ─── Location ───────────────────────────────────────────────── */
.th-location-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-5) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}
.th-location-list li {
    font-size: var(--text-md);
    color: var(--text-secondary);
}
.th-location-list i {
    width: 22px;
    color: var(--color-gold);
    margin-right: var(--spacing-2);
}

/* ─── CTA ─────────────────────────────────────────────────────── */
.th-cta-section {
    padding: var(--spacing-20) 0;
    background: var(--gradient-hero);
}
.th-cta-inner { max-width: 720px; margin: 0 auto; }
.th-cta-eyebrow {
    font-family: var(--font-mono, 'Courier New', monospace);
    font-size: var(--text-sm);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--color-gold-light);
    margin-bottom: var(--spacing-3);
}
.th-cta-title {
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-4xl);
    color: var(--color-white);
    margin-bottom: var(--spacing-4);
}
.th-cta-subtitle {
    font-size: var(--text-lg);
    color: var(--color-white-80);
    margin-bottom: var(--spacing-7);
}
.th-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-4);
}
.th-btn-cta,
.th-btn-cta-outline,
.th-btn-outline {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-4) var(--spacing-8);
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-md);
    text-decoration: none;
    transition: var(--transition-base);
}
.th-btn-cta {
    background: var(--gradient-gold);
    color: var(--color-navy-deep);
    box-shadow: var(--shadow-gold);
}
.th-btn-cta:hover {
    background: var(--gradient-gold-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold-lg);
    color: var(--color-navy-deep);
}
.th-btn-cta-outline {
    background: transparent;
    color: var(--color-white);
    border: 1.5px solid var(--color-white-30);
}
.th-btn-cta-outline:hover {
    background: var(--color-white-10);
    border-color: var(--color-white);
    color: var(--color-white);
}
.th-btn-outline {
    background: transparent;
    color: var(--color-gold);
    border: 1.5px solid var(--border-gold);
}
.th-btn-outline:hover {
    background: var(--color-gold-bg);
    border-color: var(--color-gold);
    color: var(--color-gold-light);
}

/* ─── Reveal-on-scroll (page-scoped, self-contained) ─────────── */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1), transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991px) {
    .th-hero-title { font-size: var(--text-5xl); }
    .th-section-title { font-size: var(--text-3xl); }
    .th-intro-media { min-height: 320px; margin-top: var(--spacing-8); }
    .th-showcase-stage { aspect-ratio: 4 / 3; max-height: 520px; }
    .th-showcase-label { font-size: var(--text-lg); }
}

@media (max-width: 575px) {
    .th-intro-stats { grid-template-columns: repeat(2, 1fr); }
    .th-hero-title { font-size: var(--text-4xl); }
    .th-roadmap-item { flex-direction: column; gap: var(--spacing-1); }

    .th-showcase-filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--spacing-2); }
    .th-showcase-stage { aspect-ratio: 3 / 4; max-height: 460px; border-radius: var(--radius-xl); }
    .th-showcase-arrow { width: 40px; height: 40px; }
    .th-showcase-label { font-size: var(--text-md); }
    .th-showcase-caption { left: var(--spacing-4); bottom: var(--spacing-4); }
    .th-showcase-thumb { width: 84px; height: 60px; }
    .th-lightbox-arrow { width: 42px; height: 42px; font-size: var(--text-md); }
    .th-lightbox { padding: var(--spacing-4); }
}