/* ================================================================== */
/* Jubilee Filmz: the header and the home hero                        */
/* ================================================================== */
/*
 * Rio, 2026-11-09, with a screenshot of Streamit's newer demo: the header
 * and the home hero take that design; Jambo's links, data and behaviour
 * stay. Loaded after jambo-header.css (layouts/master), so a rule here wins
 * over Jambo's on cascade order (Jambo's ADR-0001: vendor SCSS is never
 * edited). Measurements are from the screenshot at 1905 px wide.
 *
 * layouts/jambo-auth loads this file too, for its tokens (2026-11-13): sign
 * in, sign up, forgot and reset password, verify, two-factor, 403 and
 * maintenance. Every rule here must stay scoped to its own classes, or it
 * reaches those pages as well.
 */

/* ---- Jubilee tokens: the only raw values in this file ---- */
:root {
    --jubilee-ink: #01070a;              /* the screenshot's header and shade */
    --jubilee-ink-rgb: 1, 7, 10;
    --jubilee-raised: #22292e;           /* round hero buttons, app button; white on it 14.7:1 */
    --jubilee-subscribe-bg: #331e00;     /* the screenshot's Subscribe */
    --jubilee-subscribe-fg: #ff9800;     /* on --jubilee-subscribe-bg: 7.35:1 */
    /* Text on the orange (#FF6C02): white measures 2.84:1, under the 4.5:1
       floor for button labels, so the ink is used (7.14:1). Deliberate, per
       the screen standard 6b; the screenshot's red took white at 4.79:1. */
    --jubilee-on-primary: var(--jubilee-ink);
    --jubilee-radius: 4px;
    --jubilee-control: 40px;
    /* The footer, sampled from the screenshot. Muted text on the footer:
       10.2:1; on the ink (the link row): 11.6:1. */
    --jubilee-footer-bg: #0d1619;
    --jubilee-line: #404a51;
    --jubilee-muted: #c4c2c2;
    /* The title card, sampled from Rio's reference: its 1 px edge. */
    --jubilee-card-line: #272729;
    /* The detail hero's block sits this far above the trailer's foot
       (Streamit's movie-detail.html, .details-parts bottom). */
    --jubilee-detail-foot: 6em;
    --jubilee-detail-button: 46px;       /* its Start Watching and Watch List */
    --jubilee-detail-actions-gap: 2em;   /* its my-5 around the button row */
    --jubilee-detail-actions-gap-tight: 1em 0.5em; /* buttons under the title */
    --jubilee-detail-actions-gap-phone: 0.5rem;
    --jubilee-detail-button-pad-phone: 1rem;
    --jubilee-detail-title-short: 1.5615em; /* the template's phone title */
    /* The detail hero's text column is as wide as its button row; this is
       its floor, padding included, for a state with fewer buttons. Below
       the usual row (482 px + 2 x 2em = 546 px), or it would win there. */
    --jubilee-detail-column-min: 30rem;
    /* The pricing page's plans, drawn as cinema tickets ("Pricing page"
       below). Pairs measured with a script: see the worklog, 2026-11-13. */
    --jubilee-plan-radius: 1.25rem;
    --jubilee-plan-notch: 0.875rem;      /* radius of the ticket's side cut-outs */
    --jubilee-plan-stub: #141417;        /* the stub: the name and the price */
    --jubilee-plan-body: #0c0c0e;        /* the body: what the plan gives */
    --jubilee-plan-glass: rgba(255, 255, 255, 0.06);      /* tab track, quiet buttons */
    --jubilee-plan-glass-line: rgba(255, 255, 255, 0.14);
    --jubilee-plan-perforation: rgba(255, 255, 255, 0.2); /* the tear line */
    --jubilee-pill: 999px;
    /* The Cast page's cards ("Cast page" below). */
    --jubilee-cast-radius: 1rem;
    /* --jubilee-header-h is not set here: the header partial measures the
       header live and sets it on <html>. Rules give the measured desktop
       height (112 px) as the fallback until the script runs. */
}

/* ================================================================== */
/* Header                                                             */
/* ================================================================== */

.jambo-header {
    background: rgba(var(--jubilee-ink-rgb), 0.92);
    transition: background 0.25s ease, border-color 0.25s ease;
}

/* Over the home hero, until the page scrolls: the screenshot's gradient,
   solid at the top and clear by the bottom of the header. */
body:has(.jubilee-hero) .jambo-header:not(.is-scrolled) {
    background: linear-gradient(180deg,
        rgba(var(--jubilee-ink-rgb), 1) 0,
        rgba(var(--jubilee-ink-rgb), 0.9) 40px,
        rgba(var(--jubilee-ink-rgb), 0.45) 74px,
        rgba(var(--jubilee-ink-rgb), 0) 100%);
    /* Over the border too: a gradient drawn in the padding box repeats
       under the 1 px bottom border and draws a solid line there. */
    background-origin: border-box;
    background-repeat: no-repeat;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
}

/* Subscribe: the screenshot's amber button (Jambo's badge, restyled). */
.jambo-subscribe-badge {
    height: var(--jubilee-control);
    padding: 0 16px;
    gap: 6px;
    border: 0;
    border-radius: var(--jubilee-radius);
    background: var(--jubilee-subscribe-bg);
    color: var(--jubilee-subscribe-fg);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}
.jambo-subscribe-badge:hover,
.jambo-subscribe-badge:focus-visible {
    background: var(--jubilee-subscribe-bg);
    color: var(--jubilee-subscribe-fg);
    filter: brightness(1.25);
}
.jambo-subscribe-badge i { font-size: 14px; }

/* Refer & earn: the same shape, in the brand colour. */
.jambo-refer-badge {
    height: var(--jubilee-control);
    padding: 0 16px;
    gap: 6px;
    border-radius: var(--jubilee-radius);
    font-size: 14px;
    font-weight: 700;
}

/* Sign in: the screenshot's Login button. */
.jubilee-header__login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--jubilee-radius);
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--jubilee-on-primary);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}
.jubilee-header__login:hover,
.jubilee-header__login:focus-visible,
.jubilee-header__login:active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--jubilee-on-primary);
    filter: brightness(1.08);
}

/* The app button: the screenshot's download icon. */
.jubilee-header__square {
    width: var(--jubilee-control);
    height: var(--jubilee-control);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--jubilee-radius);
    background: var(--jubilee-raised);
    color: #fff;
    font-size: 20px;
    text-decoration: none;
}
.jubilee-header__square:hover { color: #fff; filter: brightness(1.25); }

/* Inline menu (1200 px and up; the include is d-none d-xl-flex). */
.jubilee-header__nav {
    align-items: center;
    gap: 40px;
    margin-left: 92px;          /* 100 px from the logo, less the group's gap */
}
.jubilee-header__link {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: var(--jubilee-control);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}
.jubilee-header__link:hover,
.jubilee-header__link.active {
    color: var(--bs-primary);
}

.jubilee-header__link:focus-visible,
.jubilee-header__square:focus-visible,
.jubilee-header__login:focus-visible,
.jambo-subscribe-badge:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .jubilee-header__login {
        height: var(--jubilee-control);
        padding: 0 24px;
    }
}

/* The screenshot's layout from 1200 px up: logo and menu on the left, the
   buttons on the right. Jambo's search bar stays between them (Rio,
   2026-11-09: "on desktop we need to have the Search bar not just the
   icon"). Below 1200 Jambo's layout stays: the hamburger and the search. */
@media (min-width: 1200px) {
    /* Tight under the menu: the genre chips sit 10 px below the controls
       (Rio, the same evening: "there is alot of space" between the rows). */
    .jambo-header__bar {
        position: relative;
        padding: 16px 0 6px;
    }
    .jambo-genres-bar {
        padding: 4px 0 10px;
    }
    #jambo-sidebar-toggle {
        display: none !important;
    }
    .jambo-header__right {
        gap: 16px !important;
    }
    .jambo-subscribe-badge,
    .jambo-refer-badge,
    .jubilee-header__login {
        margin-left: 8px;
    }
    .jubilee-header__login {
        padding: 0 32px;
    }
    .jambo-header__icon {
        width: var(--jubilee-control);
        height: var(--jubilee-control);
        font-size: 20px;
        color: #fff;
    }

    /* The search bar at the controls' height: 32 + 2 x 3 + 2 x 1 = 40. */
    .jambo-header__search .jambo-search-form {
        padding: 3px 3px 3px 18px;
    }
    .jambo-header__search .jambo-search-input {
        padding: 6px 0;
    }
    .jambo-header__search .jambo-search-btn {
        width: 32px;
        height: 32px;
    }
}
/* The magnifier on the orange: ink, as on every orange control (white is
   2.84:1, under the 3:1 floor for an icon). */
.jambo-search-btn,
.jambo-search-btn:hover {
    color: var(--jubilee-on-primary);
}
/* Up to 1439 the menu sits closer to the logo, so the search keeps room. */
@media (min-width: 1200px) and (max-width: 1439.98px) {
    .jubilee-header__nav {
        gap: 28px;
        margin-left: 32px;
    }
}

/* ================================================================== */
/* Home hero                                                          */
/* ================================================================== */

.jubilee-hero {
    position: relative;
    margin-top: calc(-1 * var(--jubilee-header-h, 120px));
    background: var(--jubilee-ink);
}
.jubilee-hero__swiper {
    height: 100vh;
    height: 100svh;
    min-height: 560px;
}
/* The template gives a slider's wrapper and slides margins and padding
   (Jambo's sliders cancel them with m-0 / p-0); here they would shift each
   slide 15 px left. */
.jubilee-hero .swiper-wrapper {
    margin: 0;
    padding: 0;
}
.jubilee-hero__slide {
    position: relative;
    overflow: hidden;
    padding: 0;
}
.jubilee-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
}
/* The shade: under the header so the genre chips stay readable on a bright
   picture, dark on the left behind the text, and into the page at the
   bottom so the hero runs into the shelves. */
.jubilee-hero__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(var(--jubilee-ink-rgb), 0.6) 0,
            rgba(var(--jubilee-ink-rgb), 0) 260px),
        linear-gradient(90deg,
            rgba(var(--jubilee-ink-rgb), 0.9) 0%,
            rgba(var(--jubilee-ink-rgb), 0.55) 28%,
            rgba(var(--jubilee-ink-rgb), 0) 60%),
        linear-gradient(180deg,
            rgba(var(--jubilee-ink-rgb), 0) 55%,
            rgba(var(--jubilee-ink-rgb), 0.7) 82%,
            var(--bs-body-bg, var(--jubilee-ink)) 100%);
}

.jubilee-hero__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 91px;
    z-index: 2;
}
.jubilee-hero__title {
    max-width: 720px;
    margin: 0 0 8px;
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.jubilee-hero__desc {
    max-width: 540px;
    margin: 0 0 24px;
    color: var(--bs-body-color);
    font-size: 14px;
    line-height: 21px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.jubilee-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    color: var(--bs-body-color);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}
.jubilee-hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.jubilee-hero__meta-item i { font-size: 18px; }
.jubilee-hero__badge {
    padding: 0 8px;
    border-radius: var(--jubilee-radius);
    background: var(--jubilee-raised);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}
.jubilee-hero__imdb { height: 20px; width: auto; }

.jubilee-hero__credits {
    margin-top: 12px;
    font-size: 14px;
    line-height: 22px;
    color: var(--bs-body-color);
    text-transform: capitalize;
}
.jubilee-hero__credit-label { color: var(--bs-primary); }
.jubilee-hero__credits a {
    color: var(--bs-body-color);
    text-decoration: none;
}
.jubilee-hero__credits a:hover { color: #fff; }

.jubilee-hero__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
}
.jubilee-hero__round {
    width: var(--jubilee-control);
    height: var(--jubilee-control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--jubilee-raised);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: filter 0.15s;
}
.jubilee-hero__round:hover { filter: brightness(1.3); }
.jubilee-hero__play {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 28px;
    border-radius: var(--jubilee-radius);
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--jubilee-on-primary);
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
}
.jubilee-hero__play:hover,
.jubilee-hero__play:focus-visible,
.jubilee-hero__play:active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--jubilee-on-primary);
    filter: brightness(1.08);
}
.jubilee-hero__play i { font-size: 14px; }

.jubilee-hero__round:focus-visible,
.jubilee-hero__play:focus-visible,
.jubilee-hero__next:focus-visible,
.jubilee-hero__dots .swiper-pagination-bullet:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Dots: under the text, on the same edge. */
.jubilee-hero__pager {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px;
    z-index: 3;
    pointer-events: none;
}
.jubilee-hero .jubilee-hero__dots {
    position: static;
    display: flex;
    gap: 8px;
    width: auto;
    transform: none;
    text-align: left;
    pointer-events: auto;
}
.jubilee-hero .jubilee-hero__dots .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    margin: 0;
    opacity: 1;
    background: rgba(255, 255, 255, 0.7);
}
.jubilee-hero .jubilee-hero__dots .swiper-pagination-bullet-active {
    background: #fff;
}

/* The arrow on the right, centred on the picture below the bar. */
.jubilee-hero__next {
    position: absolute;
    right: 40px;
    top: calc(50% + 37px);
    transform: translateY(-50%);
    z-index: 3;
    width: 48px;
    height: 48px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    filter: drop-shadow(0 1px 3px rgba(var(--jubilee-ink-rgb), 0.8));
}
@media (min-width: 768px) {
    .jubilee-hero__next { display: inline-flex; }
}

@media (max-width: 767.98px) {
    .jubilee-hero__swiper {
        height: 88vh;
        height: 88svh;
        min-height: 520px;
    }
    .jubilee-hero__content { bottom: 72px; }
    .jubilee-hero__pager { bottom: 28px; }
    .jubilee-hero__title { font-size: 26px; }
    .jubilee-hero__meta { font-size: 14px; gap: 12px; }
    .jubilee-hero__actions { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .jubilee-hero .swiper-wrapper { transition-duration: 0ms !important; }
}

/* ================================================================== */
/* VJs page (Pages/Vjs/list-page)                                     */
/* ================================================================== */

/* A VJ without a photo: their initials in the cast card's frame, ringed in
   the VJ's colour when the admin set one. Never a stock face. */
.jubilee-vj-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1.3;
    border-radius: var(--bs-border-radius-lg);
    background: var(--jubilee-raised);
    box-shadow: inset 0 0 0 3px var(--jubilee-vj-colour, transparent);
    color: #fff;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.iq-cast .cast-images a:hover .jubilee-vj-initials { filter: brightness(1.25); }

/* ================================================================== */
/* Footer (partials/jubilee/footer)                                   */
/* ================================================================== */
/* Rio, 2026-11-09, a screenshot of Streamit's newer footer, measured at
   1905 px: a 1368 px column (1400 less 16 px a side), the brand column
   392 px with a line on its right, the link columns 75 px after it and
   311 px apart, the link row framed and centred under them, and the
   copyright under a full-width line. */

.jubilee-footer {
    background: var(--jubilee-footer-bg);
    color: var(--jubilee-muted);
    font-size: 14px;
    line-height: 20px;
}
/* 1368 px of content, as the screenshot; below that the edge lines up with
   the header's logo (32 px, then 16 px on a phone). */
.jubilee-footer__container {
    max-width: 1432px;
    margin: 0 auto;
    padding: 0 32px;
}
.jubilee-footer__top {
    padding: 80px 0;
}
.jubilee-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 392fr) minmax(0, 976fr);
}

/* Brand column */
.jubilee-footer__brand {
    padding-right: 32px;
    border-right: 1px solid var(--jubilee-line);
}
.jubilee-footer__logo {
    display: inline-block;
    margin-bottom: 28px;
}
.jubilee-footer__logo img {
    display: block;
    height: 40px;
    width: auto;
}
.jubilee-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.jubilee-footer__contact li {
    display: flex;
    align-items: center;
    gap: 8px;
}
.jubilee-footer__contact i {
    flex-shrink: 0;
    font-size: 16px;
}
.jubilee-footer__contact a {
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.jubilee-footer__contact a:hover { color: var(--bs-primary); }
.jubilee-footer__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}
.jubilee-footer__socials a {
    display: inline-flex;
    color: var(--jubilee-muted);
    font-size: 16px;
    text-decoration: none;
    transition: color 0.15s;
}
.jubilee-footer__socials a:hover { color: var(--bs-primary); }

/* Link columns and the app column */
.jubilee-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 32px;
    padding-left: 75px;
}
.jubilee-footer__title {
    margin: 0 0 32px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    text-transform: none;
}
.jubilee-footer__links {
    margin: 0;
    padding: 0;
    list-style: none;
}
.jubilee-footer__links li + li { margin-top: 20px; }
.jubilee-footer__links a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--jubilee-muted);
    text-decoration: none;
    transition: color 0.15s;
}
.jubilee-footer__links a i {
    flex-shrink: 0;
    font-size: 12px;
}
.jubilee-footer__links a:hover { color: var(--bs-primary); }
/* Jambo's rule: past four links a column scrolls, about four rows tall. */
.jubilee-footer__links--scroll {
    max-height: 170px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--jubilee-line) transparent;
}
/* Two badges side by side in a 279 px column: 2 x 127 + 16. */
.jubilee-footer__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.jubilee-footer__badges img {
    display: block;
    height: 46px;
    width: auto;
}

/* The link row, framed and centred */
.jubilee-footer__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 32px;
    width: fit-content;
    max-width: 100%;
    margin: 33px auto 0;
    padding: 18px 38px;
    background: var(--jubilee-ink);
    border: 1px solid var(--jubilee-line);
    border-radius: var(--jubilee-radius);
}
.jubilee-footer__bar a {
    color: var(--jubilee-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}
.jubilee-footer__bar a:hover { color: var(--bs-primary); }

/* Copyright, under a full-width line */
.jubilee-footer__bottom {
    padding: 14px 0 16px;
    border-top: 1px solid var(--jubilee-line);
    text-align: center;
}
.jubilee-footer__copyright {
    margin: 0;
    color: var(--jubilee-muted);
    font-size: 16px;
    line-height: 24px;
}
/* The build credit: kept in the page, transparent (Rio, 2026-11-09: "we
   can keep this 'Developed by ArmGenius' but make it invisible"). It shows
   only while the link has keyboard focus, so a Tab never lands on an
   invisible box. */
.jambo-footer-credit {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: transparent;
}
.jambo-footer-credit a,
.jambo-footer-credit a:hover {
    color: transparent;
    text-decoration: none;
}
.jambo-footer-credit:focus-within,
.jambo-footer-credit:focus-within a {
    color: rgba(255, 255, 255, 0.90);
}

.jubilee-footer a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 2px;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .jubilee-footer__cols {
        padding-left: 40px;
        column-gap: 24px;
    }
}
@media (max-width: 991.98px) {
    .jubilee-footer__top { padding: 56px 0; }
    .jubilee-footer__grid { grid-template-columns: minmax(0, 1fr); }
    .jubilee-footer__brand {
        padding: 0 0 32px;
        margin-bottom: 32px;
        border-right: 0;
        border-bottom: 1px solid var(--jubilee-line);
    }
    .jubilee-footer__cols { padding-left: 0; }
}
@media (max-width: 767.98px) {
    .jubilee-footer__container { padding: 0 16px; }
}
@media (max-width: 575.98px) {
    .jubilee-footer__top { padding: 40px 0; }
    .jubilee-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
    .jubilee-footer__col--app { grid-column: 1 / -1; }
    .jubilee-footer__title { margin-bottom: 20px; }
    .jubilee-footer__links li + li { margin-top: 16px; }
    .jubilee-footer__bar { gap: 10px 20px; padding: 16px 20px; }
    .jubilee-footer__copyright { font-size: 14px; line-height: 20px; }
}

/* ================================================================== */
/* Title cards (partials/jubilee/card, via cards/card-style)          */
/* ================================================================== */
/* Rio's design, 2026-11-09: the poster in a 1 px frame, the kind badge
   top left (no year), the watchlist + top right, the title over the VJ
   and the genre at the foot. No hover panel: hover only lifts the frame. */

/* The card sizes itself by its own width (container queries below), since
   the rails decide how wide it is: 8 across on a desktop, 3.5 on a phone. */
.jubilee-card {
    position: relative;
    width: 100%;
    container-type: inline-size;
}
.jubilee-card__link {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border: 1px solid var(--jubilee-card-line);
    border-radius: 8px;
    background: var(--jubilee-raised);
    color: #fff;
    text-decoration: none;
    transition: border-color 0.15s;
}
.jubilee-card--landscape .jubilee-card__link { aspect-ratio: 16 / 9; }
.jubilee-card__link:hover,
.jubilee-card__link:focus-visible {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}
.jubilee-card__link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.jubilee-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* The shade under the text. */
.jubilee-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(var(--jubilee-ink-rgb), 0) 45%,
        rgba(var(--jubilee-ink-rgb), 0.75) 75%,
        rgba(var(--jubilee-ink-rgb), 0.95) 100%);
}

.jubilee-card__badges {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 56px;            /* clear of the + */
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.jubilee-card__vj,
.jubilee-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
}
/* The VJ's name, where the template had the kind (Rio: "we are repplacing
   the movie tab with the Vj Name"). Cut with an ellipsis before the +. */
.jubilee-card__vj {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--bs-primary);
    color: var(--jubilee-on-primary);
    text-transform: uppercase;
}
/* No VJ, or a page the filler never saw: no badge. */
.jubilee-card__vj:empty { display: none; }
.jubilee-card__vj-more { font-weight: 600; }
.jubilee-card__chip {
    background: rgba(var(--jubilee-ink-rgb), 0.72);
    color: #fff;
    font-weight: 600;
}
/* Premium: the template's crown circle (.premium-product, as on the Top 10
   cards), here in the badge column instead of their top-right corner, which
   is the +. The template sizes it in em, so the card's steps set the size. */
.jubilee-card__crown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--bs-body-color);     /* the Top 10 crown's, inherited there */
    font-size: 16px;
    cursor: inherit;
}
.jubilee-card__crown i { font-size: 1.25em; }

/* The foot: the title over the genre, nothing else. */
.jubilee-card__body {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 14px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.jubilee-card__title,
.jubilee-card__genre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jubilee-card__title {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
}
.jubilee-card__genre {
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    line-height: 16px;
}
.jubilee-card__body .jambo-card-reason { margin-top: 0 !important; }

/* The watchlist +: a dark glass circle; orange with the ink tick once saved. */
.jubilee-card__save {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(var(--jubilee-ink-rgb), 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.jubilee-card__save:hover { background: rgba(var(--jubilee-ink-rgb), 0.85); }
.jubilee-card__save.is-in-watchlist {
    border-color: transparent;
    background: var(--bs-primary);
    color: var(--jubilee-on-primary);
}
.jubilee-card__save:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* A card under 200 px (a laptop rail of 8): a step smaller. */
@container (max-width: 199.98px) {
    .jubilee-card__badges { top: 8px; left: 8px; right: 46px; gap: 5px; }
    .jubilee-card__vj,
    .jubilee-card__chip { padding: 2px 7px; font-size: 11px; line-height: 15px; }
    .jubilee-card__crown { font-size: 14px; }
    .jubilee-card__save { top: 6px; right: 6px; width: 34px; height: 34px; font-size: 16px; }
    .jubilee-card__body { left: 10px; right: 10px; bottom: 12px; gap: 3px; }
    .jubilee-card__title { font-size: 14px; line-height: 18px; }
    .jubilee-card__genre { font-size: 11px; line-height: 15px; }
}
/* Under 140 px (a phone rail of 3.5). */
@container (max-width: 139.98px) {
    .jubilee-card__badges { top: 6px; left: 6px; right: 36px; gap: 4px; }
    .jubilee-card__vj,
    .jubilee-card__chip { padding: 1px 6px; border-radius: 5px; font-size: 10px; line-height: 14px; }
    .jubilee-card__chip i { display: none; }
    .jubilee-card__crown { font-size: 12px; }
    .jubilee-card__save { top: 5px; right: 5px; width: 28px; height: 28px; font-size: 14px; }
    .jubilee-card__body { left: 7px; right: 7px; bottom: 8px; gap: 2px; }
    .jubilee-card__title { font-size: 12px; line-height: 16px; }
    .jubilee-card__genre { font-size: 10px; line-height: 14px; }
    .jubilee-card__body .jambo-card-reason { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    .jubilee-card__link,
    .jubilee-card__save { transition: none; }
}

/* Back to top: the screenshot's round button, in the brand colour with
   the ink arrow (white on the orange is 2.84:1, under 3:1 for an icon).
   The template positions it; Bootstrap's text-white needs !important. */
#back-to-top .top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--jubilee-on-primary) !important;
    font-size: 20px;
}

/* ================================================================== */
/* Top 10 of the day on phones (partials/jubilee/top-ten-today)       */
/* ================================================================== */
/* Below 992 px only: the section is d-lg-none and Jambo's desktop sliders
   beside it are d-none d-lg-block. Rio's phone-hero picture (2026-11-09):
   the picture behind, the text at the foot, a full-width Play, dots under
   it, no +. The Top 10 tile and its line keep the template's own classes. */
.jubilee-t10 { position: relative; }
.jubilee-t10 .swiper-wrapper {
    margin: 0;
    padding: 0;
}
.jubilee-t10__slide {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(520px, 140vw, 620px);
    padding: 0;
    overflow: hidden;
}
.jubilee-t10__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
}
/* Out of the page at the top, dark behind the text at the foot. */
.jubilee-t10__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            var(--bs-body-bg, var(--jubilee-ink)) 0,
            rgba(var(--jubilee-ink-rgb), 0) 96px),
        linear-gradient(180deg,
            rgba(var(--jubilee-ink-rgb), 0) 24%,
            rgba(var(--jubilee-ink-rgb), 0.82) 54%,
            var(--bs-body-bg, var(--jubilee-ink)) 100%);
}
.jubilee-t10__content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    padding: 0 16px;
}
.jubilee-t10__rank {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.jubilee-t10__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.jubilee-t10__vj,
.jubilee-t10__chip {
    display: inline-block;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    white-space: nowrap;
}
/* The VJ: the picture's outlined pill, in the brand colour (7.4:1 on the
   ink). Empty when the title has no VJ, and then it is not drawn. */
.jubilee-t10__vj {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid var(--bs-primary);
    border-radius: 999px;
    background: rgba(var(--bs-primary-rgb), 0.16);
    color: var(--bs-primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.jubilee-t10__vj:empty { display: none; }
.jubilee-t10__chip {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: rgba(var(--jubilee-ink-rgb), 0.6);
    color: #fff;
}
.jubilee-t10__chip--genre {
    border-color: rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-weight: 600;
}
.jubilee-t10__extra {
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    line-height: 18px;
}

.jubilee-t10__title {
    margin: 0 0 8px;
    color: #fff;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.jubilee-t10__title a {
    color: inherit;
    text-decoration: none;
}
.jubilee-t10__desc {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* The hero's Play, the full width, as in the picture. */
.jubilee-t10__play {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 48px;
    border-radius: 10px;
    font-size: 16px;
    box-shadow: 0 8px 24px rgba(var(--bs-primary-rgb), 0.3);
}
.jubilee-t10__play i { font-size: 16px; }

/* Dots under the button: all ten, the current one a longer bar. */
.jubilee-t10 .jubilee-t10__dots {
    position: static;
    display: flex;
    justify-content: center;
    gap: 6px;
    width: auto;
    max-width: 640px;
    margin-top: 18px;
    padding: 0 16px;
    transform: none;
}
.jubilee-t10 .jubilee-t10__dots .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    margin: 0;
    border-radius: 999px;
    opacity: 1;
    background: rgba(255, 255, 255, 0.3);
    transition: width 0.25s ease, background-color 0.25s ease;
}
.jubilee-t10 .jubilee-t10__dots .swiper-pagination-bullet-active {
    width: 28px;
    background: var(--bs-primary);
}
.jubilee-t10__title a:focus-visible,
.jubilee-t10__play:focus-visible,
.jubilee-t10__dots .swiper-pagination-bullet:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
@media (min-width: 768px) {
    .jubilee-t10__content,
    .jubilee-t10 .jubilee-t10__dots { padding: 0 32px; }
    .jubilee-t10__title { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .jubilee-t10 .jubilee-t10__dots .swiper-pagination-bullet { transition: none; }
}

/* ================================================================== */
/* Detail hero (Pages/Movies and Pages/TvShows detail-page)           */
/* ================================================================== */
/* Rio, 2026-11-09, a screenshot of the template's movie-detail.html: "for
   the detail page hero let it be like this, only the hero section", then
   "make sure in all screen the Buttons are see[n] ... they are not the same,
   reason to why even on Jambo we had to put them on top", and "i thought
   we are making the hero full Vh".
   The template order (genres, title, synopsis, meta, language, buttons) and
   the h3 title are markup (cards/movie-description, synopsisFirst). Here:
   1. Landscape screens (992 px and up, and landscape phones and tablets):
      the hero fills the window under the header, the trailer behind it, and
      the block sits above its foot as in the template, so the buttons are
      on screen. When the block needs more room than that, the hero grows to
      fit it: nothing is laid over the header.
   2. Portrait phones and tablets, and windows under 600 px tall: there is
      no room for the whole block above the fold, so the buttons move up
      under the title (visual order only; the DOM keeps the template order,
      so on these screens Tab reaches Read More before the buttons). */

/* Genres: the template's 14 px links in the heading colour. Jambo prints
   them as spans (no genre slug reaches the partial). */
.jubilee-detail-hero .movie-tag li.trending-list span {
    font-size: 0.875em;
    color: var(--bs-heading-color);
}

/* Start Watching, Watch List (and Save to, signed in) at the template's one
   height. They measured 44 and 51 px: the template's play icon sits in a
   span Jambo's markup drops, and Jambo's line-height: 1 targets an <a>
   where the watch list is a <button> now. */
.jubilee-detail-hero .iq-play-button .btn,
.jubilee-detail-hero .watchlist-button-wrapper .btn {
    min-height: var(--jubilee-detail-button);
    line-height: 1;
}

/* The template's my-5 around the button row. */
.jubilee-detail-hero .jubilee-detail-actions {
    margin-block: var(--jubilee-detail-actions-gap);
}

/* No trailer: the backdrop, 21:9 as Jambo's box. */
.jubilee-detail-hero__backdrop {
    aspect-ratio: 21 / 9;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* A poster that is not 21:9 fills the box instead of showing bars. */
.jubilee-detail-hero .vjs-poster {
    background-size: cover;
}

/* 1. Over the trailer. */
@media (min-width: 992px), (min-width: 576px) and (orientation: landscape) {
    .jubilee-detail-hero {
        display: grid;
        grid-template: minmax(0, 1fr) / minmax(0, 1fr);
        min-height: calc(100vh - var(--jubilee-header-h, 112px));
        min-height: calc(100svh - var(--jubilee-header-h, 112px));
    }
    /* The trailer fills the hero; the video and the backdrop are absolute. */
    .jubilee-detail-hero > .iq-main-slider.site-video {
        grid-area: 1 / 1;
        height: auto;
        padding-bottom: 0;
    }
    .jubilee-detail-hero .jubilee-detail-hero__backdrop {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
    }
    /* In place of Jambo's absolute block (28 % from the top from 1200 px,
       in flow from 1200 to 1399 px in jambo-header.css): at the foot. */
    .jubilee-detail-hero > .movie-detail-part {
        grid-area: 1 / 1;
        align-self: end;
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        z-index: 2;
        padding-bottom: var(--jubilee-detail-foot);
    }
    /* The column ends where the buttons end (Rio, 2026-11-13: "the
       description does not have limit on width going to right", then "we
       can keep it where the share icon is"). It is as wide as its widest
       row of controls, in place of the template's 50 % and Jambo's 80 %
       of the window, which ran the synopsis 920 px across the picture at
       1230 px. */
    .jubilee-detail-hero .movie-detail-part .trending-info .details-parts {
        width: fit-content;
        min-width: min(100%, var(--jubilee-detail-column-min));
        max-width: 100%;
    }
    /* The text adds nothing to that width (0) and wraps inside it (100 %). */
    .jubilee-detail-hero .details-parts > .movie-tag,
    .jubilee-detail-hero .details-parts > .jubilee-detail-title,
    .jubilee-detail-hero .details-parts > .movie-description {
        width: 0;
        min-width: 100%;
    }
}

/* 2. The buttons under the title. */
@media (max-width: 991.98px) and (orientation: portrait), (max-height: 600px) {
    .jubilee-detail-hero .details-parts {
        display: flex;
        flex-direction: column;
    }
    .jubilee-detail-hero .details-parts > * {
        order: 2;
    }
    .jubilee-detail-hero .details-parts > .movie-tag,
    .jubilee-detail-hero .details-parts > .jubilee-detail-title {
        order: 0;
    }
    .jubilee-detail-hero .details-parts > .jubilee-detail-actions {
        order: 1;
        margin-block: var(--jubilee-detail-actions-gap-tight);
    }
}

/* A short window (a landscape phone): the template's phone title size, not
   its 55 px tablet one, so a long title does not push the buttons down. */
@media (max-height: 600px) {
    .jubilee-detail-hero .trending-text {
        font-size: var(--jubilee-detail-title-short);
    }
}

/* Phones: Start Watching and Watch List share one row (they wrapped at
   360 px, the watch list under the bottom bar); like and share follow. */
@media (max-width: 575.98px) {
    .jubilee-detail-hero .jubilee-detail-actions {
        gap: var(--jubilee-detail-actions-gap-phone) !important;
    }
    .jubilee-detail-hero .iq-play-button .btn,
    .jubilee-detail-hero .watchlist-button-wrapper .btn:not(.jambo-save-to-btn) {
        padding-inline: var(--jubilee-detail-button-pad-phone);
    }
}

/* Portrait: the block under the trailer, a gap from it as in the template. */
@media (max-width: 991.98px) and (orientation: portrait) {
    .jubilee-detail-hero > .movie-detail-part {
        padding-top: var(--jubilee-detail-actions-gap);
    }
}

/* ================================================================== */
/* Pricing page (Pages/pricing-page)                                  */
/* ================================================================== */
/* Rio, 2026-11-13: "redesing these pricing cards in a modern and
   profesionally more creatively style to be more and different from
   Jambo's". Each plan is a cinema ticket: the stub (the name and the
   price) is torn along a perforation from the body (what the plan gives,
   then the button). The most popular plan's stub glows orange, its ribbon
   sits on the top edge and its button is the only solid one; the period
   tabs are one segmented track. Scoped by .jubilee-pricing, because
   .pricing-plan-wrapper is the template's. Selectors repeat the
   template's chain (widget/_pricing-plan.scss) plus that one class, so
   they win on specificity rather than on load order. */

/* The period tabs: one track, the chosen period in the orange. One class
   above the page's own inline .jambo-period-tabs rules. */
.jubilee-pricing .jambo-period-tabs {
    width: max-content;
    margin-inline: auto;
    padding: 4px;
    gap: 4px !important;                 /* the list's gap-2 is !important */
    background: var(--jubilee-plan-glass);
    border: 1px solid var(--jubilee-plan-glass-line);
    border-radius: var(--jubilee-pill);
}
.jubilee-pricing .jambo-period-tabs .nav-link {
    padding: 0.5rem 1.375rem;
    background: transparent;
    color: var(--jubilee-muted);
    border-radius: var(--jubilee-pill);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.jubilee-pricing .jambo-period-tabs .nav-link:hover { color: var(--bs-white); }
.jubilee-pricing .jambo-period-tabs .nav-link.active {
    background: var(--bs-primary);
    color: var(--jubilee-on-primary);
}
.jubilee-pricing .jambo-period-tabs .nav-link:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* "Current plan" (signed in) and the guest's Free line: a centred chip in
   the tickets' radius, not a bar across the whole container. */
.jubilee-pricing .jubilee-plan-strip {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    padding: 0.75rem 1.25rem !important; /* p-3 */
    background: var(--jubilee-plan-glass);
    border-color: var(--jubilee-plan-glass-line);
    border-radius: var(--jubilee-plan-radius);
}

.jubilee-pricing .jubilee-plan-strip .btn {
    padding-inline: 1.25rem;
    border-radius: var(--jubilee-pill);
}

/* Room above the cards for the ribbon, half of which sits over the edge. */
.jubilee-pricing .tab-content { padding-top: 0.75rem; }

/* The ticket. --jubilee-plan-edge colours the border and the cut-outs'
   rims together, so the two never disagree. */
.jubilee-pricing .pricing-plan-wrapper.jubilee-plan {
    --jubilee-plan-edge: var(--jubilee-card-line);
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--jubilee-plan-body);
    border: 1px solid var(--jubilee-plan-edge);
    border-radius: var(--jubilee-plan-radius);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
}
.jubilee-pricing .pricing-plan-wrapper.jubilee-plan--current {
    --jubilee-plan-edge: var(--jubilee-line);
}
.jubilee-pricing .pricing-plan-wrapper.jubilee-plan--featured {
    --jubilee-plan-edge: rgba(var(--bs-primary-rgb), 0.55);
    box-shadow: 0 28px 70px -36px rgba(var(--bs-primary-rgb), 0.6);
}
@media (hover: hover) and (pointer: fine) {
    .jubilee-pricing .pricing-plan-wrapper.jubilee-plan:hover { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
    .jubilee-pricing .pricing-plan-wrapper.jubilee-plan { transition: none; }
    .jubilee-pricing .pricing-plan-wrapper.jubilee-plan:hover { transform: none; }
}
/* The ?highlight= pulse follows the ticket's corners. */
.jubilee-pricing .pricing-plan-wrapper.jambo-tier-pulse { border-radius: var(--jubilee-plan-radius); }

/* Most popular: a pill on the top edge, ink on the orange (7.14:1). */
.jubilee-pricing .jubilee-plan-ribbon {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    background: var(--bs-primary);
    color: var(--jubilee-on-primary);
    border-radius: var(--jubilee-pill);
    box-shadow: 0 8px 24px -8px rgba(var(--bs-primary-rgb), 0.8);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.jubilee-pricing .jubilee-plan-ribbon i { font-size: 0.875rem; }

/* The stub */
.jubilee-pricing .pricing-plan-wrapper .pricing-plan-header {
    padding: 2.25rem 2rem 1.75rem;
    background: var(--jubilee-plan-stub);
    border-radius: calc(var(--jubilee-plan-radius) - 1px) calc(var(--jubilee-plan-radius) - 1px) 0 0;
}
.jubilee-pricing .pricing-plan-wrapper.jubilee-plan--featured .pricing-plan-header {
    background:
        /* 0.2 at most: the orange plan name stays 4.87:1 even on the
           glow's brightest point (0.26 measured 4.34:1 there). */
        radial-gradient(130% 100% at 50% 0%, rgba(var(--bs-primary-rgb), 0.2), transparent 70%),
        var(--jubilee-plan-stub);
}
/* As tall as the Current Plan pill, so a ticket wearing it keeps its tear
   line level with its neighbours'. */
.jubilee-pricing .pricing-plan-wrapper .pricing-plan-header .plan-wrapper {
    min-height: 1.75rem;
    margin-bottom: 1.25rem;
    gap: 0.75rem;
}
.jubilee-pricing .pricing-plan-wrapper .pricing-plan-header .plan-wrapper .plan-name {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jubilee-muted);
}
.jubilee-pricing .pricing-plan-wrapper.jubilee-plan--featured .pricing-plan-header .plan-wrapper .plan-name {
    color: var(--bs-primary);
}
.jubilee-pricing .jubilee-plan-current {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.625rem;
    background: var(--jubilee-plan-glass);
    border: 1px solid var(--jubilee-plan-glass-line);
    border-radius: var(--jubilee-pill);
    color: var(--bs-white);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}
.jubilee-pricing .jubilee-plan-current i { color: var(--bs-primary); font-size: 0.875rem; }

/* The price: the currency small and raised, the figure large, the period
   after it on the same line. */
.jubilee-pricing .pricing-plan-wrapper .pricing-plan-header .pricing-plan-details .jubilee-plan-was {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.9375rem;
    color: var(--jubilee-muted);
}
.jubilee-pricing .jubilee-plan-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.5rem;
}
.jubilee-pricing .jubilee-plan-currency {
    align-self: flex-start;
    margin-top: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--jubilee-muted);
}
.jubilee-pricing .pricing-plan-wrapper .pricing-plan-header .pricing-plan-details .plan-main-price {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--bs-white);
}
.jubilee-pricing .pricing-plan-wrapper .pricing-plan-header .pricing-plan-details .plan-period-time {
    font-size: 1rem;
    color: var(--jubilee-muted);
}

/* The body, with the tear line along its top edge between the cut-outs. */
.jubilee-pricing .pricing-plan-wrapper .pricing-details {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1.75rem 2rem 2rem;
    border-top: 0;
    background-image: repeating-linear-gradient(90deg, var(--jubilee-plan-perforation) 0 8px, transparent 8px 14px);
    background-size: calc(100% - 2 * var(--jubilee-plan-notch) - 1rem) 2px;
    background-position: center top;
    background-repeat: no-repeat;
}
/* The cut-outs: half discs of the page's own background, rimmed in the
   ticket's edge, centred on the border at the tear line. */
.jubilee-pricing .pricing-plan-wrapper .pricing-details::before,
.jubilee-pricing .pricing-plan-wrapper .pricing-details::after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--jubilee-plan-notch));
    width: calc(2 * var(--jubilee-plan-notch));
    height: calc(2 * var(--jubilee-plan-notch));
    background: var(--bs-body-bg);
    border: 1px solid var(--jubilee-plan-edge);
    border-radius: 50%;
}
.jubilee-pricing .pricing-plan-wrapper .pricing-details::before {
    left: calc(-1 * var(--jubilee-plan-notch) - 1px);
    clip-path: inset(0 0 0 50%);
}
.jubilee-pricing .pricing-plan-wrapper .pricing-details::after {
    right: calc(-1 * var(--jubilee-plan-notch) - 1px);
    clip-path: inset(0 50% 0 0);
}
.jubilee-pricing .pricing-plan-wrapper .pricing-details .description {
    margin-bottom: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--jubilee-muted);
}
.jubilee-pricing .pricing-plan-wrapper .pricing-details .pricing-plan-description ul {
    margin: 0 0 1.75rem;
}
.jubilee-pricing .pricing-plan-wrapper .pricing-details .pricing-plan-description ul li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    padding-left: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bs-white);
}
.jubilee-pricing .pricing-plan-wrapper .pricing-details .pricing-plan-description ul li:last-child {
    margin-bottom: 0;
}
.jubilee-pricing .pricing-plan-wrapper .pricing-details .pricing-plan-description ul li i {
    position: static;
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    margin-top: 0.0625rem;
    transform: none;
    background: rgba(var(--bs-primary-rgb), 0.14);
    color: var(--bs-primary);
    border-radius: 50%;
    font-size: 0.8125rem;
}
.jubilee-pricing .pricing-plan-wrapper.jubilee-plan--featured .pricing-details .pricing-plan-description ul li i {
    background: var(--bs-primary);
    color: var(--jubilee-on-primary);
}
/* A referral discount: the saving in the orange, the seal unboxed. */
.jubilee-pricing .pricing-plan-wrapper .pricing-details .pricing-plan-description ul li.jubilee-plan-saving {
    color: var(--bs-primary);
    font-weight: 500;
}
.jubilee-pricing .pricing-plan-wrapper .pricing-details .pricing-plan-description ul li.jubilee-plan-saving i {
    background: transparent;
    color: var(--bs-primary);
    font-size: 1.375rem;
}

/* The button, at the foot of every ticket in a row. Quiet glass on every
   plan but the most popular, whose button is the one solid orange. */
.jubilee-pricing .pricing-plan-wrapper .pricing-plan-footer { margin-top: auto; }
.jubilee-pricing .pricing-plan-wrapper .pricing-plan-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    border-radius: var(--jubilee-pill);
    letter-spacing: 0.02em;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* The template paints .btn-primary from an ::after layer (orange, its own
   radius, shrunk on hover); here the button's own background does it. */
.jubilee-pricing .pricing-plan-wrapper .pricing-plan-footer .btn::after { display: none; }
.jubilee-pricing .pricing-plan-wrapper .pricing-plan-footer .btn-primary {
    background: var(--jubilee-plan-glass);
    border: 1px solid var(--jubilee-plan-glass-line);
    color: var(--bs-white);
}
.jubilee-pricing .pricing-plan-wrapper .pricing-plan-footer .btn-outline-primary {
    background: transparent;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.6);
    color: var(--bs-primary);
}
.jubilee-pricing .pricing-plan-wrapper .pricing-plan-footer .btn:hover,
.jubilee-pricing .pricing-plan-wrapper .pricing-plan-footer .btn:focus-visible,
.jubilee-pricing .pricing-plan-wrapper.jubilee-plan--featured .pricing-plan-footer .btn-primary {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--jubilee-on-primary);
}
.jubilee-pricing .pricing-plan-wrapper.jubilee-plan--featured .pricing-plan-footer .btn-primary:hover {
    filter: brightness(1.08);
}
.jubilee-pricing .pricing-plan-wrapper .pricing-plan-footer .btn:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Phones: the tabs share the track's width (four did not fit at 390 px,
   and the last one was cut), and the template's 480 px padding was a
   desktop ticket's, shrunk. */
@media (max-width: 575.98px) {
    .jubilee-pricing .jambo-period-tabs { width: 100%; }
    .jubilee-pricing .jambo-period-tabs .nav-item { flex: 1 1 0; }
    .jubilee-pricing .jambo-period-tabs .nav-link {
        width: 100%;
        padding-inline: 0.5rem;
    }
    .jubilee-pricing .pricing-plan-wrapper .pricing-plan-header { padding: 2rem 1.5rem 1.5rem; }
    .jubilee-pricing .pricing-plan-wrapper .pricing-details { padding: 1.5rem 1.5rem 1.75rem; }
    .jubilee-pricing .pricing-plan-wrapper .pricing-plan-header .pricing-plan-details .plan-main-price {
        font-size: 2.5rem;
    }
}

/* ================================================================== */
/* Cast page (Pages/Cast/list-page, partials/jubilee/cast-card)       */
/* ================================================================== */
/* Rio, 2026-11-13: "another cast cards that are modern and creatively
   more clean". One link per person: a 4:5 portrait in a rounded frame, the
   name and roles over a shade at its foot with a short orange rule between
   them, and the number of titles in a glass pill. A person without a photo
   gets their initials on the raised tone, as on the VJs page. Hover (a
   mouse only): the photo drifts in, the rule grows and the edge turns
   orange. Every class here is the cast card's own; nothing else matches. */
/* The page's heading keeps the template's h4 size (28.43 px, measured on the
   VJs page): it became an h1 when the breadcrumb, which held the title, went. */
.jubilee-cast-page .main-title {
    font-size: 1.777rem;
    font-weight: 500;
}
.jubilee-cast-card {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: var(--jubilee-cast-radius);
}
.jubilee-cast-card__frame {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    isolation: isolate;
    background: var(--jubilee-raised);
    border: 1px solid var(--jubilee-card-line);
    border-radius: var(--jubilee-cast-radius);
    transition: border-color 0.25s ease;
}
.jubilee-cast-card__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.jubilee-cast-card__initials {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding-bottom: 22%;                 /* centred in the space above the name */
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(var(--bs-primary-rgb), 0.18), transparent 65%),
        var(--jubilee-raised);
    color: var(--bs-white);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 700;
    letter-spacing: 0.04em;
}
/* The shade under the text, from the ink token. */
.jubilee-cast-card__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to top,
        rgba(var(--jubilee-ink-rgb), 0.95) 0%,
        rgba(var(--jubilee-ink-rgb), 0.6) 30%,
        rgba(var(--jubilee-ink-rgb), 0) 58%);
    pointer-events: none;
}
.jubilee-cast-card__text {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.875rem 1rem 1rem;
}
.jubilee-cast-card__name {
    overflow: hidden;
    color: var(--bs-white);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jubilee-cast-card__name::after {
    content: "";
    display: block;
    width: 1.5rem;
    height: 2px;
    margin-top: 0.4375rem;
    background: var(--bs-primary);
    border-radius: 2px;
    transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.jubilee-cast-card__roles {
    overflow: hidden;
    color: var(--jubilee-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jubilee-cast-card__count {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.3125rem 0.5625rem;
    background: rgba(var(--jubilee-ink-rgb), 0.65);
    border: 1px solid var(--jubilee-plan-glass-line);
    border-radius: var(--jubilee-pill);
    color: var(--bs-white);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}
.jubilee-cast-card__count i { font-size: 0.875rem; }
.jubilee-cast-card:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
    .jubilee-cast-card:hover .jubilee-cast-card__frame { border-color: var(--bs-primary); }
    .jubilee-cast-card:hover .jubilee-cast-card__photo { transform: scale(1.05); }
    .jubilee-cast-card:hover .jubilee-cast-card__name::after { width: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
    .jubilee-cast-card__photo,
    .jubilee-cast-card__name::after { transition: none; }
    .jubilee-cast-card:hover .jubilee-cast-card__photo { transform: none; }
}
/* Phones, two across: a step smaller. */
@media (max-width: 575.98px) {
    .jubilee-cast-card__text { padding: 0.75rem 0.75rem 0.8125rem; }
    .jubilee-cast-card__name { font-size: 0.9375rem; }
    .jubilee-cast-card__roles { font-size: 0.75rem; }
}