/**
 * Deliberately light: the page builder keeps control of typography and
 * colours. Handled here: the shared column grid, table legibility, header
 * persistence while scrolling, and horizontal scrolling on narrow screens.
 */

.bpg-grids {
    --bpg-accent: #e1334d;
    --bpg-border: rgba(0, 0, 0, .12);
    --bpg-zebra: rgba(0, 0, 0, .03);
    --bpg-section-bg: rgba(0, 0, 0, .05);

    /*
     * Sticky cells must be opaque, otherwise the rows scroll through them.
     * Override this one if the page sits on a dark background.
     */
    --bpg-head-bg: #fff;

    /* Width of the duration column, shared by every section. */
    --bpg-duration-col: 11rem;

    /* Offset for a sticky site header, if the theme has one. */
    --bpg-sticky-offset: 0px;

    /*
     * Height of the "Group size" row. Declared rather than measured, because
     * the counts row below pins itself just under it and needs a number.
     */
    --bpg-head-row1-h: 2.2rem;
}

/*
 * No overflow container on wide screens, on purpose: an overflowing ancestor
 * becomes the scroll context for position:sticky, and the header would then
 * stick to a box that never scrolls vertically. Horizontal scrolling is only
 * turned on in the narrow-screen block at the bottom of this file.
 */
.bpg-grids__scroller {
    -webkit-overflow-scrolling: touch;
}

/*
 * Fixed layout is what makes the columns identical from one aircraft to the
 * next: the duration column takes its declared width, and the remaining space
 * is split evenly between the price columns.
 */
.bpg-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-variant-numeric: tabular-nums;
}

.bpg-table__col--duration {
    width: var(--bpg-duration-col);
}

.bpg-table th,
.bpg-table td {
    padding: .55rem .8rem;
    border: 1px solid var(--bpg-border);
    text-align: center;
    white-space: nowrap;
}

.bpg-table thead th {
    font-size: .85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/*
 * Both header rows follow the page down, stacked: the counts row pins itself
 * just below the group row rather than on top of it. Pinning both at the same
 * offset is what made the numbers disappear behind the group label.
 *
 * border-collapse drops the borders of sticky cells while they float, so they
 * are redrawn with an inset shadow.
 */
.bpg-table__group-row th,
.bpg-table__group-row td {
    position: sticky;
    top: var(--bpg-sticky-offset);
    z-index: 3;
    height: var(--bpg-head-row1-h);
    padding-top: 0;
    padding-bottom: 0;
    background: var(--bpg-head-bg);
}

.bpg-table__group-head {
    box-shadow: inset 0 0 0 1px var(--bpg-border);
}

/* The spacer keeps no border of its own, but must not eat the label's. */
.bpg-table__group-row td {
    border-color: transparent;
}

.bpg-table__count-row th {
    position: sticky;
    top: calc(var(--bpg-sticky-offset) + var(--bpg-head-row1-h));
    z-index: 2;
    background: var(--bpg-head-bg);
    box-shadow: inset 0 0 0 1px var(--bpg-border);
}

.bpg-table__duration-head,
.bpg-table__duration {
    text-align: left;
}

/* Aircraft name, spanning the full width of the table. */
.bpg-table__section-head th {
    text-align: left;
    background: var(--bpg-section-bg);
    font-size: 1.2em;
    font-weight: 700;
}

.bpg-table__section tr:nth-child(even) {
    background: var(--bpg-zebra);
}

.bpg-table__duration {
    font-weight: 600;
}

.bpg-table__total-time {
    display: block;
    font-size: 1.1em;
}

.bpg-table__breakdown {
    display: block;
    font-size: .8em;
    font-weight: 400;
    opacity: .7;
}

.bpg-table__price {
    text-decoration: none;
    color: inherit;
}

a.bpg-table__price:hover,
a.bpg-table__price:focus {
    color: var(--bpg-accent);
    text-decoration: underline;
}

.bpg-table__empty {
    opacity: .3;
}

/* Aircraft name and capacity note, in the section header row. */
.bpg-table__aircraft {
    display: block;
}

.bpg-table__note {
    display: block;
    margin-top: .2rem;
    max-width: 62ch;
    font-size: .8em;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    opacity: .75;
}

/* Two-row header: a spanning group label above the participant counts. */
.bpg-table__group-head {
    text-align: center;
}

.bpg-table__persons-head {
    font-size: 1em;
    letter-spacing: 0;
}

/*
 * Per-aircraft heading for the price columns, sitting right above the counts.
 * Always visible: "People on board" and "Pilots + observers" do not describe
 * the same thing, and the sticky header can only carry a neutral wording.
 */
.bpg-table__columns-label th {
    background: var(--bpg-section-bg);
    font-size: .8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    opacity: .85;
}

.bpg-table__columns-label td {
    background: var(--bpg-section-bg);
}

/*
 * Counts repeated under each aircraft name. Redundant while the sticky header
 * is doing its job, so hidden here and revealed on narrow screens only.
 */
.bpg-table__repeat-head {
    display: none;
}

/* Participant / observer explanation, below the table. */
.bpg-glossary {
    margin-top: 2rem;
    font-size: 1.2em;
    line-height: 1.55;
}

/*
 * One column by default, capped at a comfortable measure. Two columns once
 * there is room, one section per cell: CSS multi-column would flow the text
 * down the first column and back up to the top of the second, which is a poor
 * way to read seven hundred words.
 */
.bpg-glossary__block {
    max-width: 70ch;
}

.bpg-glossary__block + .bpg-glossary__block {
    margin-top: 1.4rem;
}

@media (min-width: 75rem) {
    .bpg-glossary__body {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem 3.5rem;
        align-items: start;
    }

    .bpg-glossary__block + .bpg-glossary__block {
        margin-top: 0;
    }

    .bpg-glossary__block--intro {
        grid-column: 1 / -1;
    }
}

.bpg-glossary__title {
    margin: 0 0 .5rem;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.bpg-glossary__section {
    margin: 0 0 .4rem;
    font-size: 1em;
    font-weight: 700;
}

.bpg-glossary p {
    margin: 0 0 .7rem;
    opacity: .85;
}

.bpg-glossary strong {
    opacity: 1;
}

/*
 * Below this width the columns would be crushed. A min-width larger than the
 * viewport is what actually lets the wrapper scroll: with table-layout:fixed
 * and width:100% alone the table never overflows, so the cells overlap.
 */
@media (max-width: 48rem) {
    .bpg-grids {
        --bpg-duration-col: 7rem;
    }

    .bpg-grids__scroller {
        overflow-x: auto;
    }

    .bpg-table {
        min-width: 46rem;
    }

    .bpg-table th,
    .bpg-table td {
        padding: .45rem .5rem;
    }

    /*
     * The wrapper now scrolls, so it owns position:sticky and the header can
     * no longer follow the page. The counts are repeated per aircraft instead.
     */
    /*
     * The wrapper scrolls sideways here, so it — not the viewport — is the
     * containing block for sticky. It never scrolls vertically, so a top
     * offset cannot pin anything; it would only push the header rows down
     * over the first section. Borders would stay behind, since collapsed
     * borders belong to the table rather than to the cells.
     */
    .bpg-table__group-row th,
    .bpg-table__group-row td,
    .bpg-table__count-row th {
        position: static;
    }

    /*
     * Labels spanning many columns start off-screen once the table is wider
     * than the viewport. Sticking the text itself to the left keeps it in
     * view from the first glance, before any sideways scrolling.
     *
     * They stay block-level on purpose: as inline-blocks, a multi-line note
     * aligns its last line on the baseline, which lifts its earlier lines
     * above the aircraft name sitting next to it.
     */
    .bpg-table__group-head,
    .bpg-table__columns-label th {
        text-align: left;
    }

    .bpg-table__wide-label,
    .bpg-table__aircraft,
    .bpg-table__note {
        position: sticky;
        left: .5rem;
        display: block;
        width: fit-content;
        max-width: calc(100vw - 2rem);
    }

    .bpg-table__repeat-head {
        display: table-row;
    }

    .bpg-table__repeat-head td {
        padding-top: .3rem;
        padding-bottom: .3rem;
        background: var(--bpg-head-bg);
        font-size: .85em;
        font-weight: 600;
        opacity: .8;
    }

    /* Keep the duration in view while the prices scroll past it. */
    .bpg-table__duration,
    .bpg-table__repeat-head td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--bpg-head-bg);
        box-shadow: inset 0 0 0 1px var(--bpg-border);
    }
}

/*
 * Between these widths the main menu wraps onto a second line and overlaps the
 * top of the table. Scoped to that range on purpose: outside it the extra
 * margin is not needed and would only add stray space.
 */
@media (min-width: 1024px) and (max-width: 1390px) {
    .e-con.e-flex > .e-con-inner {
        margin-top: 40px;
    }
}

/* Link back to the grid, for use on the product pages. */
.bpg-grid-link {
    display: inline-block;
    color: var(--bpg-accent, #e1334d);
    text-decoration: underline;
}