/* Tapahtumabanneri upotettavaksi (tapahtumat/banneri.php; Claude Design 20.10.2026, versio B).
   Mitat skaalautuvat iframen leveyden mukaan (vw): vaakana pohja 1200 × 400,
   kapeassa (alle 600 px) pinottuna pohja 390 × 560. Upotuskoodi asettaa iframen
   kuvasuhteen samoin, joten sisältö täyttää kehyksen kaikilla leveyksillä. */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(fontit/manrope-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(fontit/manrope-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root { --u: calc(100vw / 1200); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: transparent; }
body { font-family: Manrope, "Segoe UI", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.banneri { height: 100%; overflow: hidden; display: grid; grid-template-columns: calc(380 * var(--u)) minmax(0, 1fr); background: #0f1720; color: #e8eef4; border-radius: calc(24 * var(--u)); }
.banneri-pvm { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(36 * var(--u)); background: #ffc23d; color: #0f1720; }
.banneri-pvm::after { content: ""; position: absolute; right: -1px; top: 0; bottom: 0; width: calc(28 * var(--u)); background: repeating-linear-gradient(180deg, #0f1720 0 calc(14 * var(--u)), #ffc23d calc(14 * var(--u)) calc(28 * var(--u))); }
.banneri-ylarivi { font-size: calc(15 * var(--u)); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.banneri-paivat { display: flex; flex-direction: column; font-size: calc(132 * var(--u)); line-height: .82; font-weight: 800; letter-spacing: -.05em; }
.banneri-viikko { font-size: calc(22 * var(--u)); font-weight: 800; }
.banneri-sisalto { display: flex; flex-direction: column; justify-content: center; gap: calc(18 * var(--u)); padding: calc(48 * var(--u)) calc(56 * var(--u)); }
.banneri-tunnus { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 800; letter-spacing: .06em; color: #a9b6c3; }
.banneri-tunnus span { background: #ffc23d; color: #1a1300; border-radius: calc(7 * var(--u)); padding: calc(3 * var(--u)) calc(8 * var(--u)); letter-spacing: 0; }
.banneri h1 { margin: 0; font-size: calc(76 * var(--u)); line-height: .98; font-weight: 800; letter-spacing: -.035em; color: #ffffff; }
.banneri p { margin: 0; font-size: calc(20 * var(--u)); line-height: 1.45; font-weight: 600; color: #c9d3dc; }
.banneri-toiminto { display: flex; align-items: center; gap: calc(20 * var(--u)); margin-top: calc(6 * var(--u)); }
.banneri-merkki { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); background: #1d2a37; border-radius: calc(14 * var(--u)); padding: calc(14 * var(--u)) calc(20 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 800; color: #ffc23d; }
.banneri-merkki span { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: #ffc23d; }
.banneri-nappi { display: inline-flex; align-items: center; gap: calc(12 * var(--u)); min-height: calc(60 * var(--u)); padding: 0 calc(30 * var(--u)); border-radius: calc(16 * var(--u)); background: #ffc23d; color: #1a1300; font-size: calc(22 * var(--u)); font-weight: 800; text-decoration: none; }
.banneri-nappi:hover { background: #ffcf66; }
.banneri-nappi:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.banneri-lisa { font-size: calc(16 * var(--u)); font-weight: 700; color: #a9b6c3; }
.banneri-lisa b { color: #ffffff; }

@media (max-width: 600px) {
  :root { --u: calc(100vw / 390); }
  .banneri { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); border-radius: calc(22 * var(--u)); }
  .banneri-pvm { gap: calc(10 * var(--u)); padding: calc(26 * var(--u)) calc(26 * var(--u)) calc(30 * var(--u)); justify-content: flex-start; }
  .banneri-pvm::after { right: 0; left: 0; top: auto; bottom: -1px; width: auto; height: calc(14 * var(--u)); background: repeating-linear-gradient(90deg, #0f1720 0 calc(14 * var(--u)), #ffc23d calc(14 * var(--u)) calc(28 * var(--u))); }
  .banneri-ylarivi { font-size: calc(13 * var(--u)); }
  .banneri-paivat { flex-direction: row; font-size: calc(76 * var(--u)); line-height: .86; }
  .banneri-viikko { font-size: calc(18 * var(--u)); }
  .banneri-sisalto { justify-content: flex-start; gap: calc(14 * var(--u)); padding: calc(26 * var(--u)) calc(26 * var(--u)) calc(32 * var(--u)); }
  .banneri-tunnus { font-size: calc(13 * var(--u)); }
  .banneri h1 { font-size: calc(46 * var(--u)); }
  .banneri p { font-size: calc(16 * var(--u)); }
  .banneri-toiminto { margin-top: auto; flex-wrap: wrap; gap: calc(12 * var(--u)); }
  .banneri-merkki { font-size: calc(16 * var(--u)); padding: calc(12 * var(--u)) calc(18 * var(--u)); }
  .banneri-nappi { min-height: calc(52 * var(--u)); font-size: calc(18 * var(--u)); padding: 0 calc(22 * var(--u)); }
  .banneri-lisa { font-size: calc(14 * var(--u)); }
}