/* JOPE – uusi asettelu (2026-11). Vain muotoilu ja rakenne: värit, fontit ja sisältö pysyvät ennallaan.
   Ladataan style.css:n JÄLKEEN. Palautus vanhaan: poista <link href="layout-uusi.css..."> index.html:stä ja
   videos.html:stä, tai aja scripts\palauta-vanha-ulkoasu.ps1. Vanha versio: ulkoasu-varmuus\vanha-20261101. */

:root { --radius-l: 22px; --radius-m: 16px; }
.section { padding: 96px 0; }

/* ---------- Ylävalikko: kelluva kapseli ---------- */
.header { inset: 14px 0 auto; }
.header.scrolled { background: none; border-bottom: 0; backdrop-filter: none; }
.header .navbar {
    width: min(980px, calc(100% - 28px));
    min-height: 64px;
    padding: 0 10px 0 22px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(6, 21, 45, .72);
    backdrop-filter: blur(18px);
    box-shadow: 0 14px 40px rgba(0, 8, 28, .35);
}
.nav-logo img { width: 78px; height: 40px; }
.nav-links { gap: 24px; }
.nav-links a:last-child { background: var(--blue); border-color: var(--blue); color: #fff; padding: 12px 28px; font-size: 1rem; font-weight: 800; min-height: 46px; display: inline-flex; align-items: center; }
.nav-links a:last-child:hover { color: #fff; filter: brightness(1.12); }

/* ---------- Aloitus: iso otsikko vasemmalla, toimintopainikkeet ---------- */
.hero { min-height: 92vh; padding-top: max(8.5rem, 16vh); padding-bottom: 5rem; display: flex; align-items: flex-start; text-align: center; }
.hero-container { width: min(1160px, calc(100% - 40px)); align-items: center; }
.hero-title { max-width: 900px; margin: 16px 0 24px; font-size: clamp(2.9rem, 7vw, 6.4rem); line-height: .93; }
.hero-description { max-width: 580px; font-size: 1.12rem; }
.watch-label { margin: 26px 0 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero-button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 13px 28px; border-radius: 12px; font-size: .92rem; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.hero-button-primary { background: linear-gradient(135deg, #167bf3, #2aa7ff); color: #fff; box-shadow: 0 13px 30px rgba(24, 119, 242, .3); }
.hero-button-ghost { border: 1px solid rgba(98, 196, 255, .45); color: var(--white); background: rgba(255, 255, 255, .03); }
.hero { position: relative; overflow: hidden; }
.hero-button:hover { transform: translateY(-2px); }
.hero-button-primary:hover { box-shadow: 0 17px 36px rgba(24, 119, 242, .42); }
.hero-button-ghost:hover { border-color: var(--blue-light); }

/* ---------- Tietoa: uusin video vasemmalla, tilastot korteiksi ---------- */
.about-grid { grid-template-columns: 1.05fr .95fr; gap: 72px; }
.about-visual { order: -1; }
.about-visual .featured-video { display: block; width: 100%; aspect-ratio: 16 / 11; border-radius: var(--radius-l); }
.about-visual .featured-info { left: 24px; right: 24px; bottom: 22px; }
.about-grid:has(.featured-video.content-hidden) { grid-template-columns: minmax(0, 760px); }
.about-grid:has(.featured-video.content-hidden) .about-visual { display: none; }
.about-stats { gap: 14px; margin-top: 34px; padding-top: 0; border-top: 0; }
.about-stats div { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--panel); }

/* ---------- Viimeistely: osioiden numerointi ja erottimet ---------- */
main { counter-reset: osio; }
.about .about-content > .eyebrow, .content-types .section-heading > .eyebrow, .pricing .section-heading > .eyebrow,
.videos .video-heading .eyebrow, .contact .contact-content > .eyebrow { counter-increment: osio; }
.about .about-content > .eyebrow::before, .content-types .section-heading > .eyebrow::before, .pricing .section-heading > .eyebrow::before,
.videos .video-heading .eyebrow::before, .contact .contact-content > .eyebrow::before { content: "0" counter(osio) "  /  "; opacity: .55; letter-spacing: .12em; }
.section + .section { border-top: 1px solid rgba(148, 190, 255, .07); }
.premium-card { box-shadow: 0 26px 70px rgba(24, 119, 242, .18); }
.video-item:hover { box-shadow: 0 24px 55px rgba(0, 8, 28, .4); }
main:not(.all-videos-main) .video-grid { -webkit-mask-image: linear-gradient(90deg, #000 94%, transparent); mask-image: linear-gradient(90deg, #000 94%, transparent); }

main > .section { position: relative; overflow: hidden; isolation: isolate; }

/* Videorivin vierityspalkki teemaan sopivaksi */
main:not(.all-videos-main) .video-grid { scrollbar-width: thin; scrollbar-color: #2a86ee rgba(148, 190, 255, .1); }
main:not(.all-videos-main) .video-grid::-webkit-scrollbar { height: 8px; }
main:not(.all-videos-main) .video-grid::-webkit-scrollbar-track { background: rgba(148, 190, 255, .1); border-radius: 99px; }
main:not(.all-videos-main) .video-grid::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #167bf3, #2aa7ff); border-radius: 99px; }
main:not(.all-videos-main) .video-grid::-webkit-scrollbar-thumb:hover { background: #55b8ff; }

/* Nuolet videorivin eteen- ja taaksepäin kelaamiseen */
.carousel-controls { display: flex; justify-content: flex-end; gap: 10px; margin: -14px 0 18px; }
.carousel-controls[hidden] { display: none; }
.carousel-arrow {
    width: 46px; height: 46px; display: grid; place-items: center; padding: 0; cursor: pointer;
    border: 1px solid rgba(98, 196, 255, .4); border-radius: 50%; background: rgba(10, 32, 67, .75); color: var(--white);
    transition: background .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease;
}
.carousel-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.carousel-arrow:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); transform: translateY(-2px); }
.carousel-arrow:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 3px; }
.carousel-arrow:disabled { opacity: .35; cursor: default; }

/* ---------- Osio-otsikot: otsikko vasemmalla, kuvaus oikealla ---------- */
.section-heading, .section-heading.centered { max-width: none; margin: 0 0 44px; text-align: left; }
.section-heading:has(.section-description) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: end;
}
.section-heading:has(.section-description) > .eyebrow { grid-column: 1 / -1; }
.section-heading:has(.section-description) .section-title { grid-column: 1; margin-bottom: 0; }
.section-heading .section-description { grid-column: 2; max-width: 520px; margin: 0; }

/* ---------- Sisältötyypit: bento-ruudukko ---------- */

/* ---------- Hinnoittelu: iso Jope+-kortti ---------- */
.pricing-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); justify-content: stretch; gap: 22px; }
.premium-card { transform: none; }
.price-card { border-radius: var(--radius-l); }

/* ---------- Videot: vaakasuuntainen kelattava rivi (vain etusivulla) ---------- */
main:not(.all-videos-main) .video-grid {
    display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin;
    padding: 6px 2px 24px;
}
main:not(.all-videos-main) .video-item { flex: 0 0 min(340px, 82vw); scroll-snap-align: start; }
.video-item { border-radius: var(--radius-m); }

/* ---------- Julkaisulaskurit: kaksi korttia vierekkäin ---------- */
.countdown-stack { grid-template-columns: 1fr 1fr; gap: 20px; }
.countdown-container { grid-template-columns: 1fr; gap: 28px; padding: 40px 38px; border-radius: var(--radius-l); }
.countdown { justify-content: flex-start; }
.countdown.coming-soon { min-width: 0; justify-items: start; font-size: clamp(1.6rem, 3vw, 2.4rem); }

/* ---------- Yhteys: lomake vasemmalla ---------- */
.contact-grid { grid-template-columns: .95fr 1.05fr; gap: 72px; align-items: start; }
.contact-form { order: -1; border-radius: var(--radius-l); }

/* ---------- Alapalkki: sarakkeet ---------- */
.footer-content { display: grid; grid-template-columns: 1fr 1.5fr; align-items: start; }
.footer-links { justify-content: flex-end; }

/* ---------- Pienet näytöt ---------- */
@media (max-width: 900px) {
    .section { padding: 72px 0; }
    .header .navbar { padding: 0 8px 0 18px; }
    .nav-links { inset: 88px 14px auto; }
    .hero { padding-top: 112px; }
    .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 44px; }
    .about-visual { order: 0; }
    .contact-form { order: 0; }
    .section-heading, .section-heading.centered { grid-template-columns: 1fr; row-gap: 16px; }
    .section-heading .section-description { grid-column: 1; }
    .type-grid, .pricing-grid, .countdown-stack { grid-template-columns: 1fr; }
    .footer-content { grid-template-columns: 1fr; }
    .footer-links { justify-content: flex-start; }
}
@media (max-width: 620px) {
    .nav-logo img { width: 68px; height: 36px; }
    .countdown-container { padding: 32px 24px; }
}

/* ---------- Isot näytöt: kaikki suurenee ja sisältö täyttää leveyden lähes reunasta reunaan ---------- */
@media (min-width: 1200px) {
    html { font-size: clamp(16px, calc(8.5px + .625vw), 25px); }
    .container, .hero-container { width: min(1900px, calc(100% - 7vw)); }
    .header .navbar { width: min(1560px, calc(100% - 7vw)); min-height: 4rem; }
    .nav-logo img { width: 5.4rem; height: auto; }
    .hero-title { max-width: 62rem; }
    .hero-description { max-width: 40rem; margin-inline: auto; }
    .section-heading:has(.section-description) .section-description { max-width: 40rem; }
    .about-grid, .contact-grid { gap: 6rem; }
    main:not(.all-videos-main) .video-item { flex-basis: clamp(340px, 23vw, 520px); }
    .hero-button { min-height: 3.4rem; padding-inline: 2rem; }
}
@media (min-width: 2000px) {
    .container, .hero-container { width: min(2200px, calc(100% - 7vw)); }
    .header .navbar { width: min(1900px, calc(100% - 7vw)); }
}

/* ---------- Sisältötyypit: kolme yhtä suurta korttia (Pelit, IRL, Podcastit), mahtuu hyvin näytölle ---------- */
.type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 1.2rem; }
.type-card, .type-card:first-child {
    grid-row: auto; grid-column: auto; min-height: clamp(18rem, 46vh, 28rem); padding: 2rem 1.9rem 2.3rem;
    display: flex; flex-direction: column; justify-content: flex-start; border-radius: var(--radius-l);
}
.type-card .type-icon { width: 3.6rem; height: 3.6rem; border-radius: 1rem; }
.type-card .type-icon svg { width: 2.1rem; height: 2.1rem; }
.type-card h3, .type-card:first-child h3 { margin: auto 0 .6rem; padding-top: 2rem; font-size: clamp(1.6rem, 2.1vw, 2.2rem); }
.type-card > p:not(.card-number) { margin: 0; font-size: 1rem; }
.type-card:nth-child(3) { border-color: rgba(98, 196, 255, .38); background: radial-gradient(circle at 85% 8%, rgba(24, 119, 242, .28), transparent 60%), linear-gradient(145deg, rgba(15, 48, 92, .7), rgba(7, 24, 51, .82)); }
@media (max-width: 1000px) { .type-grid { grid-template-columns: 1fr; } .type-card, .type-card:first-child { min-height: 0; } .type-card h3, .type-card:first-child h3 { margin-top: 1.4rem; padding-top: 0; } }

/* Uusin video -kortti: ei rikkinäisen kuvan kuvaketta eikä alt-tekstiä ennen kuin oikea pikkukuva on latautunut */
.featured-video { background: linear-gradient(145deg, #167dec, #07182f 72%); }
.featured-video img { color: transparent; font-size: 0; }
.featured-video img[src="thumbnail.jpg"] { visibility: hidden; }
/* ---------- Etusivun tiedote (suljettava) ---------- */
.site-announcement {
    display: flex; align-items: center; gap: .9rem; max-width: 100%; margin: 0 0 1.6rem; padding: .55rem .6rem .55rem .6rem;
    border: 1px solid rgba(98, 196, 255, .38); border-radius: 999px;
    background: linear-gradient(135deg, rgba(24, 119, 242, .22), rgba(10, 32, 67, .8)); box-shadow: 0 12px 34px rgba(0, 8, 28, .3);
}
.site-announcement[hidden] { display: none; }
.announce-badge { flex: 0 0 auto; padding: .28rem .8rem; border-radius: 999px; background: var(--blue); color: #fff; font-size: .72rem; font-weight: 900; letter-spacing: .14em; }
.site-announcement p { margin: 0; font-size: .95rem; line-height: 1.4; color: #e6f0ff; }
.site-announcement a { color: var(--blue-light); font-weight: 700; text-decoration: underline; text-underline-offset: .15em; }
.announce-close { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; transition: background .2s; }
.announce-close:hover { background: rgba(255, 255, 255, .18); }
.announce-close:focus-visible, .site-announcement a:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 2px; }
@media (max-width: 700px) { .site-announcement { align-items: flex-start; border-radius: 18px; padding: .8rem; } .site-announcement p { font-size: .88rem; } }
/* ---------- Tietoa-osio: uusin video hieman alempana ja otsikko "UUSIN VIDEO" selkeästi esillä (about-visual-lower) ---------- */
.about-visual { align-self: center; margin-top: clamp(2rem, 7vh, 5rem); }
.about-visual .featured-info { left: 1.6rem; right: 1.6rem; bottom: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.about-visual .featured-info p {
    margin: 0; padding: .32rem .85rem; border-radius: 999px; background: var(--blue); color: #fff;
    font-size: .74rem; font-weight: 900; letter-spacing: .16em;
}
.about-visual .featured-info h2 { margin: 0; font-size: clamp(1.25rem, 1.9vw, 1.9rem); line-height: 1.2; text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
@media (max-width: 900px) { .about-visual { margin-top: 0; } }
/* Kun palvelutiedote on näkyvissä, aloitusosio saa lisätilaa sen alle */
body:has(.fault-notice:not([hidden])) .hero { padding-top: calc(max(8.5rem, 16vh) + 4.2rem); }

.announce-close svg { display: block; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* Aloitusosion teksti ja sisältö keskitetty (hero-keskitys) */
.hero-container { margin-inline: auto; }
.hero-title { margin-inline: auto; }
.hero-description { margin-inline: auto; }
.hero-actions { justify-content: center; }
.site-announcement { margin-inline: auto; }
/* Yläpalkin painikkeet (Kirjaudu, Hallintapaneeli): sama korkeus ja tasavälit kapselin sisällä (nappi-tasaus) */
.header .navbar { padding: 0 10px 0 22px; }
.nav-links a:last-child { box-sizing: border-box; height: 44px; min-height: 0; padding: 0 26px; line-height: 1; font-size: 1rem; white-space: nowrap; }
@media (min-width: 1200px) {
    .header .navbar { padding: 0 .625rem 0 1.6rem; }
    .nav-links a:last-child { height: 2.75rem; padding: 0 1.7rem; }
}
/* Yläpalkin painike hieman pienemmäksi, välit pidetään tasaisina (nappi-koko-2) */
.header .navbar { padding: 0 12px 0 22px; }
.nav-links a:last-child { height: 40px; padding: 0 22px; font-size: .95rem; }
@media (min-width: 1200px) {
    .header .navbar { padding: 0 .8rem 0 1.6rem; }
    .nav-links a:last-child { height: 2.4rem; padding: 0 1.45rem; font-size: .95rem; }
}
@media (max-width: 900px) { .nav-links a:last-child { height: 46px; } }