/* =========================================
   TARJETAS DE EVENTOS · MARATONEAR v6
   SVG seasonal patterns + clean layout
   ========================================= */

@keyframes card-entrance {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-urgencia {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.65; }
}

/* ====== GRID ====== */
.woocommerce ul.products,
#m-results-container ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
    float: none !important;
}

/* ====== TARJETA ====== */
.woocommerce ul.products li.product,
#m-results-container ul.products li.product {
    background: #ffffff !important;
    border: 3px solid var(--card-color, #BDC3C7) !important;
    border-radius: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation: card-entrance 0.5s cubic-bezier(0.4, 0, 0.2, 1) both !important;
    width: 100% !important;
    float: none !important;
    list-style: none !important;
    height: auto !important;
    aspect-ratio: auto !important;
}

/* Stagger */
.woocommerce ul.products li.product:nth-child(1), #m-results-container ul.products li.product:nth-child(1) { animation-delay: 0s; }
.woocommerce ul.products li.product:nth-child(2), #m-results-container ul.products li.product:nth-child(2) { animation-delay: .05s; }
.woocommerce ul.products li.product:nth-child(3), #m-results-container ul.products li.product:nth-child(3) { animation-delay: .1s; }
.woocommerce ul.products li.product:nth-child(4), #m-results-container ul.products li.product:nth-child(4) { animation-delay: .15s; }
.woocommerce ul.products li.product:nth-child(5), #m-results-container ul.products li.product:nth-child(5) { animation-delay: .2s; }
.woocommerce ul.products li.product:nth-child(6), #m-results-container ul.products li.product:nth-child(6) { animation-delay: .25s; }
.woocommerce ul.products li.product:nth-child(n+7), #m-results-container ul.products li.product:nth-child(n+7) { animation-delay: .3s; }

/* Gradient strip top */
.woocommerce ul.products li.product::before,
#m-results-container ul.products li.product::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 4px !important;
    background: var(--card-gradient, linear-gradient(135deg, #BDC3C7, #D5D8DC)) !important;
    z-index: 5 !important;
    display: block !important;
    border-radius: 0 !important;
}

/* Hover */
.woocommerce ul.products li.product:hover,
#m-results-container ul.products li.product:hover {
    transform: none !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08), 0 0 0 1px var(--card-color-alpha, rgba(0,0,0,0.05)) !important;
}

/* ====== COLORES POR MES ====== */
.mes-enero      { --card-color: #FF4D4D; --card-gradient: linear-gradient(135deg, #FF4D4D, #FF8A65); --card-color-alpha: rgba(255,77,77,0.2);    border-color: #FF4D4D !important; }
.mes-febrero    { --card-color: #FF7F50; --card-gradient: linear-gradient(135deg, #FF7F50, #FFB74D); --card-color-alpha: rgba(255,127,80,0.2);   border-color: #FF7F50 !important; }
.mes-marzo      { --card-color: #FFB900; --card-gradient: linear-gradient(135deg, #FFB900, #FFD54F); --card-color-alpha: rgba(255,185,0,0.2);    border-color: #FFB900 !important; }
.mes-abril      { --card-color: #D35400; --card-gradient: linear-gradient(135deg, #D35400, #E67E22); --card-color-alpha: rgba(211,84,0,0.2);     border-color: #D35400 !important; }
.mes-mayo       { --card-color: #8E44AD; --card-gradient: linear-gradient(135deg, #8E44AD, #AB47BC); --card-color-alpha: rgba(142,68,173,0.2);   border-color: #8E44AD !important; }
.mes-junio      { --card-color: #5D4E37; --card-gradient: linear-gradient(135deg, #5D4E37, #8D6E63); --card-color-alpha: rgba(93,78,55,0.2);     border-color: #5D4E37 !important; }
.mes-julio      { --card-color: #74ACDF; --card-gradient: linear-gradient(135deg, #74ACDF, #4FC3F7); --card-color-alpha: rgba(116,172,223,0.25);  border-color: #74ACDF !important; }
.mes-agosto     { --card-color: #2980B9; --card-gradient: linear-gradient(135deg, #2980B9, #42A5F5); --card-color-alpha: rgba(41,128,185,0.2);   border-color: #2980B9 !important; }
.mes-septiembre { --card-color: #1ABC9C; --card-gradient: linear-gradient(135deg, #1ABC9C, #26C6DA); --card-color-alpha: rgba(26,188,156,0.2);   border-color: #1ABC9C !important; }
.mes-octubre    { --card-color: #2ECC71; --card-gradient: linear-gradient(135deg, #2ECC71, #66BB6A); --card-color-alpha: rgba(46,204,113,0.2);   border-color: #2ECC71 !important; }
.mes-noviembre  { --card-color: #27AE60; --card-gradient: linear-gradient(135deg, #27AE60, #43A047); --card-color-alpha: rgba(39,174,96,0.2);    border-color: #27AE60 !important; }
.mes-diciembre  { --card-color: #E84393; --card-gradient: linear-gradient(135deg, #E84393, #F06292); --card-color-alpha: rgba(232,67,147,0.2);   border-color: #E84393 !important; }
.mes-default    { --card-color: #BDC3C7; --card-gradient: linear-gradient(135deg, #BDC3C7, #D5D8DC); --card-color-alpha: rgba(189,195,199,0.15); border-color: #BDC3C7 !important; }

/* ====== LINK WRAPPER ====== */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
#m-results-container ul.products li.product a.woocommerce-LoopProduct-link {
    display: contents !important;
}

/* ====== ZONA DE IMAGEN CUSTOM ====== */
.card-image-area {
    position: relative !important;
    width: 100% !important;
    height: 150px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.card-svg-bg {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    z-index: 1 !important;
}

.card-svg-bg svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.card-real-img {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    z-index: 2 !important;
}

.card-real-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* No hover zoom on image */
.woocommerce ul.products li.product:hover .card-real-img img,
#m-results-container ul.products li.product:hover .card-real-img img {
    transform: none;
}

/* Hide any stray images outside our area */
.woocommerce ul.products li.product > a > img,
#m-results-container ul.products li.product > a > img {
    display: none !important;
}

/* ====== OVERLAY BADGES ====== */
.mes-badge {
    position: absolute !important;
    top: 10px !important; left: 10px !important;
    z-index: 10 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    padding: 4px 10px !important;
    border-radius: 50px !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--card-color, #666) !important;
    border: 1.5px solid rgba(255,255,255,0.6) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.disciplina-badge {
    position: absolute !important;
    top: 10px !important; right: 10px !important;
    z-index: 10 !important;
    background: rgba(0,0,0,0.5) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    padding: 3px 9px !important;
    border-radius: 50px !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.distancia-bubble {
    position: absolute !important;
    bottom: 10px !important; right: 10px !important;
    z-index: 10 !important;
    min-width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: var(--card-gradient, linear-gradient(135deg, #BDC3C7, #D5D8DC)) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: -0.3px !important;
    border: 2.5px solid rgba(255,255,255,0.8) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    padding: 0 5px !important;
    margin: 0 !important;
    line-height: 1 !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    top: auto !important; left: auto !important;
}

.woocommerce ul.products li.product:hover .distancia-bubble,
#m-results-container ul.products li.product:hover .distancia-bubble {
    transform: none !important;
}

/* ====== TÍTULO ====== */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
#m-results-container ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
#m-results-container ul.products li.product h2 {
    padding: 12px 12px 4px !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    color: #1B396B !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    text-align: left !important;
    text-transform: none !important;
    border: none !important;
}

/* ====== INFO TÉCNICA ====== */
.info-card-running {
    padding: 4px 12px !important;
    font-size: 0.8rem !important;
    color: #6B7280 !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    overflow: hidden !important;
}

.meta-line {
    margin: 0 !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #6B7280 !important;
}

.meta-line .meta-dot {
    display: inline-block !important;
    width: 6px !important; height: 6px !important;
    border-radius: 50% !important;
    background: var(--card-color, #BDC3C7) !important;
    flex-shrink: 0 !important;
}

.distancia-badge { display: none !important; }

/* ====== BADGES ====== */
.badges-row {
    margin-top: auto !important;
    padding: 4px 12px 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

.badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 8px !important;
    border-radius: 50px !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border: 1px solid transparent !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
    text-transform: none !important;
    cursor: default !important;
    background: none !important;
}

.badge-principiante { background: #E8F5E9 !important; color: #2E7D32 !important; border-color: #A5D6A7 !important; }
.badge-moderada     { background: #E3F2FD !important; color: #1565C0 !important; border-color: #90CAF9 !important; }
.badge-tecnica      { background: #FFF3E0 !important; color: #E65100 !important; border-color: #FFB74D !important; }
.badge-extrema      { background: #FCE4EC !important; color: #C62828 !important; border-color: #EF9A9A !important; }
.badge-urgencia     { background: #FFF9C4 !important; color: #F57F17 !important; border-color: #FFF176 !important; font-weight: 800 !important; animation: pulse-urgencia 2s ease-in-out infinite; }
.badge-promo        { background: #F3E5F5 !important; color: #7B1FA2 !important; border-color: #CE93D8 !important; }

/* Hide Woo defaults */
.woocommerce ul.products li.product .price,
#m-results-container ul.products li.product .price,
.woocommerce ul.products li.product .star-rating,
#m-results-container ul.products li.product .star-rating {
    display: none !important;
}

/* ====== BOTÓN CTA ====== */
.woocommerce ul.products li.product .button,
#m-results-container ul.products li.product .button,
.woocommerce ul.products li.product a.button,
#m-results-container ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button,
#m-results-container ul.products li.product a.add_to_cart_button {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 11px 10px !important;
    font-family: 'Outfit', system-ui, sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 1.2px !important;
    background: linear-gradient(135deg, #FDB913, #F9A825) !important;
    color: #222 !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
    display: block !important;
    box-shadow: none !important;
    border: none !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.woocommerce ul.products li.product:hover .button,
#m-results-container ul.products li.product:hover .button,
.woocommerce ul.products li.product:hover a.add_to_cart_button,
#m-results-container ul.products li.product:hover a.add_to_cart_button {
    background: var(--card-gradient, linear-gradient(135deg, #FDB913, #F9A825)) !important;
    color: #fff !important;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 600px) {
    .woocommerce ul.products,
    #m-results-container ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .card-image-area { height: 110px !important; }
    .mes-badge { font-size: 9px !important; padding: 3px 7px !important; top: 6px !important; left: 6px !important; }
    .disciplina-badge { font-size: 8px !important; top: 6px !important; right: 6px !important; }
    .distancia-bubble { width: 34px !important; height: 34px !important; min-width: 34px !important; font-size: 9px !important; bottom: 6px !important; right: 6px !important; }
}

@media (max-width: 380px) {
    .woocommerce ul.products,
    #m-results-container ul.products {
        grid-template-columns: 1fr !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }
}