/* ===== EVENTS SHARED ===== */
.events-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* ===== HERO ===== */
.events-hero {
    padding: var(--spacing-xl) 0 var(--spacing-lg);
    background: var(--color-white);
    border-radius: var(--radius-lg);
}

.events-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.events-hero-title {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: var(--color-text);
    margin: 14px 0 16px;
    line-height: 1.1;
}

.events-hero-desc {
    font-size: var(--font-size-base);
    color: var(--color-accent);
    max-width: 620px;
    line-height: 1.7;
}

/* ===== SHARED SECTION HEAD ===== */
.events-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.events-section-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text);
}

.events-section-sub {
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    margin-top: 4px;
}

/* ===== CHRONICLES CAROUSEL ===== */
.events-chronicles {
    padding: var(--spacing-xl) 0;
}

.events-chronicles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.event-story-card {
    display: block;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(196, 139, 132, 0.12);
    transition: var(--transition);
}

.event-story-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.event-story-img {
    height: 230px;
    overflow: hidden;
    background: var(--color-secondary);
}

.event-story-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-story-body {
    padding: var(--spacing-lg);
}

.event-story-tags {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.event-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: var(--radius-full);
}

.event-tag--urban {
    background: var(--color-secondary);
    color: var(--color-primary-dark);
}

.event-tag--rural {
    background: #EADFC7;
    color: #6f5a34;
}

.event-story-location {
    font-size: 12px;
    color: var(--color-accent);
}

.event-story-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.event-story-desc {
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

.event-story-link {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary-dark);
}

/* ===== ARCHIVE + FILTER ===== */
.events-archive {
    background: var(--color-white);
    padding: var(--spacing-xl) 0;
    border-radius: var(--radius-lg);
}

.events-filter-chips {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.events-chip {
    font-size: 12px;
    padding: 7px 16px;
    border-radius: var(--radius-full);
    background: var(--color-white);
    color: var(--color-accent);
    border: 1px solid rgba(196, 139, 132, 0.25);
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-main);
}

.events-chip:hover {
    background: var(--color-bg);
}

.events-chip.is-active {
    background: var(--color-primary-dark);
    color: var(--color-white);
    border-color: var(--color-primary-dark);
}

.events-archive-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.events-archive-card {
    display: block;
    background: var(--color-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.events-archive-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.events-archive-date {
    font-size: 11px;
    color: var(--color-accent);
    margin-bottom: 4px;
}

.events-archive-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
}

.events-archive-location {
    font-size: 11px;
    color: var(--color-primary-dark);
    font-weight: 600;
}

.events-archive-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    padding: var(--spacing-lg) 0;
}

/* ===== UPCOMING STRIP ===== */
.events-upcoming {
    background: var(--color-primary-dark);
    color: var(--color-white);
    padding: var(--spacing-lg) 0;
    border-radius:var(--radius-lg) ;
}

.events-upcoming-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.events-upcoming-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.events-upcoming-sub {
    font-size: var(--font-size-sm);
    opacity: 0.85;
    margin-top: 2px;
}

.events-upcoming-btn {
    background: var(--color-white);
    color: var(--color-primary-dark);
    padding: 12px 24px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: var(--font-size-sm);
}

/* ===== MOBILE ===== */
@media (max-width: 900px) {
    .events-chronicles-grid {
        grid-template-columns: 1fr;
    }
    .events-archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== IMPACT METRICS + CSR ===== */
.events-impact-csr {
    padding: var(--spacing-xl) 0;
}

.events-impact-csr-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--spacing-lg);
}

.events-impact-box {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
}

.events-impact-label {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
}

.events-impact-sub {
    font-size: 12px;
    color: var(--color-accent);
    margin-bottom: var(--spacing-lg);
}

.events-impact-row {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid rgba(196, 139, 132, 0.2);
}

.events-impact-row:last-child {
    border-bottom: none;
}

.events-impact-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary-dark);
}

.events-impact-sublabel {
    font-size: 11px;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

.events-csr-box {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    color: var(--color-white);
}

.events-csr-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.events-csr-desc {
    font-size: var(--font-size-sm);
    opacity: 0.92;
    max-width: 460px;
    margin-bottom: var(--spacing-lg);
    line-height: 1.7;
}

.events-csr-list {
    list-style: none;
    margin-bottom: var(--spacing-lg);
}

.events-csr-list li {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: 8px;
}

.events-csr-list i {
    font-size: 14px;
}

.events-csr-btn {
    background: var(--color-white);
    color: var(--color-primary-dark);
    padding: 12px 28px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: var(--font-size-sm);
    display: inline-block;
}

/* mobile */
@media (max-width: 900px) {
    .events-impact-csr-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== TESTIMONIAL ===== */
.events-testimonial {
    padding: var(--spacing-xl) 0;
    background: #EADFC7;
    
}

.events-testimonial-inner {
    max-width: 720px;
    text-align: center;
}

.events-quote-mark {
    font-size: 56px;
    color: var(--color-text);
    line-height: 0.4;
    display: block;
    margin-bottom: 8px;
}

.events-quote-text {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.5;
    margin-bottom: var(--spacing-md);
}

.events-quote-who {
    font-size: var(--font-size-sm);
    color: var(--color-accent);
}

.events-quote-who b {
    color: var(--color-primary-dark);
}

/* update mobile block */
@media (max-width: 900px) {
    .events-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    .events-stat:nth-child(2)::after {
        display: none;
    }
}

/* ===== REACH MAP ===== */
.events-reach {
    padding: var(--spacing-md) 0;
    background: var(--color-white);
    border: 1px;
    border-radius: var(--radius-lg);
}

.events-reach-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.3fr;
    gap: var(--spacing-xl);
    align-items: center;
}

.events-reach-desc {
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    max-width: 380px;
    margin: var(--spacing-sm) 0 var(--spacing-lg);
    line-height: 1.7;
}

.events-reach-metrics {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.events-reach-metrics-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
    font-weight: 700;
}

.events-reach-metric-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.events-reach-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--color-primary-dark);
    flex-shrink: 0;
}

.events-reach-note {
    font-size: 11px;
    color: var(--color-accent);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(196, 139, 132, 0.2);
}

.events-map-wrap {
    background: #FBF8F5;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    height: 420px;
}

#reachMap {
    height: 100%;
    width: 100%;
}

.leaflet-container {
    background: #FBF8F5 !important;
    font-family: var(--font-main);
}

@media (max-width: 900px) {
    .events-reach-grid {
        grid-template-columns: 1fr;
    }
    .events-map-wrap {
        background: #FBF8F5;
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-md);   /* was --shadow-sm — more lift */
        border: 1px solid rgba(196, 139, 132, 0.15);
        overflow: hidden;
        height: 420px;
    }
}
.leaflet-div-icon.reach-marker-wrap {
    background: transparent !important;
    border: none !important;
}
/* ===== MAP MARKER GLOW ===== */
.reach-marker-wrap {
    position: relative;
}

.reach-glow-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 139, 132, 0.55) 0%, rgba(196, 139, 132, 0.15) 55%, rgba(196, 139, 132, 0) 75%);
    animation: reachPulse 2.4s ease-in-out infinite;
    filter: blur(1px);
}

.reach-glow-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--color-primary-dark);
    box-shadow: 0 0 12px 2px rgba(130, 82, 76, 0.5);
    border: 2px solid var(--color-white);
}

@keyframes reachPulse {
    0%, 100% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(0.9);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.08);
    }
}

/* Tooltip styling to match brand */
.reach-tooltip {
    background: var(--color-white) !important;
    border: 1px solid rgba(196, 139, 132, 0.25) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-text) !important;
    font-family: var(--font-main) !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Leaflet zoom control — restyle to match brand instead of default gray boxes */
.leaflet-control-zoom {
    border: none !important;
    box-shadow: var(--shadow-sm) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}

.leaflet-control-zoom a {
    background: var(--color-white) !important;
    color: var(--color-primary-dark) !important;
    border: none !important;
    font-size: 16px !important;
}

.leaflet-control-zoom a:hover {
    background: var(--color-secondary) !important;
}

/* Softer attribution text */
.leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.8) !important;
    font-size: 10px !important;
    color: var(--color-accent) !important;
}

/* ===== MOBILE: EVENTS =====
   Every breakpoint in this file is 900px, which is a tablet tier doing a
   phone's job. .events-archive-grid steps 4 -> 2 columns there and stops, so
   at 375px an archive card is ~140px wide holding a date, a title and a
   thumbnail. One column below 480px.

   .events-stats-grid deliberately stays at two columns — a 2x2 block of short
   numeric stats reads well narrow, and it is the same shape the home page
   stats grid already settles into on a phone. Widening that to one column
   would make the section three screens tall for no gain.

   .events-hero-title consumes --font-size-xxl raw (48px, unclamped, same token
   the home hero uses) with no mobile tier. */
@media (max-width: 480px) {
    .events-archive-grid {
        grid-template-columns: 1fr;
    }

    .events-hero-title {
        font-size: clamp(30px, 8.5vw, var(--font-size-xxl));
    }

    /* Both boxes carry 32px of padding per side. Once the impact/CSR grid has
       stacked, that is 64px of a 320px viewport spent on gutter before any
       content, and the label and value text pushed the page 56px wide at 320px
       and 16px at 360px. Halving the padding clears it with room spare. */
    .events-impact-box,
    .events-csr-box {
        padding: var(--spacing-md);
    }
}

/* ===== MOBILE: EVENTS PHASE 2 (767.98px tier) =====
   Appended rather than folded into the 900px blocks above -- this file's
   breakpoints are a tablet tier (900px) and a narrow-phone tier (480px),
   neither of which is this codebase's usual 767.98px phone checkpoint, and
   rewriting them would touch the 769-899px tablet band, which is out of
   scope here. These rules only add to what exists above; nothing is edited. */
@media (max-width: 767.98px) {
    /* .events-chip: 31px tall against a 44px floor, and with the real
       6-category set (not the mockup's 4) it wraps to 4 rows at 320px.
       Scroll strip + explicit height, same shape as the archive tab strip
       fix on product detail. */
    .events-filter-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .events-chip {
        flex-shrink: 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Chronicles card descriptions are already word-capped server-side
       (truncatewords:25) but that does not guarantee equal line counts.
       Same 3-line clamp used for product descriptions on the home page. */
    .event-story-desc {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}