/* ==========================================================================
   Hero fit-to-screen
   Every hero (and every carousel slide) is exactly one screen tall, below the fixed
   navbar, so the whole hero is visible without scrolling. public-ui.js measures each
   hero's content and sets --fit (a scale <= 1) and --fit-gap so it fills the available
   height; layouts below are also tightened so that scale stays close to 1.
   Loaded last so it wins over the layout stylesheets.
   ========================================================================== */
:root { --nav-h: 72px; }

[data-theme] section.hero {
    height: 100vh; height: 100svh; min-height: 0;
    padding: calc(var(--nav-h) + 10px) 0 16px;
}
/* The content block is scaled from its top edge; the negative margin gives back the
   layout space the scale removes, so flex centring still centres what you can see. */
[data-theme] section.hero > .container {
    transform-origin: 50% 0;
    scale: var(--fit, 1);
    margin-bottom: var(--fit-gap, 0px);
}
/* Last resort when even the minimum scale cannot fit (very short windows): let the hero grow. */
[data-theme] section.hero.fit-fail { height: auto; min-height: 100vh; min-height: 100svh; }

/* Carousel: exactly one screen; the dots/pause bar sits in the bottom padding. */
.hero-carousel { height: 100vh; height: 100svh; }
.hero-carousel .hc-track { height: 100%; }
.hero-carousel .hc-slide { height: 100%; }
[data-theme] .hero-carousel section.hero { padding-bottom: 76px; }
[data-theme] .hero-carousel[data-poster="housemates"] section.hero { padding-bottom: 150px; }
/* Reality Show's own ticker strip occupies the bottom edge */
[data-theme] section.hero.hero-reality { padding-bottom: 96px; }

/* ==========================================================================
   Compaction: sizes follow the screen HEIGHT as well as its width, so each layout
   keeps readable type when the screen is short, with the fit scale as a safety net.
   ========================================================================== */

/* Shared: countdown, buttons, ended notice */
[data-theme] section.hero .countdown { gap: min(.7rem, 1.1vh); }
[data-theme] section.hero .cd-label { margin-top: min(2.2rem, 3vh); }
[data-theme] section.hero .cd-caption { margin-top: min(.9rem, 1.2vh); }
[data-theme] section.hero .cd-ended { margin-top: min(2rem, 2.6vh); }
@media (max-height: 820px) {
    [data-theme] section.hero .cd-box { padding: .5rem .5rem; min-width: 60px; }
    [data-theme] section.hero .cd-box b { font-size: 1.25rem; }
    [data-theme] section.hero .cd-box span { font-size: .6rem; }
}

/* Split */
[data-theme] section.hero .hero-grid { gap: min(3rem, 4vh) 3rem; }
[data-theme] .hero h1 { margin-block: min(1.2rem, 1.6vh) min(1.1rem, 1.4vh); }
[data-theme] .hero p.lead { margin-bottom: min(1.8rem, 2.4vh); }
[data-theme] .hero-visual img { max-height: min(460px, 46vh); }

/* Couture */
[data-theme] .hero-centered .emblem { width: min(112px, 12vh); height: min(112px, 12vh); margin-bottom: min(2rem, 2.4vh); }
[data-theme] .hero-centered .emblem .core { inset: 22%; font-size: min(2.1rem, 3.2vh); }
[data-theme] .display .d-main { font-size: clamp(3.6rem, min(17vw, 21vh), 12.5rem); }
[data-theme] .display .d-sub { font-size: clamp(1.3rem, min(5vw, 6vh), 3.4rem); }
[data-theme] .hero-centered .tagline { margin: min(1.4rem, 1.8vh) auto min(2rem, 2.4vh); font-size: clamp(1rem, min(2.4vw, 2.7vh), 1.6rem); }

/* Heritage Curtain */
[data-theme] .kicker-bar { margin-bottom: min(2rem, 2.2vh); padding-block: min(.55rem, .8vh); }
[data-theme] .curtain-trophy img { max-height: min(380px, 31vh); }
[data-theme] .cond { font-size: clamp(2rem, min(7vw, 9.5vh), 5.6rem); }
[data-theme] .wreaths { margin: min(2.6rem, 2.4vh) 0 min(2.4rem, 2.2vh); gap: min(1.6rem, 2vh); }
[data-theme] .laurel { width: min(200px, 20vh); }
[data-theme] .laurel-text b { font-size: clamp(.7rem, min(1.2vw, 1.6vh), 1.02rem); }

/* Spotlight Gala */
[data-theme] .chunk { font-size: clamp(2.6rem, min(12vw, 12.5vh), 9.6rem); }
[data-theme] .spot-trophy img { max-height: min(250px, 14vh); }
[data-theme] .date-line { margin: .2rem 0 min(1.2rem, 1.4vh); }
[data-theme] .gold-bar { margin-bottom: min(1.8rem, 2vh); padding-block: min(.8rem, 1vh); }
[data-theme] .presents { margin-bottom: min(.6rem, .8vh); }

/* Red Curtain Star */
[data-theme] .stack { font-size: clamp(2.2rem, min(6.6vw, 9vh), 5.8rem); }
[data-theme] .star-art svg { max-width: min(470px, 52vh); }
[data-theme] .info-box { margin: min(1.6rem, 1.8vh) 0 min(1.2rem, 1.4vh); padding-block: min(1rem, 1.3vh); }
[data-theme] .foot-row { margin-bottom: min(1.6rem, 1.8vh); }

/* Reality Show: title on one wrapping row instead of one word per line */
[data-theme] .mega { display: flex; flex-wrap: wrap; justify-content: center; column-gap: .22em; font-size: clamp(3rem, min(11vw, 13vh), 8.5rem); margin: min(1rem, 1.2vh) 0 min(.4rem, .6vh); }
[data-theme] .mega span { display: block; }
[data-theme] .mega .year { flex-basis: 100%; font-size: .3em; margin-top: .2em; }
[data-theme] .tagline-r { margin-bottom: min(1.8rem, 2.2vh); }
[data-theme] .reel-head { margin: min(2.8rem, 3vh) 0 .6rem; }
[data-theme] .reel-card { flex-basis: min(188px, 17vh * 0.75 + 70px); }
[data-theme] .rimg { aspect-ratio: 4 / 3.2; }
[data-theme] .rimg b { font-size: min(3.6rem, 5vh); }
[data-theme] .rn { font-size: min(3.4rem, 4.6vh); }

/* Carousel slides: leaders / categories / numbered / promo */
[data-theme] .hs-head { margin-bottom: min(2.4rem, 2.6vh); }
[data-theme] .hs-title { font-size: clamp(1.8rem, min(5vw, 6.4vh), 3.8rem); margin-block: min(.7rem, .9vh) min(.8rem, 1vh); }
[data-theme] .hs-sub { font-size: clamp(.9rem, 1.9vh, 1.05rem); }
[data-theme] .hs .hero-cta { margin-top: min(2.2rem, 2.4vh); }
[data-theme] .lboard { gap: min(.7rem, .9vh) 1.2rem; }
[data-theme] .lrow { padding-block: min(.7rem, 1vh); }
[data-theme] .lr-av { width: min(46px, 5.2vh); height: min(46px, 5.2vh); }
[data-theme] .lr-votes b { font-size: clamp(1rem, 2.7vh, 1.3rem); }
[data-theme] .cb-panel { max-height: calc(100svh - 300px); min-height: 200px; }
[data-theme] .cb-title { margin-bottom: min(1.6rem, 2vh); }
[data-theme] .cn-head { margin-bottom: min(1.8rem, 2vh); }
[data-theme] .cn-list { gap: min(.8rem, .9vh); }
[data-theme] .cn-bar { padding-block: min(.95rem, 1.4vh); }
[data-theme] .cn-no { width: min(76px, 8vh); font-size: clamp(1.1rem, 2.7vh, 1.5rem); }

/* Phones */
@media (max-width: 700px) {
    [data-theme] .wreaths .laurel:nth-child(n+2) { display: none; }          /* keep the date wreath only */
    [data-theme] .laurel { width: min(150px, 18vh); }
    [data-theme] .curtain-trophy img { max-height: 21vh; }
    [data-theme] .hs-sub { display: none; }
    [data-theme] .hero-visual img { max-height: min(240px, 24vh); }
    [data-theme] .star-art svg { max-width: min(240px, 22vh); }
    [data-theme] .spot-trophy img { max-height: 15vh; }
    [data-theme] .cn-list li:nth-child(n+6) { display: none; }
}

/* Tablets keep the two-column leaderboard (carousel.css would stack it below 860px) */
@media (min-width: 701px) and (max-width: 860px) {
    [data-theme] .lboard { grid-auto-flow: column; grid-template-rows: repeat(5, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [data-theme] .lr-award { display: none; }
}
/* Very short screens: drop optional copy */
@media (max-height: 700px) {
    [data-theme] .tagline-r, [data-theme] .reel-head span, [data-theme] .hero-centered .tagline { display: none; }
    [data-theme] .reel-head { margin-top: 1.2rem; }
}

/* Couture plaid corners: small, tucked into the corners and behind the content, so they never
   sit under the headline, ribbon or buttons. They shrink with the screen and vanish when it is short. */
[data-theme] .hero-centered .plaid-tr { width: min(30vw, 400px); height: min(12vw, 15vh, 150px); }
[data-theme] .hero-centered .plaid-bl { width: min(34vw, 460px); height: min(11vw, 14vh, 140px); }
[data-theme] .hero-centered .plaid::before { background-size: 44px 44px; }
@media (max-width: 720px) {
    [data-theme] .hero-centered .plaid-tr { width: 38vw; height: min(18vw, 11vh); }
    [data-theme] .hero-centered .plaid-bl { width: 42vw; height: min(16vw, 10vh); }
}
@media (max-height: 520px) { [data-theme] .hero-centered .plaid { display: none; } }

/* ==========================================================================
   Hero partners strip: Sponsors | Partners | Supported by logos + enquiries box.
   It sits along the bottom edge of the hero; the hero reserves room for it, and the carousel
   controls / Reality Show ticker are lifted above it, so nothing overlaps.
   ========================================================================== */
.hero-partners { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 4; pointer-events: none; }
.hp-bar { pointer-events: auto; width: min(1180px, 100% - 40px); margin-inline: auto; display: flex; align-items: stretch; gap: .7rem; }
.hp-logos { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 1.2rem; padding: .55rem 1.2rem; overflow-x: auto; scrollbar-width: none;
    background: #fff; color: #14141c; border-radius: 16px; box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .7); }
.hp-logos::-webkit-scrollbar { display: none; }
.hp-group { flex: none; display: flex; align-items: center; gap: .9rem; }
.hp-group + .hp-group { padding-left: 1.2rem; border-left: 2px solid #e4e4ea; }
.hp-label { font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.25; white-space: nowrap; }
.hp-group ul { display: flex; align-items: center; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.hp-group img { display: block; height: 32px; width: auto; max-width: 96px; object-fit: contain; filter: grayscale(1); opacity: .85; transition: filter .25s, opacity .25s; }
.hp-group a:hover img, .hp-group img:hover { filter: none; opacity: 1; }
.hp-enq { flex: none; display: flex; flex-direction: column; justify-content: center; gap: .1rem; padding: .5rem 1.2rem; border-radius: 16px; background: #0b0b0e; color: #fff; font-size: .74rem; line-height: 1.35; box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .7); }
.hp-enq b { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.hp-enq a, .hp-enq span { color: #fff; font-weight: 700; }
.hp-enq a:hover { color: var(--accent); }

/* the hero keeps clear of the strip */
[data-theme] section.hero:has(> .hero-partners) { padding-bottom: 108px; }
/* carousel: the dots / pause bar lives at the very bottom, so the strip sits just above it */
[data-theme] .hero-carousel section.hero > .hero-partners { bottom: 74px; }
[data-theme] .hero-carousel section.hero:has(> .hero-partners) { padding-bottom: 168px; }
/* Reality Show: the ticker strip owns the bottom edge */
[data-theme] section.hero.hero-reality > .hero-partners { bottom: 94px; }
[data-theme] section.hero.hero-reality:has(> .hero-partners) { padding-bottom: 188px; }
[data-theme] .hero-carousel section.hero.hero-reality > .hero-partners { bottom: 150px; }
[data-theme] .hero-carousel section.hero.hero-reality:has(> .hero-partners) { padding-bottom: 244px; }

@media (max-width: 760px) {
    .hp-bar { flex-direction: column; gap: .4rem; }
    .hp-logos { padding: .4rem .8rem; gap: .9rem; border-radius: 12px; }
    .hp-group { gap: .6rem; }
    .hp-group + .hp-group { padding-left: .9rem; }
    .hp-group img { height: 24px; max-width: 72px; }
    .hp-label { font-size: .55rem; }
    .hp-enq { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .1rem .8rem; padding: .4rem .9rem; border-radius: 12px; font-size: .72rem; }
    .hp-enq b { margin-right: .1rem; }
    [data-theme] section.hero:has(> .hero-partners) { padding-bottom: 122px; }
    [data-theme] .hero-carousel section.hero > .hero-partners { bottom: 70px; }
    [data-theme] .hero-carousel section.hero:has(> .hero-partners) { padding-bottom: 188px; }
    [data-theme] section.hero.hero-reality > .hero-partners { bottom: 92px; }
    [data-theme] section.hero.hero-reality:has(> .hero-partners) { padding-bottom: 200px; }
    [data-theme] .hero-carousel section.hero.hero-reality > .hero-partners { bottom: 146px; }
    [data-theme] .hero-carousel section.hero.hero-reality:has(> .hero-partners) { padding-bottom: 262px; }
}
@media (max-height: 560px) { .hp-label { display: none; } }

/* ==========================================================================
   Contestant profile: the first screen (photo / flyer, name, stats, actions) is exactly one
   screen tall on desktop and mobile. The photo is sized from the screen height; the fit
   script scales whatever is left over. Latest voters + related contestants sit below it.
   ========================================================================== */
[data-theme] section.profile.fit-screen { height: 100vh; height: 100svh; min-height: 0; padding: calc(var(--nav-h) + 6px) 0 12px; display: flex; align-items: flex-start; }
[data-theme] section.fit-screen > .container { transform-origin: 50% 0; scale: var(--fit, 1); margin-bottom: var(--fit-gap, 0px); }
[data-theme] section.fit-screen.fit-fail { height: auto; min-height: 100vh; min-height: 100svh; }

.fit-screen .crumbs { margin-bottom: 0; }
.fit-screen .profile-grid { margin-top: min(1.2rem, 2vh); gap: clamp(1rem, 3vw, 3rem); grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.fit-screen .profile-photo { position: relative; top: auto; justify-self: start; width: auto; aspect-ratio: 4 / 5; height: min(560px, calc(100svh - var(--nav-h) - 130px)); }
.fit-screen .profile-photo.is-flyer { height: auto; aspect-ratio: auto; max-width: min(440px, 42vw); }
.fit-screen .profile-photo.is-flyer img { width: auto; height: auto; max-width: 100%; max-height: calc(100svh - var(--nav-h) - 130px); margin-inline: auto; }
.fit-screen .profile h1, .profile.fit-screen h1 { font-size: clamp(1.7rem, min(4vw, 6.4vh), 3.2rem); margin: .6rem 0 .3rem; }
.fit-screen .slogan { margin: 0 0 min(1.2rem, 2vh); }
.fit-screen .scorecard { margin: min(1.2rem, 2vh) 0; }
.fit-screen .scorecard div { padding: min(1.2rem, 2vh) 1.2rem; }
.fit-screen .lead-gap { margin: .5rem 0 min(1.4rem, 2.4vh); }
@media (max-height: 700px) { .fit-screen .slogan, .fit-screen .lead-gap { display: none; } }

@media (max-width: 860px) {
    .fit-screen .profile-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: min(.9rem, 1.6vh); margin-top: min(.8rem, 1.4vh); }
    .fit-screen .profile-photo { justify-self: center; height: min(34svh, 300px); }
    .fit-screen .profile-photo.is-flyer { height: auto; max-width: 62vw; }
    .fit-screen .profile-photo.is-flyer img { max-height: 36svh; }
    .fit-screen .slogan, .fit-screen .lead-gap { display: none; }
    .fit-screen .scorecard b { font-size: 1.35rem; }
    .fit-screen .scorecard div { padding: .7rem .6rem; }
    .fit-screen .profile-actions { justify-content: center; gap: .5rem; }
    .fit-screen .profile-actions .btn-primary { flex: 1 1 100%; }
    .fit-screen .profile-actions .btn-ghost { padding: .5rem .9rem; font-size: .8rem; }
}

/* below the first screen */
.profile-more { padding: 1.6rem 0 0; position: relative; }
.profile-more .panel { margin-top: 0; }

/* Leaderboard slide on phones: all ten leaders, in slim rows that fit one screen */
@media (max-width: 700px) {
    [data-theme] .lboard { gap: .3rem; }
    [data-theme] .lrow { padding: .28rem .65rem; gap: .55rem; border-radius: 12px; }
    [data-theme] .lr-rank { width: 22px; font-size: 1.05rem; }
    [data-theme] .lr-rank::after { font-size: .62rem; line-height: 1; }
    [data-theme] .lr-av { width: 30px; height: 30px; font-size: .72rem; }
    [data-theme] .lr-name { font-size: .88rem; }
    [data-theme] .lr-award { font-size: .62rem; }
    [data-theme] .lr-bar { height: 3px; margin-top: .12rem; }
    [data-theme] .lr-votes b { font-size: .95rem; }
    [data-theme] .lr-votes small { display: none; }
    [data-theme] .hs-leaders .hs-head { margin-bottom: .7rem; }
    [data-theme] .hs-leaders .hero-cta { flex-wrap: nowrap; gap: .5rem; margin-top: .9rem; }
    [data-theme] .hs-leaders .hero-cta .btn { padding: .55rem .9rem; font-size: .8rem; white-space: nowrap; }
}
@media (max-width: 700px) and (max-height: 700px) {
    [data-theme] .lr-award { display: none; }                                   /* short phones: names and votes only */
    [data-theme] .lrow { padding: .22rem .6rem; }
}
/* Contestant page vote box: centred on phones/tablets, left edge on desktop where the text is left-aligned */
@media (max-width: 960px) { .fit-screen .scorecard.scorecard-single { margin-inline: auto; } }

/* Breadcrumb: always one line - a long contestant name is cut with "…" instead of wrapping under Home / Contestants */
.fit-screen .crumbs { display: flex; flex-wrap: nowrap; max-width: 100%; min-width: 0; white-space: nowrap; }
.fit-screen .crumbs a, .fit-screen .crumbs i { flex: none; }
.fit-screen .crumbs span { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 860px) { .fit-screen .crumbs { justify-content: center; font-size: .8rem; } }