/* Styles for Offer component */
@layer components {
    .offer {
        & .offer__heading {
            margin-block-end: var(--space-xl);
        }

        & .offer__columns {
            display: grid;
            /* `minmax(0, 1fr)` and not the implicit `auto`: a grid track sized to
               max-content lets the schedule push the whole page sideways. */
            grid-template-columns: minmax(0, 1fr);
            /* Two blocks of one band, not two bands: enough air to separate
               them, less than what sits between the bands themselves. */
            gap: var(--space-xl);
            align-items: start;
        }

        & .offer__cta {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--space-s);
            margin-block-start: var(--space-xl);
            padding-block-start: var(--space-l);
            border-block-start: 1px solid var(--color-border-accent);
            text-align: center;
        }
    }

    /* Above 64rem the two halves sit side by side, as in the reference. The
       schedule gets the wider column - it is the denser piece of information. */
    /*
     * The schedule and the prices are stacked, not side by side as in the
     * reference sketch.
     *
     * Measured: a weekday column needs ~98px of text before the longest group
     * name ("Začiatočníci") gets chopped mid-word, so the whole week needs
     * ~890px. Inside the 82rem wrapper a two-column split can only ever hand
     * the schedule ~740px - and buying the missing 150px would leave the price
     * cards too narrow to pair up. No ratio fixes that; only the full band does.
     *
     * The week is one of the two things people come to this page for, so it
     * gets the room, and the prices get a full-width row of cards underneath.
     */
}