/* Approved Mobile 3050:171. UI surfaces only; no map geometry or artwork rules. */
@media (max-width:1023px) {
    .ubcf [data-ubcf-clear] {
        position:fixed;
        top:calc(var(--ubcf-chrome-height,0px) + 16px);
        left:50%;
        transform:translateX(-50%);
        z-index:3;
        width:153px;
        min-height:39px;
        padding:11px 16px 12px;
        border:0;
        border-radius:8px;
        font-size:12px;
        line-height:16px;
        font-weight:600;
        letter-spacing:0;
        pointer-events:auto;
    }
    /* Typography must not inherit the theme's heading casing, padding or tracking. */
    .ubcf :is(.ubcf-entry-card,.ubcf-entry-transition,.ubcf-filter,.ubcf-story,.ubcf-card,.ubcf-theme-intro) :is(h3,h4,p,blockquote,figcaption) {
        font-family:var(--ubcf-font);
        font-style:normal;
        text-transform:none;
    }
    .ubcf .ubcf-story :is(p,blockquote,figcaption),
    .ubcf .ubcf-card :is(p,figcaption),
    .ubcf .ubcf-theme-intro p {
        color:inherit;
    }

    /* Launch 3071:41546: 361x499 at the 393px reference width. Long copy can grow. */
    .ubcf .ubcf-entry {
        padding:16px;
    }
    .ubcf .ubcf-entry-card {
        min-height:max(499px,var(--ubcf-entry-min-height,0px));
        padding:40px 0;
        background:rgba(255,255,255,.8);
        border:0;
        backdrop-filter:blur(30px);
        -webkit-backdrop-filter:blur(30px);
    }
    .ubcf .ubcf-wordmark-slot {
        width:min(254px,calc(100% - 32px));
        margin:32px auto 0;
    }
    .ubcf .ubcf-entry-copy {
        padding:32px 16px 48px;
        font-size:20px;
        line-height:24px;
        font-weight:300;
        letter-spacing:0;
        color:var(--ubcf-color-text);
    }
    .ubcf .ubcf-entry-footer {
        padding:47px 24px 0;
    }
    .ubcf .ubcf-entry :is([data-entry-explore],[data-entry-start]) {
        width:151px;
        min-height:48px;
        padding:12px 16px;
        font-size:14px;
        line-height:18px;
        font-weight:700;
        letter-spacing:0;
    }
    .ubcf .ubcf-entry:not(.ubcf-launch) .ubcf-entry-card {
        padding-top:0;
        background:rgba(255,255,255,.9);
    }
    .ubcf .ubcf-entry-slide {
        padding:24px 0;
    }
    .ubcf .ubcf-entry-slide h4 {
        padding:0 16px;
        font-size:20px;
        line-height:24px;
        font-weight:600;
        letter-spacing:0;
    }
    .ubcf .ubcf-entry-slide .ubcf-entry-copy {
        padding:0 16px;
        margin-top:8px;
    }
    /* Preload 3071:41537 keeps the separately approved painted scenes and timings. */
    .ubcf .ubcf-entry-transition {
        width:calc(100% - 32px);
        font-size:20px;
        line-height:24px;
        font-weight:300;
        letter-spacing:0;
    }
    .ubcf .ubcf-entry-transition p {
        font-size:inherit;
        line-height:inherit;
        font-weight:inherit;
        letter-spacing:inherit;
        color:inherit;
    }
    .ubcf .ubcf-entry-skip {
        width:153px;
        min-height:39px;
        padding:11px 16px 12px;
        bottom:max(24px,env(safe-area-inset-bottom));
        font-size:12px;
        line-height:14px;
        font-weight:600;
        letter-spacing:0;
        -webkit-backdrop-filter:blur(30px);
    }

    /* Filter 3071:43822: 496px sheet plus an external 24px visual Close control.
       Close retains its existing 44px hit area. Open menus/long copy may grow and scroll. */
    .ubcf .ubcf-filter {
        isolation:isolate;
        width:100vw;
        max-height:calc(100dvh - 16px);
        margin:auto 0 0;
        padding:46px 0 0;
        border:0;
        background:transparent;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        border-radius:0;
        overflow:auto;
    }
    .ubcf .ubcf-filter[open] {
        top:auto;
        bottom:0;
        left:0;
        right:0;
    }
    .ubcf .ubcf-filter::before {
        content:'';
        position:absolute;
        inset:46px 0 0;
        z-index:-1;
        border-radius:8px;
        background:var(--ubcf-glass-fill);
        backdrop-filter:blur(60px);
        -webkit-backdrop-filter:blur(60px);
        pointer-events:none;
    }
    .ubcf .ubcf-filter>.ubcf-close {
        position:absolute;
        top:0;
        left:50%;
        right:auto;
        float:none;
        width:72px;
        margin:0;
        transform:translateX(-50%);
    }
    .ubcf .ubcf-filter>h3 {
        margin:51px 16px 0;
        padding:0;
        font-size:12px;
        line-height:16px;
        font-weight:400;
        letter-spacing:-.01em;
        text-align:center;
    }
    .ubcf [data-ubcf-filter-sentence] {
        margin-top:21px;
        padding:0 16px;
    }
    .ubcf .ubcf-filter-clause {
        margin:24px 0 0;
        gap:8px;
        font-size:21px;
        line-height:25px;
        font-weight:300;
        letter-spacing:-.02em;
        text-align:center;
    }
    .ubcf .ubcf-filter-clause:first-child {
        margin-top:0;
    }
    .ubcf .ubcf-filter-clause:last-child {
        font-size:20px;
        line-height:22px;
    }
    .ubcf .ubcf-filter-dropdown {
        width:213px;
        max-width:100%;
        min-width:0;
        text-align:left;
    }
    .ubcf .ubcf-filter-dropdown>summary {
        min-height:40px;
        padding:10px 19px 11px;
        font-size:14px;
        line-height:17px;
        font-weight:700;
        letter-spacing:0;
        border-color:var(--ubcf-color-grey-4);
        backdrop-filter:blur(30px);
        -webkit-backdrop-filter:blur(30px);
        --ubcf-icon-width:16px;
        --ubcf-icon-height:10px;
    }
    .ubcf .ubcf-filter-dropdown>summary .ubcf-hover-icon img {
        width:8px;
        height:5px;
        transform:scale(2);
        transform-origin:top left;
    }
    .ubcf .ubcf-filter-dropdown fieldset {
        width:100%;
        min-width:0;
        max-width:none;
        padding:0 0 12px;
        left:0;
        transform:none;
        background:var(--ubcf-glass-fill);
        backdrop-filter:blur(30px);
        -webkit-backdrop-filter:blur(30px);
    }
    .ubcf .ubcf-filter-option,
    .ubcf .ubcf-filter-all {
        font-weight:700;
    }
    /* Result announcements remain available without adding a row absent from the mockup. */
    .ubcf [data-ubcf-filter-count].ubcf-sr-only {
        position:absolute;
        width:1px;
        height:1px;
        margin:-1px;
        padding:0;
        overflow:hidden;
        clip:rect(0,0,0,0);
        white-space:nowrap;
    }
    .ubcf .ubcf-filter-submit {
        margin-top:32px;
        padding:36px 16px max(36px,env(safe-area-inset-bottom));
    }
    .ubcf [data-ubcf-apply] {
        width:213px;
        min-height:39px;
        padding:10px 24px 11px;
        font-size:14px;
        line-height:16px;
        font-weight:700;
        letter-spacing:0;
    }

    /* Story 3071:43917/43848/43969: close at y59, media y99 (illustration y105). */
    .ubcf .ubcf-story {
        scrollbar-gutter:auto;
        border:0;
        border-radius:8px 8px 0 0;
    }
    .ubcf :is(.ubcf-story,.ubcf-filter,.ubcf-video-modal)>.ubcf-close {
        gap:12px;
        padding:0;
        font-size:10px;
        line-height:12px;
        font-weight:600;
    }
    .ubcf .ubcf-close::before {
        -webkit-backdrop-filter:blur(30px);
    }
    .ubcf .ubcf-story>.ubcf-close {
        top:max(49px,env(safe-area-inset-top));
        left:50%;
        right:auto;
        transform:translateX(-50%);
    }
    .ubcf .ubcf-story-media {
        margin-top:99px;
    }
    .ubcf .ubcf-story-media>.ubcf-image {
        height:auto;
    }
    .ubcf .ubcf-story-media>.ubcf-image>img {
        height:292px;
        max-height:none;
    }
    .ubcf .ubcf-story-media[data-presentation="illustration"] {
        margin-top:105px;
    }
    .ubcf .ubcf-story-media[data-presentation="illustration"]>.ubcf-image {
        width:min(296px,calc(100% - 32px));
        height:auto;
        margin:0 auto;
    }
    .ubcf .ubcf-story-media[data-presentation="illustration"]>.ubcf-image>img {
        height:auto;
        aspect-ratio:1;
    }
    .ubcf .ubcf-story-content {
        padding:32px 16px 0;
    }
    .ubcf .ubcf-story-media[data-presentation="illustration"]+.ubcf-story-content {
        padding-top:22px;
    }
    .ubcf .ubcf-story-theme {
        margin-bottom:24px;
        padding:0;
        font-size:14px;
        line-height:17px;
        font-weight:600;
        letter-spacing:0;
    }
    .ubcf .ubcf-story-title {
        padding:0;
        font-weight:400;
        letter-spacing:-.03em;
    }
    .ubcf .ubcf-story-summary {
        margin-top:36px;
    }
    .ubcf [data-tier="tier_3"] .ubcf-story-summary {
        margin-top:24px;
    }
    .ubcf .ubcf-story .ubcf-story-summary,
    .ubcf .ubcf-rich-text,
    .ubcf .ubcf-rich-text p {
        font-size:24px;
        line-height:32px;
        font-weight:300;
        letter-spacing:0;
        padding:0;
    }
    .ubcf .ubcf-rich-text p+p {
        margin-top:32px;
    }
    .ubcf .ubcf-quote {
        display:flex;
        flex-direction:column;
        align-items:center;
    }
    .ubcf .ubcf-quote blockquote {
        width:100%;
        margin:16px 0;
        padding:0;
        border:0;
        font-weight:400;
        letter-spacing:0;
    }
    /* Preserve the original 40x26 SVG, but give its half-scale paint a 20x13 flow slot. */
    .ubcf .ubcf-quote-mark {
        margin:-6.5px auto;
        transform-origin:center;
    }
    .ubcf .ubcf-quote figcaption {
        margin-top:24px;
        font-size:14px;
        line-height:16px;
        font-weight:400;
        letter-spacing:0;
    }
    .ubcf .ubcf-play {
        top:146px;
        width:48px;
        height:48px;
        transform:translate(-50%,-50%);
    }
    .ubcf .ubcf-play img {
        width:112px;
        height:112px;
        top:-32px;
        left:-32px;
    }
    .ubcf .ubcf-story-media[data-presentation="poster"]:has(>.ubcf-play) {
        min-height:292px;
    }
    .ubcf .ubcf-video-modal[open] {
        padding-top:95px;
        -webkit-backdrop-filter:blur(4px);
    }
    .ubcf .ubcf-video-modal>.ubcf-close {
        top:max(49px,env(safe-area-inset-top));
    }

    /* Related cards: 188x200 art slot (188px square or 160x200 portrait paint),
       and a 260px glass panel beginning 88px below the art. */
    .ubcf .ubcf-related:not(.ubcf-related-caption) {
        grid-template-rows:88px auto;
        align-items:start;
    }
    .ubcf .ubcf-related:not(.ubcf-related-caption)>.ubcf-related-art {
        grid-row:1 / 3;
        width:52.077562%;
    }
    .ubcf .ubcf-related:not(.ubcf-related-caption)>.ubcf-related-art>img {
        height:auto;
        aspect-ratio:188 / 200;
        object-position:left top!important;
    }
    .ubcf .ubcf-related:not(.ubcf-related-caption)>.ubcf-related-text {
        grid-row:2;
        min-height:127px;
    }
    .ubcf .ubcf-related-text {
        padding:31px 23px 20px;
        border-color:var(--ubcf-color-grey-2);
        backdrop-filter:blur(8px);
        -webkit-backdrop-filter:blur(8px);
    }
    .ubcf .ubcf-related a {
        margin-top:16px;
    }
    .ubcf .ubcf-story-content>.ubcf-story-tags {
        width:calc(100% + 32px);
        margin-inline:-16px;
        padding:24px 16px;
    }
    .ubcf .ubcf-story-content>.ubcf-related+.ubcf-story-tags {
        margin-top:60px;
    }
    .ubcf .ubcf-story-content>.ubcf-story-tags h4 {
        margin-bottom:0;
    }
    .ubcf .ubcf-story-content .ubcf-tag {
        min-height:39px;
        padding:11px 19px 12px;
        border-radius:4px;
        font-size:12px;
        line-height:14px;
        font-weight:600;
        letter-spacing:0;
    }

    /* Tier1 content retains its viewport clamp and the source illustration/card proportions. */
    .ubcf .ubcf-card .ubcf-card-text {
        width:65.25%;
        margin-top:-29.5%;
        border:0;
        display:flex;
        flex-direction:column;
        color:var(--ubcf-color-navy);
    }
    .ubcf .ubcf-card .ubcf-story-summary {
        margin-top:auto;
        padding-top:32px;
        line-height:14px;
    }
    .ubcf .ubcf-card .ubcf-story-tags {
        margin-top:16px;
    }
    .ubcf .ubcf-card .ubcf-tag {
        min-height:17px;
        padding:2px 7px 3px;
        font-size:8px;
        line-height:10px;
        font-weight:500;
    }
    .ubcf .ubcf-theme-intro {
        padding:30px 32px;
    }
    .ubcf .ubcf-theme-intro h3 {
        padding:0;
        font-weight:500;
    }
}
@supports not (backdrop-filter:blur(1px)) {
    @media (max-width:1023px) {
        .ubcf .ubcf-filter::before {
            background:rgba(255,255,255,.97);
        }
    }
}

@media (max-width:1023px) {
    .ubcf :is(.ubcf-entry-copy,.ubcf-entry-slide h4,.ubcf-entry-transition,.ubcf-entry-transition p,
        .ubcf-story-summary,.ubcf-rich-text,.ubcf-story-theme,.ubcf-theme-intro p) { letter-spacing:-.02em; }
    .ubcf .ubcf-filter-dropdown fieldset { position:absolute; top:100%; gap:0; }
    .ubcf .ubcf-filter-option { min-height:32px; }
}

@media (max-width:1023px) {
    .ubcf .ubcf-entry-transition p { line-height:22px; }
}

/* QA22: equal card height must not vertically recenter different-length slides. */
@media (max-width:1023px) {
    /* Equal flexible rows centre the card; the bottom row reserves Skip + a 16px gap.
       On short screens the top row collapses first and the dialog remains scrollable. */
    .ubcf .ubcf-entry:not(.ubcf-launch) {
        padding:16px;
        align-items:center;
        grid-template-rows:minmax(0,1fr) auto minmax(calc(max(24px,env(safe-area-inset-bottom)) + 40px),1fr);
    }
    .ubcf .ubcf-entry:not(.ubcf-launch) .ubcf-entry-card { grid-row:2; }
    .ubcf .ubcf-entry-slide { padding-top:85px; }
    .ubcf .ubcf-entry:not(.ubcf-launch) [data-ubcf-entry-body],
    .ubcf .ubcf-entry-outgoing { justify-content:flex-start; }
    .ubcf [data-ubcf-clear].ubcf-clear-compact {
        top:calc(var(--ubcf-chrome-height,0px) + 21px);
        box-sizing:border-box;
        width:28px;
        height:28px;
        min-height:28px;
        padding:8px;
    }
    .ubcf [data-ubcf-clear].ubcf-clear-compact .ubcf-hover-label {
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip-path:inset(50%);
    }
    .ubcf [data-ubcf-clear].ubcf-clear-compact::after {
        content:'';
        display:block;
        width:12px;
        height:12px;
        background:url('../icons/icon-arrow.svg') center / contain no-repeat;
        transform:rotate(180deg);
    }
}

/* Mobile QA follow-up: backdrop-filter contains fixed descendants. Keep Close
   reachable while the story scrolls, without adding space before its media. */
@media (max-width:1023px) {
    .ubcf .ubcf-story { height:100dvh; max-height:100dvh; }
    .ubcf .ubcf-story>.ubcf-close {
        --ubcf-story-close-top:max(49px,env(safe-area-inset-top));
        position:sticky;
        top:max(49px,env(safe-area-inset-top));
        left:auto;
        transform:none;
        margin:var(--ubcf-story-close-top) auto calc(0px - var(--ubcf-story-close-top) - 44px);
    }
}