/* ================================================
   THEME VARIABLES (Barcelona-inspired, not identical)
   ================================================ */
:root{
    /* Core hues */
    --fc-blue:   #0A4AA3;   /* deep royal blue */
    --fc-claret: #8E0F3E;   /* deep claret */
    --fc-gold:   #E8B100;   /* warm gold */

    /* Neutrals */
    --fc-dark:      #1B1E28;
    --fc-text:      #2A2D30;
    --fc-muted:     #6C747B;
    --fc-surface:   #FFFFFF;
    --fc-surface-2: #F5F7FA;
    --fc-border:    #E2E6ED;

    /* Gradients */
    --grad-primary:   linear-gradient(90deg, var(--fc-claret), var(--fc-blue));
    --grad-secondary: linear-gradient(90deg, var(--fc-blue), var(--fc-claret));
    --grad-diag:      linear-gradient(135deg, var(--fc-claret) 0%, var(--fc-blue) 60%, var(--fc-gold) 100%);
    --grad-overlay:   linear-gradient(180deg, rgba(27,30,40,.70) 0%, rgba(27,30,40,.35) 45%, rgba(27,30,40,.70) 100%);
    --grad-soft:      linear-gradient(90deg, #f7f9fc 0%, #ffffff 100%);

    /* Focus + elevation */
    --focus-ring: 0 0 0 3px rgba(232,177,0,.35);
    --elev-1: 0 4px 6px rgba(0,0,0,.08);
    --elev-2: 0 8px 14px rgba(0,0,0,.10);
    --elev-3: 0 16px 28px rgba(0,0,0,.12);

    /* Legacy tokens */
    --evt-surface-2: var(--fc-surface-2);
    --evt-border:    var(--fc-border);
}

/* ==================
   GLOBAL BASE STYLES
   ================== */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    margin:0; padding:0;
    background: var(--grad-soft);
    color: var(--fc-text);
}
img{ max-width: 100%; display:block; }
.py-section{ padding: clamp(2rem, 4vw, 4rem) 0; }

/* ======= Buttons: aceeasi familie + lizibilitate ======= */
.btn{ font-family: inherit; font-weight: 600; }

/* ==========================
   SITE HEADER (scoped styles)
   ========================== */
#site-header{ margin:0; padding:0; border:0; background: transparent; }

#site-header .app-header{
    --logo-h: clamp(44px, 5.5vh, 60px);
    --title-size: clamp(1rem, 1.7vw, 1.3rem);

    position: relative;
    display: flex; align-items: center; justify-content:flex-start;
    gap:.65rem; height: var(--logo-h);
    padding: 0 .75rem; margin:0;
    background: var(--grad-primary);
    box-shadow: var(--elev-1); line-height:0; overflow:hidden;
}
#site-header .app-header__logo{ display:inline-flex; align-items:center; height:100%; text-decoration:none; z-index:2; }
#site-header .app-header__logo img{ height: calc(var(--logo-h) - 8px); width:auto; max-height:100%; }
#site-header .app-header__title{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    margin:0; padding:0 2.5rem; font-size:var(--title-size); font-weight:600; line-height:1;
    color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.25); pointer-events:none;
}
#site-header .app-header::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
    background: linear-gradient(90deg, transparent, var(--fc-gold), transparent);
    opacity:.5; pointer-events:none;
}
@media (max-width:420px){
    #site-header .app-header{ --logo-h: 48px; }
    #site-header .app-header__title{ font-size: clamp(.95rem, 4.2vw, 1.15rem); padding: 0 1.25rem; }
}

/* ======================
   NAVBAR (Bootstrap scope)
   ====================== */
.navbar{ background: var(--grad-secondary); box-shadow: var(--elev-1); }
.navbar-dark .navbar-brand{ font-size:1.25rem; font-weight:700; color:#fff; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
    .navbar-dark .navbar-brand{
        background: linear-gradient(90deg, #ffffff, #f3f3f3);
        -webkit-background-clip:text; background-clip:text; color:transparent;
    }
}
.navbar-dark .navbar-nav .nav-link{ font-size:1rem; color:#fff; transition: color .25s ease, opacity .25s ease; }
.navbar-dark .navbar-nav .nav-link:hover{ color:#fff; opacity:.9; }
.navbar-dark .navbar-toggler{ border-color: rgba(255,255,255,.15); }
.navbar-dark .navbar-toggler-icon{ filter: invert(1); }

/* =========
   HERO AREA
   ========= */

/* HERO: dimensiune mare + imagine intreaga vizibila */
.hero--xl { min-height: clamp(38vh, 55vh, 62vh); }

.hero-illustration { position: relative; }
.hero-img{
    display:block;
    width:100%;
    height:100%;
    /* vezi toata imaginea, fara crop */
    object-fit: contain;
    /* fortam raport 3:1 la container (nu taie imaginea) */
    aspect-ratio: 3 / 1;
    background: #0d1320; /* culoare de fundal in zonele libere */
}

/* umbrire usoara in centru pt. lizibilitate titlu */
.hero-shade{
    position:absolute; inset:0; pointer-events:none;
    background:
            radial-gradient(closest-side, rgba(0,0,0,.45), rgba(0,0,0,.25) 40%, rgba(0,0,0,0) 70%)
            center/70% 100% no-repeat;
}

.hero-inner{ position: relative; z-index: 1; padding: clamp(2rem, 4vw, 5rem) 0; }
.hero-title{ color:#fff; font-weight:800; text-shadow: 0 2px 8px rgba(0,0,0,.45); }

.hero-subtitle{
    margin: 0 auto 1rem;
    max-width: 48rem;
    color: #f0f2f5;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.shortcuts .btn{ white-space: nowrap; }

/* IMPORTANT: anulam orice stil vechi care forta imaginea ca background cover */
.hero-illustration.is-bg,
.hero-illustration{
    background: none !important;
    transform: none !important;
}


/* ===================
   FEATURE STRIP (grid)
   =================== */
.feature-strip .section-title{ margin-bottom: 2rem; }

/* Caseta de baza – premium, cu icon in badge rotund, aliniere uniforma a butoanelor */
.card-feature{
    position: relative;
    border: 1px solid rgba(226,230,237,.9);
    border-radius: 1rem;
    background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.6), #fff 55%);
    box-shadow: 0 6px 16px rgba(10,20,40,.06);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    height: 100%;
}
.card-feature:hover{ transform: translateY(-2px); box-shadow: var(--elev-2); border-color: rgba(226,230,237,1); }
.card-feature .card-body{
    display: flex; flex-direction: column; align-items: center;
    gap: .65rem; padding: 1.25rem 1.1rem;
    min-height: 230px;
}
.card-feature .feature-icon{
    display: inline-grid; place-items: center;
    width: 3.25rem; height: 3.25rem; border-radius: 999px;
    background: linear-gradient(145deg, #ffffff, #f3f6fb);
    box-shadow: inset 0 2px 6px rgba(10,20,40,.06), 0 3px 10px rgba(10,20,40,.06);
    font-size: 1.35rem; color: var(--fc-blue);
}
.card-feature .feature-title{ margin:.35rem 0 0 0; font-weight: 800; letter-spacing:.2px; }
.card-feature .feature-text{ color: var(--fc-muted); max-width: 18rem; }
/* impinge grupul de butoane in jos – toate casetele aliniaz baza */
.card-feature .card-body > .btn,
.card-feature .card-body > .d-flex{ margin-top: auto; }

/* Variante “spectaculoase” (gradient) */
.card-feature--gradient-1{
    background:
            radial-gradient(60% 120% at 0% 0%, rgba(255,255,255,.25), transparent 60%),
            linear-gradient(135deg, #9b123f 0%, #0a4aa3 75%);
    color:#fff; border:0;
}
.card-feature--gradient-2{
    background:
            radial-gradient(60% 120% at 100% 0%, rgba(255,255,255,.22), transparent 60%),
            linear-gradient(135deg, #0a4aa3 0%, #8e0f3e 75%);
    color:#fff; border:0;
}
.card-feature--gradient-3{
    background:
            radial-gradient(60% 120% at 50% 0%, rgba(255,255,255,.2), transparent 60%),
            linear-gradient(135deg, #0a4aa3 0%, #e8b100 80%);
    color:#1B1E28; border:0;
}
.card-feature--gradient-4{
    background:
            radial-gradient(60% 120% at 50% 100%, rgba(255,255,255,.2), transparent 60%),
            linear-gradient(135deg, #8e0f3e 0%, #e8b100 80%);
    color:#1B1E28; border:0;
}
/* icon contrast corect pe gradient */
.card-feature--gradient-1 .feature-icon,
.card-feature--gradient-2 .feature-icon{ color:#0B1B2F; background: rgba(255,255,255,.9); }
.card-feature--gradient-3 .feature-icon,
.card-feature--gradient-4 .feature-icon{ color:#111827; background:#fff; }

/* Butoane vizibile pe orice fundal de card */
.card-feature .btn{ font-size:.95rem; border-radius:.6rem; padding:.5rem .8rem; }
.card-feature--gradient-1 .btn.btn-light,
.card-feature--gradient-2 .btn.btn-light{
    background: rgba(255,255,255,.98) !important;
    color:#0F172A !important;
    border:0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.card-feature--gradient-1 .btn.btn-outline-light,
.card-feature--gradient-2 .btn.btn-outline-light{
    background: transparent; border:1px solid rgba(255,255,255,.85); color:#fff;
}
.card-feature--gradient-3 .btn.btn-light,
.card-feature--gradient-4 .btn.btn-light{
    background:#fff; color:#111827; border:1px solid rgba(17,24,39,.12);
}
.card-feature--gradient-3 .btn.btn-outline-light,
.card-feature--gradient-4 .btn.btn-outline-light{
    background:transparent; border:1px solid rgba(17,24,39,.35); color:#111827;
}
.card-feature .btn:hover{ transform: translateY(-1px); box-shadow: var(--elev-2); }
.card-feature .d-flex.gap-2.flex-wrap{ width:100%; display:flex; justify-content:center; }
.card-feature .btn.btn-sm{ padding:.45rem .75rem; font-size:.92rem; }
.card-feature .btn:hover, .card-feature .btn:focus{ opacity:1 !important; }

/* =========================================
   TEASER: Urmatoarele 30 zile (cards square)
   ========================================= */
.hp-events-grid{
    display:grid; grid-template-columns:repeat(12,1fr);
    gap:1rem; padding:0; margin:1rem 0 0 0;
}
.hp-events-grid > li{ list-style:none; grid-column:span 12; }
@media (min-width:576px){ .hp-events-grid > li{ grid-column:span 6; } }
@media (min-width:992px){ .hp-events-grid > li{ grid-column:span 4; } }

.card-ev{
    display:flex; flex-direction:column;
    border:1px solid var(--fc-border);
    border-radius:.75rem; background:#fff;
    box-shadow: var(--elev-1); overflow:hidden; height:100%;
    transition: transform .15s ease, box-shadow .2s ease;
}
.card-ev:hover{ transform: translateY(-1px); box-shadow: var(--elev-2); }
.ev-square .thumb{ position:relative; aspect-ratio:1/1; background:#f8fafc; }
.thumb-img{ width:100%; height:100%; object-fit:cover; }
.badge-type{
    position:absolute; left:.5rem; top:.5rem;
    font-size:.75rem; font-weight:700; border-radius:.5rem; padding:.25rem .5rem;
    color:#fff; background:#1f2937; opacity:.95;
}
.badge-type.trail{ background:#065f46; }
.badge-type.road{ background:#1f2937; }

.card-ev .body{ padding:.75rem .9rem; display:flex; flex-direction:column; gap:.4rem; }
.event-title{ font-size:1rem; line-height:1.2; margin:0; }
.event-link{ text-decoration:none; color:#111827; }
.event-link:hover{ text-decoration: underline; }
.meta{ font-size:.9rem; color: var(--fc-muted); display:flex; flex-wrap:wrap; gap:.5rem; }
.event-tags{ display:flex; flex-wrap:wrap; gap:.35rem; }
.chip{ font-size:.75rem; border:1px solid var(--fc-border); border-radius:999px; padding:.15rem .5rem; background:#f9fafb; }
.chip.kids{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.races-inline{ display:flex; gap:.35rem; overflow:auto; scrollbar-width:none; }
.races-inline::-webkit-scrollbar{ display:none; }

.ev-actions{ padding:.75rem .9rem .9rem; display:flex; gap:.5rem; }
.btn-soft{ border:1px solid var(--fc-border); background:#fff; transition: box-shadow .2s ease, transform .15s ease; }
.btn-soft:hover{ box-shadow: var(--elev-1); transform: translateY(-1px); }

/* ================
   TEASER: BLOG LIST
   ================ */
.teaser-blog .section-title{ margin-bottom: 1rem; }
.card-post{
    border:1px solid var(--fc-border); border-radius:.75rem;
    background: var(--fc-surface); box-shadow: var(--elev-1); overflow:hidden;
    transition: transform .15s ease, box-shadow .2s ease;
}
.card-post:hover{ transform: translateY(-1px); box-shadow: var(--elev-2); }
.post-thumb{ display:block; }
.img-cover{ width:100%; height:100%; object-fit: cover; }
.card-post .body{ padding: 1rem; display:flex; flex-direction:column; height:100%; }
.post-title{ font-size:1.05rem; margin:.25rem 0 .4rem; }
.post-excerpt{ color: var(--fc-muted); margin-bottom:.75rem; }
.card-post .meta{ color: var(--fc-muted); font-size:.9rem; }

/* small helper for reading time text in lists (blog grid, teasers etc.) */
.reading-time{
    font-size:.85rem;
    color: inherit;
    display:inline-flex;
    align-items:center;
    gap:.2rem;
}
.reading-time i{
    font-size:.9em;
}

/* ===================
   CTA Organizatori
   =================== */
.cta-organizers{ background: var(--grad-primary); color:#fff; }
.cta-organizers .cta-title{ text-align:center; font-weight:800; margin:0 0 .25rem; }
.cta-organizers .cta-subtitle{ text-align:center; color:#f0f2f5; margin:0 0 1rem; }

/* ======
   FOOTER
   ====== */
footer{
    background: var(--grad-primary); color:#fff; text-align:center;
    padding:1.5rem 0; margin-top:2rem; font-size:.9rem;
}
footer a{ color:#fff; text-decoration:none; }
footer a:hover{ text-decoration:underline; color:#f0f2f5; }

/* =======
   BUTTONS
   ======= */
.btn-primary{
    background: var(--grad-secondary);
    border:1px solid transparent;
    color:#fff;
    transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn-primary:hover{ background: var(--grad-primary); transform: translateY(-1px); box-shadow: var(--elev-2); }
.btn-primary:active{ transform: translateY(0); box-shadow: var(--elev-1); }
.btn-primary:focus{ outline:none; box-shadow: var(--focus-ring); }

.btn-accent{
    background: linear-gradient(90deg, #F1C64A, var(--fc-gold));
    color:#1E222B; border:1px solid rgba(0,0,0,.05);
}
.btn-accent:hover{ background: linear-gradient(90deg, var(--fc-gold), #F1C64A); }

/* =====
   FORMS
   ===== */
input, textarea{
    border:1px solid var(--fc-border); border-radius:.25rem;
    padding:.5rem; font-size:1rem; width:100%; background:#fff;
}
input:focus, textarea:focus{
    outline:none; border-image: linear-gradient(90deg, var(--fc-blue), var(--fc-claret)) 1; box-shadow: var(--focus-ring);
}

/* =====
   CARDS
   ===== */
.card{
    box-shadow: var(--elev-1); border-radius:.5rem;
    overflow:hidden; margin-bottom:1.5rem; background: var(--fc-surface);
    border:1px solid var(--fc-border);
}
.card img{ max-width:100%; height:auto; display:block; border-bottom:1px solid var(--fc-border); }
.card-body{ padding:1.5rem; }

/* ===================
   BLOG POST CONTENT
   =================== */
.blog-post-content{
    font-family: Georgia, "Times New Roman", serif;
    font-size:1.1rem; line-height:1.8; color: var(--fc-text);
    text-align:justify; margin:0 auto; max-width:800px; padding:1.5rem;
    background: var(--fc-surface);
    box-shadow: var(--elev-1); border-radius:.5rem; border:1px solid var(--fc-border);
}
.blog-post-content h1{
    font-family:'Roboto', Arial, sans-serif;
    margin-bottom:1.5rem; line-height:1.2; font-size:2.2rem; text-align:center;
    background: var(--grad-secondary);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.blog-post-content h2{
    font-family:'Roboto', Arial, sans-serif;
    margin-bottom:1rem; line-height:1.3; font-size:1.6rem; color: var(--fc-blue);
    border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, var(--fc-claret), var(--fc-blue)) 1;
    padding-bottom:.5rem;
}
.blog-post-content p{ margin-bottom:1.5rem; }
.blog-post-content a{
    color: var(--fc-blue); text-decoration: underline;
    background-image: linear-gradient(90deg, var(--fc-gold), var(--fc-gold));
    background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat;
    transition: color .2s ease, background-size .25s ease;
}
.blog-post-content a:hover{ color: var(--fc-claret); text-decoration:none; background-size: 100% 2px; }
.blog-post-content img{ max-width:100%; border-radius:.5rem; margin:1.5rem 0; box-shadow: var(--elev-1); }
.blog-post-content blockquote{
    font-style:italic; background: linear-gradient(90deg, #F6F8FC, #FFFFFF);
    border-left:6px solid transparent; border-image: linear-gradient(180deg, var(--fc-claret), var(--fc-blue)) 1;
    padding:1rem 1.5rem; margin:1.5rem 0; color: var(--fc-muted);
}
.blog-post-content table{
    width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:1rem;
    background: var(--fc-surface); border:1px solid var(--fc-border);
}
.blog-post-content th, .blog-post-content td{ padding:.75rem; border:1px solid var(--fc-border); text-align:left; }
.blog-post-content th{ background: linear-gradient(90deg, #F2F5FB, #FFFFFF); font-weight:700; }
@media (max-width:768px){
    .blog-post-content{ padding:1rem; }
    .blog-post-content h1{ font-size:1.9rem; }
    .blog-post-content h2{ font-size:1.4rem; }
}

/* ==================
   SEARCH CARD RADIUS
   ================== */
#classic .card{ border-radius:.9rem; }

/* =================
   DISTANCE CHIP-UI
   ================= */
.distance-chips{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.chip-check{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.25rem .6rem; border:1px solid var(--evt-border, var(--fc-border));
    border-radius:999px; background: var(--evt-surface-2, var(--fc-surface-2));
    cursor:pointer; user-select:none; font-weight:700; font-size:.85rem;
    transition: box-shadow .2s ease;
}
.chip-check input{ display:none; }
.chip-check input:checked + span{
    color:#fff; background: var(--grad-primary);
    padding:.2rem .5rem; border-radius:999px; box-shadow: var(--elev-1);
}

/* =========================================
   COMPAT: blog-list hero (daca este folosit)
   ========================================= */
.hero.blog-list{ min-height:38vh; background: url("../images/blog-hero.jpg") center/cover no-repeat; }

.races-hero{
    border-radius: .75rem;
    padding: 2.25rem 1.25rem;
    color:#fff;
    overflow:hidden;
}
.races-hero h1{ text-shadow:0 2px 10px rgba(0,0,0,.35); }
.logo-chip{
    width:48px;height:48px;object-fit:cover;border-radius:50%;
    border:1px solid #e5e7eb;background:#fff;
}

/* Editor Descriere scurta (HTML) */
.shortdesc-toolbar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
.shortdesc-toolbar .btn{padding:.25rem .5rem;font-size:.9rem}
.shortdesc-editor{
    min-height: 260px;
    max-height: 600px;
    overflow: auto;
    resize: vertical;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    padding: .75rem .9rem;
    background: #fff;
}
.shortdesc-editor:focus{outline:0; box-shadow: 0 0 0 .2rem rgba(13,110,253,.15); border-color:#86b7fe}
.shortdesc-counter{font-size:.85rem}
.shortdesc-limit{color:#dc3545;font-weight:600}

/* =====================================
   BLOG RELATED SECTION (viewBlogPost)
   Scopat pe .blog-related-... pentru a
   nu afecta alte carduri
   ===================================== */
.blog-related-section{
    border-radius: 1.25rem;
    background:
            radial-gradient(130% 160% at 0% 0%, rgba(255,255,255,.98), #f8fafc 55%, #eef2ff 100%);
    border: 1px solid rgba(226,230,237,.9);
    box-shadow: var(--elev-1);
    margin-top: 1.75rem;
}
.blog-related-section .card-body{
    padding: 1.5rem 1.5rem 1.25rem;
}
@media (max-width: 576px){
    .blog-related-section .card-body{
        padding: 1.25rem 1rem 1rem;
    }
}

/* titlul principal al sectiunii */
.blog-related-section > .card-body > h2.h4{
    font-weight: 700;
    letter-spacing: .01em;
    margin-bottom: .25rem;
}
.blog-related-section > .card-body > p.text-muted{
    font-size: .9rem;
    max-width: 40rem;
}

/* headere de subsectiune (Din aceeasi serie / categorie / evenimente) */
.blog-related-section h3.h6{
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--fc-muted);
    padding-bottom: .3rem;
    margin-bottom: .25rem;
    position: relative;
}
.blog-related-section h3.h6::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    width: 56px; height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--fc-claret), var(--fc-blue));
    opacity:.9;
}

/* grid de carduri – folosim Bootstrap cols, aici doar ajustam spacing */
.blog-related-section .row.g-3{
    margin-top: .25rem;
}

/* card de articol / eveniment (comun) */
.blog-related-section .related-card{
    border-radius: .9rem;
    border: 1px solid var(--fc-border);
    background: var(--fc-surface);
    box-shadow: 0 3px 10px rgba(15,23,42,.06);
    padding: .65rem .8rem;
    height: 100%;
    display:flex;
    flex-direction:column;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.blog-related-section .related-card:hover{
    transform: translateY(-2px);
    box-shadow: var(--elev-2);
    border-color: rgba(148,163,184,.8);
    background: #ffffff;
}

/* imagine card articol */
.blog-related-section .related-thumb{
    width: 100%;
    height: 160px;
    border-radius: .75rem;
    object-fit: cover;
    margin-bottom: .5rem;
    box-shadow: 0 2px 6px rgba(15,23,42,.12);
}
@media (max-width: 768px){
    .blog-related-section .related-thumb{
        height: 140px;
    }
}

/* titlu + meta pentru card-ul de articol */
.blog-related-section .related-card h4{
    font-size: .95rem;
    line-height: 1.35;
    margin: 0 0 .25rem;
    font-weight: 600;
}
.blog-related-section .related-meta{
    font-size: .8rem;
    color: var(--fc-muted);
}

/* optional: excerpt (daca il vei folosi in viitor) */
.blog-related-section .related-excerpt{
    font-size: .85rem;
    color: var(--fc-muted);
    margin-top: .25rem;
    max-height: 3.1em;
    overflow: hidden;
}

/* card de eveniment – accent diferit (banda colorata) */
.blog-related-section .related-card--event{
    border-left: 4px solid var(--fc-blue);
    padding-left: .8rem;
}

/* badge pentru tip cursa (trail / road / kids etc.) */
.blog-related-section .badge-event-type{
    display:inline-flex;
    align-items:center;
    gap:.25rem;
    padding:.15rem .45rem;
    border-radius:999px;
    font-size:.75rem;
    font-weight:600;
    color:#ffffff;
    background:#1f2937;
}
.blog-related-section .badge-event-type.trail{ background:#065f46; }
.blog-related-section .badge-event-type.road{ background:#1f2937; }
.blog-related-section .badge-event-type.kids{ background:#b45309; }

/* label pentru eveniment incheiat */
.blog-related-section .event-status-ended{
    font-size:.75rem;
    font-weight:600;
    color:#b91c1c;
}

/* layout clar pe mobil – cardurile in coloana, full width */
@media (max-width: 576px){
    .blog-related-section .col-12{
        display:flex;
    }
    .blog-related-section .col-12 > a{
        flex:1;
    }
}

/* ================= BLOG hero and cards ================= */

/* Hero only for blog page */
.blog-hero {
    position: relative;
    min-height: clamp(320px, 36vw, 520px);
    display: grid;
    align-items: end;
    overflow: clip;
    border-radius: 0.5rem;
    isolation: isolate;
}

.blog-hero .hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -2;
}

.blog-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .55) 70%);
    z-index: -1;
}

/* Horizontal strip for featured posts */
.featured-strip {
    scroll-snap-type: x mandatory;

    /* ensure horizontal scrolling works well on mobile */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;

    /* make first/last card fully visible */
    padding-inline: 12px;
    scroll-padding-inline: 12px;
}

/* Home: keep left aligned on mobile; center only on large screens */
.featured-strip--home {
    justify-content: flex-start;
}
@media (min-width: 992px) {
    .featured-strip--home {
        justify-content: center;
    }
}
.featured-card {
    width: clamp(260px, 32vw, 360px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}

.featured-card .card-img-top {
    height: 210px;
    width: 100%;
    object-fit: cover;
}

.featured-card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Main blog grid cards, reusable in other pages */
.blog-grid-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-grid-card .card-img-top {
    height: 230px;
    width: 100%;
    object-fit: cover;
}

.blog-grid-card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

/* Blog filters and search (blog list page) */
.blog-filters-card{
    border-radius: .9rem;
    border: 1px solid var(--fc-border);
    background: var(--fc-surface);
    box-shadow: var(--elev-1);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.blog-filters-card .filters-title{
    font-weight: 700;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--fc-muted);
    margin-bottom: .35rem;
}

.blog-filters-row{
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: flex-end;
}

.blog-filters-row .form-group{
    flex: 1 1 160px;
}

.blog-filters-row .form-control,
.blog-filters-row select{
    border-radius: .65rem;
    border: 1px solid var(--fc-border);
    background-color: #fff;
    font-size: .95rem;
}

.blog-filters-row .btn-primary,
.blog-filters-row .btn-soft{
    border-radius: .65rem;
    padding: .45rem .9rem;
    font-size: .95rem;
}

.blog-filters-row .btn-soft{
    border-color: var(--fc-border);
    background:#fff;
}

.blog-filters-row .btn-soft:hover{
    box-shadow: var(--elev-1);
}

/* compact filter card on small screens */
@media (max-width: 768px){
    .blog-filters-card{
        padding: .9rem .8rem;
    }
    .blog-filters-row{
        align-items: stretch;
    }
}

/* Blog list grid (main articles list) */
.blog-list-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:1.5rem;
    list-style:none;
    padding:0;
    margin:0;
}

.blog-list-grid > li{
    height:100%;
}

.blog-list-grid .card-post{
    height:100%;
}

.blog-list-grid .card-post .post-title{
    font-size:1.05rem;
}

.blog-list-grid .card-post .post-excerpt{
    font-size:.9rem;
}

/* compact cards for sidebars or secondary sections */
.blog-list-compact .card-post .card-img-top,
.blog-list-compact .card-post .img-cover{
    height:150px;
}

/* badge “Eveniment” pe cardurile de blog */
.badge-blog-event{
    font-size:.75rem;
    font-weight:600;
    border-radius:999px;
    padding:.15rem .55rem;
    background:rgba(34,197,94,.08);
    color:#166534;
    border:1px solid rgba(74,222,128,.7);
}

/* CTA si chips de judet in viewBlogPost */
.event-cta{
    padding:.6rem .75rem;
    border-radius:.75rem;
    background:linear-gradient(135deg, rgba(22,163,74,.04), rgba(37,99,235,.03));
    border:1px solid rgba(209,213,219,.9);
}

.event-cta .btn{
    box-shadow: var(--elev-1);
}

.event-cta .chip{
    background:#f9fafb;
    border-color:var(--fc-border);
    font-size:.8rem;
}

/* ============== HOME PAGE (gradient, hero, cards) ============== */

/* colors for home gradient */
:root {
    --ro-red: #ce1126;
    --ro-yellow: #fcd116;
    --ro-blue: #002b7f;
}

/* gradient background – only when body has with-gradient */
body.with-gradient{
    background: linear-gradient(
            90deg,
            var(--ro-red) 0%,
            var(--ro-yellow) 50%,
            var(--ro-blue) 100%
    ) fixed !important;
    min-height: 100dvh;
}

/* home hero, similar idea with blog hero */
.home-hero {
    position: relative;
    min-height: clamp(260px, 50vh, 420px);
    display: grid;
    align-items: end;
    overflow: clip;
    border-radius: 0.5rem;
    isolation: isolate;
}

.home-hero .hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: -2;
}

.home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 30% 0%, rgba(0, 0, 0, 0.22), transparent 60%),
            linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.7) 80%);
    z-index: -1;
}

.home-hero-title {
    color: #fff;
    font-weight: 800;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* glass cards for platform features */
.card-glass {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    border-radius: 0.75rem;
}

.card-glass .feature-icon {
    font-size: 2rem;
    margin-bottom: 0.35rem;
}

.card-glass .feature-title {
    font-weight: 700;
}

/* soft light button used on glass cards */
.btn-soft-light {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgba(255, 255, 255, 0.08);
    --bs-btn-border-color: rgba(255, 255, 255, 0.22);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.18);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.35);
}

/* compact sections only on home */
body.with-gradient .py-section {
    padding-top: 0.75rem;
    padding-bottom: 1.25rem;
}

body.with-gradient .section-title {
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
    margin-top: 0;
}

/* ===== teaser events: next 30 days – smaller cards, aligned buttons ===== */
body.with-gradient .hp-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

body.with-gradient .hp-events-grid > li {
    height: 100%;
}

body.with-gradient .card-ev {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    border-radius: 0.75rem;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .15s ease, box-shadow .2s ease;
}

body.with-gradient .card-ev:hover {
    transform: translateY(-1px);
    box-shadow: var(--elev-2);
}

/* override older aspect-ratio:1/1; so cards are not huge */
body.with-gradient .card-ev .thumb {
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    aspect-ratio: auto;
}

body.with-gradient .card-ev .thumb-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

body.with-gradient .card-ev .badge-type {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.35rem;
    background: rgba(255, 255, 255, 0.2);
    color: #111827;
}

body.with-gradient .badge-type.trail {
    background: rgba(34, 197, 94, 0.16);
    color: #bbf7d0;
}

body.with-gradient .badge-type.road {
    background: rgba(59, 130, 246, 0.2);
    color: #bfdbfe;
}

body.with-gradient .card-ev .body {
    padding: 0.75rem 0.85rem 0.6rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

body.with-gradient .card-ev .event-title {
    font-size: 1.02rem;
    margin-bottom: 0.25rem;
}

body.with-gradient .card-ev .event-link {
    text-decoration: none;
    color: #f9fafb;
}

body.with-gradient .card-ev .event-link:hover {
    text-decoration: underline;
    color: #ffffff;
}

body.with-gradient .card-ev .meta {
    color: #e5e7eb;
    font-size: 0.9rem;
}

body.with-gradient .card-ev .chip {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.18);
    margin: 0.15rem 0.25rem 0.15rem 0;
    color: #f9fafb;
}

body.with-gradient .card-ev .chip.kids {
    background: rgba(252, 211, 77, 0.9);
    color: #111827;
}

/* push actions area to bottom so buttons align in all cards */
body.with-gradient .ev-actions {
    padding: 0.5rem 0.85rem 0.75rem;
    margin-top: auto;
}

body.with-gradient .btn-soft {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
}

/* ===== teaser blog cards on home ===== */

body.with-gradient .card-post .post-thumb {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

body.with-gradient .card-post .img-cover {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
}

body.with-gradient .card-post .body {
    padding: 0.75rem 0.85rem 0.85rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

body.with-gradient .card-post .post-title a {
    color: #f9fafb;
    text-decoration: none;
}

body.with-gradient .card-post .post-title a:hover {
    color: #ffffff;
    text-decoration: underline;
}

body.with-gradient .card-post .meta {
    color: #e5e7eb;
    font-size: 0.9rem;
}

body.with-gradient .post-excerpt {
    font-size: 0.9rem;
    color: #e5e7eb;
}

/* align "Citeste" button to bottom in all teaser cards */
body.with-gradient .card-post .btn.btn-soft {
    align-self: flex-start;
    margin-top: auto;
}

/* alerts on gradient background (home) */
body.with-gradient .alert-light {
    background: rgba(255, 255, 255, 0.9);

    /* Keep navbar above maps/controls (Leaflet etc.) */
    .navbar.sticky-top {
        z-index: 1030;
    }

}
/* ===== FIX dark mode readability for event cards ===== */
@media (prefers-color-scheme: dark) {

    /* distante curse */
    .event-card .race-distance,
    .event-card .race-distance span,
    .event-card .race-meta,
    .event-card .race-meta span {
        color: #e9ecef !important;
    }

    /* text secundar (data, locatie, D+, etc.) */
    .event-card .text-muted,
    .event-card small.text-muted {
        color: #cfd3d7 !important;
    }

    /* badge-uri (km, D+, etc.) */
    .event-card .badge {
        color: #ffffff !important;
    }

    /* fallback pentru orice text din card */
    .event-card {
        color: #e9ecef;
    }

}
/* event logo badge (no diacritics in comments) */
.event-logo-badge{
    max-width: min(100%, 260px);
    padding: 10px 14px;
    border-radius: 18px;          /* stylized corners */
    background: #f3f4f6;          /* neutral light gray */
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

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

@media (max-width: 768px){
    .event-logo-badge{
        max-width: min(100%, 220px);
        padding: 9px 12px;
        border-radius: 16px;
    }

    .event-logo-badge img{
        max-width: min(100%, 196px);
        max-height: 96px;
    }
}

@media (max-width: 420px){
    .event-logo-badge{
        max-width: min(100%, 190px);
        padding: 8px 11px;
        border-radius: 15px;
    }

    .event-logo-badge img{
        max-width: min(100%, 168px);
        max-height: 82px;
    }
}

@media (max-width: 420px){
    .event-logo-badge{
        max-width: min(100%, 190px);
        padding: 8px 11px;
        border-radius: 15px;
    }

    .event-logo-badge img{
        max-width: min(100%, 168px);
        max-height: 82px;
    }
}

@media (max-width: 420px){
    .event-logo-badge{
        width: 145px;
        height: 72px;
        padding: 8px 11px;
        border-radius: 15px;
    }
}