/* Smooth Stacked Cards. Card styling matches Stacked Cards; the motion is separate. */

/* The regular weight of Hamburg Hand, for the card counter's number. */
@font-face {
    font-family: "Hamburg-400";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/hamburghand-regular-webfont.woff) format("woff");
}

.bb-smooth-stack {
    --bb-ss-gutter: 32px;
    --bb-ss-surface: #657290;
    --bb-ss-top: 24px;      /* Room under the sticky header before the first stuck card. */
    --bb-ss-step: 20px;     /* Each stuck card rests this far below the one before it. */
    --bb-ss-gap: 48px;      /* Space between cards as they scroll up, before they stack. */
    --bb-ss-bottom: 20px;   /* Room kept under the second-to-last stuck card. */
    --bb-ss-aspect: 101 / 60; /* The media aspect ratio at each breakpoint (the widest, on desktop). */
    --bb-ss-glow: 50%;      /* Strength of the pink glow in each card's corner. */
    /* The tallest image every stuck card can have and still show whole below the header and the
       cards above it. The last card doesn't count: it keeps rising over the stack, so it may land
       partly below the screen. --bb-ss-reserve is how far the lowest-reaching caption ends below
       the first card's top, beyond its image, measured by the script; before it runs, the
       second-to-last card's step plus the tallest caption stands in. */
    --bb-ss-room: calc(100svh - var(--bb-ss-header, var(--header-height, 0px)) - var(--bb-ss-top) - var(--bb-ss-bottom) - 8px
        - var(--bb-ss-reserve, calc(max(0, var(--bb-ss-count, 1) - 2) * var(--bb-ss-step) + var(--bb-ss-caption, 120px))));
    /* The image's height; used inside a slot, where cqw is the card's width. */
    --bb-ss-media-height: calc((100cqw - 8px) / (var(--bb-ss-aspect)));
    position: relative;
    isolation: isolate;
    /* Clips the tilted corners without becoming a scroll container, so sticky still works. */
    overflow: clip;
    overflow-anchor: none;
    --bb-ss-padding: 48px;
    padding-block: var(--bb-ss-padding);
    /* Paper across the top padding, which the first card's paper always covers anyway. On iOS the
       sticky paper (and the section's clip on it) can trail the scroll by a frame, which showed
       the blue as a thin line rising behind the header; this keeps that seam paper on paper. */
    background: linear-gradient(var(--bb-color-paper) var(--bb-ss-padding), var(--bb-color-blue) var(--bb-ss-padding));
    color: var(--bb-color-white);
    scroll-margin-top: calc(var(--bb-ss-header, var(--header-height, 0px)) + 24px);
}

/* Lives in the first card's slot and sticks with it, so the paper/blue split stays put across the
   stack while the cards are stuck. It spans the full width, ends 70% of the way down the first
   image (as in the design), and reaches up past the top of the screen; the section clips it. */
.bb-smooth-stack__paper {
    --bb-ss-split: calc(4px + 0.7 * var(--bb-ss-media-height));
    position: absolute;
    top: calc(var(--bb-ss-split) - 100lvh);
    left: 50%;
    width: 100vw;
    height: 100lvh;
    translate: -50% 0;
    background-color: var(--bb-color-paper);
    z-index: -1;
    pointer-events: none;
}

.bb-smooth-stack__container {
    width: 100%;
    max-width: calc(var(--bb-content-width) + 2 * var(--bb-ss-gutter));
    padding-inline: var(--bb-ss-gutter);
    margin-inline: auto;
}

/* Keeps every stuck card short enough to show whole: the deck narrows (down to 60%) until an
   image at the widest ratio fits the room. */
.bb-smooth-stack__deck {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--bb-ss-gap);
    width: 100%;
    max-width: max(60%, calc(var(--bb-ss-room) * var(--bb-ss-aspect) + 8px));
    margin-inline: auto;
}

/* Each card scrolls up with the page and sticks a step below the one before it. Later cards
   come later in the page, so they paint over the ones they cover. */
.bb-smooth-stack__slot {
    position: sticky;
    top: calc(var(--bb-ss-header, var(--header-height, 0px)) + var(--bb-ss-top) + var(--bb-ss-index, 0) * var(--bb-ss-step));
    flex: none;
    container-type: inline-size; /* Lets the paper size its split from the card's width. */
}

.bb-smooth-stack-card {
    position: relative;
    padding: 4px;
    border-radius: var(--bb-radius-media);
    background:
        radial-gradient(ellipse 43% 15.6% at 5.7% 100%, color-mix(in srgb, var(--bb-color-pink) var(--bb-ss-glow), transparent), transparent),
        var(--bb-ss-surface);
    overflow-wrap: anywhere;
    will-change: rotate;
}

.bb-smooth-stack-card__media {
    aspect-ratio: 11 / 6;
    overflow: hidden;
    border-radius: 8px;
}

.bb-smooth-stack-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bb-smooth-stack-card__caption { padding: 24px 12px 16px; }

/* Numbered badge ("Inning 01") over the top-left of the image: 16px in on larger screens, 8px on
   phones. A card without an image keeps it in the flow at the top instead. */
.bb-smooth-stack-card__counter {
    --bb-ss-counter-inset: 8px;
    position: absolute;
    top: calc(4px + var(--bb-ss-counter-inset));
    left: calc(4px + var(--bb-ss-counter-inset));
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    width: 180px;
    max-width: calc(100% - 8px - 2 * var(--bb-ss-counter-inset));
    height: 24px;
    padding: 0 6px 0 12px;
    border-radius: 6px;
    background: rgb(0 0 0 / 70%);
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

.bb-smooth-stack-card--no-media .bb-smooth-stack-card__counter {
    position: relative;
    top: auto;
    left: auto;
    margin: 12px 0 0 12px;
}

.bb-smooth-stack-card__counter-label {
    font: 600 14px / 1 var(--bb-font-mono);
    color: var(--bb-color-white);
}

.bb-smooth-stack-card__counter-number {
    font: 400 20px / 1 "Hamburg-400", var(--bb-font-heading);
    color: var(--bb-color-pink);
}

.bb-smooth-stack-card__title {
    margin: 0;
    padding: 0;
    font: 700 16px / 1.25 var(--bb-font-heading);
    letter-spacing: 0;
    text-transform: uppercase;
    color: inherit;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

.bb-smooth-stack-card__title + .bb-smooth-stack-card__description { margin-top: 8px; }

.bb-smooth-stack-card__description {
    font: 14px / 1.3 var(--bb-font-body);
    letter-spacing: -0.25px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.bb-smooth-stack-card__description p { color: inherit; }
.bb-smooth-stack-card__description > :last-child { margin-bottom: 0; }
.bb-smooth-stack-card__description a { color: inherit !important; text-decoration: underline; }
.bb-smooth-stack-card a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.bb-smooth-stack__footer {
    margin-top: 24px;
    font: 400 12px / 1.3 var(--bb-font-body);
    letter-spacing: 0;
    text-align: center;
    opacity: 0.5;
    overflow-wrap: anywhere;
}

/* Phones, per the mobile design: 303 × 180 images, cards stuck 44px apart, and the paper ending
   just under the first card. Longer stacks close the step up (down to 40px, which still clears
   each card's inning badge) rather than narrow the cards: it is the room left once a full-width
   card fits, shared out. */
@media (max-width: 575px) {
    .bb-smooth-stack {
        --bb-ss-step: clamp(40px, calc(
            (100svh - var(--bb-ss-header, var(--header-height, 0px)) - var(--bb-ss-top) - var(--bb-ss-bottom) - var(--bb-ss-caption, 120px)
                - 8px - (100vw - 2 * var(--bb-ss-gutter) - 8px) * 60 / 101) / max(1, var(--bb-ss-count, 1) - 1)), 44px);
    }
    .bb-smooth-stack-card__media { aspect-ratio: 101 / 60; }
    /* The badge hugs its text: 20px between the label and the number. */
    .bb-smooth-stack-card__counter { width: auto; gap: 20px; }
    .bb-smooth-stack__paper { --bb-ss-split: 63.7cqw; }
}
@media (min-width: 576px) {
    /* The step clears each card's inning badge (4 + 16 + 24px) with 16px to spare. */
    .bb-smooth-stack { --bb-ss-aspect: 11 / 6; --bb-ss-step: 60px; }
    .bb-smooth-stack-card__counter { --bb-ss-counter-inset: 16px; }
}

@media (min-width: 992px) {
    .bb-smooth-stack {
        --bb-ss-gutter: 80px;
        --bb-ss-top: 48px;
        --bb-ss-gap: 96px;
        --bb-ss-glow: 70%;
        --bb-ss-aspect: 21 / 10; /* 2.1:1 */
        --bb-ss-padding: 80px;
    }
    .bb-smooth-stack-card__media { aspect-ratio: auto; height: var(--bb-ss-media-height); }
    /* Same 1280px content grid as Preshow: ten columns, including their gutters. */
    .bb-smooth-stack__deck { width: 83.125%; }
    .bb-smooth-stack-card__description { font-size: 16px; }
    .bb-smooth-stack__footer { margin-top: 80px; }
}

/* Short desktop windows: less room under the header, a tighter step that still clears each
   inning badge (4 + 16 + 24px) with 8px to spare, and images that crop wider than 2.1:1 (down to
   3:1) to fit the stuck stack before the deck narrows. */
@media (min-width: 992px) and (max-height: 800px) {
    .bb-smooth-stack {
        --bb-ss-top: 24px;
        --bb-ss-step: 52px;
        --bb-ss-aspect: 3 / 1;
        --bb-ss-media-height: clamp((100cqw - 8px) / 3, var(--bb-ss-room), (100cqw - 8px) * 10 / 21);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bb-smooth-stack-card { rotate: none !important; }
}

@media print {
    .bb-smooth-stack { overflow: visible; }
    .bb-smooth-stack__slot { position: relative; top: auto; }
    .bb-smooth-stack__paper { display: none; }
    .bb-smooth-stack-card { rotate: none !important; }
}