/* =========================
   CITÉ ALDGATE - "THE DISCOVERY EXPERIENCE"
   Cultural crossroads, welcoming, cinematic mood
   Typography: Cormorant Garamond (display) + Work Sans (body)
   Brand Guidelines 2026
   IMPORTANT: Always use "Cité" with accent (é), never "Cite"
========================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Work+Sans:wght@300;400;500;600&family=Nunito+Sans:wght@400;500&display=swap');

.coco-venue-page--cite {
    /* Primary Colours - Cinematic and warm */
    --coco-accent: #E67E22;            /* Cité Amber - signature warmth */
    --coco-bg: #0C1821;                /* Midnight - blue-black night */
    --coco-bg-secondary: #2C3E50;      /* Slate */
    --coco-text: #FAF7F0;              /* Warm White */
    
    /* Secondary Colours */
    --coco-accent-secondary: #722F37;  /* Burgundy - richness */
    --coco-accent-gold: #B8860B;       /* Deep Gold - upscale contexts */
    --coco-text-muted: #B0A99F;        /* Warm Grey */
    
    /* Accent variations */
    --coco-accent-dim: rgba(230, 126, 34, 0.3);
    --coco-accent-border: rgba(230, 126, 34, 0.5);
    --coco-card-bg: #0C1821;
    
    /* Typography - European, cinematic, sophisticated yet accessible */
    --coco-font-primary: 'Work Sans', 'Nunito Sans', sans-serif;
    --coco-font-display: 'Cormorant Garamond', Georgia, serif;
    
    /* Gradients - subtle, never neon */
    --coco-gradient: linear-gradient(135deg, #0C1821 0%, #2C3E50 100%);
    --coco-gradient-warm: linear-gradient(135deg, #E67E22 0%, #B8860B 100%);
}

/* =========================
   TYPE HIERARCHY (Brand Guidelines)
   H1: Cormorant Garamond Bold, title case/uppercase, 32-48pt, amber or white
   H2: Cormorant Garamond SemiBold, title case, 24-32pt
   H3: Work Sans Medium, uppercase, 14-18pt, letter-spacing +2%
   Body: Work Sans Regular, 12-16pt
   Caption: Work Sans Light, 10-12pt, Warm Grey
========================== */

/* H1 - Event Titles / Hero - Elegant, cinematic */
.coco-venue-page--cite .coco-venue-title {
    font-family: var(--coco-font-display);
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: clamp(32px, 7vw, 48px);
}

/* H2 - Section Headers */
.coco-venue-page--cite .coco-venue-section-title {
    font-family: var(--coco-font-display);
    font-weight: 600;
    font-size: clamp(24px, 4vw, 32px);
    letter-spacing: 0.06em;
}

/* H3 - Subheadings */
.coco-venue-page--cite h3,
.coco-venue-page--cite h4,
.coco-venue-page--cite .scene-item h4,
.coco-venue-page--cite .first-timer-item h4 {
    font-family: var(--coco-font-primary);
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(14px, 2vw, 18px);
    letter-spacing: 0.02em;
}

/* Body text */
.coco-venue-page--cite p,
.coco-venue-page--cite .coco-venue-sub {
    font-family: var(--coco-font-primary);
    font-weight: 400;
    font-size: clamp(12px, 1.5vw, 16px);
    line-height: 1.7;
}

/* Caption text */
.coco-venue-page--cite .coco-venue-faq-item span,
.coco-venue-page--cite .walk-time,
.coco-venue-page--cite .scene-item p {
    font-family: var(--coco-font-primary);
    font-weight: 300;
    font-size: clamp(10px, 1.2vw, 12px);
    color: var(--coco-text-muted);
}

/* Hero with cinematic, nocturnal feel - amber light through doorways */
.coco-venue-page--cite .coco-venue-hero::before {
    background: 
        radial-gradient(ellipse at 50% 90%, rgba(230, 126, 34, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 30%, rgba(114, 47, 55, 0.06) 0%, transparent 40%),
        radial-gradient(circle at top, rgba(0,0,0,.2) 0, rgba(0,0,0,.8) 55%, #0C1821 100%);
}

.coco-venue-page--cite .coco-venue-hero-tag .dot {
    background: var(--coco-accent);
}

/* Amber warmth accents */
.coco-venue-page--cite .coco-venue-hero-tag {
    border-color: rgba(230, 126, 34, 0.3);
}

/* Location sub-line styling */
.coco-venue-page--cite .coco-venue-sub-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    opacity: 0.7;
    margin-bottom: 30px;
}

.coco-venue-page--cite .coco-venue-sub-location svg {
    opacity: 0.8;
}

/* =========================
   TONIGHT SECTION
========================== */
.coco-venue-tonight {
    padding: 60px 80px;
    background: linear-gradient(135deg, var(--coco-bg-secondary) 0%, var(--coco-bg) 100%);
    border-bottom: 1px solid rgba(230, 126, 34, 0.1);
}

.tonight-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
}

.tonight-left {
    flex: 1;
}

.tonight-label {
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--coco-accent);
    margin-bottom: 8px;
    display: block;
}

.tonight-left h2 {
    font-family: var(--coco-font-display);
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    margin-bottom: 12px;
}

.tonight-left p {
    font-size: 15px;
    opacity: 0.7;
    max-width: 400px;
}

.tonight-ctas {
    display: flex;
    gap: 12px;
}

/* =========================
   THE SCENE SECTION
========================== */
.coco-venue-scene {
    padding: 80px;
    background: var(--coco-bg);
}

.scene-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.scene-item {
    padding: 30px 24px;
    background: rgba(230, 126, 34, 0.05);
    border: 1px solid rgba(230, 126, 34, 0.1);
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.scene-item:hover {
    background: rgba(230, 126, 34, 0.1);
    transform: translateY(-4px);
}

.scene-item .scene-icon {
    font-size: 28px;
    margin-bottom: 16px;
    display: block;
}

.scene-item h4 {
    font-family: var(--coco-font-display);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.scene-item p {
    font-size: 13px;
    opacity: 0.7;
    line-height: 1.5;
}

/* =========================
   LOCATION SPOTLIGHT
========================== */
.coco-venue-location-spotlight {
    padding: 80px;
    background: var(--coco-bg-secondary);
}

.location-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
}

.location-transport h4,
.location-tags h4 {
    font-family: var(--coco-font-display);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}

.transport-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.transport-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tube-line {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 700;
    text-align: center;
    line-height: 24px;
    color: #fff;
}

.tube-hammersmith { background: #F3A9BB; color: #000; }
.tube-circle { background: #FFD300; color: #000; }
.tube-metropolitan { background: #9B0056; }
.tube-district { background: #00782A; }
.tube-elizabeth { background: #6950A1; }
.tube-central { background: #DC241F; }

.station-name {
    font-weight: 600;
    margin-left: 8px;
}

.walk-time {
    font-size: 12px;
    opacity: 0.6;
    margin-left: auto;
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pop-tag {
    padding: 8px 16px;
    background: rgba(230, 126, 34, 0.1);
    border: 1px solid rgba(230, 126, 34, 0.2);
    border-radius: 999px;
    font-size: 13px;
    transition: all 0.3s ease;
}

.pop-tag:hover {
    background: rgba(230, 126, 34, 0.2);
    border-color: rgba(230, 126, 34, 0.4);
}

/* =========================
   FIRST TIMER GUIDE
========================== */
.coco-venue-first-timer {
    padding: 80px;
    background: var(--coco-bg);
}

.first-timer-intro {
    text-align: center;
    font-size: 16px;
    opacity: 0.7;
    margin-bottom: 50px;
}

.first-timer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto 50px;
}

.first-timer-item {
    text-align: center;
    position: relative;
}

.first-timer-item .ft-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--coco-gradient-warm);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--coco-font-display);
    font-size: 18px;
    font-weight: 700;
    margin: 0 auto 16px;
}

.first-timer-item h4 {
    font-family: var(--coco-font-display);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.first-timer-item p {
    font-size: 13px;
    opacity: 0.7;
    line-height: 1.5;
}

.first-timer-cta {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(230, 126, 34, 0.1);
}

.first-timer-cta p {
    font-size: 15px;
    margin-bottom: 16px;
    opacity: 0.8;
}

/* Button styling - Amber warmth */
.coco-venue-page--cite .coco-venue-btn-primary {
    background: var(--coco-gradient-warm);
    color: #FFFFFF;
    font-family: var(--coco-font-primary);
    font-weight: 500;
}

.coco-venue-page--cite .coco-venue-btn-primary:hover {
    box-shadow: 0 10px 40px rgba(230, 126, 34, 0.35);
}

.coco-venue-page--cite .coco-venue-btn-outline {
    border-color: var(--coco-accent-border);
    font-family: var(--coco-font-primary);
}

.coco-venue-page--cite .coco-venue-btn-outline:hover {
    background: rgba(230, 126, 34, 0.1);
    border-color: var(--coco-accent);
}

/* Event cards */
.coco-venue-page--cite .coco-venue-event-card {
    border: 1px solid rgba(230, 126, 34, 0.1);
    background: var(--coco-bg);
}

.coco-venue-page--cite .coco-venue-event-card:hover {
    border-color: rgba(230, 126, 34, 0.3);
    box-shadow: 0 20px 60px rgba(230, 126, 34, 0.15);
}

.coco-venue-page--cite .coco-venue-event-card h3 {
    font-family: var(--coco-font-display);
    font-weight: 700;
}

.coco-venue-page--cite .coco-venue-event-card button {
    background: var(--coco-gradient-warm);
    color: #FFFFFF;
}

/* Nav pill */
.coco-venue-page--cite .coco-venue-nav .pill:hover {
    background: var(--coco-accent);
    border-color: var(--coco-accent);
    color: #FFFFFF;
}

/* Menu drawer */
.coco-venue-page--cite .coco-menu-drawer {
    border-left-color: rgba(230, 126, 34, 0.3);
}

.coco-venue-page--cite .coco-menu-item {
    border-bottom-color: rgba(230, 126, 34, 0.15);
}

.coco-venue-page--cite .coco-menu-bullet {
    border-color: rgba(230, 126, 34, 0.5);
}

.coco-venue-page--cite .coco-menu-bullet::before {
    background: var(--coco-accent);
}

/* FAQ styling */
.coco-venue-page--cite .coco-venue-faq-item {
    border-bottom-color: rgba(230, 126, 34, 0.1);
}

.coco-venue-page--cite .coco-venue-faq-item strong {
    font-family: var(--coco-font-primary);
    font-weight: 500;
}

/* Mobile adjustments */
@media (max-width: 1024px) {
    .scene-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .location-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .first-timer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .coco-venue-tonight {
        padding: 40px 20px;
    }
    
    .tonight-inner {
        flex-direction: column;
        text-align: center;
    }
    
    .tonight-left p {
        max-width: none;
    }
    
    .tonight-ctas {
        flex-direction: column;
        width: 100%;
    }
    
    .coco-venue-scene,
    .coco-venue-location-spotlight,
    .coco-venue-first-timer {
        padding: 40px 20px;
    }
    
    .scene-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .first-timer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    
    .walk-time {
        width: 100%;
        margin-left: 0;
        margin-top: 4px;
    }
}

@media (max-width: 480px) {
    .scene-grid,
    .first-timer-grid {
        grid-template-columns: 1fr;
    }
}