/* -----------------------------------
   Usage:
   <div class="stat-banner">
       <div class="stat-banner__grid">
           <div class="stat-banner__card theme-gold-light">
               <span class="stat-banner__value">#6</span>
               <p class="stat-banner__desc">nationwide producer of African-American FCS graduates</p>
           </div>
           <div class="stat-banner__card theme-gold-light">
               <span class="stat-banner__value">#6</span>
               <p class="stat-banner__desc">nationwide producer of African-American FCS graduates</p>
           </div>
           <div class="stat-banner__card theme-blue-light">
               <span class="stat-banner__value">5 Star Rated</span>
               <p class="stat-banner__desc">Child Development Laboratory</p>
           </div>
           <div class="stat-banner__card theme-green-light">
               <span class="stat-banner__value">$5.1 Million</span>
               <p class="stat-banner__desc">in external grants</p>
           </div>
       </div>
   </div>
----------------------------------- */

/* -----------------------------------
   Stat Banner Variables
----------------------------------- */
:root {
    /* -----------------------------------
       Stat Banner Variables
    ----------------------------------- */
    /* fs = fontsize, lh = line height */
    --stat-heading-fs: clamp(1.75rem, calc(15cqi + 0.5rem), 4.5rem);
    --stat-heading-lh: calc(var(--stat-heading-fs) + 0.5rem);

    --stat-text-fs: clamp(.8rem, calc(5cqi + .5rem), 1.125rem);
    --stat-text-lh: calc(var(--stat-text-fs) + 0.2rem);

    /* Theme Colors */
    --theme-gold-light-bg: rgba(252, 200, 89, 0.5);
    --theme-blue-light-bg: rgba(0, 66, 132, 0.5);
    --theme-green-light-bg: rgba(150, 203, 138, 0.5);

    /* -----------------------------------
       Responsive Card Table Variables
    ----------------------------------- */

    /* General Table Customizations */
    --table-head-bg: #f5f5f5;
    /* Background color of the table headers (desktop) */
    --table-head-color: #333;
    /* Text color of the table headers (desktop) */
    --table-stripe-bg: #fafafa;
    /* Background color for striped rows (even rows) */
    --table-border-color: #e0e0e0;
    /* Color for the main borders (table bottom lines, outer card border on mobile) */
    --table-inner-border: #eee;
    /* Color for the inner lines separating cells inside a mobile card */
    --table-cell-padding: 1rem;
    /* Padding applied inside every cell on desktop */

    /* Mobile Card Customizations (Applies only when rows turn into cards) */
    --table-card-bg: #fff;
    /* Background color of the individual cards */
    --table-card-radius: 8px;
    /* How rounded the corners of the cards are */
    --table-card-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    /* The drop shadow effect on the cards */
    --table-mobile-cell-padding: 0.75rem 1rem;
    /* Padding for individual cells inside the card layout */
    --table-heading-color: #555;
    /* Text color for the generated "data-heading" text on mobile */
}

/* -----------------------------------
   Stat Banner Component
----------------------------------- */

.stat-banner {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid black;
    box-shadow: 9px 9px 12px 0 rgba(0, 0, 0, 0.1);
    min-height: 300px;
}

.stat-banner__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stat-banner__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    flex: 1;
}

.stat-banner__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    height: 100%;
    padding: 0 .8rem 0 .8rem;
    container-type: inline-size;
    transition: filter 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Premium Hover Effect */
.stat-banner__card:hover {
    filter: brightness(1.1) saturate(1.2);
    cursor: pointer;
}

.stat-banner__card:hover .stat-banner__value {
    transform: translateY(-5px) scale(1.05);
}

.stat-banner__card:hover .stat-banner__desc {
    transform: translateY(-2px);
}

/* Themes */
.theme-gold-light {
    background-color: var(--theme-gold-light-bg);
}

.theme-blue-light {
    background-color: var(--theme-blue-light-bg);
}

.theme-green-light {
    background-color: var(--theme-green-light-bg);
}

.stat-banner__desc {
    margin: 0;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.stat-banner__value {
    font-weight: bolder;
    font-size: 3rem;
    color: black;
    line-height: 1.2;
    overflow-wrap: break-word;
    max-width: 100%;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.stat-banner__grid .stat-banner__value {
    line-height: 8cqi;
    margin-bottom: .8rem;
}

.stat-banner__details,
.stats-banner__details {
    margin-bottom: 2rem;
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* -----------------------------------
   Feature Queries (@supports)
----------------------------------- */
@supports (font-size: 1cqi) {
    .stat-banner__card .stat-banner__desc {
        font-size: var(--stat-text-fs);
        line-height: var(--stat-text-lh);
    }

    .stat-banner__grid .stat-banner__value {
        font-size: var(--stat-heading-fs);
        line-height: var(--stat-heading-lh);
        margin: 0 0 calc(var(--stat-heading-lh) / 2)rem 0;
    }
}

/* -----------------------------------
   Responsive Card Table Component

   Usage:
        <table class="card-table">
        <thead>
            <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Role</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <td data-heading="Name:">Kevin</td>
            <td data-heading="Age:">35</td>
            <td data-heading="Role:">Developer</td>
            </tr>
            <tr>
            <td data-heading="Name:">Sarah</td>
            <td data-heading="Age:">28</td>
            <td data-heading="Role:">Designer</td>
            </tr>
        </tbody>
        </table>
----------------------------------- */
.card-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-family: inherit;
}

.card-table th,
.card-table td {
    padding: var(--table-cell-padding);
    text-align: left;
    border-bottom: 1px solid var(--table-border-color);
}

.card-table thead th {
    background-color: var(--table-head-bg);
    font-weight: bold;
    color: var(--table-head-color);
}

/* Striped Rows */
.card-table tbody tr:nth-child(even) {
    background-color: var(--table-stripe-bg);
}

/* -----------------------------------
   Responsive Rules (Max Width: 1024px)
----------------------------------- */
@media screen and (max-width: 1024px) {

    /* --- Stat Banner Responsive Rules --- */
    .stat-banner {
        grid-template-columns: 1fr;
    }

    .stat-banner__card {
        height: auto;
    }

    .stat-banner__image,
    .stat-banner__link:not(.stat-banner__grid .stat-banner__link) {
        display: none;
    }

    .stat-banner__grid {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .stat-banner__card {
        box-sizing: border-box;
        padding: .8rem;
    }

    /* --- Responsive Card Table Responsive Rules --- */
    .card-table {
        display: block;
    }

    .card-table thead {
        /* Visually hide header instead of display: none for accessibility */
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .card-table tbody {
        display: block;
        width: 100%;
    }

    .card-table tr {
        display: block;
        margin-bottom: 1.5rem;
        border: 1px solid var(--table-border-color);
        border-radius: var(--table-card-radius);
        box-shadow: var(--table-card-shadow);
        overflow: hidden;
        background-color: var(--table-card-bg);
    }

    .card-table tbody tr:nth-child(even) {
        background-color: var(--table-stripe-bg);
    }

    .card-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: var(--table-mobile-cell-padding);
        border-bottom: 1px solid var(--table-inner-border);
    }

    .card-table td:last-child {
        border-bottom: none;
    }

    /* The Heading for each piece of data */
    .card-table td::before {
        content: attr(data-heading);
        font-weight: 600;
        color: var(--table-heading-color);
        text-align: left;
        margin-right: 1rem;
    }
}