/* ==========================================================================
   EV Events — Community Test Drive / Electric Avenue tables
   Rewritten stylesheet: sleek desktop table + responsive mobile cards.
   Class hooks match shortcode-event-renders.php — do not rename.
   ========================================================================== */

:root {
    --ev-navy:        #091A93;
    --ev-navy-dark:   #0a1580;
    --ev-ink:         #0f172a;
    --ev-muted:       #64748b;
    --ev-hairline:    #e9ebf4;
    --ev-row-hover:   #f6f7fe;
    --ev-pill-bg:     #eef0fb;
    --ev-pill-bd:     #dde1f6;
    --ev-chip-bg:     #eef1f6;
    --ev-chip-bd:     #e0e5ee;
    --ev-chip-text:   #475569;
    --ev-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 30px rgba(9, 26, 147, 0.07);
    --ev-font:        'IBM Plex Sans', Helvetica, Arial, Lucida, sans-serif;
    --ev-font-cond:   'IBM Plex Sans Condensed', Helvetica, Arial, Lucida, sans-serif;
}

/* ---------- Layout ---------- */
.events-container {
    max-width: 1200px;
    margin: 0 auto;
    font-family: var(--ev-font);
    font-size: 15px;
    color: var(--ev-ink);
}

.events-section {
    margin-bottom: 64px;
}

.events-section h2 {
    font-size: 2.25rem;
    font-weight: 600;
    text-align: center;
    margin: 40px 0 20px 0;
    color: var(--ev-ink);
    letter-spacing: -0.01em;
    font-family: var(--ev-font-cond);
}

/* ---------- Table shell ---------- */
.event-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid var(--ev-hairline);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--ev-card-shadow);
    font-family: var(--ev-font);
    font-size: 15px;
}

.event-table thead {
    background: var(--ev-navy);
    color: #fff;
}

.event-table th {
    padding: 18px 22px;
    text-align: left;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #fff;
    font-family: var(--ev-font-cond);
}

/* Column proportions */
.when-header,  .when-column         { width: 18%; }
.where-header, .where-column        { width: 32%; }
.models-header, .models-cell        { width: 25%; }
.appointments-header, .appointments-column { width: 25%; vertical-align: middle; }

/* ---------- Rows ---------- */
.event-table tbody tr {
    background: #fff;
    transition: background-color 0.18s ease;
}

.event-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid var(--ev-hairline);
}

.event-table tbody tr:hover {
    background: var(--ev-row-hover);
}

.event-table td {
    vertical-align: top;
    background: transparent;
}

/* Cell padding lives on .cell-content because .entry-content forces td padding:0 */
.event-table td .cell-content {
    padding: 26px 22px;
}

/* ---------- When cell ---------- */
.when-column strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--ev-ink);
}

.event-time {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: var(--ev-muted);
}

/* ---------- Where cell ---------- */
.location-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--ev-ink);
    margin-bottom: 4px;
}

.location-address {
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ev-muted);
}

/* ---------- Models cell (pills) ---------- */
.models-cell { max-width: none; }

.model-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.model-list li {
    margin: 0;
    padding: 6px 14px;
    max-width: 100%;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ev-navy);
    background-color: var(--ev-pill-bg);
    border: 1px solid var(--ev-pill-bd);
    border-radius: 100px;
    word-break: break-word;
    overflow-wrap: break-word;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.event-table tbody tr:hover .model-list li {
    background-color: #e4e8fb;
    border-color: #cdd4f4;
}

.coming-soon {
    display: block;
    font-size: 14px;
    font-style: italic;
    color: var(--ev-muted);
}

/* ---------- Appointments cell ---------- */
.book-btn {
    display: inline-block;
    box-sizing: border-box;
    padding: 12px 24px;
    font-family: var(--ev-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
    color: #fff;
    background-color: var(--ev-navy);
    border: 0;
    border-radius: 100px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
    -webkit-font-smoothing: antialiased;
}

.book-btn:hover {
    background-color: var(--ev-navy-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(9, 26, 147, 0.25);
}

.book-btn:active { transform: translateY(0); }

.booking-walkons,
.booking-custom {
    display: inline-block;
    padding: 6px 13px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ev-chip-text);
    background-color: var(--ev-chip-bg);
    border: 1px solid var(--ev-chip-bd);
    border-radius: 8px;
}

.booking-tbd {
    display: block;
    font-size: 14px;
    font-style: italic;
    color: var(--ev-muted);
}

/* ---------- Section heading + description ---------- */
.event-section-description {
    width: 80%;
    margin: 30px auto 24px auto;
    font-family: var(--ev-font);
    font-size: 16px;
    line-height: 1.6;
    color: #475569;
    text-align: center;
}

.event-section-description h2 {
    font-size: 2.25rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: var(--ev-ink);
    letter-spacing: -0.01em;
    font-family: var(--ev-font-cond);
    text-align: center;
}

.event-section-description p { margin: 0 0 12px 0; }
.event-section-description p:last-child { margin-bottom: 0; }

/* ---------- Footer link ---------- */
.section-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 22px;
}

.btn-tertiary-underline {
    display: inline-block;
    color: var(--ev-navy);
    font-weight: 600;
    text-decoration: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 2px 0;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.18s ease;
}

.btn-tertiary-underline:hover { border-bottom-color: var(--ev-navy); }

/* ---------- Empty state ---------- */
.no-events {
    text-align: center;
    color: var(--ev-muted);
    font-style: italic;
    padding: 48px 20px;
    font-size: 15px;
}

/* ==========================================================================
   WordPress / Bridge theme overrides
   ========================================================================== */
.entry-content thead th,
.entry-content tr th { color: #fff !important; }

.entry-content .event-table {
    border: 1px solid var(--ev-hairline) !important;
    margin: 20px 0;
}

.entry-content .events-section { margin-bottom: 48px; }
.entry-content .events-section:first-of-type { margin-bottom: 64px; }

/* Theme adds td padding — we control spacing via .cell-content instead */
.entry-content .event-table td { padding: 0 !important; }

/* Bridge styles .entry-content ul with disc markers + padding — strip them
   from the model pills. Scoped + !important to beat the theme rule. */
.entry-content .model-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.entry-content .model-list li {
    list-style: none !important;
    margin-left: 0 !important;
}
.entry-content .model-list li::before,
.entry-content .model-list li::marker {
    content: none !important;
    display: none !important;
}

/* ==========================================================================
   Responsive — tablet refinements
   ========================================================================== */
@media (max-width: 1100px) {
    .event-table td .cell-content { padding: 22px 18px; }
    .event-table th { padding: 16px 18px; }
}

/* ==========================================================================
   Responsive — mobile card layout (< 860px)
   Each event row becomes a self-contained card with a navy date header.
   ========================================================================== */
@media (max-width: 860px) {
    .events-section { margin-bottom: 44px; }
    .entry-content .events-section,
    .entry-content .events-section:first-of-type { margin-bottom: 44px; }

    .events-section h2,
    .event-section-description h2 { font-size: 1.9rem; }

    .event-section-description {
        width: 92%;
        font-size: 16px;
        margin: 18px auto 22px auto;
    }

    /* Break the table into stacked blocks */
    .event-table,
    .event-table tbody,
    .event-table tr,
    .event-table td {
        display: block;
        width: 100%;
    }

    .event-table {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    /* Hide the header row but keep it accessible */
    .event-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* Card */
    .event-table tbody tr {
        border: 1px solid var(--ev-hairline);
        border-radius: 16px;
        margin-bottom: 18px;
        background: #fff;
        box-shadow: var(--ev-card-shadow);
        overflow: hidden;
        transition: box-shadow 0.18s ease;
    }

    .event-table tbody tr:hover {
        background: #fff;
        box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 18px 36px rgba(9, 26, 147, 0.10);
    }

    .event-table tbody tr:not(:last-child) td { border-bottom: 0; }

    .event-table td {
        position: relative;
        border-bottom: 1px solid var(--ev-hairline);
    }

    .event-table td:last-child { border-bottom: 0; }

    .event-table td .cell-content { padding: 16px 20px; }

    /* Per-cell labels */
    .event-table td:not(.when-column) .cell-content::before {
        display: block;
        font-family: var(--ev-font-cond);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ev-muted);
        margin-bottom: 8px;
    }
    .where-column .cell-content::before        { content: "Where"; }
    .models-cell .cell-content::before         { content: "Available models"; }
    .appointments-column .cell-content::before { content: "Appointments"; }

    /* When cell becomes the navy card header */
    .event-table .when-column {
        background: var(--ev-navy);
    }
    .event-table .when-column .cell-content { padding: 18px 20px; }
    .when-column strong { color: #fff; font-size: 17px; }
    .when-column .event-time { color: #c5ccf4; }

    /* Where */
    .location-title { font-size: 16px; }
    .location-address { font-size: 14px; }

    /* Models */
    .models-cell { max-width: none; }
    .model-list { gap: 8px; }

    /* Appointments — full-width action */
    .appointments-column { vertical-align: top; }
    .book-btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 14px;
    }
    .book-btn:hover { transform: none; }
    .booking-walkons,
    .booking-custom { font-size: 14px; }
}

/* ==========================================================================
   Responsive — small phones (< 480px)
   ========================================================================== */
@media (max-width: 480px) {
    .events-section h2,
    .event-section-description h2 { font-size: 1.7rem; }

    .event-table td .cell-content { padding: 14px 16px; }
    .event-table .when-column .cell-content { padding: 16px 16px; }

    .when-column strong { font-size: 16px; }
    .location-title { font-size: 15px; }
    .model-list li { font-size: 13px; padding: 5px 12px; }
}