/* =========================================
   GRID GROUP
========================================= */

.cb-aq-grid-group {

    position: relative;

    width: 100%;

}

/* =========================================
   ROW GAP
========================================= */

.cb-aq-grid-group
+ .cb-aq-grid-group {

    margin-top:
        var(--cb-aq-row-gap, 48px);

}

/* =========================================
   HEADER
========================================= */

.cb-aq-grid-header {

    width: 100%;

    margin-bottom:
        var(--cb-aq-meta-gap, 18px);

}

/* =========================================
   TITLE
========================================= */

.cb-aq-grid-title {

    margin: 0;

    color:
        var(
            --cb-aq-title-font-color,
            inherit
        );

}

/* =========================================
   SUBLINE
========================================= */

.cb-aq-grid-subline {

    margin-top:
        var(--cb-aq-title-gap, 6px);

    color:
        var(
            --cb-aq-subline-font-color,
            inherit
        );

}

/* =========================================
   META NAVIGATION
========================================= */

.cb-aq-grid-meta-nav {

    margin-top:
        var(--cb-aq-subline-gap, 6px);

}


.cb-aq-grid-meta-item {

	font-size:
		12px;

	color:
		var(
			--cb-aq-meta-font-color,
			inherit
		);

}

/* =========================================
   GRID
========================================= */

.cb-aq-grid {

    display: grid;

    /*
     * Individual:
     *
     * Fixed card width.
     * CSS automatically fits as many cards
     * as possible into the available width.
     *
     * Responsive mode overrides this below
     * with an explicit column count.
     */
    grid-template-columns:
        repeat(
            auto-fill,
            var(--cb-aq-card-width)
        );

    column-gap:
        var(--cb-aq-card-gap);

    row-gap:
        var(--cb-aq-grid-row-gap);

    width: 100%;

}


/* =========================================
   RESPONSIVE GRID
========================================= */

.cb-aq-grid[data-aq-grid-responsive="1"] {

    /*
     * Responsive:
     *
     * Column count is calculated by the
     * responsive grid runtime.
     */
    grid-template-columns:
        repeat(
            var(--cb-aq-grid-columns, 1),
            var(--cb-aq-card-width)
        );

}

/* =========================================
   GRID ITEM
========================================= */

.cb-aq-grid-item {

    min-width: 0;

}

/* =========================================
   CARD WRAPPER
========================================= */

.cb-aq-grid-item
.cb-aq-card-wrap {

    width:
        var(--cb-aq-card-width);

}


/* =========================================
   RESPONSIVE CARD RUNTIME
========================================= */

.cb-aq-grid[data-aq-grid-responsive="1"]
.cb-aq-grid-item
.cb-aq-card-wrap
.cb-aq-card-runtime {

    width:
        var(--cb-aq-card-width);

}

/* =========================================
   SMALL BOOKCARD
========================================= */

.cb-aq-grid-item
.cb-aq-card-wrap
.cb-aq-card-runtime
.book-infobox-small {

    width:
        100%;

    height:
        100%;

    box-sizing:
        border-box;

}


/* =========================================
   LARGE BOOKCARD
========================================= */

.cb-aq-grid-item
.cb-aq-card-wrap
.cb-aq-card-runtime
.book-infobox-large {

    width:
        100%;

    height:
        100%;

    box-sizing:
        border-box;

}