/* 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 (.mq-media, .mq-cta re-apply them). */
.mq-media,.mq-cta{
  --mx-night:#0B0712;--mx-night-rgb:8,10,15;--mx-well:#08050E;--mx-panel:#191023;--mx-raise:#281939;--mx-line:#291D37;--mx-line-hi:#3C2B4F;
  --mx-ink:#FFFFFF;--mx-ink-2:#D1C9DB;--mx-ink-3:#A69BB3;--mx-ink-4:#978BA4;--mx-acc-hi:#C69BFF;--mx-tint:#241139;--mx-deep:#250F3F;
  --mx-grid:rgba(255,255,255,.035);color:var(--mx-ink)}
.mq-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mq-grid{display:grid;gap:16px;margin-top:8px}
.mq-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.ms-bento{grid-template-columns:repeat(12,minmax(0,1fr))}
.ms-bento>.mq-card:nth-child(1){grid-column:1/8;grid-row:1/3}
.ms-bento>.mq-card:nth-child(2){grid-column:8/13;grid-row:1}
.ms-bento>.mq-card:nth-child(3){grid-column:8/13;grid-row:2}
.ms-bento>.mq-card:nth-child(4){grid-column:6/13;grid-row:3/5}
.ms-bento>.mq-card:nth-child(5){grid-column:1/6;grid-row:3}
.ms-bento>.mq-card:nth-child(6){grid-column:1/6;grid-row:4}
.mq-card{display:flex;flex-direction:column;background:var(--mx-panel);border:0;border-radius:var(--mx-r-card);overflow:hidden;min-width:0;box-shadow:var(--mx-shadow)}
/* P1-7: a card whose photo is not there yet (lazy) shows the night grid with a glow, never a flat black box */
.mq-media,.mq-cpic{position:relative;overflow:hidden;background-color:#191023;
  background-image:radial-gradient(70% 80% at 80% 30%,rgba(168,37,240,.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}
.mq-card-big .mq-media{flex:1 1 auto;min-height:300px}
.mq-card-small .mq-media{aspect-ratio:16/8}
.mq-media picture,.mq-media img{display:block;width:100%;height:100%}
.mq-media picture{position:absolute;inset:0}
.mq-media img{object-fit:cover;object-position:right center}
.mq-media::after{content:"";position:absolute;inset:0;pointer-events:none}
.mq-card-big .mq-media::after{background:linear-gradient(90deg,rgba(11,8,15,.78),rgba(11,8,15,0) 62%)}
.mq-card-small .mq-media::after{background:linear-gradient(90deg,rgba(11,8,15,.85),rgba(11,8,15,.1) 70%)}
.mq-chip{position:absolute;z-index:2;top:14px;right:14px;padding:6px 11px;border-radius:var(--mx-r-pill);background:#FFFFFF;color:#120B1F;font:600 11px/1 var(--mx-ui);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.mq-over{position:absolute;z-index:2;display:flex;flex-direction:column;gap:6px}
.mq-card-big .mq-over{left:0;bottom:0;width:62%;padding:28px}
.mq-card-small .mq-over{left:0;top:0;bottom:0;width:62%;justify-content:center;padding:18px 20px}
.mq-kick{font:600 11.5px/1 var(--mx-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--mx-ink-2)}
.mq-fig{font:800 clamp(44px,5vw,68px)/1 var(--mx-display);letter-spacing:-.035em;color:var(--mx-ink);overflow-wrap:anywhere}
.mq-card-small .mq-fig{font-size:clamp(26px,2.6vw,34px)}
.mq-form{font:600 16px/1.35 var(--mx-ui);color:#E0C4FF}
.mq-card-small .mq-form{font-size:13px}
.mq-bar{display:flex;align-items:center;gap:12px;padding:14px 16px 14px 20px;border-top:0;flex:0 0 auto}
.mq-txt{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.mq-lab{font:700 15px/1.3 var(--mx-text);color:var(--mx-ink)}
.mq-more{font:500 13.5px/1.2 var(--mx-ui);color:var(--mx-acc-hi)}
.mq-go{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--mx-go);color:var(--mx-on-go);text-decoration:none!important}
.mq-go:hover{background:var(--mx-go-hi);color:var(--mx-on-go);text-decoration:none}
.mq-go:focus-visible,.mq-more:focus-visible{outline:2px solid var(--mx-acc-hi);outline-offset:2px}
.mq-note{margin:14px 0 0;font:400 12.5px/1.4 var(--mx-ui);color:var(--mx-ink-3)}
.mq-note-page{margin:0}
/* CTA band: dark card with the grid; photo as a tilted card on the right */
.mq-cta{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:8px;border:1px solid var(--mx-line);border-radius:28px;overflow:hidden;
  background-color:#0B0712;background-image:radial-gradient(600px 360px at 85% 50%,rgba(168,37,240,.32),transparent 70%),
  linear-gradient(var(--mx-grid) 1px,transparent 1px),linear-gradient(90deg,var(--mx-grid) 1px,transparent 1px);background-size:auto,48px 48px,48px 48px}
.ms-night .mq-cta{border-color:#291D37}
.mq-cpic{order:2;margin:32px 36px 32px 0;border-radius:20px;overflow:hidden;border:6px solid #FFFFFF;transform:rotate(2.5deg);box-shadow:0 30px 60px rgba(0,0,0,.5);aspect-ratio:4/3}
.mq-cta-tall .mq-cpic{aspect-ratio:1/1;max-height:420px}
.mq-cpic picture,.mq-cpic img{display:block;width:100%;height:100%}
.mq-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 */
.mq-cpic picture>img,.mq-media picture>img{max-width:none;width:100%;height:100%;margin:0}
.mq-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}
.mq-cta-slim .mq-ccopy{padding:32px 12px 32px 44px;gap:12px}
.mq-ch{margin:0;font:800 clamp(28px,3.2vw,44px)/1.08 var(--mx-display);letter-spacing:-.03em;color:var(--mx-ink);text-wrap:balance}
.mq-cta-slim .mq-ch{font-size:clamp(24px,2.6vw,36px)}
.mq-clead{margin:0;font:600 16.5px/1.55 var(--mx-text);color:var(--mx-ink-2);max-width:54ch}
.mq-cact{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:6px}
.mq-legal{margin:0;font:400 12px/1.4 var(--mx-ui);color:var(--mx-ink-3)}
@media (max-width:900px){
  .ms-bento{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ms-bento>.mq-card:nth-child(n){grid-column:auto;grid-row:auto}
  .ms-bento>.mq-card-big{grid-column:1/-1}
  .mq-card-big .mq-media{min-height:0;aspect-ratio:16/9}
  .mq-card-small .mq-media{aspect-ratio:4/3}
  .mq-card-small .mq-over{top:auto;width:auto;right:0;padding:14px}
  .mq-card-small .mq-media::after{background:linear-gradient(0deg,rgba(11,8,15,.9),rgba(11,8,15,0) 62%)}
  .mq-cta{grid-template-columns:minmax(0,1fr)}
  .mq-cpic{order:1;margin:20px 20px 0;transform:rotate(1.5deg);border-width:5px}
  .mq-cta-tall .mq-cpic,.mq-cta-slim .mq-cpic{aspect-ratio:16/10}
  .mq-ccopy,.mq-cta-slim .mq-ccopy{order:2;padding:22px 24px 28px}
}
@media (max-width:600px){
  .ms-bento{grid-template-columns:minmax(0,1fr)}
  .mq-card-big .mq-media{aspect-ratio:4/5}
  .mq-card-big .mq-media::after{background:linear-gradient(0deg,rgba(11,8,15,.92),rgba(11,8,15,0) 58%)}
  .mq-card-big .mq-over{right:0;width:auto;padding:18px}
  .mq-card-small .mq-media{aspect-ratio:16/10}
  .mq-grid,.mq-list{gap:12px}
  .mq-bar{padding:12px 12px 12px 16px}
  .mq-lab{font-size:14px}
  .mq-go{width:40px;height:40px}
  .mq-cta{border-radius:20px}
  .mq-cpic{margin:14px 14px 0;border-width:4px;border-radius:16px}
  .mq-cta-tall .mq-cpic,.mq-cta-slim .mq-cpic{aspect-ratio:1/1}
  .mq-ccopy,.mq-cta-slim .mq-ccopy{padding:18px 18px 24px}
}
@media (prefers-reduced-motion:reduce){.mq-cpic{transform:none}}
