/* Document */
html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    color: var(--color-fg);
    font-size: var(--font-size-body);
    font-family: var(--font-sans);
    background: var(--color-bg);
}

a {
    color: var(--color-accent);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

/* Container to mirror the old 980px region */
.container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--space-4);
}

/* Headings / families */
.beerStyleFamily {
    font-weight: bold;
    font-size: var(--font-size-family);
    padding-left: 30px;
    padding-top: 40px;
}

/* Item block */
.onTapItem {
    padding: var(--space-3) 0;
    vertical-align: top;
    min-height: 120px;
}

/* Layout table (keeping your markup semantics) */
.ontap-table {
    border-collapse: collapse;
    width: 100%;
}

    .ontap-table td {
        padding: var(--space-3);
        vertical-align: top;
    }

/* Left label image */
.bevImage {
    width: var(--bev-image-size);
    height: var(--bev-image-size);
    margin-right: var(--space-3);
    border: none; /* legacy visual */
    display: block;
}

/* Typographic helpers from legacy */
.brewery {
    font-size: var(--font-size-brewer);
    font-weight: bold;
}

.beername {
    font-size: var(--font-size-brewer);
    font-weight: bold;
}
.bevstyle {
    display: var(--bev-style-visible);
}
.bevstyle {
    display: var(--bev-style-visible);
}
.description {
    text-align: left;
    display: var(--description-visible);
}
.tapId {
    display: var(--tapId-visible);
    float:left;
}
.beerstyle {
    font-style: italic;
}

.perleft {
    display: var(--percentage-left-visible);
}
.abvibu {
    padding-bottom: var(--space-3);
    display: var(--abv-ibu-visible);
}

/* Legacy gradient card (if you still use .beerholder) */
.beerholder {
    float: left;
    width: 370px;
    padding: var(--space-2);
    height: 220px;
    text-align: center;
    margin-bottom: var(--space-5);
    display: table;
    border-radius: var(--radius-xl);
    background: linear-gradient(to bottom, var(--color-card-top) 0%, var(--color-card-bottom) 100%);
    box-shadow: var(--shadow-sm);
}

.beerholderleft {
    clear: left;
    margin-right: 15px;
}

.beercontentimage {
    vertical-align: middle;
    display: table-cell;
    width: 200px;
}

.beercontentinfo {
    vertical-align: middle;
    display: table-cell;
    overflow: hidden;
}

/* Small utilities */
.mt-2 {
    margin-top: var(--space-2);
}

.mt-3 {
    margin-top: var(--space-3);
}

.mb-2 {
    margin-bottom: var(--space-2);
}

.mb-3 {
    margin-bottom: var(--space-3);
}

.p-2 {
    padding: var(--space-2);
}

.p-3 {
    padding: var(--space-3);
}

/* Debug */
#lbldebug {
    color: var(--color-muted);
}

/* ===== Columns per style group =====
   By default it's 1 column. Add .cols-2 to switch to two columns.
   You can also override --style-columns from a tenant theme. */

:root {
    --style-columns: 1; /* default */
    --style-gap: 16px; /* uses your --space-4; customize per theme if you want */
}

/* Optional helper: global 2-col toggle on the page/container */
.cols-2 {
    --style-columns: 2;
}

/* The group wrapper that holds the items of a single beverage style */
.styleGroup {
    display: grid;
    grid-template-columns: repeat(var(--style-columns), minmax(0, 1fr));
    gap: var(--style-gap);
    /* keep the same content width behavior as your container */
}

/* When in grid, we don't want the top border to span “full width” across columns.
Keep each item’s own top border (your current .onTapItem rule works fine).
Optionally, soften the very first item’s top border within each style group: */
.styleGroup > .onTapItem:first-child {
    border-top-color: transparent;
}

/* Make the internal table use full width of each grid cell */
.styleGroup .ontap-table {
    width: 100%;
}

/* --- Description expander (theme-controlled) --- */

/* collapsed state uses line clamp; expanded shows everything */
.desc-text.desc-collapsed {
    display: -webkit-box;
    -webkit-line-clamp: var(--desc-clamp-lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.desc-toggle {
    font-size: var(--desc-toggle-font-size);
    margin-left: var(--desc-toggle-gap);
    color: var(--color-accent);
    cursor: pointer;
    user-select: none;
    text-decoration: none;
}

.desc-toggle:hover {
    text-decoration: underline;
}

.catUnknown {
    font-size: var(--category-unknown-header-font-size);
    background-color: var(--category-unknown-header-background-color);
    color: var(--category-unknown-header-text-color);
}

.catAle {
    font-size: var(--category-Ale-header-font-size);
    background-color: var(--category-Ale-header-background-color);
    color: var(--category-Ale-header-text-color);
}

.catAltbier {
    font-size: var(--category-Altbier-header-font-size);
    background-color: var(--category-Altbier-header-background-color);
    color: var(--category-Altbier-header-text-color);
}

.catAmberAle {
    font-size: var(--category-AmberAle-header-font-size);
    background-color: var(--category-AmberAle-header-background-color);
    color: var(--category-AmberAle-header-text-color);
}

.catBarleyWine {
    font-size: var(--category-BarleyWine-header-font-size);
    background-color: var(--category-BarleyWine-header-background-color);
    color: var(--category-BarleyWine-header-text-color);
}

.catBelgian {
    font-size: var(--category-Belgian-header-font-size);
    background-color: var(--category-Belgian-header-background-color);
    color: var(--category-Belgian-header-text-color);
}

.catBerlinerWeisse {
    font-size: var(--category-BerlinerWeisse-header-font-size);
    background-color: var(--category-BerlinerWeisse-header-background-color);
    color: var(--category-BerlinerWeisse-header-text-color);
}

.catBieredeGarde {
    font-size: var(--category-BieredeGarde-header-font-size);
    background-color: var(--category-BieredeGarde-header-background-color);
    color: var(--category-BieredeGarde-header-text-color);
}

.catBitter {
    font-size: var(--category-Bitter-header-font-size);
    background-color: var(--category-Bitter-header-background-color);
    color: var(--category-Bitter-header-text-color);
}

.catBlonde {
    font-size: var(--category-Blonde-header-font-size);
    background-color: var(--category-Blonde-header-background-color);
    color: var(--category-Blonde-header-text-color);
}

.catBock {
    font-size: var(--category-Bock-header-font-size);
    background-color: var(--category-Bock-header-background-color);
    color: var(--category-Bock-header-text-color);
}

.catBrownAle {
    font-size: var(--category-BrownAle-header-font-size);
    background-color: var(--category-BrownAle-header-background-color);
    color: var(--category-BrownAle-header-text-color);
}

.catCaliforniaCommonSteamBeer {
    font-size: var(--category-CaliforniaCommonSteamBeer-header-font-size);
    background-color: var(--category-CaliforniaCommonSteamBeer-header-background-color);
    color: var(--category-CaliforniaCommonSteamBeer-header-text-color);
}

.catCider {
    font-size: var(--category-Cider-header-font-size);
    background-color: var(--category-Cider-header-background-color);
    color: var(--category-Cider-header-text-color);
}

.catCocktail {
    font-size: var(--category-Cocktail-header-font-size);
    background-color: var(--category-Cocktail-header-background-color);
    color: var(--category-Cocktail-header-text-color);
}

.catCreamAle {
    font-size: var(--category-CreamAle-header-font-size);
    background-color: var(--category-CreamAle-header-background-color);
    color: var(--category-CreamAle-header-text-color);
}

.catDoppelbock {
    font-size: var(--category-Doppelbock-header-font-size);
    background-color: var(--category-Doppelbock-header-background-color);
    color: var(--category-Doppelbock-header-text-color);
}

.catDortmunderExport {
    font-size: var(--category-DortmunderExport-header-font-size);
    background-color: var(--category-DortmunderExport-header-background-color);
    color: var(--category-DortmunderExport-header-text-color);
}

.catDunkelweizen {
    font-size: var(--category-Dunkelweizen-header-font-size);
    background-color: var(--category-Dunkelweizen-header-background-color);
    color: var(--category-Dunkelweizen-header-text-color);
}

.catEisbock {
    font-size: var(--category-Eisbock-header-font-size);
    background-color: var(--category-Eisbock-header-background-color);
    color: var(--category-Eisbock-header-text-color);
}

.catEnglishAle {
    font-size: var(--category-EnglishAle-header-font-size);
    background-color: var(--category-EnglishAle-header-background-color);
    color: var(--category-EnglishAle-header-text-color);
}

.catFlandersRedAle {
    font-size: var(--category-FlandersRedAle-header-font-size);
    background-color: var(--category-FlandersRedAle-header-background-color);
    color: var(--category-FlandersRedAle-header-text-color);
}

.catFruitBeer {
    font-size: var(--category-FruitBeer-header-font-size);
    background-color: var(--category-FruitBeer-header-background-color);
    color: var(--category-FruitBeer-header-text-color);
}

.catGoldenAle {
    font-size: var(--category-GoldenAle-header-font-size);
    background-color: var(--category-GoldenAle-header-background-color);
    color: var(--category-GoldenAle-header-text-color);
}

.catGose {
    font-size: var(--category-Gose-header-font-size);
    background-color: var(--category-Gose-header-background-color);
    color: var(--category-Gose-header-text-color);
}

.catGueuze {
    font-size: var(--category-Gueuze-header-font-size);
    background-color: var(--category-Gueuze-header-background-color);
    color: var(--category-Gueuze-header-text-color);
}

.catHardSeltzer {
    font-size: var(--category-HardSeltzer-header-font-size);
    background-color: var(--category-HardSeltzer-header-background-color);
    color: var(--category-HardSeltzer-header-text-color);
}

.catHefeweizen {
    font-size: var(--category-Hefeweizen-header-font-size);
    background-color: var(--category-Hefeweizen-header-background-color);
    color: var(--category-Hefeweizen-header-text-color);
}

.catHelles {
    font-size: var(--category-Helles-header-font-size);
    background-color: var(--category-Helles-header-background-color);
    color: var(--category-Helles-header-text-color);
}

.catIndiaPaleAle {
    font-size: var(--category-IndiaPaleAle-header-font-size);
    background-color: var(--category-IndiaPaleAle-header-background-color);
    color: var(--category-IndiaPaleAle-header-text-color);
}

.catKolsch {
    font-size: var(--category-Kolsch-header-font-size);
    background-color: var(--category-Kolsch-header-background-color);
    color: var(--category-Kolsch-header-text-color);
}

.catKombucha {
    font-size: var(--category-Kombucha-header-font-size);
    background-color: var(--category-Kombucha-header-background-color);
    color: var(--category-Kombucha-header-text-color);
}

.catLager {
    font-size: var(--category-Lager-header-font-size);
    background-color: var(--category-Lager-header-background-color);
    color: var(--category-Lager-header-text-color);
}

.catLambic {
    font-size: var(--category-Lambic-header-font-size);
    background-color: var(--category-Lambic-header-background-color);
    color: var(--category-Lambic-header-text-color);
}

.catLightAle {
    font-size: var(--category-LightAle-header-font-size);
    background-color: var(--category-LightAle-header-background-color);
    color: var(--category-LightAle-header-text-color);
}

.catLiquor {
    font-size: var(--category-Liquor-header-font-size);
    background-color: var(--category-Liquor-header-background-color);
    color: var(--category-Liquor-header-text-color);
}

.catMaibock {
    font-size: var(--category-Maibock-header-font-size);
    background-color: var(--category-Maibock-header-background-color);
    color: var(--category-Maibock-header-text-color);
}

.catMaltLiquor {
    font-size: var(--category-MaltLiquor-header-font-size);
    background-color: var(--category-MaltLiquor-header-background-color);
    color: var(--category-MaltLiquor-header-text-color);
}

.catMead {
    font-size: var(--category-Mead-header-font-size);
    background-color: var(--category-Mead-header-background-color);
    color: var(--category-Mead-header-text-color);
}

.catNonAlcoholic {
    font-size: var(--category-Non-Alcoholic-header-font-size);
    background-color: var(--category-Non-Alcoholic-header-background-color);
    color: var(--category-Non-Alcoholic-header-text-color);
}

.catOktoberfest {
    font-size: var(--category-Oktoberfest-header-font-size);
    background-color: var(--category-Oktoberfest-header-background-color);
    color: var(--category-Oktoberfest-header-text-color);
}

.catOldAle {
    font-size: var(--category-OldAle-header-font-size);
    background-color: var(--category-OldAle-header-background-color);
    color: var(--category-OldAle-header-text-color);
}

.catOudBruin {
    font-size: var(--category-OudBruin-header-font-size);
    background-color: var(--category-OudBruin-header-background-color);
    color: var(--category-OudBruin-header-text-color);
}

.catPaleAle {
    font-size: var(--category-PaleAle-header-font-size);
    background-color: var(--category-PaleAle-header-background-color);
    color: var(--category-PaleAle-header-text-color);
}

.catPilsner {
    font-size: var(--category-Pilsner-header-font-size);
    background-color: var(--category-Pilsner-header-background-color);
    color: var(--category-Pilsner-header-text-color);
}

.catPorter {
    font-size: var(--category-Porter-header-font-size);
    background-color: var(--category-Porter-header-background-color);
    color: var(--category-Porter-header-text-color);
}

.catRedAle {
    font-size: var(--category-RedAle-header-font-size);
    background-color: var(--category-RedAle-header-background-color);
    color: var(--category-RedAle-header-text-color);
}

.catRedWine {
    font-size: var(--category-RedWine-header-font-size);
    background-color: var(--category-RedWine-header-background-color);
    color: var(--category-RedWine-header-text-color);
}

.catRoggenbier {
    font-size: var(--category-Roggenbier-header-font-size);
    background-color: var(--category-Roggenbier-header-background-color);
    color: var(--category-Roggenbier-header-text-color);
}

.catRyeBeer {
    font-size: var(--category-RyeBeer-header-font-size);
    background-color: var(--category-RyeBeer-header-background-color);
    color: var(--category-RyeBeer-header-text-color);
}

.catSaison {
    font-size: var(--category-Saison-header-font-size);
    background-color: var(--category-Saison-header-background-color);
    color: var(--category-Saison-header-text-color);
}

.catScotchAle {
    font-size: var(--category-ScotchAle-header-font-size);
    background-color: var(--category-ScotchAle-header-background-color);
    color: var(--category-ScotchAle-header-text-color);
}

.catSeasonal {
    font-size: var(--category-Seasonal-header-font-size);
    background-color: var(--category-Seasonal-header-background-color);
    color: var(--category-Seasonal-header-text-color);
}

.catSour {
    font-size: var(--category-Sour-header-font-size);
    background-color: var(--category-Sour-header-background-color);
    color: var(--category-Sour-header-text-color);
}

.catSpecialty {
    font-size: var(--category-Specialty-header-font-size);
    background-color: var(--category-Specialty-header-background-color);
    color: var(--category-Specialty-header-text-color);
}

.catStout {
    font-size: var(--category-Stout-header-font-size);
    background-color: var(--category-Stout-header-background-color);
    color: var(--category-Stout-header-text-color);
}

.catViennaLager {
    font-size: var(--category-ViennaLager-header-font-size);
    background-color: var(--category-ViennaLager-header-background-color);
    color: var(--category-ViennaLager-header-text-color);
}

.catWeissbier {
    font-size: var(--category-Weissbier-header-font-size);
    background-color: var(--category-Weissbier-header-background-color);
    color: var(--category-Weissbier-header-text-color);
}

.catWeizenbock {
    font-size: var(--category-Weizenbock-header-font-size);
    background-color: var(--category-Weizenbock-header-background-color);
    color: var(--category-Weizenbock-header-text-color);
}

.catWhiteWine {
    font-size: var(--category-WhiteWine-header-font-size);
    background-color: var(--category-WhiteWine-header-background-color);
    color: var(--category-WhiteWine-header-text-color);
}

.catWitbier {
    font-size: var(--category-Witbier-header-font-size);
    background-color: var(--category-Witbier-header-background-color);
    color: var(--category-Witbier-header-text-color);
}