/* aeo-audit: aeo-module-groups — grouped module-bar grid.
 *
 * **THIS IS THE FILE THAT FIXES THE GLUED-VALUE BUG.**
 *
 * The previous index.php used Tailwind's `gap-x-8` utility which is NOT
 * compiled into assets/css/style.css (only gap-x-5/6/10/20 exist). Result:
 * zero horizontal gap, so module N's score visually touched module N+1's
 * label — "18Structured Data" instead of "18  ·  Structured Data".
 *
 * This file owns the grid declaration with explicit `gap` values. It does
 * not reference any Tailwind `gap-x-*` utility. The bug cannot recur from
 * markup that uses these classes.
 */

.aeo-module-groups__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 1024px) {
    .aeo-module-groups__grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem 2rem;
    }
}

.aeo-module-groups__card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background-color: #ffffff;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
}
.dark .aeo-module-groups__card {
    background-color: rgb(38 38 38);
    border-color: rgb(82 82 82);
}

.aeo-module-groups__card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgb(229 231 235);
}
.dark .aeo-module-groups__card-head {
    border-bottom-color: rgb(82 82 82);
}

.aeo-module-groups__card-title {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(17 24 39);
    line-height: 1.2;
    margin: 0;
}
.dark .aeo-module-groups__card-title { color: #ffffff; }

.aeo-module-groups__card-desc {
    font-size: 0.75rem;
    color: rgb(107 114 128);
    margin-top: 0.25rem;
    line-height: 1.4;
}

.aeo-module-groups__card-avg {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
    flex-shrink: 0;
}
.aeo-module-groups__card-avg-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: rgb(17 24 39);
}
.dark .aeo-module-groups__card-avg-value { color: #ffffff; }
.aeo-module-groups__card-avg-value--pending {
    color: rgb(156 163 175);
    font-size: 0.75rem;
    font-weight: 500;
}
.aeo-module-groups__card-avg-band {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.aeo-module-groups__card-avg-band.aeo-band--great { color: var(--clr-success, #16a34a); }
.aeo-module-groups__card-avg-band.aeo-band--good  { color: var(--clr-info,    #0ea5e9); }
.aeo-module-groups__card-avg-band.aeo-band--ok    { color: var(--clr-warning, #f59e0b); }
.aeo-module-groups__card-avg-band.aeo-band--bad   { color: var(--clr-danger,  #dc2626); }
.aeo-module-groups__card-avg-band.aeo-band--pending { color: rgb(156 163 175); }

/* Dark mode: lighter text shades to keep the small-text contrast above
 * WCAG AA 4.5:1 against the dark card background. */
.dark .aeo-module-groups__card-avg-band.aeo-band--great { color: #4ade80; }
.dark .aeo-module-groups__card-avg-band.aeo-band--good  { color: #38bdf8; }
.dark .aeo-module-groups__card-avg-band.aeo-band--ok    { color: #fbbf24; }
.dark .aeo-module-groups__card-avg-band.aeo-band--bad   { color: #f87171; }
.dark .aeo-module-groups__card-avg-band.aeo-band--pending { color: rgb(209 213 219); }

.aeo-module-groups__rows {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.aeo-module-groups__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    row-gap: 0.375rem;
    align-items: center;
}

.aeo-module-groups__row-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(31 41 55);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dark .aeo-module-groups__row-name { color: rgb(229 231 235); }

.aeo-module-groups__row-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(17 24 39);
    text-align: right;
    min-width: 2.5rem;
    /* Explicit margin to guarantee visual separation from any subsequent text;
     * defends against future grid-gap regressions. */
    margin-left: 0.75rem;
}
.dark .aeo-module-groups__row-value { color: #ffffff; }
.aeo-module-groups__row-value--pending {
    color: rgb(156 163 175);
    font-weight: 500;
    font-size: 0.75rem;
}

.aeo-module-groups__row-bar {
    grid-column: 1 / -1;
}