/* ===================================================================== */
/* 1. Full-height Turquoise Background  (down to the footer)             */
/* ===================================================================== */

/* .layout-sticky-footer main already gets flex:1 from style.css (stretches
   to fill the space between header and footer). Turning main itself into
   a flex column, then stretching its .content-section child to flex:1,
   makes the turquoise background reach all the way down to the footer —
   instead of only being as tall as the content inside it. */
.page-next-gig main {
    display: flex;
    flex-direction: column;
}

.page-next-gig main .content-section {
    flex: 1;
}

/* Vertically position the info block so it starts at the upper third of
   the section's height, instead of sitting at the very top or being
   vertically centered. The section itself becomes the flex column
   (rather than relying on a percentage-height .container, which depends
   on a resolved definite height further down the ancestor chain) — its
   only real child, .container, is bracketed by two invisible flex
   spacers (::before / ::after): a 1-part spacer above and a 3-part
   spacer below place the content's top edge at roughly the 1/4 mark. */
.page-next-gig .content-section {
    display: flex;
    flex-direction: column;
}

.page-next-gig .content-section::before {
    content: "";
    flex: 1;
}

.page-next-gig .content-section::after {
    content: "";
    flex: 3;
}

.page-next-gig .content-section > .container {
    flex: none;
}


/* ===================================================================== */
/* 2. Calendar Sheet  */
/* ===================================================================== */

/* Stylized "calendar sheet" date card: month abbreviation on top in a
   solid dark band, large day number below on a light card face, year
   printed underneath. */
.calendar-sheet {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 280px;
    background-color: var(--primary-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.calendar-sheet__month {
    display: block;
    width: 100%;
    padding: 1rem 0;
    background-color: var(--background-mid);
    color: var(--text-color-light);
    font-weight: 700;
    font-size: 3rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
}

.calendar-sheet__day {
    display: block;
    width: 100%;
    padding: 1.2rem 0 0.2rem;
    color: var(--background-dark);
    font-weight: 700;
    font-size: 9rem;
    line-height: 1;
    text-align: center;
}

.calendar-sheet__year {
    display: block;
    width: 100%;
    padding-bottom: 1.4rem;
    color: var(--secondary-color);
    font-weight: 400;
    font-size: 2.2rem;
    letter-spacing: 0.05em;
    text-align: center;
}


/* ===================================================================== */
/* 3. Shared Grid  (all gig entries share ONE set of grid columns)       */
/* ===================================================================== */

/* .next-gig-grid is the single CSS Grid container for every gig entry.
   Two columns: the first sized to fit the WIDEST calendar sheet across
   ALL entries (max-content), the second sized to fit the LONGEST name/
   venue text across ALL entries (also max-content). Because every entry
   contributes to the same two column-width calculations, the resulting
   grid is exactly as wide as its content needs to be — no wasted empty
   space — and centering that compact grid with justify-content:center
   / margin:0 auto positions the whole visible block (not just an
   invisible divider) in the middle of the screen. */
.next-gig-grid {
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: 5rem;
    row-gap: 3rem;
    justify-content: center;
    align-items: center;
}

/* Each gig entry's own wrapper (.next-gig-info-row) is given
   display:contents: its own box "disappears" so its two children
   (.calendar-sheet, .next-gig-info-text) become direct grid items of
   .next-gig-grid instead of being nested inside a separate per-entry
   box. This is what makes every entry share the exact same two grid
   columns above, rather than each entry computing its own independent
   column widths.
   NOTE: display:contents means .next-gig-info-row itself can no longer
   have visual box properties (background/border/padding/margin) — any
   spacing between entries must be handled via the grid's own row-gap
   (see above) instead of margin-top on the row. */
.next-gig-info-row {
    display: contents;
}

/* Extra spacing before the first secondary entry, to visually separate
   the highlighted next gig from the smaller upcoming-gigs list below
   it. Implemented as a top margin on the calendar sheet itself (the
   first actual grid item belonging to that row) since the row wrapper
   itself has no box (display:contents) to carry a margin. */
.next-gig-info-row:has(+ .next-gig-info-row--secondary) + .next-gig-info-row--secondary .calendar-sheet,
.next-gig-info-row:has(+ .next-gig-info-row--secondary) + .next-gig-info-row--secondary .next-gig-info-text {
    margin-top: 3rem;
}

/* Center every calendar sheet within its shared grid column — keeps
   smaller (secondary) calendar sheets aligned on the same vertical
   center line as the larger primary one, since the column is sized to
   the widest sheet (the primary one) but not every sheet fills it. */
.calendar-sheet {
    justify-self: center;
}

.next-gig-info-text {
    text-align: left;
    justify-self: start;
}

.next-gig-name {
    font-size: 7rem;
    font-weight: 700;
    margin-bottom: 0.075rem;
}

.next-gig-venue {
    font-size: 2.2rem;
    font-weight: 400;
    margin-top: -2rem;
    margin-bottom: 0;
}

/* Secondary gig entries (2nd, 3rd, ... in the list): everything scaled
   down to roughly half the size of the primary (1st) entry — calendar
   sheet, month/day/year text and name/venue text all reduced, so the
   whole entry occupies noticeably less visual weight/space. */
.next-gig-info-row--secondary .calendar-sheet {
    width: 140px;
}

.next-gig-info-row--secondary .calendar-sheet__month {
    font-size: 1.5rem;
}

.next-gig-info-row--secondary .calendar-sheet__day {
    font-size: 4.5rem;
}

.next-gig-info-row--secondary .calendar-sheet__year {
    font-size: 1.1rem;
}

.next-gig-info-row--secondary .next-gig-name {
    font-size: 3.5rem;
}

.next-gig-info-row--secondary .next-gig-venue {
    font-size: 1.5rem;
    margin-top: -1rem;
}


/* ===================================================================== */
/* 4. Mobile Breakpoint @640px                                           */
/* ===================================================================== */

@media (max-width: 640px) {

    /* On mobile, each gig entry is stacked (calendar sheet above name/
       venue) as its OWN independent block, centered on screen — the
       shared-grid trick above is a desktop-only concern (it exists to
       keep entries aligned side-by-side in two shared columns, which
       doesn't apply once everything is stacked vertically instead).
       Turning .next-gig-grid into a simple vertical flex column and
       reverting .next-gig-info-row from display:contents back into a
       real flex box achieves this cleanly. */
    .next-gig-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 3rem;
    }

    .next-gig-info-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .next-gig-info-row:has(+ .next-gig-info-row--secondary) + .next-gig-info-row--secondary .calendar-sheet,
    .next-gig-info-row:has(+ .next-gig-info-row--secondary) + .next-gig-info-row--secondary .next-gig-info-text {
        margin-top: 0;
    }

    .next-gig-info-text {
        text-align: center;
        justify-self: unset;
    }

    .calendar-sheet {
        width: 220px;
    }

    .calendar-sheet__month {
        font-size: 2.4rem;
    }

    .calendar-sheet__day {
        font-size: 6.4rem;
    }

    .calendar-sheet__year {
        font-size: 1.6rem;
    }

    .next-gig-name {
        font-size: 3rem;
    }

    .next-gig-venue {
        font-size: 1.5rem;
        margin-top: -0.5rem;
    }

    /* Secondary gig entries: reduced size, mirroring the desktop rules
       above, and matching the smaller mobile screen. */
    .next-gig-info-row--secondary .calendar-sheet {
        width: 120px;
    }

    .next-gig-info-row--secondary .calendar-sheet__month {
        font-size: 1.2rem;
    }

    .next-gig-info-row--secondary .calendar-sheet__day {
        font-size: 3.2rem;
    }

    .next-gig-info-row--secondary .calendar-sheet__year {
        font-size: 1.1rem;
    }

    .next-gig-info-row--secondary .next-gig-name {
        font-size: 1.5rem;
    }

    .next-gig-info-row--secondary .next-gig-venue {
        font-size: 1.1rem;
        margin-top: -0.25rem;
    }
}