/*
 * Stories & Media: the gallery page (template-media.php), the strips any page can hold
 * ([ballyhass_media], ballyhass_media_strip) and the larger player for reels
 * (inc/media-library.php, assets/js/media-gallery.js). 4 November 2026.
 *
 * Tokens only (tokens.css). Contrast, measured: white on navy 15.04:1, navy on yellow 13.34:1,
 * navy on pink 4.84:1 (the "Permission not yet confirmed" marker) and navy on white 15.04:1.
 * The focus ring is the site's one ring (refinements.css section 6): its white edge shows on the
 * navy bands and in the player. Buttons are the brand's: ALL CAPS, bold, rounded square.
 *
 * Layout values that are not tokens: the page container's side padding at each width (16, 15,
 * 30, 60 and 130 pixels), so a row that runs to the edge of the screen still starts where the
 * page's text starts.
 *
 * main.min.css gives every <section> a 100px bottom margin and its own heading styles, so both
 * are set here.
 */

.bh-mg,
.bh-media-strip {
    /* The page container's own side padding (main.min.css, refinements.css): a Reels row runs
       into it, so the row reaches the screen's edge while its first card lines up with the text. */
    --bh-media-pad: 16px;
    --bh-media-gap: var(--bh-space-4);
    font-family: var(--bh-font);
}

@media (min-width: 576px) {
    .bh-mg,
    .bh-media-strip {
        --bh-media-pad: 15px;
    }
}

@media (min-width: 768px) {
    .bh-mg,
    .bh-media-strip {
        --bh-media-pad: 30px;
    }
}

@media (min-width: 992px) {
    .bh-mg,
    .bh-media-strip {
        --bh-media-pad: 60px;
    }
}

@media (min-width: 1800px) {
    .bh-mg,
    .bh-media-strip {
        --bh-media-pad: 130px;
    }
}

.bh-mg section,
section.bh-media-strip {
    margin: 0;
}

/* ---- The gallery's first screen -------------------------------------------------------- */

.bh-mg-hero {
    padding: calc(var(--bh-header-height, 70px) + var(--bh-space-8)) 0 var(--bh-space-12);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-mg-hero__grid {
    display: grid;
    gap: var(--bh-space-8);
    align-items: center;
}

.bh-mg-hero__title {
    margin: 0 0 var(--bh-space-4);
    color: var(--bh-on-navy);
    font-family: var(--bh-font);
    font-size: var(--bh-text-2xl);
    font-weight: var(--bh-weight-bold);
    line-height: var(--bh-leading-tight);
    text-transform: none;
}

.bh-mg-hero__lede {
    max-width: 34rem;
    margin: 0 0 var(--bh-space-6);
    color: var(--bh-on-navy);
    font-size: var(--bh-text-md);
    line-height: var(--bh-leading-body);
}

.bh-mg-jump ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-mg-jump li {
    margin: 0;
}

.bh-mg-jump a {
    display: inline-flex;
    align-items: center;
    min-height: var(--bh-target-comfortable);
    padding: 0 var(--bh-space-4);
    border: 2px solid var(--bh-white);
    border-radius: var(--bh-radius-pill);
    color: var(--bh-on-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    text-decoration: none;
}

.bh-mg-jump a:hover {
    border-color: var(--bh-yellow);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

.bh-mg-feature .bh-film__body {
    color: var(--bh-on-navy);
}

.bh-mg-feature .bh-film__title {
    color: var(--bh-on-navy);
    font-size: var(--bh-text-lg);
}

@media (min-width: 992px) {
    .bh-mg-hero__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: var(--bh-space-12);
    }

    .bh-mg-hero__grid--text {
        grid-template-columns: minmax(0, 1fr);
    }

    .bh-mg-hero__title {
        font-size: var(--bh-text-3xl);
    }
}

.bh-mg-note {
    padding: var(--bh-space-3) 0;
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font-size: var(--bh-text-xs);
}

.bh-mg-note p {
    margin: 0;
}

.bh-mg-note p + p {
    margin-top: var(--bh-space-1);
}

.bh-mg-note a {
    color: var(--bh-on-yellow);
    font-weight: var(--bh-weight-bold);
    text-decoration: underline;
}

.bh-mg-empty {
    padding: var(--bh-space-12) var(--bh-space-4);
}

.bh-mg-follow {
    padding: var(--bh-space-12) 0;
    border-top: 1px solid var(--bh-line);
    background: var(--bh-surface-2);
    color: var(--bh-on-white);
}

.bh-mg-follow__title {
    margin: 0 0 var(--bh-space-2);
    color: var(--bh-on-white);
    font-family: var(--bh-font);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-bold);
    text-transform: none;
}

.bh-mg-follow__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-3);
    margin: var(--bh-space-4) 0 0;
}

/* ---- Media enquiries, the page's last band (comment 11933770 point 4) ---------------------
   White, so it stands apart from the grey band above it and the navy footer below. Its button
   is navy with white words (15.04:1) because a yellow button has no edge on white. Links are
   the blue text colour on white (5.01:1), underlined. */

.bh-mg-press {
    padding: var(--bh-space-12) 0;
    border-top: 1px solid var(--bh-line);
    background: var(--bh-white);
    color: var(--bh-on-white);
}

.bh-mg-press__title {
    margin: 0 0 var(--bh-space-3);
    color: var(--bh-on-white);
    font-family: var(--bh-font);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-bold);
    text-transform: none;
}

.bh-mg-press p {
    max-width: 40rem;
    margin: 0 0 var(--bh-space-3);
    font-size: var(--bh-text-sm);
    font-weight: var(--bh-weight-medium);
    line-height: var(--bh-leading-body);
}

.bh-mg-press a:not(.bh-media-btn) {
    color: var(--bh-blue-text);
    font-weight: var(--bh-weight-semibold);
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.bh-mg-press .bh-mg-press__links {
    margin: var(--bh-space-4) 0 var(--bh-space-6);
}

.bh-mg-press .bh-media-btn {
    border-color: var(--bh-navy);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-mg-press .bh-media-btn:hover {
    border-color: var(--bh-yellow);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

.bh-mg-press .bh-mg-press__note {
    margin: 0;
    font-size: var(--bh-text-xs);
}

/* ---- A strip: heading, words, then a Reels row, films and photographs ------------------- */

.bh-media-strip {
    padding: var(--bh-space-12) 0;
    color: var(--bh-on-white);
}

.bh-mg .bh-media-strip + .bh-media-strip {
    border-top: 1px solid var(--bh-line);
}

.bh-media-strip__title {
    margin: 0 0 var(--bh-space-2);
    color: inherit;
    font-family: var(--bh-font);
    font-size: var(--bh-text-xl);
    font-weight: var(--bh-weight-bold);
    line-height: var(--bh-leading-tight);
    text-transform: none;
}

.bh-media-strip__intro {
    max-width: 40rem;
    margin: 0 0 var(--bh-space-6);
    color: inherit;
    font-size: var(--bh-text-sm);
}

@media (min-width: 992px) {
    .bh-media-strip__title {
        font-size: var(--bh-text-2xl);
    }
}

/* The gallery's Reels: the dark band, straight after the first screen. */
.bh-mg .bh-media-strip--reels {
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-mg .bh-media-strip--reels + .bh-media-strip {
    border-top: 0;
}

/* ---- The Reels row ------------------------------------------------------------------------ */

.bh-reels__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bh-space-3);
    min-height: var(--bh-target-comfortable);
    margin-bottom: var(--bh-space-3);
}

.bh-reels__hint {
    margin: 0;
    color: inherit;
    font-size: var(--bh-text-xs);
}

.bh-reels__steps {
    display: flex;
    gap: var(--bh-space-2);
    margin-left: auto;
}

.bh-reels__step {
    display: inline-grid;
    place-items: center;
    width: var(--bh-target-comfortable);
    height: var(--bh-target-comfortable);
    padding: 0;
    border: 2px solid currentColor;
    border-radius: var(--bh-radius-full);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.bh-reels__step[hidden] {
    display: none;
}

.bh-reels__step:hover {
    background: var(--bh-yellow);
    border-color: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

.bh-reels__step[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
    background: transparent;
    border-color: currentColor;
    color: inherit;
}

.bh-reels__row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(58vw, 15rem);
    gap: var(--bh-media-gap);
    margin: 0 calc(-1 * var(--bh-media-pad));
    padding: var(--bh-space-2) var(--bh-media-pad) var(--bh-space-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--bh-media-pad);
    list-style: none;
    scrollbar-width: thin;
}

/* Three, four, then five tall cards to a screen: a track's percentage is of the row less its padding. */
@media (min-width: 576px) {
    .bh-reels__row {
        grid-auto-columns: calc((100% - 2 * var(--bh-media-gap)) / 3);
    }
}

@media (min-width: 768px) {
    .bh-reels__row {
        grid-auto-columns: calc((100% - 3 * var(--bh-media-gap)) / 4);
    }
}

@media (min-width: 992px) {
    .bh-reels__row {
        grid-auto-columns: calc((100% - 4 * var(--bh-media-gap)) / 5);
    }
}

.bh-reel {
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
    list-style: none;
}

.bh-reel__open {
    display: flex;
    flex-direction: column;
    gap: var(--bh-space-2);
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--bh-radius-md);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.bh-reel__open:focus-visible {
    outline: var(--bh-focus-width) solid var(--bh-focus-color);
    outline-offset: var(--bh-focus-offset);
    box-shadow: var(--bh-focus-shadow);
}

.bh-reel__cover {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 9 / 16;
    border-radius: var(--bh-radius-md);
    background: var(--bh-navy);
    box-shadow: var(--bh-shadow-md);
}

.bh-reel__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bh-reel__play {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--bh-radius-full);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    box-shadow: var(--bh-shadow-md);
    transform: translate(-50%, -50%);
}

.bh-reel__len {
    position: absolute;
    left: var(--bh-space-2);
    bottom: var(--bh-space-2);
    padding: var(--bh-space-1) var(--bh-space-2);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    line-height: 1;
}

.bh-reel__title {
    color: inherit;
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    line-height: 1.35;
}

.bh-reel__pending,
.bh-media-pending,
.bh-md__pending {
    align-self: flex-start;
    display: inline-block;
    margin: 0;
    padding: var(--bh-space-1) var(--bh-space-2);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-pink);
    color: var(--bh-on-pink);
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-bold);
    line-height: 1.3;
}

@media (prefers-reduced-motion: no-preference) {
    .bh-reels__row {
        scroll-behavior: smooth;
    }

    .bh-reel__img {
        transition: transform 0.3s ease;
    }

    .bh-reel__open:hover .bh-reel__img,
    .bh-reel__open:focus-visible .bh-reel__img {
        transform: scale(1.04);
    }
}

/* ---- Wide films, which play in place ------------------------------------------------------ */

.bh-films {
    display: grid;
    gap: var(--bh-space-8) var(--bh-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .bh-films {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .bh-films {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.bh-film {
    display: flex;
    flex-direction: column;
    gap: var(--bh-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-film__frame {
    overflow: hidden;
    border-radius: var(--bh-radius-md);
    background: var(--bh-navy);
    box-shadow: var(--bh-shadow-md);
}

.bh-film__frame iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

.bh-film__frame .bh-video__frame {
    border-radius: 0;
}

.bh-film__body {
    display: flex;
    flex-direction: column;
    gap: var(--bh-space-2);
}

.bh-film__body > * {
    margin: 0;
}

.bh-film__title {
    color: inherit;
    font-family: var(--bh-font);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
    line-height: 1.3;
    text-transform: none;
}

.bh-film__meta {
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-semibold);
    letter-spacing: 0.02em;
}

.bh-film__text,
.bh-film__note {
    font-size: var(--bh-text-xs);
    line-height: var(--bh-leading-body);
}

.bh-film__note {
    padding-left: var(--bh-space-3);
    border-left: 3px solid var(--bh-blue);
}

.bh-film__seen summary {
    min-height: var(--bh-target-min);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    cursor: pointer;
}

.bh-film__seen p {
    margin: var(--bh-space-2) 0 0;
    font-size: var(--bh-text-xs);
}

.bh-film__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bh-space-2);
    margin-top: var(--bh-space-1);
}

/* ---- Buttons, the brand's ----------------------------------------------------------------- */

.bh-media-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--bh-target-comfortable);
    padding: 0 var(--bh-space-5);
    border: 2px solid var(--bh-yellow);
    border-radius: var(--bh-radius-sm);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font-family: var(--bh-font);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-bold);
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.bh-media-btn:hover {
    border-color: var(--bh-navy);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
}

.bh-media-btn--ghost {
    border-color: currentColor;
    background: transparent;
    color: inherit;
}

.bh-media-btn--ghost:hover {
    border-color: var(--bh-yellow);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

.bh-mg-hero .bh-media-btn:hover,
.bh-md .bh-media-btn:hover {
    border-color: var(--bh-white);
    background: var(--bh-white);
    color: var(--bh-on-white);
}

/* ---- A section's photographs -------------------------------------------------------------- */

.bh-media-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bh-space-3);
    margin: var(--bh-space-8) 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 992px) {
    .bh-media-photos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--bh-space-4);
    }
}

.bh-media-photo {
    margin: 0;
}

.bh-media-photo__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--bh-radius-md);
    object-fit: cover;
}

/* ---- The larger player -------------------------------------------------------------------- */

html.bh-md-open {
    overflow: hidden;
}

.bh-md {
    --bh-md-stage: min(100%, calc((100dvh - 16rem) * 9 / 16));
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: var(--bh-navy);
    color: var(--bh-on-navy);
    font-family: var(--bh-font);
}

.bh-md[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.bh-md::backdrop {
    background: var(--bh-navy);
}

.bh-md__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bh-space-3);
    padding: var(--bh-space-3) var(--bh-space-4);
}

.bh-md__count {
    margin: 0;
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
}

.bh-md__close {
    display: inline-flex;
    align-items: center;
    gap: var(--bh-space-2);
    min-height: var(--bh-target-comfortable);
    padding: 0 var(--bh-space-4);
    border: 2px solid var(--bh-white);
    border-radius: var(--bh-radius-sm);
    background: transparent;
    color: var(--bh-on-navy);
    font: var(--bh-weight-bold) var(--bh-text-xs) / 1 var(--bh-font);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.bh-md__close:hover {
    background: var(--bh-white);
    color: var(--bh-on-white);
}

.bh-md__body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "stage stage stage"
        "prev info next";
    align-content: start;
    gap: var(--bh-space-3);
    min-height: 0;
    padding: 0 var(--bh-space-4) var(--bh-space-4);
    overflow-y: auto;
    touch-action: pan-y;
}

.bh-md__stage {
    grid-area: stage;
    position: relative;
    justify-self: center;
    width: var(--bh-md-stage);
    aspect-ratio: 9 / 16;
    /* clip, not hidden, where the browser knows it: a box with overflow hidden may be squeezed
       below its height by the grid row (its automatic minimum is 0), and on a 390 by 844 phone the
       player then covered the top 13 pixels of the title below it (final checks, 11 November 2026).
       clip rounds the corners the same way and keeps the row as tall as the player. */
    overflow: hidden;
    overflow: clip;
    border-radius: var(--bh-radius-md);
    background: var(--bh-navy);
    box-shadow: 0 0 0 1px var(--bh-muted);
}

.bh-md__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bh-md__poster[hidden] {
    display: none;
}

.bh-md__facade {
    position: absolute;
    left: var(--bh-space-3);
    right: var(--bh-space-3);
    bottom: var(--bh-space-3);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bh-space-2);
    padding: var(--bh-space-3);
    border-radius: var(--bh-radius-md);
    background: var(--bh-navy);
    color: var(--bh-on-navy);
    box-shadow: var(--bh-shadow-md);
}

.bh-md__play {
    display: inline-flex;
    align-items: center;
    gap: var(--bh-space-2);
    min-height: var(--bh-target-comfortable);
    padding: 0 var(--bh-space-5);
    border: 0;
    border-radius: var(--bh-radius-sm);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
    font: var(--bh-weight-bold) var(--bh-text-xs) / 1 var(--bh-font);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

.bh-md__play:hover {
    background: var(--bh-white);
    color: var(--bh-on-white);
}

.bh-md__note {
    margin: 0;
    font-size: var(--bh-text-2xs);
    line-height: 1.35;
}

.bh-md--playing .bh-md__poster,
.bh-md--playing .bh-md__facade {
    display: none;
}

.bh-md__player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--bh-navy);
    object-fit: contain;
}

.bh-md__nav {
    display: inline-grid;
    place-items: center;
    align-self: start;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 2px solid var(--bh-white);
    border-radius: var(--bh-radius-full);
    background: transparent;
    color: var(--bh-on-navy);
    cursor: pointer;
}

.bh-md__nav--prev {
    grid-area: prev;
}

.bh-md__nav--next {
    grid-area: next;
}

.bh-md__nav:hover {
    border-color: var(--bh-yellow);
    background: var(--bh-yellow);
    color: var(--bh-on-yellow);
}

.bh-md__nav[aria-disabled="true"] {
    opacity: 0.35;
    cursor: default;
    border-color: var(--bh-white);
    background: transparent;
    color: var(--bh-on-navy);
}

.bh-md__info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    gap: var(--bh-space-2);
    min-width: 0;
}

.bh-md__info > * {
    margin: 0;
}

.bh-md__info [hidden] {
    display: none;
}

.bh-md__title {
    color: var(--bh-on-navy);
    font-family: var(--bh-font);
    font-size: var(--bh-text-md);
    font-weight: var(--bh-weight-bold);
    line-height: 1.3;
    text-transform: none;
}

.bh-md__meta {
    font-size: var(--bh-text-2xs);
    font-weight: var(--bh-weight-semibold);
}

.bh-md__text,
.bh-md__seen p {
    font-size: var(--bh-text-xs);
    line-height: var(--bh-leading-body);
}

.bh-md__seen summary {
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    cursor: pointer;
}

.bh-md__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bh-space-2) var(--bh-space-4);
}

.bh-md__source {
    color: var(--bh-on-navy);
    font-size: var(--bh-text-xs);
    font-weight: var(--bh-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Instagram's embed is its own frame with a header and caption, so it takes the stage as it is. */
.bh-md[data-provider="instagram"] .bh-md__player {
    background: var(--bh-white);
}

@media (min-width: 900px) {
    .bh-md {
        --bh-md-stage: min(30rem, calc((100dvh - 7rem) * 9 / 16));
    }

    .bh-md__body {
        grid-template-columns: auto auto minmax(16rem, 24rem) auto;
        grid-template-areas: "prev stage info next";
        justify-content: center;
        align-content: center;
        align-items: center;
        column-gap: var(--bh-space-6);
        padding: 0 var(--bh-space-6) var(--bh-space-6);
    }

    .bh-md__nav {
        align-self: center;
        width: 3.5rem;
        height: 3.5rem;
    }

    .bh-md__title {
        font-size: var(--bh-text-lg);
    }
}