/**
 * File: event-card-v2.css
 *
 * Event Card V2 - Professional Overhaul.
 * Styles for the updated event card component.
 *
 * @package     KuK Bendorf Theme
 * @author      Oliver Ferber <admin@kuk-bendorf.de>
 * @copyright   2024-2026 KuK Bendorf e.V.
 * @license     Proprietary
 * @version     1.0.0
 */
:root {
    --kuk-dark-red: var(--kuk-red-dark);
    --kuk-text-dark: #1f2937;
    --kuk-bg-light: #f3f4f6;
}

.event-card-v2 {
    flex: 0 0 320px;
    background: #ffffff;
    border-radius: 16px;
    /* Softer, more modern radius */
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    border: 1px solid rgba(0, 0, 0, 0.08);
    /* Subtle definition */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* Tailwind-ish shadow */
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    /* Ensure uniform height in flex/grid */
}

/* Hover Effect: Lift & Sharpen Shadow */
.event-card-v2:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Image Container */
.event-card-image {
    position: relative;
    height: 180px;
    /* Standard ratio */
    width: 100%;
    background-color: #f3f4f6;
    overflow: hidden;
}

.event-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.event-card-v2:hover .event-card-image img {
    transform: scale(1.05);
}

/* 
   FLOATING DATE BADGE 
   Overlays the image top-left. 
   Professional "Event Ticket" look.
*/
.event-card-v2 .event-date-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    width: auto;
    /* Wrap content */
    min-width: 60px;
    background: white;
    /* Clean contrast against image */
    color: var(--kuk-dark-red);
    padding: 8px 12px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    z-index: 10;
    line-height: 1;
    text-align: center;
}

.event-card-v2 .event-date-badge .day {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--kuk-red);
    margin-bottom: 2px;
}

.event-card-v2 .event-date-badge span:last-child {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #333;
    opacity: 1;
    background: transparent;
    padding: 0;
}


/* Content Area */
.event-details {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: white;
}

/* Badge for Time (if needed inline) */
.event-time-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 12px;
    font-weight: 600;
}

.event-time-badge i {
    margin-right: 6px;
    color: var(--kuk-red);
}

/* Title */
.event-details h3 {
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.event-details h3 a {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.event-details h3 a:hover {
    color: var(--kuk-red);
}

/* Meta Data (Location, Price) */
.event-meta-row {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 8px;
}

.event-meta-row i {
    width: 20px;
    /* Fixed width for alignment */
    color: #999;
    text-align: center;
    margin-right: 8px;
}

/* Excerpt / Description */
.event-excerpt {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
    margin-top: 12px;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 
   ACTION BUTTON 
   Solid, accessible, clear.
*/
.event-footer {
    margin-top: auto;
    /* Push to bottom */
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.event-details a[href]:not([class]) {
    /* "Details ansehen" button */
    display: block;
    width: 100%;
    text-align: center;
    background: var(--kuk-red);
    /* SOLID Theme Color */
    color: white !important;
    /* Force White Text */
    padding: 12px 0;
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    /* No border, just solid color */
    box-shadow: 0 4px 6px rgba(220, 20, 60, 0.2);
}

.event-details a[href]:not([class]):hover {
    background: var(--kuk-dark-red);
    box-shadow: 0 6px 12px rgba(220, 20, 60, 0.3);
    transform: translateY(-1px);
}