/* The public journey store of one organisation.

   Every colour on this page comes from one place: the css variables the server writes into
   :root from StoreBrandPalette. There is not a single hex below, on purpose - a hex here would
   be a colour no organisation could ever change, and the whole point of this page is that it
   arrives in the organisation's own colour the moment they set it.

   The tints follow what Disney+ does with its blue: the page is not the brand colour, it is a
   near-black MADE of the brand colour, with the brand kept for the glows, the buttons and the
   focus ring so it reads as theirs without being a wall of it. */

:root {
    --st-dim: rgba(var(--st-text-rgb), .72);
    --st-faint: rgba(var(--st-text-rgb), .46);
    /* The hairlines and the glows are drawn with the ACCENT, not with the raw brand colour.
       A brand can be almost black (a deep bottle green, a navy) and a line drawn in it on a dark
       page is a line nobody can see; the accent is that same colour already pushed to where it
       reads against this page's base, so it is the one that carries the brand visibly. */
    --st-line: rgba(var(--st-accent-rgb), .30);
    --st-line-soft: rgba(var(--st-text-rgb), .10);
    --st-radius: 14px;
    --st-radius-sm: 10px;
    --st-gutter: clamp(16px, 4vw, 56px);
    --st-card-w: clamp(210px, 22vw, 310px);
    --st-shadow: 0 22px 48px rgba(0, 0, 0, .48);
    --st-ease: cubic-bezier(.2, .7, .2, 1);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body.st-body {
    min-height: 100vh;
    color: var(--st-text);
    background-color: var(--st-bg);
    background-image:
        radial-gradient(1100px 720px at 8% -10%, rgba(var(--st-accent-rgb), .30), transparent 62%),
        radial-gradient(900px 620px at 92% 2%, rgba(var(--st-accent-rgb), .16), transparent 64%),
        radial-gradient(1200px 900px at 50% 118%, rgba(var(--st-accent-rgb), .20), transparent 68%);
    background-attachment: fixed;
    font-family: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

:focus-visible {
    outline: 2px solid var(--st-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

.st-top {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px var(--st-gutter);
    background: linear-gradient(to bottom, rgba(var(--st-bg-rgb), .96), rgba(var(--st-bg-rgb), .58) 62%, rgba(var(--st-bg-rgb), 0));
    transition: background .25s var(--st-ease), box-shadow .25s var(--st-ease);
}

.st-top.is-stuck {
    background: rgba(var(--st-bg-rgb), .96);
    box-shadow: 0 1px 0 var(--st-line-soft), 0 18px 40px rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}

.st-brandmark {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.st-brandmark__logo {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    object-fit: cover;
    background: var(--st-surface-raised);
    flex: 0 0 auto;
}

.st-brandmark__text {
    min-width: 0;
}

.st-brandmark__name {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.st-brandmark__sub {
    font-size: .78rem;
    color: var(--st-faint);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.st-top__spacer {
    flex: 1 1 auto;
}

.st-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--st-line);
    background: rgba(var(--st-text-rgb), .06);
    transition: border-color .2s var(--st-ease), background .2s var(--st-ease), width .2s var(--st-ease);
}

.st-search:focus-within {
    border-color: var(--st-accent);
    background: rgba(var(--st-text-rgb), .10);
}

.st-search__icon {
    display: flex;
    color: var(--st-faint);
}

.st-search input {
    width: clamp(120px, 22vw, 260px);
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--st-text);
    font: inherit;
    font-size: .92rem;
}

.st-search input::placeholder {
    color: var(--st-faint);
}

.st-top__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--st-line);
    font-size: .88rem;
    font-weight: 600;
    color: var(--st-dim);
    white-space: nowrap;
    transition: color .2s var(--st-ease), border-color .2s var(--st-ease), background .2s var(--st-ease);
}

.st-top__link:hover {
    color: var(--st-text);
    border-color: var(--st-accent);
    background: rgba(var(--st-accent-rgb), .12);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.st-hero {
    position: relative;
    margin-top: -80px;
    padding: clamp(120px, 20vh, 220px) var(--st-gutter) clamp(36px, 6vh, 72px);
    min-height: clamp(440px, 68vh, 760px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
}

.st-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.st-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transform: scale(1.02);
}

.st-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .9s var(--st-ease);
}

.st-hero__video.is-playing {
    opacity: 1;
}

/* Two scrims, not one: the vertical one hands the hero over to the rails below without a seam,
   the horizontal one is what keeps the title readable over a busy photograph. */
.st-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, var(--st-bg) 1%, rgba(var(--st-bg-rgb), .72) 26%, rgba(var(--st-bg-rgb), .10) 62%, rgba(var(--st-bg-rgb), .35) 100%),
        linear-gradient(to right, rgba(var(--st-bg-rgb), .92) 0%, rgba(var(--st-bg-rgb), .58) 32%, rgba(var(--st-bg-rgb), 0) 66%);
}

.st-hero__body {
    position: relative;
    max-width: min(680px, 92%);
}

.st-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid rgba(var(--st-accent-rgb), .5);
    background: rgba(var(--st-accent-rgb), .14);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--st-text);
}

.st-hero__title {
    margin: 0 0 14px;
    font-size: clamp(2.1rem, 5.6vw, 4.2rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.03em;
    text-wrap: balance;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
}

.st-hero__text {
    margin: 0 0 26px;
    max-width: 60ch;
    font-size: clamp(.98rem, 1.5vw, 1.12rem);
    color: var(--st-dim);
}

.st-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.st-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .18s var(--st-ease), box-shadow .18s var(--st-ease), background .18s var(--st-ease), border-color .18s var(--st-ease);
}

.st-btn:hover {
    transform: translateY(-2px);
}

/* The label colour is derived from what the button is painted with, never picked by hand:
   a pale brand colour needs dark ink and a deep one needs light, and only the server knows
   which of the two this organisation has. */
.st-btn--primary {
    background: var(--st-accent);
    color: var(--st-accent-ink);
    box-shadow: 0 12px 30px rgba(var(--st-accent-rgb), .34);
}

.st-btn--primary:hover {
    box-shadow: 0 18px 38px rgba(var(--st-accent-rgb), .46);
}

.st-btn--ghost {
    background: rgba(var(--st-text-rgb), .10);
    border-color: var(--st-line);
    color: var(--st-text);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.st-btn--ghost:hover {
    border-color: var(--st-accent);
    background: rgba(var(--st-text-rgb), .16);
}

/* ── Filter chips ────────────────────────────────────────────────────────── */

.st-filters {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 10px;
    padding: 4px var(--st-gutter) 22px;
    overflow-x: auto;
    scrollbar-width: none;
}

.st-filters::-webkit-scrollbar {
    display: none;
}

.st-chip {
    flex: 0 0 auto;
    padding: 9px 17px;
    border-radius: 999px;
    border: 1px solid var(--st-line);
    background: rgba(var(--st-text-rgb), .05);
    color: var(--st-dim);
    font: inherit;
    font-size: .87rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: color .18s var(--st-ease), border-color .18s var(--st-ease), background .18s var(--st-ease);
}

.st-chip:hover {
    color: var(--st-text);
    border-color: var(--st-accent);
}

.st-chip.is-active {
    background: var(--st-accent);
    border-color: var(--st-accent);
    color: var(--st-accent-ink);
}

.st-chip__count {
    opacity: .6;
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
}

/* ── Rails ───────────────────────────────────────────────────────────────── */

.st-rails {
    padding-bottom: clamp(40px, 8vh, 96px);
}

.st-row {
    position: relative;
    margin-bottom: clamp(26px, 4vh, 46px);
}

.st-row.is-hidden {
    display: none;
}

.st-row__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 0 var(--st-gutter) 12px;
}

.st-row__label {
    margin: 0;
    font-size: clamp(1.02rem, 1.7vw, 1.32rem);
    font-weight: 700;
    letter-spacing: -.015em;
}

.st-row__count {
    font-size: .82rem;
    color: var(--st-faint);
    font-variant-numeric: tabular-nums;
}

.st-row__viewport {
    position: relative;
}

/* The rail scrolls; the cards grow on hover. The padding is what stops a grown card from
   being clipped by the scroller - without it the hover looks like the card is cut in half. */
.st-rail {
    display: flex;
    gap: 14px;
    padding: 26px var(--st-gutter) 30px;
    margin: -26px 0 -30px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.st-rail::-webkit-scrollbar {
    display: none;
}

.st-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--st-gutter) + 22px);
    border: 0;
    color: var(--st-text);
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s var(--st-ease);
}

.st-arrow--prev {
    left: 0;
    background: linear-gradient(to right, rgba(var(--st-bg-rgb), .92), rgba(var(--st-bg-rgb), 0));
}

.st-arrow--next {
    right: 0;
    background: linear-gradient(to left, rgba(var(--st-bg-rgb), .92), rgba(var(--st-bg-rgb), 0));
}

.st-row__viewport:hover .st-arrow,
.st-arrow:focus-visible {
    opacity: 1;
}

/* Named twice on purpose. A rail that does not overflow disables its arrows, and the plain
   .st-arrow[disabled] rule loses to the hover rule above it on specificity - so a two-card row
   showed an arrow that did nothing. */
.st-arrow[disabled],
.st-row__viewport:hover .st-arrow[disabled] {
    opacity: 0;
    pointer-events: none;
}

.st-arrow__disc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(var(--st-text-rgb), .12);
    border: 1px solid var(--st-line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background .18s var(--st-ease), transform .18s var(--st-ease);
}

.st-arrow:hover .st-arrow__disc {
    background: rgba(var(--st-accent-rgb), .3);
    transform: scale(1.08);
}

/* ── Card ────────────────────────────────────────────────────────────────── */

/* A flex column, and every part of it a block. The card is built out of spans inside one <a>
   so the whole tile is a single link; a span is inline by default, and an inline box ignores
   aspect-ratio - which is how the first build of this rendered a rail of portrait-height
   pictures with the title pushed out of the card entirely. */
.st-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: var(--st-card-w);
    scroll-snap-align: start;
    border-radius: var(--st-radius);
    background: var(--st-surface);
    border: 1px solid var(--st-line-soft);
    overflow: hidden;
    transform-origin: center;
    transition: transform .28s var(--st-ease), box-shadow .28s var(--st-ease), border-color .28s var(--st-ease);
}

.st-card.is-hidden {
    display: none;
}

.st-card:hover,
.st-card:focus-within {
    transform: translateY(-6px) scale(1.05);
    z-index: 5;
    border-color: rgba(var(--st-accent-rgb), .65);
    box-shadow: var(--st-shadow), 0 0 0 1px rgba(var(--st-accent-rgb), .35);
}

.st-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--st-surface-raised);
    overflow: hidden;
}

.st-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--st-ease);
}

.st-card:hover .st-card__img {
    transform: scale(1.06);
}

.st-card__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .45s var(--st-ease);
}

.st-card__video.is-playing {
    opacity: 1;
}

/* No picture at all: the card gets a wash of the brand instead of a grey hole, and the initial
   of the journey behind it so two empty cards are still telling apart. */
.st-card__blank {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(120% 120% at 20% 0%, rgba(var(--st-accent-rgb), .55), transparent 62%),
        var(--st-surface-raised);
    font-size: 2.6rem;
    font-weight: 800;
    color: rgba(var(--st-text-rgb), .34);
}

.st-card__badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 6px;
}

.st-badge {
    padding: 4px 10px;
    white-space: nowrap;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(var(--st-bg-rgb), .78);
    border: 1px solid var(--st-line);
    color: var(--st-text);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.st-badge--accent {
    background: var(--st-accent);
    border-color: var(--st-accent);
    color: var(--st-accent-ink);
}

.st-card__body {
    display: block;
    padding: 13px 15px 16px;
}

.st-card__type {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--st-accent);
}

/* Both text blocks keep their height whether they hold one line or two. Cards in a rail sit
   side by side, and a title that wraps only on some of them makes a row of tiles that all end
   at a different place - and clipped the line under the longest one. */
.st-card__title {
    margin: 5px 0 0;
    height: 2.56em;
    font-size: .99rem;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Reserved, not revealed: the one-liner keeps its space whether or not the card is hovered,
   so a row of cards does not jump a line taller the moment the mouse crosses it. */
.st-card__line {
    margin: 6px 0 0;
    height: 2.7em;
    line-height: 1.35;
    font-size: .84rem;
    color: var(--st-faint);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s var(--st-ease);
}

.st-card:hover .st-card__line {
    color: var(--st-dim);
}

/* ── Empty states ────────────────────────────────────────────────────────── */

.st-empty {
    margin: 0 var(--st-gutter) 80px;
    padding: clamp(38px, 8vh, 84px) clamp(24px, 5vw, 60px);
    border-radius: 20px;
    border: 1px solid var(--st-line);
    background: linear-gradient(140deg, rgba(var(--st-accent-rgb), .18), rgba(var(--st-bg-rgb), .3));
    text-align: center;
}

.st-empty.is-hidden {
    display: none;
}

.st-empty__title {
    margin: 0 0 10px;
    font-size: clamp(1.2rem, 2.6vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -.02em;
}

.st-empty__text {
    margin: 0 auto;
    max-width: 52ch;
    color: var(--st-dim);
}

/* ── Foot ────────────────────────────────────────────────────────────────── */

.st-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 26px var(--st-gutter) 40px;
    border-top: 1px solid var(--st-line-soft);
    color: var(--st-faint);
    font-size: .84rem;
}

.st-foot a:hover {
    color: var(--st-text);
}

/* ── Phone ───────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {

    :root {
        --st-card-w: 68vw;
    }

    .st-top {
        flex-wrap: wrap;
        gap: 10px;
    }

    .st-top__spacer {
        display: none;
    }

    .st-search {
        order: 3;
        width: 100%;
    }

    .st-search input {
        width: 100%;
    }

    .st-hero {
        min-height: 76vh;
        padding-top: clamp(150px, 26vh, 260px);
    }

    .st-hero__scrim {
        background: linear-gradient(to top, var(--st-bg) 2%, rgba(var(--st-bg-rgb), .82) 32%, rgba(var(--st-bg-rgb), .28) 100%);
    }

    .st-arrow {
        display: none;
    }

    .st-card:hover,
    .st-card:focus-within {
        transform: none;
        box-shadow: none;
    }

}

@media (prefers-reduced-motion: reduce) {

    * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }

    .st-rail {
        scroll-behavior: auto;
    }

}