/* ============================================================
   EventWings homepage — Phase B: live events carousel + upcoming
   events grid + promotional banner fallback.

   Append this entire block to the END of public/assets/css/public/home.css.
   Uses the existing hw-* token system (dark theme, purple accents).
============================================================ */

/* ── Section wrapper — reuses .hw-section spacing, just adds layout helpers ── */
.hw-events-section {
    /* Layout reuses .hw-section vertical rhythm */
}

.hw-events-section .hw-section-title {
    /* Inherit base h2 styling from .hw-section-title */
}

.hw-events-section-lead {
    text-align: center;
    margin: -8px auto 32px;
    max-width: 720px;
    color: rgba(230, 238, 248, 0.65);
    font-size: 15px;
    line-height: 1.6;
}

/* ── Subsection labels ────────────────────────────── */
.hw-events-subsection-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(230, 238, 248, 0.55);
    margin: 0 0 16px 4px;
}

.hw-events-subsection-label--live {
    color: #fca5a5;
}

.hw-events-subsection-label--live::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    animation: hwPulse 2s infinite;
}

/* ============================================================
   CAROUSEL — live events
============================================================ */
.hw-carousel-wrap {
    position: relative;
    margin-bottom: 40px;
}

.hw-carousel-viewport {
    overflow: hidden;
    border-radius: 16px;
}

.hw-carousel-track {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.hw-carousel-slide {
    flex: 0 0 100%; /* Mobile: 1 slide visible */
    padding: 0 8px;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .hw-carousel-slide { flex: 0 0 50%; }
}

@media (min-width: 1024px) {
    .hw-carousel-slide { flex: 0 0 33.3333%; }
}

/* ── Carousel arrows ────────────────────────────────── */
.hw-carousel-prev,
.hw-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    z-index: 5;
    display: none; /* Hidden on mobile, swipe instead */
    align-items: center;
    justify-content: center;
    transition: background 0.18s, transform 0.12s, border-color 0.18s;
    backdrop-filter: blur(8px);
}

@media (min-width: 768px) {
    .hw-carousel-prev,
    .hw-carousel-next { display: flex; }
}

.hw-carousel-prev { left: -12px; }
.hw-carousel-next { right: -12px; }

.hw-carousel-prev:hover,
.hw-carousel-next:hover {
    background: rgba(124, 58, 237, 0.85);
    border-color: rgba(196, 181, 253, 0.4);
}

.hw-carousel-prev:active,
.hw-carousel-next:active {
    transform: translateY(-50%) scale(0.94);
}

/* ── Carousel dots ──────────────────────────────────── */
.hw-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.hw-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.18s, transform 0.18s;
}

.hw-carousel-dot:hover {
    background: rgba(255, 255, 255, 0.4);
}

.hw-carousel-dot.active {
    background: #c4b5fd;
    transform: scale(1.3);
}

/* ============================================================
   EVENT CARD — used in carousel AND upcoming grid
============================================================ */
.hw-card--event {
    display: block;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    position: relative;
    height: 100%;
    box-sizing: border-box;
}

.hw-card--event:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: 0 16px 40px rgba(124, 58, 237, 0.18);
}

/* ── Banner image / fallback ────────────────────────── */
.hw-event-banner {
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
}

.hw-event-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s;
}

.hw-card--event:hover .hw-event-banner img {
    transform: scale(1.04);
}

/* Fallback gradient text when no banner image */
.hw-event-banner-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    text-align: center;
    letter-spacing: -0.01em;
    line-height: 1.3;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(76, 29, 149, 0.6));
}

/* Subtle gradient overlay for legibility of badges */
.hw-event-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(11, 18, 32, 0.5) 100%);
    pointer-events: none;
}

/* ── LIVE badge ─────────────────────────────────────── */
.hw-event-live-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(239, 68, 68, 0.92);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 6px;
    z-index: 2;
    backdrop-filter: blur(4px);
}

.hw-event-live-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: hwPulse 1.5s infinite;
}

/* ── Entry type chip ────────────────────────────────── */
.hw-event-entry-chip {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 9px;
    background: rgba(15, 23, 42, 0.85);
    color: #c4b5fd;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 6px;
    z-index: 2;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(196, 181, 253, 0.25);
}

.hw-event-entry-chip--paid {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.3);
}

/* ── Card body ──────────────────────────────────────── */
.hw-event-body {
    padding: 16px 18px 18px;
}

.hw-event-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    letter-spacing: -0.01em;
    /* Truncate long titles to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hw-event-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: rgba(230, 238, 248, 0.65);
}

.hw-event-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hw-event-meta-row i {
    width: 14px;
    color: rgba(196, 181, 253, 0.7);
    font-size: 12px;
}

.hw-event-meta-row span {
    /* Truncate long location names on narrow cards */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   UPCOMING EVENTS GRID
============================================================ */
.hw-upcoming-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 640px) {
    .hw-upcoming-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .hw-upcoming-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   PROMOTIONAL BANNER CARD — uses event-card shell w/ distinct visual
============================================================ */
.hw-card--banner {
    /* Inherits .hw-card--event base */
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(76, 29, 149, 0.18));
    border-color: rgba(124, 58, 237, 0.2);
}

.hw-card--banner:hover {
    border-color: rgba(196, 181, 253, 0.45);
    box-shadow: 0 16px 40px rgba(124, 58, 237, 0.25);
}

.hw-banner-image {
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #4c1d95, #312e81);
}

.hw-banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
    transition: transform 0.45s, opacity 0.2s;
}

.hw-card--banner:hover .hw-banner-image img {
    transform: scale(1.04);
    opacity: 1;
}

.hw-banner-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(11, 18, 32, 0.7) 100%);
    pointer-events: none;
}

.hw-banner-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 10px;
    background: rgba(124, 58, 237, 0.85);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 6px;
    z-index: 2;
    backdrop-filter: blur(4px);
}

.hw-banner-body {
    padding: 16px 18px 18px;
}

.hw-banner-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    letter-spacing: -0.01em;
}

.hw-banner-subtitle {
    margin: 0;
    font-size: 13px;
    color: rgba(230, 238, 248, 0.7);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   "Browse all events" CTA at bottom of section
============================================================ */
.hw-events-cta-row {
    text-align: center;
    margin-top: 36px;
}

/* ============================================================
   Empty state — when both live and upcoming are 0 (banners only)
============================================================ */
.hw-events-banners-only {
    /* Banners alone displayed in same grid as upcoming */
}