/*
 * Bike Price Matrix — Front-end Styles
 * Version: 1.6
 *
 * Colours use Divi 5 global CSS variables with hex fallbacks.
 * Variables are set in Divi > Visual Builder > Variable Manager.
 *
 * Variables in use:
 *   --gcid-primary-color   #89023e  — header background, borders, mobile card headers
 *   --gcid-y43rzvjcdl      #ffffff  — header text (white swatch)
 *   --gcid-body-color       #939393  — price values and footnote text
 */

/* ============================================================
   BASE TABLE STYLES
   ============================================================ */

.bike-price-matrix {
    width: 100%;
    margin: 20px auto;
    border-collapse: collapse;
    background: #ffffff;
}

/* Table header cells */
.bike-price-matrix th {
    font-weight: bold;
    text-align: center;
    padding: 12px 10px;
    background: var(--gcid-primary-color, #89023e) !important;
    color: var(--gcid-y43rzvjcdl, #ffffff) !important;
}

/* All cells — bottom border */
.bike-price-matrix th,
.bike-price-matrix td {
    border-bottom: 1px solid var(--gcid-primary-color, #89023e);
}

/* Body cells */
.bike-price-matrix td {
    padding: 12px 10px;
    text-align: center;
    font-weight: bold;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* First column — left-aligned label cells */
.bike-price-matrix td:first-child,
.bike-price-matrix th:first-child {
    text-align: left;
    font-weight: bold;
}

/* Price value cells — all columns except first */
.bike-price-matrix td:not(:first-child) {
    font-size: 1.1em;
    color: var(--gcid-body-color, #939393);
}

/* ============================================================
   FOOTNOTE
   ============================================================ */

.bike-price-footnote {
    font-size: 0.9em;
    font-style: italic;
    margin-top: 10px;
    color: var(--gcid-body-color, #939393);
    line-height: 1.4;
    padding: 0 10px;
}

/* ============================================================
   HOVER EFFECT — desktop only
   ============================================================ */

@media screen and (min-width: 601px) {
    .bike-price-matrix tbody tr:hover {
        background-color: color-mix(in srgb, var(--gcid-primary-color) 15%, #ffffff);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}

/* ============================================================
   TABLET — 768px and below
   ============================================================ */

@media screen and (max-width: 768px) {
    .bike-price-matrix {
        margin: 15px auto;
        font-size: 0.95em;
    }

    .bike-price-matrix th,
    .bike-price-matrix td {
        padding: 10px 8px;
    }

    .bike-price-footnote {
        font-size: 0.85em;
        margin-top: 15px;
    }
}

/* ============================================================
   MOBILE — 600px and below
   Table transforms into stacked cards, one card per row.
   ============================================================ */

@media screen and (max-width: 600px) {
    .bike-price-matrix {
        margin: 10px 0;
        box-shadow: none;
        border-radius: 0;
    }

    /* Hide the header row — labels come from data-label attributes instead */
    .bike-price-matrix thead {
        display: none;
    }

    .bike-price-matrix tbody {
        display: block;
    }

    /* Each row becomes its own card */
    .bike-price-matrix tr {
        display: block;
        margin-bottom: 20px;
        overflow: hidden;
    }

    /* Each cell stacks vertically */
    .bike-price-matrix td {
        display: block;
        text-align: left;
        padding: 12px 15px;
        border-bottom: 1px solid var(--gcid-primary-color, #89023e);
        position: relative;
    }

    /* No border on the last cell in each card */
    .bike-price-matrix td:last-child {
        border-bottom: none;
    }

    /* First cell becomes the card header */
    .bike-price-matrix td:first-child {
        background: var(--gcid-primary-color, #89023e);
        color: var(--gcid-y43rzvjcdl, #ffffff);
        font-weight: bold;
        font-size: 1.1em;
        text-align: center;
        border-bottom: none;
    }

    /* Price cells: show the column label from data-label attribute */
    .bike-price-matrix td:not(:first-child)::before {
        content: attr(data-label) ": ";
        font-weight: normal;
        color: var(--gcid-body-color, #939393);
        text-align: left;
        display: inline-block;
        width: 40%;
    }

    /* Price value text */
    .bike-price-matrix td:not(:first-child) {
        font-size: 1.1em;
        color: var(--gcid-body-color, #939393);
        text-align: center;
    }

    /* Footnote — extra prominence on mobile */
    .bike-price-footnote {
        font-size: 0.8em;
        margin-top: 20px;
        padding: 15px;
        background: color-mix(in srgb, var(--gcid-primary-color) 10%, #ffffff);
        border-radius: 6px;
        border-left: 4px solid var(--gcid-primary-color, #89023e);
    }
}

/* ============================================================
   EXTRA SMALL — 400px and below
   ============================================================ */

@media screen and (max-width: 400px) {
    .bike-price-matrix td {
        padding: 10px 12px;
    }

    .bike-price-matrix td:not(:first-child)::before {
        width: 45%;
        font-size: 0.9em;
    }

    .bike-price-footnote {
        font-size: 0.75em;
        padding: 12px;
    }
}