/* ==========================================================================
   Calendar Alergare – Events page (FC Barcelona "Blaugrana" theme)
   Compact, uniform cards • compatibil cu noul markup (.event-card)
   ========================================================================== */

/* ---------- Tokens (Blaugrana) ---------- */
:root{
    /* Light surfaces */
    --evt-surface:      #ffffff;
    --evt-surface-2:    #f6f8fb;
    --evt-border:       #e4e7ee;

    /* Text */
    --evt-text:         #0b1220;
    --evt-text-muted:   #5b6475;

    /* Blaugrana core */
    --barca-blue:       #004D98;
    --barca-claret:     #A50044;
    --barca-gold:       #EDBB00;

    /* Primare */
    --evt-primary:      var(--barca-blue);
    --evt-primary-600:  #003b76;
    --evt-primary-100:  #e7f0fb;

    /* Hero gradient */
    --evt-hero-start:   var(--barca-claret);
    --evt-hero-end:     var(--barca-blue);

    /* Accente pe tip */
    --evt-road:         var(--barca-blue);
    --evt-road-tint:    rgba(0,77,152,.10);
    --evt-trail:        #10b981;
    --evt-trail-tint:   rgba(16,185,129,.10);

    /* KIDS */
    --evt-kids-100:     #fff6d6;
    --evt-kids-200:     #ffe38a;

    /* Elevation / focus */
    --evt-shadow-sm:    0 4px 18px rgba(0,0,0,.08);
    --evt-shadow-md:    0 10px 28px rgba(0,0,0,.14);
    --evt-ring:         0 0 0 3px rgba(0,77,152,.25);

    /* Gradients utilitare */
    --grad-blaugrana:   linear-gradient(120deg, var(--barca-claret), var(--barca-blue));
    --grad-blue-gold:   linear-gradient(135deg, var(--barca-blue), var(--barca-gold));
    --grad-claret-gold: linear-gradient(135deg, var(--barca-claret), var(--barca-gold));
}

@media (prefers-color-scheme: dark){
    :root{
        --evt-surface:     #0f1320;
        --evt-surface-2:   #131a2b;
        --evt-border:      #22304a;

        --evt-text:        #f4f6fb;
        --evt-text-muted:  #b7c0d6;

        --evt-primary:     #4f8bff;
        --evt-primary-600: #3c6ee1;
        --evt-primary-100: #1a2550;

        --evt-hero-start:  #8c0f47;
        --evt-hero-end:    #1f59a7;

        --evt-road-tint:   rgba(0,77,152,.22);
        --evt-trail-tint:  rgba(16,185,129,.16);

        --evt-shadow-sm:   0 8px 24px rgba(0,0,0,.35);
        --evt-shadow-md:   0 14px 40px rgba(0,0,0,.45);
        --evt-ring:        0 0 0 3px rgba(79,139,255,.35);
    }
}

/* ---------- Page ---------- */
.events-page{
    background: var(--evt-surface);
    color: var(--evt-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.events-page a{ color: var(--evt-primary); text-decoration: none; }
.events-page a:hover{ color: var(--evt-primary-600); }

/* Bootstrap primary – contrast corect */
.btn-primary{
    background: var(--evt-primary);
    border-color: var(--evt-primary);
    color:#fff;
}
.btn-primary:hover{
    background: var(--evt-primary-600);
    border-color: var(--evt-primary-600);
}

/* ---------- HERO ---------- */
.events-hero{
    position: relative; color:#fff; border:0; overflow:hidden;
    background: var(--grad-blaugrana);
}
.events-hero::after{
    content:""; position:absolute; inset:0;
    background:
            radial-gradient(1200px 500px at -10% -10%, rgba(237,187,0,.22), transparent 60%),
            radial-gradient(900px 400px at 110% 120%, rgba(255,255,255,.12), transparent 60%);
    pointer-events:none;
}
.events-hero h1{ font-weight:800; letter-spacing:.2px; text-shadow:0 1px 0 rgba(0,0,0,.25); }
.events-hero p { color:rgba(255,255,255,.92); text-shadow:0 1px 0 rgba(0,0,0,.25); }
.events-hero .btn{ color:#fff; border-color:rgba(255,255,255,.8); }
.events-hero .btn:hover{ background:rgba(255,255,255,.14); border-color:#fff; }

/* ---------- Month sticky ---------- */
.month-sticky{
    position: sticky; top: 72px; z-index:5;
    margin: 2rem 0 1rem; padding:.55rem .9rem;
    border-radius:.6rem;
    background: var(--grad-blue-gold);
    color:#fff;
    font-weight:700; text-transform:capitalize; letter-spacing:.15px;
    box-shadow: var(--evt-shadow-sm);
}

/* ==========================================================================
   LISTĂ EVENIMENTE (uniformizare carduri)
   ========================================================================== */

.events-grid { /* <ul> */
    display:block;
}
.event-item{ margin-bottom:1rem; list-style:none; }

/* CARD NOU (flex vertical, acțiuni jos) */
.event-card{
    display:grid;
    grid-template-columns: 160px 1fr auto;
    gap:1rem;

    padding:1rem;
    border:1px solid var(--evt-border);
    border-radius:1rem;
    background: var(--evt-surface);
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.event-item.is-road .event-card{
    background: linear-gradient(0deg, var(--evt-road-tint), var(--evt-road-tint)), var(--evt-surface);
}
.event-item.is-trail .event-card{
    background: linear-gradient(0deg, var(--evt-trail-tint), var(--evt-trail-tint)), var(--evt-surface);
}
.event-card:is(:hover,:focus,.is-hovered){
    transform: translateY(-2px);
    box-shadow: var(--evt-shadow-md);
    border-color: rgba(165,0,68,.28);
    cursor: pointer;
    outline: none;
}
.event-card:focus-visible{ box-shadow: var(--evt-shadow-md), var(--evt-ring); }

/* THUMB / IMAGINE */
.event-thumb{
    position:relative;
    align-self:start;
    aspect-ratio: 16 / 9;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:.7rem;
    background:var(--evt-surface-2);
    border:1px solid var(--evt-border);
    box-shadow: var(--evt-shadow-sm);
}

.thumb-img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

/* Badge tip pe colțul imaginii */
.type-badge{
    position:absolute; left:.5rem; top:.5rem;
    padding:.2rem .5rem; border-radius:.5rem;
    font-weight:800; font-size:.75rem; color:#fff;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
}
.type-badge.road{ background: linear-gradient(135deg, rgba(0,77,152,.9), rgba(0,77,152,.75)); }
.type-badge.trail{ background: linear-gradient(135deg, rgba(16,185,129,.9), rgba(16,185,129,.75)); }

/* CONȚINUT */
.event-body{ display:flex; flex-direction:column; gap:.35rem; }

.event-logo-overlay{
    position:absolute;
    right:.5rem;
    bottom:.5rem;
    z-index:2;
    max-width:46%;
    pointer-events:none;
}

.event-logo-badge-list{
    padding:4px 8px;
    border-radius:12px;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(255,255,255,.7);
    box-shadow:0 2px 8px rgba(15,23,42,.14);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    backdrop-filter:blur(2px);
}

.event-logo-badge-list img{
    display:block;
    width:auto;
    height:auto;
    max-width:min(100%, 120px);
    max-height:34px;
    object-fit:contain;
}

.event-title{ margin:0; font-size:1.08rem; font-weight:800; }
.event-link{ color: var(--evt-text); }
.event-link:hover{ color: var(--barca-claret); }

.event-meta{
    display:flex; gap:1rem; flex-wrap:wrap;
    font-size:.94rem; color:var(--evt-text-muted);
}
.event-meta .meta{ display:inline-flex; align-items:center; gap:.35rem; }

/* TAGS / CURSE */
.event-tags{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.chip{
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.28rem .6rem; border-radius:999px;
    font-weight:800; font-size:.76rem; letter-spacing:.02em;
    background: var(--evt-surface-2); color: var(--evt-text);
    border:1px solid var(--evt-border);
}
.chip.kids{
    background:#fff4c1; border-color:#ffe388; color:#7a5b00;
}

.races-inline{ display:flex; gap:.35rem; flex-wrap:wrap; }
.race-chip{
    display:inline-flex; align-items:center;
    padding:.2rem .5rem; font-size:.72rem; font-weight:700;
    border-radius:.55rem; background:var(--evt-surface-2); border:1px solid var(--evt-border);
}

.event-desc{ margin:.25rem 0 0; color:var(--evt-text); opacity:.96; }

/* ACȚIUNI – aliniate jos pentru carduri egale ca înălțime */
.event-actions{
    display:flex; align-items:flex-end; gap:.5rem; justify-self:end;
}
.btn-soft{
    background:#fff;
    color: var(--barca-claret);
    border: 1px solid var(--barca-claret);
    font-weight: 800;
}
.btn-soft:hover{
    background: var(--grad-blaugrana);
    color: #fff;
    border-color: transparent;
}
.btn-soft:focus-visible{ box-shadow: var(--evt-ring); outline: none; }

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
.filters-card{
    background: var(--evt-surface);
    border:1px solid var(--evt-border);
    border-radius:1rem; padding:1rem;
    box-shadow: var(--evt-shadow-sm);
}
.filters-head{
    font-weight:900; margin-bottom:.55rem;
    background: var(--grad-claret-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.chipset{ display:flex; gap:.5rem; flex-wrap:wrap; }
.chip-filter{ background: var(--evt-surface-2); border-color: var(--evt-border); font-weight:800; }
.chip-filter.active{
    background: var(--grad-blaugrana);
    border-color: transparent; color:#fff;
}

/* ==========================================================================
   TABURI LUNI
   ========================================================================== */
.months-tabs{
    display:flex; align-items:center; justify-content:space-between;
    gap:.75rem; background: var(--evt-surface);
    border:1px solid var(--evt-border); border-radius:.9rem;
    padding:.5rem .75rem; box-shadow: var(--evt-shadow-sm);
}
.months-tabs .tabs-inner{
    display:grid; grid-auto-flow:column; grid-auto-columns:max-content;
    gap:.5rem; overflow-x:auto;
}
.months-tabs .tabs-inner::-webkit-scrollbar{ height:8px; }
.months-tabs .tabs-inner::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.20); border-radius: 4px; }

.month-tab{
    appearance:none; border:1px solid var(--evt-border);
    background: var(--evt-surface-2); color: var(--evt-text);
    padding:.4rem .75rem; border-radius:999px;
    font-weight:800; font-size:.95rem; white-space:nowrap;
}
.month-tab:hover{
    border-color: transparent; color:#fff;
    background: var(--grad-blaugrana); box-shadow: var(--evt-ring); cursor:pointer;
}
.month-tab.active{
    border-color: transparent; color:#fff; background: var(--grad-blue-gold);
}

/* Două coloane când o lună are multe evenimente */
#eventsList.two-cols{
    display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
#eventsList.two-cols .event-item{ margin-bottom:0; }
#eventsList.two-cols .month-sticky{ grid-column:1 / -1; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 992px){
    .event-card{ grid-template-columns: 132px 1fr; }
    .event-logo-overlay{ max-width:52%; }
    .event-logo-badge-list img{
        max-width:min(100%, 96px);
        max-height:30px;
    }
    .event-actions{ grid-column: 2; justify-self:start; align-items:center; }
}
@media (max-width: 576px){
    .events-hero{ border-radius:.75rem; }
    .event-card{ grid-template-columns: 1fr; }
    .event-logo-overlay{ max-width:42%; }
    .event-logo-badge-list img{
        max-width:min(100%, 110px);
        max-height:32px;
    }
    .event-actions{ grid-column: 1; justify-self:start; }
    .month-sticky{ top:64px; }
}

/* Utilitare */
.text-capitalize{ text-transform: capitalize; }


/* Favorites button (☆/★) */
.btn-fav{
    width: 2.1rem;
    text-align: center;
    font-weight: 900;
    line-height: 1;
}
.btn-fav.is-fav{
    color: var(--barca-gold);
    border-color: var(--barca-gold);
}
.btn-fav.is-busy{
    opacity: .75;
    pointer-events: none;
}