/* photo layer (owner 05.11.2026): B49 promo cards with photos, B50 CTA band with a photo. Hand-written, not touched by fork_css.py.
   1win.uk.com skin (08.11.2026): B49 is a bento of one list (wide · 2 narrow / 2 narrow · wide on 12 columns, one column on a phone);
   B50 is a dark card with the grid, copy on the left and the photo as a tilted white-edged card on the right. Text over a photo and
   the CTA card keep the night tokens even inside a light sheet (.up-media, .up-cta re-apply them). */
.up-media,.up-cta{
  --ub-night:#080A0F;--ub-night-rgb:8,10,15;--ub-well:#06080C;--ub-panel:#0F1424;--ub-raise:#18203A;--ub-line:#1C2338;--ub-line-hi:#2A3350;
  --ub-ink:#FFFFFF;--ub-ink-2:#C9CEDB;--ub-ink-3:#9AA1B4;--ub-ink-4:#8A91A5;--ub-acc-hi:#8FA8FF;--ub-tint:#101A3A;--ub-deep:#0E1840;
  --ub-grid:rgba(255,255,255,.035);color:var(--ub-ink)}
.up-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.up-grid{display:grid;gap:16px;margin-top:8px}
.up-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.yk-bento{grid-template-columns:repeat(12,minmax(0,1fr))}
.yk-bento>.up-card:nth-child(1){grid-column:1/8;grid-row:1/3}
.yk-bento>.up-card:nth-child(2){grid-column:8/13;grid-row:1}
.yk-bento>.up-card:nth-child(3){grid-column:8/13;grid-row:2}
.yk-bento>.up-card:nth-child(4){grid-column:6/13;grid-row:3/5}
.yk-bento>.up-card:nth-child(5){grid-column:1/6;grid-row:3}
.yk-bento>.up-card:nth-child(6){grid-column:1/6;grid-row:4}
.up-card{display:flex;flex-direction:column;background:var(--ub-panel);border:0;border-radius:var(--ub-r-card);overflow:hidden;min-width:0;box-shadow:var(--ub-shadow)}
/* P1-7: a card whose photo is not there yet (lazy) shows the night grid with a glow, never a flat black box */
.up-media,.up-cpic{position:relative;overflow:hidden;background-color:#0F1424;
  background-image:radial-gradient(70% 80% at 80% 30%,rgba(38,84,255,.38),transparent 70%),
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:auto,32px 32px,32px 32px}
.up-card-big .up-media{flex:1 1 auto;min-height:300px}
.up-card-small .up-media{aspect-ratio:16/8}
.up-media picture,.up-media img{display:block;width:100%;height:100%}
.up-media picture{position:absolute;inset:0}
.up-media img{object-fit:cover;object-position:right center}
.up-media::after{content:"";position:absolute;inset:0;pointer-events:none}
.up-card-big .up-media::after{background:linear-gradient(90deg,rgba(8,10,15,.78),rgba(8,10,15,0) 62%)}
.up-card-small .up-media::after{background:linear-gradient(90deg,rgba(8,10,15,.85),rgba(8,10,15,.1) 70%)}
.up-chip{position:absolute;z-index:2;top:14px;right:14px;padding:6px 11px;border-radius:var(--ub-r-pill);background:#fff;color:#0B0E16;font:600 11px/1 var(--ub-ui);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.up-over{position:absolute;z-index:2;display:flex;flex-direction:column;gap:6px}
.up-card-big .up-over{left:0;bottom:0;width:62%;padding:28px}
.up-card-small .up-over{left:0;top:0;bottom:0;width:62%;justify-content:center;padding:18px 20px}
.up-kick{font:600 11.5px/1 var(--ub-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ub-ink-2)}
.up-fig{font:800 clamp(44px,5vw,68px)/1 var(--ub-display);letter-spacing:-.035em;color:var(--ub-ink);overflow-wrap:anywhere}
.up-card-small .up-fig{font-size:clamp(26px,2.6vw,34px)}
.up-form{font:600 16px/1.35 var(--ub-ui);color:#B9C7FF}
.up-card-small .up-form{font-size:13px}
.up-bar{display:flex;align-items:center;gap:12px;padding:14px 16px 14px 20px;border-top:0;flex:0 0 auto}
.up-txt{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.up-lab{font:700 15px/1.3 var(--ub-text);color:var(--ub-ink)}
.up-more{font:500 13.5px/1.2 var(--ub-ui);color:var(--ub-acc-hi)}
.up-go{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--ub-go);color:var(--ub-on-go);text-decoration:none!important}
.up-go:hover{background:var(--ub-go-hi);color:var(--ub-on-go);text-decoration:none}
.up-go:focus-visible,.up-more:focus-visible{outline:2px solid var(--ub-acc-hi);outline-offset:2px}
.up-note{margin:14px 0 0;font:400 12.5px/1.4 var(--ub-ui);color:var(--ub-ink-3)}
.up-note-page{margin:0}
/* CTA band: dark card with the grid; photo as a tilted card on the right */
.up-cta{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:8px;border:1px solid var(--ub-line);border-radius:28px;overflow:hidden;
  background-color:#080A0F;background-image:radial-gradient(600px 360px at 85% 50%,rgba(38,84,255,.32),transparent 70%),
  linear-gradient(var(--ub-grid) 1px,transparent 1px),linear-gradient(90deg,var(--ub-grid) 1px,transparent 1px);background-size:auto,48px 48px,48px 48px}
.yk-night .up-cta{border-color:#1C2338}
.up-cpic{order:2;margin:32px 36px 32px 0;border-radius:20px;overflow:hidden;border:6px solid #fff;transform:rotate(2.5deg);box-shadow:0 30px 60px rgba(0,0,0,.5);aspect-ratio:4/3}
.up-cta-tall .up-cpic{aspect-ratio:1/1;max-height:420px}
.up-cpic picture,.up-cpic img{display:block;width:100%;height:100%}
.up-cpic img{object-fit:cover;object-position:right center}
/* P1-6: the engine caps «picture > img» at 390 px up to 900 px wide — not inside the photo frames */
.up-cpic picture>img,.up-media picture>img{max-width:none;width:100%;height:100%;margin:0}
.up-ccopy{position:relative;z-index:1;order:1;padding:40px 12px 40px 48px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;min-width:0}
.up-cta-slim .up-ccopy{padding:32px 12px 32px 44px;gap:12px}
.up-ch{margin:0;font:800 clamp(28px,3.2vw,44px)/1.08 var(--ub-display);letter-spacing:-.03em;color:var(--ub-ink);text-wrap:balance}
.up-cta-slim .up-ch{font-size:clamp(24px,2.6vw,36px)}
.up-clead{margin:0;font:600 16.5px/1.55 var(--ub-text);color:var(--ub-ink-2);max-width:54ch}
.up-cact{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:6px}
.up-legal{margin:0;font:400 12px/1.4 var(--ub-ui);color:var(--ub-ink-3)}
@media (max-width:900px){
  .yk-bento{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .yk-bento>.up-card:nth-child(n){grid-column:auto;grid-row:auto}
  .yk-bento>.up-card-big{grid-column:1/-1}
  .up-card-big .up-media{min-height:0;aspect-ratio:16/9}
  .up-card-small .up-media{aspect-ratio:4/3}
  .up-card-small .up-over{top:auto;width:auto;right:0;padding:14px}
  .up-card-small .up-media::after{background:linear-gradient(0deg,rgba(8,10,15,.9),rgba(8,10,15,0) 62%)}
  .up-cta{grid-template-columns:minmax(0,1fr)}
  .up-cpic{order:1;margin:20px 20px 0;transform:rotate(1.5deg);border-width:5px}
  .up-cta-tall .up-cpic,.up-cta-slim .up-cpic{aspect-ratio:16/10}
  .up-ccopy,.up-cta-slim .up-ccopy{order:2;padding:22px 24px 28px}
}
@media (max-width:600px){
  .yk-bento{grid-template-columns:minmax(0,1fr)}
  .up-card-big .up-media{aspect-ratio:4/5}
  .up-card-big .up-media::after{background:linear-gradient(0deg,rgba(8,10,15,.92),rgba(8,10,15,0) 58%)}
  .up-card-big .up-over{right:0;width:auto;padding:18px}
  .up-card-small .up-media{aspect-ratio:16/10}
  .up-grid,.up-list{gap:12px}
  .up-bar{padding:12px 12px 12px 16px}
  .up-lab{font-size:14px}
  .up-go{width:40px;height:40px}
  .up-cta{border-radius:20px}
  .up-cpic{margin:14px 14px 0;border-width:4px;border-radius:16px}
  .up-cta-tall .up-cpic,.up-cta-slim .up-cpic{aspect-ratio:1/1}
  .up-ccopy,.up-cta-slim .up-ccopy{padding:18px 18px 24px}
}
@media (prefers-reduced-motion:reduce){.up-cpic{transform:none}}
