/* Kampanjasivu /black-week. Sivu on tumma myös silloin, kun kävijä on sytyttänyt valot. */

.bw-sivu {
  --bw-bg: #07080d;
  --bw-pinta: #0f111a;
  --bw-reuna: rgba(255, 255, 255, 0.13);
  --bw-teksti: #f2f3f8;
  --bw-himmea: #a9aec0;
  --bw-hehku: 255 138 60;
  --bw-saasto: #fcb549;
  --bw-korostus: linear-gradient(90deg, #fcb549 0%, #ff6a5e 50%, #f04be0 100%);
  background: var(--bw-bg);
  color: var(--bw-teksti);
}
html[data-kampanja="cm"] .bw-sivu {
  --bw-bg: #05060f;
  --bw-pinta: #0b0d1e;
  --bw-reuna: rgba(120, 140, 255, 0.24);
  --bw-hehku: 60 170 255;
  --bw-saasto: #7fd4ff;
  --bw-korostus: linear-gradient(90deg, #3ef2ff 0%, #8a7bff 50%, #ff4fd8 100%);
}
.bw-sivu main { background: var(--bw-bg); overflow: hidden; }
.bw-sivu .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.bw-sivu :focus-visible { outline: 2px solid #fcb549; outline-offset: 3px; }

/* Hero: teksti vasemmalla, kolmen paketin kuvakooste oikealla. */
.bw-hero { position: relative; padding: 196px 0 96px; }
.bw-hero::before {
  content: "";
  position: absolute;
  right: -10%;
  top: 8%;
  width: 70%;
  height: 90%;
  background: radial-gradient(closest-side, rgb(var(--bw-hehku) / 0.2), rgb(var(--bw-hehku) / 0) 100%);
  pointer-events: none;
}
.bw-hero-ruudukko { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: 56px; }
.bw-hero--yksin .bw-hero-ruudukko { grid-template-columns: minmax(0, 760px); justify-content: center; text-align: center; }
.bw-hero--yksin .bw-hero-cta { justify-content: center; }
.bw-kicker {
  display: inline-block;
  margin: 0 0 22px;
  padding: 7px 14px;
  border: 1px solid var(--bw-reuna);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--bw-himmea);
}
.bw-hero h1 {
  margin: 0 0 22px;
  font-size: clamp(36px, 4.2vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 900;
  color: #fff;
}
.bw-lead { max-width: 54ch; margin: 0 0 34px; font-size: clamp(17px, 1.4vw, 19.5px); line-height: 1.6; color: var(--bw-himmea); }
.bw-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.bw-sivu .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: 999px;
  background: #fff;
  color: #0a0b10;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  border: 0;
  box-shadow: none;
}
.bw-sivu .btn-primary:hover,
.bw-sivu .btn-primary:focus-visible { background: #fcb549; color: #0a0b10; }
html[data-kampanja="cm"] .bw-sivu .btn-primary:hover,
html[data-kampanja="cm"] .bw-sivu .btn-primary:focus-visible { background: #3ef2ff; }
.bw-linkki { color: var(--bw-himmea); font-weight: 600; text-underline-offset: 4px; }
.bw-linkki:hover { color: #fff; }

/* Kuvat ja videot. Kuva täyttää kehyksensä; vaalea tuotekuva ja henkilökuva saavat oman pohjansa. */
.bw-media { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: #11131c; }
.bw-media img,
.bw-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.bw-media--oikea img { object-position: 78% center; }
.bw-media--vaalea { background: #fff; }
/* Valmis sivustomockup tummalla pohjalla: kuva on neliö, ja kehys näyttää sen keskiosan. */
.bw-media--mockup { background: #1a1650; }
.bw-media--mockup img { object-position: center 42%; }
.bw-media--vaalea img { object-position: center 32%; }
.bw-media--henkilo { background: radial-gradient(90% 80% at 60% 30%, rgb(var(--bw-hehku) / 0.55), #171a26 72%); }
.bw-media--henkilo img { object-position: center top; }
/* Kehys määrää kuvan mittasuhteen: kuva asetetaan kehyksen päälle, jotta pystykuva ei venytä korttia. */
.bw-kortti-kuva,
.bw-kooste-kortti { overflow: hidden; }
.bw-kortti-kuva > .bw-media,
.bw-kooste-kortti > .bw-media { position: absolute; inset: 0; width: auto; height: auto; }
.bw-media-teksti {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(7, 8, 13, 0.78);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.bw-media--chat { display: grid; align-content: center; gap: 12px; padding: 22px; background: linear-gradient(160deg, #141a3a 0%, #0c0f22 100%); }
.bw-chat-rivi { display: flex; align-items: flex-end; gap: 10px; margin: 0; font-size: 14.5px; line-height: 1.45; }
.bw-chat-rivi span,
.bw-chat-rivi--kavija { padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: #fff; color: #151515; }
.bw-chat-rivi--kavija { justify-self: end; max-width: 80%; border-radius: 16px 16px 4px 16px; background: #2d3a7d; color: #fff; }
.bw-chat-rivi img { flex: none; width: 36px; height: 36px; border-radius: 50%; }

/* Heron kuvakooste: iso kortti ja kaksi sen päälle limittyvää. */
.bw-kooste { position: relative; aspect-ratio: 1 / 0.8; }
.bw-kooste-kortti {
  position: absolute;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--bw-pinta);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.85), 0 0 60px -10px rgb(var(--bw-hehku) / 0.32);
}
.bw-kooste-kortti--1 { top: 4%; right: 0; width: 86%; aspect-ratio: 3 / 2; transform: rotate(1.5deg); }
.bw-kooste-kortti--2 { left: 0; bottom: 0; width: 31%; aspect-ratio: 9 / 16; transform: rotate(-4deg); }
.bw-kooste-kortti:only-child { top: 0; width: 78%; aspect-ratio: 4 / 4.4; right: 8%; }
.bw-kooste-kortti .bw-media-teksti { display: none; }
.bw-kooste-kortti figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(7, 8, 13, 0.86);
  font-size: 13.5px;
  white-space: nowrap;
}
/* Ison kuvan hintalappu on oikeassa reunassa, koska pystykuva limittyy vasemman alakulman päälle. */
.bw-kooste-kortti--1:not(:only-child) figcaption { left: auto; right: 12px; }
.bw-kooste-kortti figcaption span { color: var(--bw-himmea); font-weight: 600; }
.bw-kooste-kortti figcaption strong { color: #fff; font-weight: 800; }

/* Osiot ja tarjouskortit. Kuuden sarakkeen ruudukossa kaksi isoa ja kolme pienempää korttia täyttävät rivit. */
.bw-osio { padding: 80px 0; border-top: 1px solid var(--bw-reuna); }
.bw-osio h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 800;
  color: #fff;
}
.bw-osio-lead { max-width: 70ch; margin: 0 0 40px; font-size: 17px; line-height: 1.6; color: var(--bw-himmea); }
.bw-kortit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.bw-kortti {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bw-reuna);
  border-radius: 24px;
  background: var(--bw-pinta);
  overflow: hidden;
}
.bw-kortti--iso { grid-column: span 3; }
.bw-kortti-kuva { position: relative; display: block; aspect-ratio: 16 / 10; }
.bw-kortti--iso .bw-kortti-kuva { aspect-ratio: 16 / 8.2; }
.bw-kortti-kuva .bw-media { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.bw-kortti:hover .bw-kortti-kuva .bw-media { transform: scale(1.03); }
.bw-kortti-sisalto { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 24px 26px 26px; }
.bw-kortti h3 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.012em; }
.bw-kortti--iso h3 { font-size: 26px; }
.bw-kortti h3 a { color: #fff; text-decoration: none; }
.bw-kortti h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bw-kuvaus { margin: 0; font-size: 15px; line-height: 1.55; color: var(--bw-himmea); }
.bw-kortti-ala { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
/* Hinta: normaalihinta ja alennusprosentti samalla rivillä, kampanjahinta isolla ja säästö euroina sen alla. */
.bw-hinta { margin: 0; display: grid; gap: 6px; }
.bw-hinta-rivi { display: flex; align-items: center; gap: 10px; }
.bw-hinta s { font-size: 18px; font-weight: 600; color: var(--bw-himmea); text-decoration-thickness: 2px; }
.bw-prosentti {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--bw-korostus);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.bw-saasto { font-size: 14.5px; font-weight: 700; color: var(--bw-saasto); }
.bw-hinta strong { font-size: 34px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 900; color: #fff; white-space: nowrap; }
.bw-kortti--iso .bw-hinta strong { font-size: 42px; }
.bw-sivu .bw-cta { padding: 12px 22px; font-size: 15px; }
.bw-tulossa {
  margin: 0;
  padding: 11px 16px;
  border: 1px dashed var(--bw-reuna);
  border-radius: 999px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--bw-himmea);
}

.bw-kortit--cm .bw-kortti-kuva { aspect-ratio: 16 / 9; }
.bw-paketit { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
.bw-paketit li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--bw-reuna);
  font-size: 16px;
}
.bw-paketit li > span:first-child { color: var(--bw-himmea); font-weight: 600; }
.bw-paketit li strong { color: #fff; font-weight: 800; white-space: nowrap; }
/* Kuukausihinta ja sen alla kahden ilmaisen kuukauden arvo euroina. */
.bw-paketti-hinta { display: grid; justify-items: end; gap: 2px; }
.bw-paketti-hinta .bw-saasto { font-size: 13px; white-space: nowrap; }
.bw-etu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 4px 0 0; font-size: 14.5px; color: var(--bw-himmea); }
.bw-paketti-cta {
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  color: #0a0b10;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.bw-paketti-cta:hover,
.bw-paketti-cta:focus-visible { background: #3ef2ff; }
.bw-kortit--cm .bw-tulossa { margin-top: 10px; }

.bw-ehdot ul { max-width: 78ch; margin: 22px 0 0; padding: 0 0 0 20px; display: grid; gap: 10px; }
.bw-ehdot li { font-size: 15.5px; line-height: 1.6; color: var(--bw-himmea); }
.bw-ehdot a { color: #fff; text-underline-offset: 3px; }

@media (max-width: 1040px) {
  .bw-hero { padding: 168px 0 72px; }
  .bw-hero-ruudukko { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .bw-kooste { max-width: 620px; }
  .bw-kortti,
  .bw-kortti--iso { grid-column: span 3; }
  .bw-kortit .bw-kortti:last-child:nth-child(odd) { grid-column: span 6; }
  .bw-kortit .bw-kortti:last-child:nth-child(odd) .bw-kortti-kuva { aspect-ratio: 16 / 7; }
}
@media (max-width: 680px) {
  .bw-hero { padding: 150px 0 56px; }
  .bw-osio { padding: 56px 0; }
  .bw-kortti,
  .bw-kortti--iso,
  .bw-kortit .bw-kortti:last-child:nth-child(odd) { grid-column: span 6; }
  .bw-kortit .bw-kortti:last-child:nth-child(odd) .bw-kortti-kuva,
  .bw-kortti--iso .bw-kortti-kuva { aspect-ratio: 16 / 10; }
  .bw-kortti--iso h3 { font-size: 22px; }
  .bw-kortti--iso .bw-hinta strong { font-size: 36px; }
  .bw-kooste-kortti figcaption { font-size: 12.5px; padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .bw-kortti-kuva .bw-media { transition: none; }
}