/* ============================================================
   Intensity Hoops — Event Booking: Events Table Layout
   ============================================================ */


/* ── Table shell ─────────────────────────────────────────── */

table.eb-responsive-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface, #1c1c1c);
    border: 1px solid var(--border, rgba(18, 114, 186, 0.25));
    border-radius: 12px;
    overflow: hidden;
    color: var(--text-body, #e0e0e0);
}

/* Kill Bootstrap's striped / bordered backgrounds */
table.eb-responsive-table.table-striped > tbody > tr:nth-of-type(odd) > *,
table.eb-responsive-table.table-striped > tbody > tr:nth-of-type(even) > *,
table.eb-responsive-table tbody tr,
table.eb-responsive-table tbody tr:nth-child(odd),
table.eb-responsive-table tbody tr:nth-child(even) {
    background-color: transparent !important;
    --bs-table-bg-type: transparent !important;
    --bs-table-accent-bg: transparent !important;
    color: var(--text-body, #e0e0e0);
}


/* ── Header ──────────────────────────────────────────────── */

table.eb-responsive-table thead tr {
    background: var(--surface-2, #262626);
    border-bottom: 2px solid var(--brand-primary, #1272ba);
}

table.eb-responsive-table thead th {
    padding: 0.85rem 1rem;
    border: none;
    border-bottom: 2px solid var(--brand-primary, #1272ba);
    background: transparent !important;
    color: var(--text-muted, #a0a0a0);
    font-family: var(--font-heading, "Oswald", sans-serif);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}


/* ── Body rows ───────────────────────────────────────────── */

table.eb-responsive-table tbody tr {
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    transition: background 0.2s ease;
}

table.eb-responsive-table tbody tr:last-child {
    border-bottom: none;
}

table.eb-responsive-table tbody tr:hover {
    background: var(--surface-2, #262626) !important;
}

table.eb-responsive-table tbody td {
    padding: 0.85rem 1rem;
    border: none;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    background: transparent !important;
    color: var(--text-body, #e0e0e0);
    vertical-align: middle;
}

table.eb-responsive-table tbody tr:last-child td {
    border-bottom: none;
}

/* Add-to-cart footer row */
table.eb-responsive-table tbody tr td[colspan] {
    border: none;
    background: transparent !important;
    padding: 1rem;
}


/* ── Event title link ────────────────────────────────────── */

table.eb-responsive-table a.eb-event-link {
    color: var(--text, #ffffff);
    font-family: var(--font-heading, "Oswald", sans-serif);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: color 0.2s ease;
}

table.eb-responsive-table a.eb-event-link:hover,
table.eb-responsive-table a.eb-event-link:focus {
    color: var(--brand-primary-light, #2e8fd4);
}


/* ── Category link ───────────────────────────────────────── */

table.eb-responsive-table a.eb-item-category-link {
    color: var(--link, #2e8fd4);
    text-decoration: none;
    transition: color 0.2s ease;
}

table.eb-responsive-table a.eb-item-category-link:hover,
table.eb-responsive-table a.eb-item-category-link:focus {
    color: var(--link-hover, #4da6e8);
}


/* ── Thumb image ─────────────────────────────────────────── */

table.eb-responsive-table .eb-thumb-left {
    float: none;
    display: block;
    margin: 0;
    border-radius: 6px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    max-width: 72px;
    height: auto;
}


/* ── Add-to-cart button ──────────────────────────────────── */

table.eb-responsive-table input[type="button"] {
    padding: 0.45rem 1.1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--brand-primary, #1272ba);
    border: 1px solid var(--brand-primary, #1272ba);
    color: var(--white, #ffffff);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

table.eb-responsive-table input[type="button"]:hover,
table.eb-responsive-table input[type="button"]:focus {
    background: var(--brand-primary-dark, #0d5a96);
    border-color: var(--brand-primary-dark, #0d5a96);
}


/* ── Reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    table.eb-responsive-table tbody tr,
    table.eb-responsive-table a.eb-event-link,
    table.eb-responsive-table a.eb-item-category-link,
    table.eb-responsive-table input[type="button"] {
        transition: none;
    }
}


/* ── Mobile: stack as labelled cards ────────────────────── */

@media (max-width: 767px) {
    table.eb-responsive-table {
        border: none;
        border-radius: 0;
    }

    table.eb-responsive-table,
    table.eb-responsive-table thead,
    table.eb-responsive-table tbody,
    table.eb-responsive-table th,
    table.eb-responsive-table td,
    table.eb-responsive-table tr {
        display: block;
    }

    table.eb-responsive-table thead tr {
        display: none;
    }

    table.eb-responsive-table tbody tr {
        background: var(--surface, #1c1c1c) !important;
        border: 1px solid var(--border, rgba(18, 114, 186, 0.25));
        border-radius: 12px;
        padding: 0 .75rem;
        margin-bottom: 1rem;
    }

    table.eb-responsive-table tbody td {
        border: none;
        border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
        padding: 0.5rem 0 0.5rem 42%;
        position: relative;
        min-height: 2rem;
    }

    table.eb-responsive-table tbody td:last-child {
        border-bottom: none;
    }

    table.eb-responsive-table tbody td[data-content]::before {
        content: attr(data-content);
        position: absolute;
        left: 0;
        width: 40%;
        color: var(--text-muted, #a0a0a0);
        font-size: 0.78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: -.035em;
        line-height: 1.4;
        padding-top: 0.25rem;
    }

    table.eb-responsive-table .eb-thumb-left {
        max-width: 100%;
        width: 100%;
        border-radius: 8px;
        object-fit: cover;
    }
}