/* ============================================================================
   event-cards.css — Componentes compartilhados entre portal público e área
   logada (PortalEventoList, EventoList, EventoDashboard).

   Define: cards de evento, selos de destaque (Bronze/Prata/Ouro), faixa
   "Em destaque" e cores das tiers em dark/light.

   Carregado tanto em public.html quanto em layout.html.
   ========================================================================== */

:root {
    --ec-radius: 14px;
    --ec-radius-sm: 8px;
    --ec-shadow: 0 4px 18px rgba(15, 23, 42, .08);
    --ec-shadow-hover: 0 10px 28px rgba(15, 23, 42, .14);
    --ec-gold: #d4a017;
    --ec-silver: #8c8f95;
    --ec-bronze: #b87333;
}

[data-bs-theme="light"] {
    --ec-card-bg: #ffffff;
    --ec-card-border: rgba(15, 23, 42, .06);
    --ec-text-strong: #0f172a;
    --ec-text-muted: #64748b;
}

[data-bs-theme="dark"] {
    --ec-card-bg: #1e293b;
    --ec-card-border: rgba(255, 255, 255, .06);
    --ec-text-strong: #f1f5f9;
    --ec-text-muted: #94a3b8;
}

/* ---------- Card de evento ---------- */
.event-card {
    background: var(--ec-card-bg);
    border: 1px solid var(--ec-card-border);
    border-radius: var(--ec-radius);
    overflow: hidden;
    box-shadow: var(--ec-shadow);
    transition: transform .18s, box-shadow .18s;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}

.event-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ec-shadow-hover);
}

.event-card-img {
    aspect-ratio: 16 / 9;
    background-color: #cbd5e1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.event-card-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.event-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--ec-text-strong);
    line-height: 1.3;
}

.event-card-meta {
    color: var(--ec-text-muted);
    font-size: .85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.event-card-meta i {
    margin-right: 4px;
}

.event-card-cta {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*flex-direction: column;*/
    flex-wrap: wrap;
    gap: 8px;
}

.event-card-price {
    font-weight: 700;
    color: var(--ec-text-strong);
    font-size: 1rem;
    flex: 1 1 280px;
}

.event-card-price.free {
    color: #16a34a;
}

/* ---------- Selos de destaque ---------- */
.tier-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: .72rem;
    font-weight: 700;
    border-radius: 999px;
    letter-spacing: .03em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .92);
    color: #0f172a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    z-index: 2;
}

.tier-badge i {
    font-size: .85rem;
}

/* Bronze */
.event-card.tier-bronze {
    border-color: var(--ec-bronze);
}

.tier-badge.bronze {
    background: var(--ec-bronze);
    color: #fff;
}

/* Prata */
.event-card.tier-prata {
    border-width: 3px;
    border-color: var(--ec-silver);
    box-shadow: 0 6px 22px rgba(140, 143, 149, .35);
}

.tier-badge.prata {
    background: var(--ec-silver);
    color: #fff;
}

/* Ouro */
.event-card.tier-ouro {
    border-width: 5px;
    border-color: var(--ec-gold);
    box-shadow: 0 10px 30px rgba(212, 160, 23, .35);
}

.event-card.tier-ouro::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(180deg, transparent 70%, rgba(212, 160, 23, .08));
}

.tier-badge.ouro {
    background: linear-gradient(135deg, #f59e0b 0%, #d4a017 100%);
    color: #fff;

}

/* ---------- Faixa "Eventos em destaque" (usada na home pública) ---------- */
.featured-strip {
    padding: 32px 24px 8px;
}

.featured-strip-inner {
    max-width: 1240px;
    margin: 0 auto;
}

.featured-strip h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--ec-text-strong);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.featured-strip h2 i {
    color: var(--ec-gold);
}

/* ---------- Carrossel Ouro (banner rotativo da home) ---------- */
.ouro-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ouro-carousel::-webkit-scrollbar {
    display: none;
}

.ouro-slide {
    flex: 0 0 min(480px, 92vw);
    scroll-snap-align: start;
}

.ouro-nav {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.ouro-prev,
.ouro-next {
    background: var(--ec-card-bg);
    border: 1px solid var(--ec-card-border);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ouro-prev:hover,
.ouro-next:hover {
    background: var(--ec-gold);
    color: #fff;
    border-color: var(--ec-gold);
}

.ouro-carousel:has(.ouro-slide:only-child)~.ouro-nav {
    display: none;
}