/*
Watch page hero — rebuilt from a client-supplied screenshot: full-bleed
watch-background.webp with a left-to-right dark gradient overlay, content
left-aligned and pinned to the same --bsw-container-wide column the header
nav uses (same convention as the homepage hero, 07-home-hero.css), instead
of the old centered/boxed treatment. The title is one h1 with three stacked
spans ("Where To" / "Watch" / "Blood Star") sized down on the first line —
in the reference all three read as one heading, not a heading plus a
separate eyebrow label, so it isn't broken out into .bsw-kicker.
The territory overview grid below the hero is unchanged and still reuses
.bsw-distribution-* wholesale.

.bsw-watch-country* (below) is a second client screenshot: a per-territory
detail panel, built for the UK first (id="uk", replacing the old id on its
overview-grid card so /watch/#uk now lands on the rich panel instead of the
small summary card), then extended to all 6 territories using the real
per-country platform data this project already verified (see the old
WPBakery draft). Two variants share the same classes:
  - "primary" variant (UK, USA, Italy): a subscription service gets the
    highlighted .bsw-watch-primary card, plus one or more
    .bsw-watch-platform-grid tiers below it (USA has two: free-with-ads,
    then rent/buy) and 3 .bsw-watch-cta buttons.
  - "search" variant (Canada, France, Germany): no single primary platform
    exists for these, so it's just an intro paragraph + one
    .bsw-watch-platform-grid of badges (cart icon omitted — these aren't
    deep purchase links, just "look for it here") + a single outline CTA
    reusing .bsw-distribution-btn-large (already used elsewhere on this
    page) linking to JustWatch, instead of inventing a new button style.
Each of the 6 sections has its own background photo, watch-1.webp through
watch-6.webp, assigned in page order (UK/USA/Canada/France/Germany/Italy) —
watch-7.webp also exists in the media library but is intentionally unused/spare.

Revised 2026-08-09 after client feedback that 6 back-to-back sections with the
same left-aligned layout and hard image cuts read as repetitive:
  - .bsw-watch-country::before now layers a vertical black fade (top/bottom
    16%) on top of the existing horizontal legibility gradient, so each
    section's photo dissolves into solid black at both edges instead of
    cutting straight into the next section's different photo — that shared
    black band at every seam is what actually sells the "sections blend into
    each other" effect, not any per-image trickery.
  - .bsw-watch-country--right is a mirror-layout modifier applied to every
    2nd section in page order (USA, France, Italy), alternating with the
    unmodified left layout on the odd ones (UK, Canada, Germany), that flips
    the gradient direction and pushes the whole
    .bsw-watch-country-panel to the right side of the container via
    margin-left:auto, so the page reads as a left/right/left/right/left/right
    zig-zag scrolling down instead of six identical left-aligned blocks.
    Text inside the panel stays left-aligned either way — only the panel's
    position and the accent border side (.bsw-watch-primary flips to
    border-right) mirror.
  - .bsw-watch-country-flag is a large, low-opacity emoji watermark (the
    same flag already used in the homepage/quicknav convention) placed on
    whichever side the panel ISN'T on, per section, purely decorative. Hidden
    below 700px — at panel-fills-the-viewport mobile widths it just visually
    collided with the text.

Platform logos are real, verified, Public Domain (trademark/
ineligible-for-copyright per Wikimedia's own license metadata) files sourced
from Wikimedia Commons, saved locally to assets/img/platforms/ rather than
hotlinked — never fetched from simple-icons, which doesn't carry Amazon or
Prime Video at all. Recolored from their original dark/navy fills to white
so they read on this theme's dark cards: apple-tv.svg, amazon.svg (text
only — kept its real orange swoosh), roku-channel.svg, tubi.svg, timvision.svg
(kept its real red bars), canal-plus.svg (already white on the source file).
Kept in their real brand colors as-is (already legible on dark): prime-video.svg
(also has a prime-video-white.svg dupe for the blue CTA button, where
blue-on-blue would vanish), rakuten-tv.svg, fandango-at-home.svg, google-tv.svg,
youtube.svg. sky-store.png was cropped from the "Sky Store" Wikimedia lockup
(dropped the stacked "store" wordmark, kept only "sky") and recolored navy→white.
No "Amazon Germany" or "YouTube Movies"-specific logo exists anywhere — those
two cards reuse amazon.svg / youtube.svg with a different caption underneath,
same as how a real storefront listing would just be Amazon/YouTube branded.
*/

/* Standing rule (2026-08-10): every page's hero is full viewport — width:100%, min-height:100vh — on every breakpoint, no smaller mobile override. Keep this in sync with .bsw-trailerhero (16-trailer-page.css) and .bsw-hero-main (07-home-hero.css). */
.bsw-watch-hero{position:relative;overflow:hidden;width:100%;min-height:100vh;display:flex;align-items:center;background-size:cover;background-position:center}
.bsw-watch-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.8) 26%, rgba(0,0,0,.4) 52%, rgba(0,0,0,.08) 74%, rgba(0,0,0,0) 100%)}
.bsw-watch-hero-container{position:relative;z-index:2;max-width:var(--bsw-container-wide);margin:0 auto;padding:140px 32px 90px;width:100%}
.bsw-watch-hero-content{max-width:620px;text-align:left}

.bsw-watch-hero-title{margin:0 0 26px;font-family:var(--bsw-font-heading);font-weight:400;line-height:.92;text-transform:uppercase}
.bsw-watch-hero-title span{display:block}
.bsw-watch-hero-title-eyebrow{font-size:clamp(28px,4vw,46px);color:var(--bsw-text);letter-spacing:.02em}
.bsw-watch-hero-title-white{font-size:clamp(56px,9vw,104px);color:var(--bsw-text-bright)}
.bsw-watch-hero-title-red{font-size:clamp(56px,9vw,104px);color:var(--bsw-red)}

.bsw-watch-hero-text{margin:0 0 14px;max-width:480px;font-family:var(--bsw-font);font-size:16px;line-height:1.65;color:#f0f0f0;text-align:left}
.bsw-watch-hero-divider{display:block;width:60px;height:2px;background:var(--bsw-red);margin:20px 0 16px;opacity:.9}
.bsw-watch-hero-note{margin:0 0 30px;max-width:460px;font-family:var(--bsw-font);font-style:italic;font-size:13px;line-height:1.6;color:var(--bsw-text-dim);text-align:left}
.bsw-watch-hero-content .bsw-btn-row{justify-content:flex-start}

.bsw-watch-status{display:inline-block;margin-top:auto;padding:9px 18px;border:1.5px solid var(--bsw-red);border-radius:4px;color:var(--bsw-red);font-family:var(--bsw-font-support);font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.bsw-distribution-card{display:flex;flex-direction:column;align-items:center}

@media (max-width:900px){
	.bsw-watch-hero-title-white,.bsw-watch-hero-title-red{font-size:clamp(48px,11vw,76px)}
	.bsw-watch-hero-title-eyebrow{font-size:clamp(24px,5vw,34px)}
}

@media (max-width:600px){
	.bsw-watch-hero-container{padding:110px 20px 60px}
	.bsw-watch-hero-content{max-width:100%}
	.bsw-watch-hero-text,.bsw-watch-hero-note{max-width:100%}
}

.bsw-watch-country{position:relative;overflow:hidden;background-size:cover;background-position:center;padding:calc(var(--bsw-section-pad) + 40px) 0}
.bsw-watch-country::before{content:"";position:absolute;inset:0;z-index:0;background:
	linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 84%, #000 100%),
	linear-gradient(to right, rgba(0,0,0,.95) 0%, rgba(0,0,0,.86) 34%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.22) 100%)}
.bsw-watch-country-flag{position:absolute;top:50%;right:5%;transform:translateY(-50%);z-index:1;font-size:clamp(120px,17vw,220px);line-height:1;opacity:.16;filter:grayscale(.35);pointer-events:none;user-select:none}
.bsw-watch-country-container{position:relative;z-index:2;max-width:var(--bsw-container-wide);margin:0 auto;padding:0 32px}
.bsw-watch-country-panel{max-width:620px;text-align:left}

.bsw-watch-country--right::before{background:
	linear-gradient(to bottom, #000 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 84%, #000 100%),
	linear-gradient(to left, rgba(0,0,0,.95) 0%, rgba(0,0,0,.86) 34%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.22) 100%)}
.bsw-watch-country--right .bsw-watch-country-flag{right:auto;left:5%}
.bsw-watch-country--right .bsw-watch-country-panel{margin-left:auto}
.bsw-watch-country--right .bsw-watch-primary{border-left:0;border-right:3px solid var(--bsw-red)}
.bsw-watch-country--right .bsw-btn-row,
.bsw-watch-country--right .bsw-watch-cta-row{justify-content:flex-end}

.bsw-watch-country-kicker{margin:0 0 14px;font-family:var(--bsw-font-support);color:var(--bsw-red);font-weight:600;font-size:12px;letter-spacing:1.5px;text-transform:uppercase}
.bsw-watch-country-intro{margin:0 0 22px;font-family:var(--bsw-font);color:var(--bsw-text-bright);font-size:16px;line-height:1.6}
.bsw-watch-country-sub{margin:0 0 16px;font-family:var(--bsw-font);color:var(--bsw-text-dim);font-size:14px}

.bsw-watch-primary{display:flex;align-items:center;gap:24px;padding:22px 26px;margin:0 0 26px;background:var(--bsw-card-bg);border:1px solid var(--bsw-border-soft);border-left:3px solid var(--bsw-red);border-radius:var(--bsw-radius-sm);text-decoration:none;transition:background-color .2s}
.bsw-watch-primary:hover{background:#1c1c1c}
.bsw-watch-primary img.bsw-watch-primary-logo{height:32px;width:auto;max-width:none;flex-shrink:0}
.bsw-watch-primary-body{display:block}
.bsw-watch-primary-body strong{display:block;margin:0 0 6px;font-family:var(--bsw-font-support);color:var(--bsw-text-bright);font-size:16px;font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.bsw-watch-primary-body span{display:block;font-family:var(--bsw-font);color:var(--bsw-text-muted);font-size:13.5px;line-height:1.6}

.bsw-watch-platform-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin:0 0 28px}
.bsw-watch-platform-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px 12px;background:var(--bsw-card-bg);border:1px solid var(--bsw-border-soft);border-radius:var(--bsw-radius-sm)}
.bsw-watch-platform-card img{width:auto;height:auto;max-width:80%;max-height:26px}
.bsw-watch-platform-card span{font-family:var(--bsw-font-support);color:var(--bsw-text-muted);font-size:11.5px;letter-spacing:.3px;text-align:center}
.bsw-watch-platform-card svg{width:15px;height:15px;color:var(--bsw-red)}
.bsw-watch-platform-grid + .bsw-watch-country-sub{margin-top:-6px}

.bsw-watch-cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 26px}
.bsw-watch-cta{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:6px;font-family:var(--bsw-font-support);font-size:12.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;text-decoration:none;border:1.5px solid transparent;transition:opacity .2s}
.bsw-watch-cta:hover{opacity:.82}
.bsw-watch-cta img{height:auto;max-height:15px;width:auto;max-width:70px}
.bsw-watch-cta svg{width:14px;height:14px;margin-left:auto;flex-shrink:0}
.bsw-watch-cta-amazon{background:#0779ff;color:#fff}
.bsw-watch-cta-dark{background:#000;border-color:#3a3a3a;color:#fff}

.bsw-watch-note-box{display:flex;align-items:flex-start;gap:14px;padding:16px 20px;border:1px solid rgba(205,7,4,.35);border-radius:var(--bsw-radius-sm);background:rgba(205,7,4,.06)}
.bsw-watch-note-box svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--bsw-red)}
.bsw-watch-note-box p{margin:0;font-family:var(--bsw-font);color:var(--bsw-text-muted);font-size:13px;line-height:1.6}

.bsw-watch-country-panel .bsw-btn-row{justify-content:flex-start;margin:0 0 26px}

@media (max-width:700px){
	.bsw-watch-primary{flex-direction:column;align-items:flex-start;gap:16px}
	.bsw-watch-cta-row{flex-direction:column}
	.bsw-watch-cta{width:100%}
	.bsw-watch-country--right .bsw-watch-primary{border-left:3px solid var(--bsw-red);border-right:0}
	.bsw-watch-country--right .bsw-btn-row,
	.bsw-watch-country--right .bsw-watch-cta-row{justify-content:flex-start}
	.bsw-watch-country-flag{display:none}
}