/* ============================================================
   Intensity Hoops — Event Booking: Next Event Module (horizontal.php)
   ============================================================ */

/* ── Optional module-level header (pre_text/post_text) ──────
   Reuses .section-heading / .section-subtext from features.css directly —
   this is the same eyebrow-less heading pattern used wherever a section
   needs a title without the full eyebrow treatment. Centered, matching
   every other page's section intro. Only renders if the module's Pre
   Text/Post Text params are set — leave them empty when this module sits
   below a page section that already has its own heading (e.g.
   develop-page.html's "Our Next Camp" intro). */

.next-event-header {
    text-align: center;
    margin-bottom: 2rem;
}

/* ── Card ─────────────────────────────────────────────────── */

.next-event {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2.5rem;
    background: var(--surface, #1c1c1c);
    border: 1px solid var(--border, rgba(18, 114, 186, 0.25));
    border-radius: 16px;
    padding: 2.5rem;
}

/* ── Content column ───────────────────────────────────────── */

.next-event-content {
    flex: 1 1 340px;
    min-width: 0;
}

/* Event's own title — left-aligned (default), unlike the centered
   module-level header above */
.next-event-title {
    margin-bottom: 0.75rem;
}

.next-event-title .section-subtext {
    margin: 0.5rem 0 0;
}

.next-event-date {
    font-family: var(--font-heading, "Oswald", sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-primary-light, #2e8fd4);
    margin: 0.85rem 0 1.25rem;
}

/* ── Countdown ────────────────────────────────────────────── */

.next-event-countdown {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.next-event-cd-item {
    flex: 1 1 70px;
    max-width: 80px;
    text-align: center;
    background: var(--surface-2, #262626);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    padding: 0.75rem 0.5rem;
}

.next-event-cd-num {
    font-family: var(--font-heading, "Oswald", sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text, #ffffff);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.next-event-cd-label {
    font-family: var(--font-heading, "Oswald", sans-serif);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text-muted, #a0a0a0);
}

.next-event-cd-started {
    font-family: var(--font-heading, "Oswald", sans-serif);
    font-weight: 600;
    color: var(--brand-primary-light, #2e8fd4);
    margin: 0;
}

/* ── CTA ──────────────────────────────────────────────────── */

.next-event-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-heading, "Oswald", sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--white, #ffffff);
    background: var(--brand-primary, #1272ba);
    border-radius: 999px;
    padding: 0.75rem 1.75rem;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.next-event-cta:hover,
.next-event-cta:focus {
    background: var(--brand-primary-dark, #0d5a96);
    color: var(--white, #ffffff);
    transform: translateY(-2px);
}

.next-event-cta i {
    font-size: 0.8rem;
}

/* ── Image column ─────────────────────────────────────────── */

.next-event-image {
    flex: 1 1 320px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.next-event-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
}

.next-event-caption {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-family: var(--font-heading, "Oswald", sans-serif);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white, #ffffff);
    background: rgba(var(--brand-primary-rgb, 18, 114, 186), 0.85);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 767px) {
    .next-event {
        flex-direction: column;
        padding: 1.75rem;
        gap: 1.75rem;
    }

    .next-event-countdown {
        gap: 0.5rem;
    }

    .next-event-cd-item {
        padding: 0.6rem 0.4rem;
    }

    .next-event-cd-num {
        font-size: 1.25rem;
    }
}

/* ── Reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .next-event-cta {
        transition: none;
    }
}