/* Kuvaupin teema B1 (tumma): ulkoasuspeksi 2026-10-21, luvut 4 ja 7.
   Ainoa tyylitiedosto kaikille selainsivuille paitsi /sovellus. Ei ulkoisia resursseja.
   Järjestys: muuttujat, perusasettelu, saavutettavuus, yläpalkki, sisältö, komponentit, mosaiikki, etusivu,
   latauslomake, upotettava lataus, kuvasivu ja lava, galleria ja katselu, omat kuvat, gallerioiden hallinta, tekstisivut,
   tunnussivut, virhesivut, puhelin. */

/* ---------- Teemamuuttujat (4.1) ---------- */

:root {
    --tausta: #121212;
    --pinta: #1c1c1c;
    --pinta-2: #242424;
    --reuna: #2c2c2c;
    --teksti: #f2f2f2;
    --himmea: #a6a6a6;
    --oranssi: #ff4e00;
    --oranssi-vaalea: #ff7a40;
    --oranssi-painike: #d43f00;
    --korostusliuku: linear-gradient(90deg, #ffb07a, #ff4e00);
    --onnistui: #3fb950;
    --virhe: #ff7a7a;

    --fontti: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --tasalevea: Consolas, Menlo, "DejaVu Sans Mono", monospace;
    --kentta-tausta: #151515;
    --kentta-reuna: #333;
    --sivumarginaali: 32px;
    color-scheme: dark;
}

/* ---------- Perusasettelu (4.2) ---------- */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--tausta);
    color: var(--teksti);
    font: 15px/1.5 var(--fontti);
}

main {
    display: block;
}

img, svg, video {
    max-width: 100%;
}

img {
    height: auto;
}

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    font-weight: 700;
    line-height: 1.2;
}

h1 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.6px;
}

h2 {
    font-size: 20px;
    letter-spacing: -.2px;
}

h3 {
    font-size: 17px;
}

h4 {
    font-size: 15px;
}

p {
    margin: 0 0 1em;
}

a {
    color: var(--oranssi-vaalea);
    text-underline-offset: 2px;
}

a:hover {
    color: #ff9a6a;
}

hr {
    margin: 24px 0;
    border: 0;
    border-top: 1px solid var(--reuna);
}

code, kbd, pre {
    font-family: var(--tasalevea);
    font-size: .92em;
}

::selection {
    background: rgba(255, 78, 0, .4);
    color: #fff;
}

/* Välilyönnitön pitkä teksti (kuvaus, tiedostonimi, tunnus) rivittyy eikä levitä sivua vaakasuunnassa. */
h1, h2, h3, h4, p, li, dt, dd, td, th, label, legend, figcaption, blockquote {
    overflow-wrap: anywhere;
}

/* ---------- Saavutettavuus (4.4) ---------- */

/* hidden-attribuutti voittaa komponenttien display-arvot (JS paljastaa Kopioi- ja koko ruutu -painikkeet). */
[hidden] {
    display: none !important;
}

:where(a, button, summary, [tabindex], input[type="checkbox"], input[type="radio"], input[type="file"], input[type="submit"], input[type="button"]):focus-visible {
    outline: 2px solid var(--oranssi-vaalea);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Yläpalkki ja logo (5.1) ---------- */

.ylapalkki {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 12px var(--sivumarginaali);
    background: rgba(18, 18, 18, .92);
    border-bottom: 1px solid #222;
}

.logo {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.3px;
    text-decoration: none;
    white-space: nowrap;
}

.logo:hover {
    color: #fff;
}

.logo b {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--oranssi);
    color: #fff;
    font-size: 19px;
}

.logo small {
    margin-left: -5px;
    font-size: 13px;
    font-weight: 600;
    opacity: .5;
}

.ylapalkki-oikea {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
}

.valikko-tyopoyta {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 14px;
    font-weight: 600;
}

.valikko-tyopoyta a {
    padding: 4px 0;
    color: #bdbdbd;
    text-decoration: none;
    white-space: nowrap;
}

.valikko-tyopoyta a:hover {
    color: #fff;
}

.valikko-tyopoyta a.aktiivinen {
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--oranssi);
}

.ylapalkki a.rekisteroidy {
    padding: 7px 15px;
    border: 1.5px solid var(--oranssi);
    border-radius: 10px;
    color: var(--oranssi-vaalea);
}

.ylapalkki a.rekisteroidy:hover {
    background: rgba(255, 78, 0, .12);
    color: #fff;
}

.ylapalkki summary {
    list-style: none;
    cursor: pointer;
}

.ylapalkki summary::-webkit-details-marker {
    display: none;
}

.kayttajavalikko {
    position: relative;
    min-width: 0;
}

.kayttajavalikko summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.kayttajavalikko i {
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff7a40, #ff2d6f);
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
}

.kayttajanimi {
    min-width: 0;
    max-width: 10em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.valikko-paneeli {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    padding: 6px;
    background: var(--pinta);
    border: 1px solid var(--reuna);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}

.valikko-paneeli form {
    margin: 0;
}

.valikko-paneeli a,
.valikko-paneeli button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: #ddd;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.valikko-paneeli a:hover,
.valikko-paneeli button:hover {
    background: var(--pinta-2);
    color: #fff;
}

.valikko-paneeli a.aktiivinen {
    color: #fff;
    box-shadow: inset 3px 0 0 var(--oranssi);
}

.valikko-paneeli a.rekisteroidy {
    justify-content: center;
    margin-top: 4px;
}

.valikko-puhelin {
    display: none;
}

.valikko-puhelin summary {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    color: #eee;
}

.valikko-puhelin[open] summary {
    background: rgba(255, 255, 255, .16);
}

/* Puhelimen valikko levittyy palkin levyiseksi (sijainti suhteessa .ylapalkki-elementtiin). */
.valikko-puhelin .valikko-paneeli {
    top: 100%;
    right: var(--sivumarginaali);
    left: var(--sivumarginaali);
    min-width: 0;
}

/* Kirjautuneen palkki tarvitsee enemmän tilaa kuin sisältö, joten valikkopainike tulee jo tätä kapeammalla. */
@media (max-width: 860px) {
    .valikko-tyopoyta {
        display: none;
    }

    .valikko-puhelin {
        display: block;
    }

    .ylapalkki-oikea {
        gap: 10px;
    }

    .kayttajanimi {
        max-width: 6em;
    }
}

/* ---------- Sisältö ja otsikot ---------- */

.sisalto {
    width: 100%;
    max-width: calc(1200px + 2 * var(--sivumarginaali));
    margin: 0 auto;
    padding: 28px var(--sivumarginaali) 56px;
}

.sisalto.kapea {
    max-width: calc(760px + 2 * var(--sivumarginaali));
}

.sivu-otsikko {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 20px;
}

.sivu-otsikko > * {
    min-width: 0;
}

.sivu-otsikko h1 {
    margin: 0;
    font-size: 26px;
}

.sivu-otsikko h1 small {
    margin-left: 8px;
    color: var(--himmea);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
}

.sivu-otsikko p {
    margin: 4px 0 0;
    color: var(--himmea);
    font-size: 14px;
}

.ruudukko {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 16px;
}

.ruudukko > * {
    min-width: 0;
}

/* ---------- Komponentit (4.3) ---------- */

.kortti {
    min-width: 0;
    padding: 16px;
    background: var(--pinta);
    border: 1px solid var(--reuna);
    border-radius: 16px;
}

.kortti > :last-child {
    margin-bottom: 0;
}

/* Kortin pieni otsikko, esim. kuvasivun "Jaa kuva" ja "Kameratiedot". */
.kortti-otsikko {
    margin: 0 0 12px;
    color: var(--himmea);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Painikkeet: päätoiminto oranssi (valkoinen teksti --oranssi-painike-taustalla on AA), muut harmaita. */
.nappi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: var(--oranssi-painike);
    box-shadow: 0 8px 22px rgba(255, 78, 0, .3);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.nappi:hover {
    background: #bf3900;
    color: #fff;
}

.nappi:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.nappi.toissijainen {
    background: var(--pinta-2);
    border-color: #333;
    box-shadow: none;
    color: #eee;
    font-weight: 600;
}

.nappi.toissijainen:hover {
    background: #2e2e2e;
    border-color: #444;
}

.nappi.vaara {
    background: rgba(255, 90, 90, .12);
    border-color: rgba(255, 122, 122, .35);
    box-shadow: none;
    color: var(--virhe);
    font-weight: 600;
}

.nappi.vaara:hover {
    background: rgba(255, 90, 90, .2);
    color: #ff9a9a;
}

/* Kuvakepainike: neliö, kuvake SVG:nä (stroke="currentColor"). Poisto: .kuvakenappi.vaara. */
.kuvakenappi {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #333;
    border-radius: 10px;
    background: var(--pinta-2);
    color: #ccc;
    font: inherit;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.kuvakenappi:hover {
    background: #2e2e2e;
    color: #fff;
}

.kuvakenappi svg {
    width: 16px;
    height: 16px;
}

.kuvakenappi.vaara {
    color: var(--virhe);
}

.kuvakenappi.vaara:hover {
    background: rgba(255, 90, 90, .15);
    color: var(--virhe);
}

/* Kentät: tumma pohja, fokuksessa oranssi reuna ja kehä. :where pitää tarkkuuden nollassa, jotta luokat voittavat. */
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="range"], [type="color"], [type="hidden"]), textarea, select) {
    max-width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--kentta-reuna);
    border-radius: 11px;
    background: var(--kentta-tausta);
    color: var(--teksti);
    font: inherit;
    font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}

:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="range"], [type="color"], [type="hidden"]), textarea, select):focus {
    border-color: var(--oranssi);
    box-shadow: 0 0 0 3px rgba(255, 78, 0, .2);
    outline: 2px solid transparent;
}

/* Safari piirtää hakukentän omalla ulkoasullaan, ellei sitä nollata. */
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

:where(textarea) {
    resize: vertical;
}

::placeholder {
    color: #8a8a8a;
    opacity: 1;
}

input[type="checkbox"], input[type="radio"] {
    accent-color: var(--oranssi);
}

input[type="file"] {
    max-width: 100%;
}

/* Lomakerivi: etiketti kentän yläpuolella. */
.lomakerivi {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin-bottom: 14px;
}

.lomakerivi > label {
    color: #c8c8c8;
    font-size: 12.5px;
    font-weight: 600;
}

.lomakerivi > :where(input, textarea, select) {
    width: 100%;
}

/* Pilleriryhmä: segmentoitu valinta, valittu lapsi .aktiivinen. */
.pilleri {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    max-width: 100%;
    padding: 3px;
    background: var(--pinta);
    border: 1px solid var(--reuna);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.pilleri > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 4px 12px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--himmea);
    font: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.pilleri > :hover {
    color: #fff;
}

.pilleri > .aktiivinen {
    background: #333;
    color: #fff;
}

/* Merkki: pieni pyöreä lappu, esim. "Piilotettu" tai "✓ Tallennettu". */
.merkki {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #333;
    color: #ddd;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.merkki.onnistui {
    background: rgba(63, 185, 80, .15);
    color: var(--onnistui);
}

.merkki.virhe {
    background: rgba(255, 90, 90, .15);
    color: var(--virhe);
}

/* Ilmoitus sisällön yläpuolella (osat/viestit): sama merkki palkkina. */
p.merkki, ul.merkki {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 14px;
    padding: 9px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
}

ul.merkki {
    list-style: none;
}

/* Linkki merkin sisällä (esim. lataus.js:n "Kirjaudu sisään"): merkin värillä alleviivattuna. */
.merkki a {
    color: inherit;
    text-decoration: underline;
}

ul.merkki li + li {
    margin-top: 4px;
}

/* Linkkirivi (osat/linkkirivi, lataus.js): nimi, osoite tasalevyisenä ja Kopioi. */
.linkkirivi {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-bottom: 8px;
    padding: 6px 6px 6px 12px;
    background: var(--tausta);
    border: 1px solid #303030;
    border-radius: 10px;
}

.linkkirivi:focus-within {
    border-color: var(--oranssi);
}

.linkkirivi-nimi {
    flex: none;
    max-width: 40%;
    overflow: hidden;
    color: var(--himmea);
    font-size: 11.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.linkkirivi .linkkirivi-osoite {
    flex: 1;
    min-width: 0;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #eee;
    font-family: var(--tasalevea);
    font-size: 13px;
    text-overflow: ellipsis;
}

.linkkirivi textarea.linkkirivi-osoite {
    line-height: 1.4;
    resize: none;
}

.linkkirivi.korostettu .linkkirivi-osoite {
    color: var(--oranssi-vaalea);
    font-size: 14.5px;
}

.linkkirivi .kopioi {
    flex: none;
    padding: 6px 11px;
    border: 0;
    border-radius: 7px;
    background: var(--reuna);
    color: #eee;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.linkkirivi .kopioi:hover {
    background: #383838;
}

.linkkirivi.korostettu .kopioi {
    background: var(--oranssi-painike);
    color: #fff;
}

.linkkirivi.korostettu .kopioi:hover {
    background: #bf3900;
}

/* Sivutus: pyöristetyt numeronapit, aktiivinen sivu oranssi. */
.sivutus {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 16px 0;
}

.sivutus > a,
.sivutus > .aktiivinen {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--reuna);
    border-radius: 9px;
    background: var(--pinta);
    color: #ccc;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.sivutus > a:hover {
    border-color: #444;
    color: #fff;
}

.sivutus > .aktiivinen {
    background: var(--oranssi-painike);
    border-color: var(--oranssi-painike);
    color: #fff;
}

.sivutus-tila {
    margin-left: 6px;
    color: var(--himmea);
    font-size: 13px;
}

/* ---------- Mosaiikki (5.10, osat/mosaiikki) ---------- */

/* Täyttää lähimmän position-määritetyn vanhemman ja rajaa vinon seinän, jottei sivu vieri vaakasuunnassa. */
.mosaiikki {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Säteittäinen tummennus: keskellä teksti erottuu, reunat sulautuvat taustaan. */
.mosaiikki::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(18, 18, 18, .55) 0%, rgba(18, 18, 18, .94) 72%);
}

/* Vino kuvaseinä (noin −7°): rivit jakavat seinän korkeuden, ja ylisuuri seinä peittää kulmat myös leveällä näytöllä. */
.mosaiikki-seina {
    position: absolute;
    inset: -20% -8%;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 12px;
    opacity: .6;
    transform: rotate(-7deg) scale(1.18);
}

/* Tunnussivujen himmeämpi seinä. */
.mosaiikki.himmea .mosaiikki-seina {
    opacity: .32;
}

.mosaiikki-ruutu {
    position: relative;
    overflow: hidden;
    min-width: 0;
    border-radius: 14px;
    background-color: var(--pinta-2);
    background-position: center;
    background-size: cover;
}

/* Vaihtuva mosaiikki (etusivu, kuvauppi.js): uusi kuva häivytetään ruudun päälle, sitten se jää ruudun taustaksi. */
.mosaiikki-vaihto {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-position: center;
    background-size: cover;
    opacity: 0;
    transition: opacity 1.4s ease;
}

.mosaiikki-vaihto.nakyva {
    opacity: 1;
}

/* Paikkamerkit: mallin kerrostetut liukuvärit (etusivu-b1.html, .k1–.k6), kun kuvia ei ole asetettu. */
.paikkamerkki.p1 {
    background:
        radial-gradient(circle at 66% 40%, #fff1c2 0 7%, rgba(255, 241, 194, 0) 8%),
        radial-gradient(ellipse 70% 38% at 25% 100%, #3a1838 0 62%, transparent 63%),
        radial-gradient(ellipse 70% 32% at 85% 100%, #55204d 0 62%, transparent 63%),
        linear-gradient(180deg, #ffbf73, #ff6a4d 58%, #8c2f5a);
}

.paikkamerkki.p2 {
    background:
        radial-gradient(ellipse 6% 22% at 60% 62%, rgba(255, 255, 255, .55), transparent 70%),
        radial-gradient(circle at 60% 40%, #fffbe6 0 6%, rgba(255, 251, 230, 0) 7%),
        linear-gradient(180deg, #b5e9ff 0%, #63bdea 49%, #1f6fa8 50%, #0d3b63 100%);
}

.paikkamerkki.p3 {
    background:
        radial-gradient(ellipse 80% 45% at 20% 100%, #1d4d2b 0 60%, transparent 61%),
        radial-gradient(ellipse 70% 40% at 80% 100%, #2c6b3a 0 60%, transparent 61%),
        radial-gradient(ellipse 90% 40% at 50% 100%, #4f9a55 0 75%, transparent 76%),
        linear-gradient(180deg, #e6f7d6, #a6d98b);
}

.paikkamerkki.p4 {
    background:
        repeating-linear-gradient(90deg, #1b1233 0 16px, #2a1b4a 16px 26px, #160f2a 26px 34px) bottom / 100% 38% no-repeat,
        radial-gradient(circle at 25% 30%, #ffe3f0 0 4%, rgba(255, 227, 240, 0) 5%),
        linear-gradient(180deg, #3b2a78, #c0508a 70%, #f59b8e);
}

.paikkamerkki.p5 {
    background:
        radial-gradient(circle at 30% 35%, #fff4cf 0 9%, rgba(255, 244, 207, 0) 10%),
        repeating-linear-gradient(170deg, rgba(120, 70, 10, .18) 0 6px, transparent 6px 14px) bottom / 100% 45% no-repeat,
        linear-gradient(180deg, #ffe9a8, #f6b93b 55%, #b06a1c);
}

.paikkamerkki.p6 {
    background:
        radial-gradient(ellipse 60% 18% at 45% 35%, rgba(90, 255, 170, .55), transparent 70%),
        radial-gradient(ellipse 50% 14% at 65% 25%, rgba(120, 220, 255, .35), transparent 70%),
        radial-gradient(ellipse 90% 30% at 50% 100%, #05080f 0 70%, transparent 71%),
        linear-gradient(180deg, #0b1430, #152a4a 60%, #1c2f3d);
}

/* Puhelimella vähemmän sarakkeita (18 ruutua = 6 riviä). */
@media (max-width: 760px) {
    .mosaiikki-seina {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        transform: rotate(-7deg) scale(1.2);
    }

    .mosaiikki-ruutu {
        border-radius: 12px;
    }
}

/* ---------- Etusivu (5.1, 5.2) ---------- */

/* Läpinäkyvä yläpalkki kelluu mosaiikin päällä. */
body.etusivu .ylapalkki {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, .75), rgba(10, 10, 10, 0));
    border-bottom: 0;
}

.hero {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: 560px;
    padding: 104px var(--sivumarginaali) 64px;
    overflow: hidden;
}

/* Heron alareuna liukuu sivun taustaan. */
.hero .mosaiikki::after {
    background:
        linear-gradient(180deg, rgba(18, 18, 18, 0) 72%, var(--tausta)),
        radial-gradient(ellipse at center, rgba(18, 18, 18, .55) 0%, rgba(18, 18, 18, .94) 72%);
}

/* Leveällä näytöllä seinä on enintään noin 1500 px leveä, jotta ruudut (ja 480 px:n kuvat) eivät kasva liian isoiksi. */
.hero .mosaiikki-seina,
.tunnus-nakyma .mosaiikki-seina {
    right: max(-8%, calc(50% - 760px));
    left: max(-8%, calc(50% - 760px));
}

.hero-sisalto {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 600px;
    text-align: center;
}

.hero h1 {
    margin: 0 0 10px;
    font-size: 54px;
    letter-spacing: -1.6px;
    line-height: 1.05;
}

/* Otsikon korostussana korostusliukuna. */
.liukuteksti {
    background: var(--korostusliuku);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-alaotsikko {
    margin: 0 0 26px;
    color: #c8c8c8;
    font-size: 17px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.hero-edut {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 26px;
    margin: 16px 0 0;
    padding: 0;
    color: var(--himmea);
    font-size: 12.5px;
    list-style: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

/* Heron alla: tuloskortit (#uppa) ja kolmen kortin rivi. */
.etusivu-ala {
    padding-top: 12px;
}

.etusivu-kortit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 16px;
}

.etusivu-kortti {
    position: relative;
}

.etusivu-kortti h2 {
    margin: 12px 0 4px;
    font-size: 16px;
}

.etusivu-kortti p {
    margin: 0;
    color: var(--himmea);
    font-size: 14px;
}

.etusivu-kuvake {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 78, 0, .15);
    color: var(--oranssi-vaalea);
}

/* Linkillinen kortti: koko kortti on kosketusalue, fokuskehys kortin ympärillä. */
.etusivu-kortti a {
    color: inherit;
    text-decoration: none;
}

.etusivu-kortti a span {
    color: var(--oranssi-vaalea);
}

.etusivu-kortti a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.etusivu-kortti a:hover {
    color: #fff;
}

.etusivu-kortti:has(a:hover) {
    border-color: #444;
}

.etusivu-kortti a:focus-visible {
    outline: none;
}

.etusivu-kortti a:focus-visible::after {
    outline: 2px solid var(--oranssi-vaalea);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    /* Hero täyttää näytön, ja sisältö on alhaalla peukalon ulottuvilla (malli: puhelinnäkymä). */
    .hero {
        align-items: end;
        min-height: 100vh;
        min-height: 100svh;
        padding: 88px var(--sivumarginaali) 36px;
    }

    .hero .mosaiikki::after {
        background: linear-gradient(180deg, rgba(18, 18, 18, .35) 0%, rgba(18, 18, 18, .9) 55%, var(--tausta) 80%);
    }

    .hero h1 {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .hero-alaotsikko {
        margin-bottom: 20px;
        font-size: 15px;
    }

    .hero-edut {
        gap: 4px 14px;
        font-size: 12px;
    }
}

/* ---------- Latauslomake ja tuloskortit (5.2, osat/latauslomake, lataus.js) ---------- */

/* Visuaalisesti piilotettu mutta käytettävissä (näppäimistö, ruudunlukija, etiketti); ei display: none. */
.nakymaton {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

/* Kuvateksti ja Lisää näkyvät vain ilman JavaScriptiä (lataus.js piilottaa ne). */
#uploader {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
    margin: 0;
    text-align: left;
}

#uploader > .pudotusalue,
#desc-label {
    grid-column: 1 / -1;
}

#desc-label {
    margin-top: 6px;
    color: #c8c8c8;
    font-size: 12.5px;
    font-weight: 600;
}

#desc-element input {
    width: 100%;
}

/* Pudotusalue: koko alue on tiedostokentän etiketti (klikkaus avaa valitsimen) ja lataus.js:n pudotuskohde. */
.pudotusalue {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    min-width: 0;
    padding: 16px;
    border: 2px dashed #3a3a3a;
    border-radius: 18px;
    background: var(--pinta);
    color: var(--himmea);
    font-size: 15px;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.pudotusalue:hover,
.pudotusalue.korostus {
    border-color: var(--oranssi);
    background: rgba(255, 78, 0, .08);
}

.pudotusalue:hover .nappi {
    background: #bf3900;
}

/* Fokus on piilotetussa tiedostokentässä, joten kehys piirretään sen etiketille. */
.nakymaton:focus-visible + .pudotusalue {
    outline: 2px solid var(--oranssi-vaalea);
    outline-offset: 2px;
}

.pudotusalue-kuvake {
    flex: none;
    color: var(--oranssi-vaalea);
}

.pudotusalue-teksti {
    flex: 1 1 160px;
    min-width: 0;
}

.pudotusalue .nappi {
    flex: none;
}

/* Liitä leikepöydältä -vihje (lataus.js näyttää sen): vain työpöydällä, ei kosketuslaitteilla eikä puhelimella. */
@media (pointer: coarse) {
    .pudotusalue-liita {
        display: none;
    }
}

/* Kokoraja (osat/latauslomake): oma rivi tekstin kohdalla (kuvake 24 px + väli 14 px). */
.pudotusalue-raja {
    flex-basis: 100%;
    margin-top: -6px;
    padding-left: 38px;
    color: var(--himmea);
    font-size: 12.5px;
}

/* Etusivun lasimainen latauskenttä (malli B1). */
.hero .pudotusalue {
    padding: 14px 14px 14px 22px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 20px;
    background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: #c4c4c4;
}

.hero .pudotusalue:hover,
.hero .pudotusalue.korostus {
    border-color: var(--oranssi);
    background: rgba(255, 78, 0, .14);
}

.hero .pudotusalue .nappi {
    padding: 12px 22px;
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(255, 78, 0, .42);
    font-size: 15px;
}

/* Tuloskortit: "Lisää kaikki" koko rivin levyisenä korttien yläpuolella. */
#uppa {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    align-items: start;
    gap: 16px;
}

#uppa:not(:empty) {
    margin-bottom: 28px;
}

.lataus-palkki {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-end;
}

.latauskortti {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 12px;
}

.latauskortti-esikatselu {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--pinta-2);
    color: var(--himmea);
    font-size: 11px;
    font-weight: 700;
}

.latauskortti-esikatselu img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.latauskortti-tiedot {
    display: grid;
    gap: 6px;
    min-width: 0;
}

/* Pitkä tiedostonimi katkeaa kolmeen pisteeseen. */
.latauskortti-nimi {
    margin: 0;
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.latauskortti-nimi a {
    color: inherit;
}

.latauskortti-tiedot input {
    width: 100%;
}

.latauskortti-tulos {
    grid-column: 1 / -1;
    min-width: 0;
}

.latauskortti-tulos:not(:empty) {
    margin-top: 12px;
}

.latauskortti-tulos > :last-child {
    margin-bottom: 0;
}

.latauskortti.valmis > .nappi:disabled {
    background: rgba(63, 185, 80, .15);
    box-shadow: none;
    color: var(--onnistui);
    opacity: 1;
    cursor: default;
}

/* Kapealla (puhelin, upotus) Lisää-painike omalle rivilleen koko levyisenä. */
@media (max-width: 420px) {
    .latauskortti {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .latauskortti-esikatselu {
        width: 56px;
        height: 56px;
    }

    .latauskortti > .nappi {
        grid-column: 1 / -1;
        margin-top: 12px;
    }
}

@media (max-width: 760px) {
    /* Puhelimella ei vedetä tiedostoja: etusivun pudotusalue on iso Lisää kuvia -painike. */
    .hero .pudotusalue {
        padding: 0;
        border: 0;
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .hero .pudotusalue:hover,
    .hero .pudotusalue.korostus {
        background: none;
    }

    .hero .pudotusalue-kuvake,
    .hero .pudotusalue-teksti {
        display: none;
    }

    .hero .pudotusalue .nappi {
        flex: 1;
        padding: 15px;
        border-radius: 14px;
        font-size: 16px;
    }

    /* Kokoraja jää näkyviin painikkeen alle. */
    .hero .pudotusalue-raja {
        margin-top: -4px;
        padding-left: 0;
        color: #c4c4c4;
        text-align: center;
    }
}

/* ---------- Upotettava lataus (5.9, lataus/iframe) ---------- */

/* Tiivis ja joustava: toimii noin 300 px levyisenä eikä vaadi tiettyä korkeutta. */
body.upotus {
    min-height: 0;
}

body.upotus main {
    display: grid;
    gap: 14px;
    padding: 14px;
}

body.upotus .logo {
    justify-self: start;
    font-size: 17px;
}

body.upotus .logo b {
    width: 27px;
    height: 27px;
    font-size: 16px;
}

/* Tuloskortit pystyyn. */
body.upotus #uppa {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

body.upotus #uppa:not(:empty) {
    margin-bottom: 0;
}

/* ---------- Kuvasivu ja lava (5.3, 6.4) ---------- */

/* Kaksi saraketta: lava ja 330 px sivupalkki. minmax(0, 1fr), jotta leveä kuva tai pitkä teksti ei levitä saraketta. */
.kuvasivu {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: start;
    gap: 26px;
}

.kuvasivu-paa {
    min-width: 0;
}

/* Lava: tumma pinta, kokolinkit ja koko ruutu yläkulmissa, kuva keskellä luonnollisessa koossaan (ei venytetä,
   enintään lavan levyisenä). Gallerian katselu käyttää samaa rakennetta. */
.lava {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    place-items: center;
    gap: 14px;
    min-height: 380px;
    padding: 14px 14px 28px;
    background: #0b0b0b;
    border: 1px solid #1f1f1f;
    border-radius: 18px;
}

.lava-tyokalut {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    justify-self: stretch;
    min-width: 0;
}

.lava-koot {
    min-width: 0;
}

.lava .koko-ruutu {
    margin-left: auto;
    background: rgba(0, 0, 0, .55);
}

.lava .koko-ruutu:hover {
    background: var(--pinta-2);
}

.lava-linkki {
    display: block;
    max-width: 100%;
    border-radius: 6px;
}

.lava-kuva {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .6);
}

/* Koko ruutu (kuvauppi.js, 6.4; korjattu 22.10.2026): sama, jo ladattu kuva koko näytöllä mustalla pohjalla, keskellä ja
   näyttöön sovitettuna (object-fit: contain); kokolinkit piiloon, painike jää kulmaan poistumista varten. Linkki ja kuva
   sijoitetaan absoluuttisesti koko lavan kokoisiksi (lava display: block) eikä ruudukon raidan venytyksen varaan: jos raita
   ei veny koko leveyteen, kuva jää vasempaan reunaan (käyttäjän havainto 22.10.2026).
   Sama tyyli koskee tilaluokkaa .koko-ruudulla, jonka kuvauppi.js asettaa fullscreenchange-tapahtumassa: oikeaa koko ruutua
   ei voi avata headless-selaimessa (vaatii käyttäjän eleen), joten selaintesti (tests/selain/koko-ruutu.html) tarkistaa
   asettelun luokalla. Luokan position/inset jäljittelee selaimen omaa :fullscreen-tyyliä. */
.lava.koko-ruudulla {
    position: fixed;
    inset: 0;
    z-index: 100;
    margin: 0;
}

.lava:fullscreen,
.lava.koko-ruudulla {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    background: #000;
    border: 0;
    border-radius: 0;
}

.lava::backdrop {
    background: #000;
}

.lava:fullscreen .lava-tyokalut,
.lava.koko-ruudulla .lava-tyokalut {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
}

.lava:fullscreen .lava-koot,
.lava.koko-ruudulla .lava-koot {
    display: none;
}

.lava:fullscreen .lava-linkki,
.lava.koko-ruudulla .lava-linkki {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    border-radius: 0;
}

.lava:fullscreen .lava-kuva,
.lava.koko-ruudulla .lava-kuva {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: 50% 50%;
    border-radius: 0;
    box-shadow: none;
}

/* Kuvaus otsikkona (rivittyy, ks. overflow-wrap perusasettelussa) sekä katselut ja lisäyspäivä. */
.kuvan-otsikko {
    margin: 16px 0 0;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.2px;
}

.kuvan-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 6px 0 0;
    color: var(--himmea);
    font-size: 13px;
}

.lava + .kuvan-meta {
    margin-top: 14px;
}

/* Sivupalkki: Jaa kuva, Kameratiedot ja Lisää oma kuva allekkain. */
.kuvasivu-sivu {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* Linkkirivien nimet samanlevyisiksi, jotta osoitteet alkavat samasta kohdasta. */
.kuvasivu-sivu .linkkirivi-nimi {
    width: 68px;
}

.exif {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 14px;
    margin: 0;
    font-size: 13px;
}

.exif dt {
    color: var(--himmea);
}

.exif dd {
    margin: 0;
    color: #eee;
}

/* Kapealla sivupalkki kuvan alle. */
@media (max-width: 900px) {
    .kuvasivu {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }
}

@media (max-width: 760px) {
    .lava {
        gap: 10px;
        min-height: 0;
        padding: 10px 10px 16px;
        border-radius: 14px;
    }

    /* Neljä kokolinkkiä ja koko ruutu mahtuvat 360 px:n riville 44 px:n kosketusalueilla. */
    .lava-koot > * {
        padding: 4px 9px;
    }
}

/* ---------- Galleria ja katselu (5.4, 5.5) ---------- */

/* Tyhjä galleria: tyylitelty ilmoitus ruudukon paikalla. */
.tyhja-tila {
    margin: 0;
    padding: 56px 20px;
    border: 1px dashed #333;
    border-radius: 16px;
    background: var(--pinta);
    color: var(--himmea);
    font-size: 15px;
    text-align: center;
}

/* Otsikkoalue: nimi ja kuvamäärä vasemmalla, gallerian osoite ja Kopioi-painike oikealla (kapealla alla, rivittyen). */
.galleria-nimi {
    flex: 1 1 280px;
}

.galleria-jaa {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 14px;
    min-width: 0;
}

/* Osoite rivittyy pitkänäkin; täyte tekee linkistä 42 px (puhelimella 44 px) korkean kosketusalueen. */
.galleria-osoite {
    display: inline-block;
    max-width: 100%;
    padding: 11px 0;
    color: #c8c8c8;
    font: 13px/20px var(--tasalevea);
    overflow-wrap: anywhere;
    text-decoration-color: #555;
}

.galleria-osoite:hover {
    color: #fff;
}

/* Ruudukko (malli: osio 3): neljä saraketta, ensimmäinen ruutu iso (2 × 2) ja rytmin pitkät (1 × 2). Kuvat täyttävät
   ruudun (object-fit: cover), ja dense täyttää lyhyen gallerian aukot. sizes-arvot (galleriat/yleisnakyma) vastaavat
   näitä mittoja. */
.galleria-ruudukko {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
    gap: 12px;
}

.galleria-ruutu {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    border-radius: 14px;
    background: var(--pinta-2);
    color: #fff;
    text-decoration: none;
}

.galleria-ruutu.iso {
    grid-column: span 2;
    grid-row: span 2;
}

.galleria-ruutu.pitka {
    grid-row: span 2;
}

.galleria-ruutu img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: opacity .15s;
}

.galleria-ruutu:hover img {
    opacity: .88;
}

/* Kuvaus ruudun alareunassa leijuessa ja fokuksessa, kosketusnäytöllä ja puhelimella aina. Pitkä teksti katkeaa pisteisiin. */
.galleria-kuvaus {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    padding: 28px 12px 9px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .78));
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .15s;
}

.galleria-ruutu:hover .galleria-kuvaus,
.galleria-ruutu:focus-visible .galleria-kuvaus {
    opacity: 1;
}

@media (hover: none) {
    .galleria-kuvaus {
        opacity: 1;
    }
}

/* Katselu: murupolku, lava (kuvasivun rakenne, ks. yllä) nuolineen, tiedot ja pikkukuvanauha. */
.murupolku {
    margin: 0 0 14px;
    color: var(--himmea);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.murupolku a {
    font-weight: 600;
    text-decoration: none;
}

.murupolku a:hover {
    text-decoration: underline;
}

/* Sama korkeus kuvasta toiseen, jottei sivu hypi selattaessa (lavan kuvat ovat enintään 800 px korkeita). */
.katselu .lava {
    min-height: 480px;
}

/* Edellinen ja seuraava: isot pyöreät nuolet lavan reunoilla pystysuunnassa keskellä. */
.lava-nuoli {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-top: -26px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    transition: background-color .15s;
}

.lava-nuoli:hover {
    background: var(--oranssi-painike);
    color: #fff;
}

.lava-nuoli svg {
    width: 24px;
    height: 24px;
}

.lava-nuoli.edellinen {
    left: 14px;
}

.lava-nuoli.seuraava {
    right: 14px;
}

/* Kuvan alla: kuvaus ja katselut vasemmalla, lyhytlinkki ja Avaa kuvasivu oikealla (kapealla allekkain). */
.katselu-tiedot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px 24px;
}

.katselu-teksti {
    flex: 1 1 320px;
    min-width: 0;
}

.katselu-jaa {
    display: flex;
    flex: 0 1 520px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
    margin-top: 16px;
}

.katselu-jaa .linkkirivi {
    flex: 1 1 280px;
    margin: 0;
}

.katselu-jaa .nappi {
    flex: none;
}

/* Pikkukuvanauha: vaakasuunnassa vierittyvä, nykyinen oranssilla reunalla. Täyte jättää tilaa fokusrenkaalle. */
.nauha {
    position: relative;
    display: flex;
    gap: 8px;
    margin-top: 22px;
    padding: 4px 4px 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-color: #444 transparent;
    scrollbar-width: thin;
}

.nauha a {
    display: block;
    flex: none;
    width: 120px;
    height: 80px;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 10px;
    background: var(--pinta-2);
    opacity: .65;
    transition: opacity .15s, border-color .15s;
}

.nauha a:hover {
    opacity: 1;
}

.nauha a[aria-current="true"] {
    border-color: var(--oranssi);
    opacity: 1;
}

.nauha img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

@media (max-width: 1000px) {
    .galleria-ruudukko {
        grid-auto-rows: 160px;
    }
}

@media (max-width: 760px) {
    .galleria-ruudukko {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 130px;
        gap: 8px;
    }

    .galleria-ruutu {
        border-radius: 12px;
    }

    .galleria-kuvaus {
        opacity: 1;
    }

    .galleria-jaa {
        justify-content: flex-start;
    }

    .galleria-osoite {
        padding: 12px 0;
    }

    .katselu .lava {
        min-height: 0;
    }

    .lava-nuoli {
        width: 44px;
        height: 44px;
        margin-top: -22px;
    }

    .lava-nuoli.edellinen {
        left: 8px;
    }

    .lava-nuoli.seuraava {
        right: 8px;
    }

    .katselu-jaa {
        justify-content: stretch;
    }

    .katselu-jaa .nappi {
        flex: 1 1 auto;
    }

    .nauha a {
        width: 96px;
        height: 64px;
    }
}

/* ---------- Omat kuvat ja haku (5.6, 6.1, omat/lista, osat/kuvakortti) ---------- */

/* Työkalurivi: hakulomake vasemmalla ja Näytä-pilleri oikealla; kapealla allekkain. */
.omat-tyokalut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 20px;
}

.omat-haku {
    display: flex;
    flex: 1 1 380px;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    max-width: 640px;
    margin: 0;
}

.omat-haku input {
    flex: 1 1 180px;
    min-width: 0;
}

.omat-nayta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--himmea);
    font-size: 13px;
}

/* Tyhjä tila (ks. galleria): teksti ja Lisää kuva -painike. */
.tyhja-tila > p {
    margin: 0;
}

.tyhja-tila > .nappi {
    margin-top: 16px;
}

/* Ruudukko: 5 saraketta leveällä, välikoossa 4 ja 3, puhelimella 2. sizes-arvo (osat/kuvakortti) vastaa näitä mittoja. */
.omat-ruudukko {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

/* Kortti: kuva, kuvaus, kuvakepainikkeet ja gallerian valinta alareunassa (rivin kortit ovat yhtä korkeita). */
.kuvakortti {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--pinta);
    border: 1px solid var(--reuna);
    border-radius: 14px;
}

.kuvakortti-kuva {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 13px 13px 0 0;
    background: var(--pinta-2);
}

.kuvakortti-kuva img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: opacity .15s;
}

.kuvakortti-kuva:hover img {
    opacity: .88;
}

/* Piilotettu kuva himmennettynä ja harmaana, merkki vasemmassa yläkulmassa. */
.kuvakortti.piilotettu .kuvakortti-kuva img {
    filter: grayscale(.8) brightness(.5);
}

.kuvakortti-merkki {
    position: absolute;
    top: 8px;
    left: 8px;
    pointer-events: none;
}

.kuvakortti-tiedot {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 10px 12px 12px;
}

/* Kuvaus yhdellä rivillä: ylipitkä (myös välilyönnitön) katkeaa kolmeen pisteeseen. */
.kuvakortti-kuvaus {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #eee;
    font-size: 13.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kuvakortti-kuvaus.tyhja {
    color: var(--himmea);
    font-weight: 500;
}

/* Kuvakepainikkeet tasaleveinä; piilotettu Kopioi (ilman JS:ää) ei vie paikkaa. Kosketuslaitteilla ks. kosketusaluelohko. */
.kuvakortti-toiminnot {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(36px, 1fr));
    gap: 6px;
}

.kuvakortti-toiminnot form {
    display: flex;
    min-width: 0;
    margin: 0;
}

.kuvakortti-toiminnot .kuvakenappi {
    width: 100%;
}

.kuvakenappi.korostettu {
    background: rgba(255, 78, 0, .15);
    border-color: rgba(255, 78, 0, .4);
    color: var(--oranssi-vaalea);
}

.kuvakenappi.korostettu:hover {
    background: rgba(255, 78, 0, .25);
    color: #fff;
}

/* Kopioitu (kuvauppi.js): kuvake vaihtuu hetkeksi vihreäksi rastiksi. */
.kuvakenappi .kuvake-valmis {
    display: none;
}

.kuvakenappi.kopioitu {
    border-color: rgba(63, 185, 80, .5);
    color: var(--onnistui);
}

.kuvakenappi.kopioitu .kuvake-valmis {
    display: block;
}

.kuvakenappi.kopioitu .kuvake-perus {
    display: none;
}

/* Muokkaa kuvausta: <details>, jonka lomake avautuu painikerivin alle kortin levyisenä paneelina. Summary on lohkotason
   ruudukko, jottei rivin alle jää tekstirivin väliä; suljetun lomakkeen piilotus ei jätä asettelua selaimen varaan. */
.kuvakortti-muokkaa {
    min-width: 0;
}

.kuvakortti-muokkaa > summary {
    display: grid;
    list-style: none;
}

.kuvakortti-muokkaa:not([open]) > form {
    display: none;
}

.kuvakortti-muokkaa > summary::-webkit-details-marker {
    display: none;
}

.kuvakortti-muokkaa[open] > summary {
    background: #2e2e2e;
    border-color: var(--oranssi);
    color: #fff;
}

.kuvakortti-muokkaa > form {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 5;
    display: grid;
    gap: 8px;
    padding: 10px;
    background: var(--pinta-2);
    border: 1px solid #333;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}

.kuvakortti-muokkaa label {
    color: #c8c8c8;
    font-size: 12.5px;
    font-weight: 600;
}

.kuvakortti-muokkaa input[type="text"] {
    width: 100%;
}

/* Gallerian valinta kortin alareunassa: valinta ja Sijoita rinnakkain, kapealla allekkain. */
.kuvakortti-galleria {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: auto 0 0;
}

.kuvakortti-galleria select {
    flex: 3 1 96px;
    min-width: 0;
    padding: 8px 10px;
    font-size: 13px;
}

.kuvakortti-galleria .nappi {
    flex: 1 0 auto;
    padding: 8px 12px;
    font-size: 13px;
}

/* Usean kuvan siirto (6.2): toimintorivi ruudukon yläpuolella ja kortin valintaruutu oikeassa yläkulmassa. Valittu kortti
   saa oranssin ääriviivan (luokka valittu kuvauppi.js:stä; :has varmistaa saman ilman sitä). */
.omat-valitut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 0 0 16px;
    padding: 10px 12px;
    background: var(--pinta);
    border: 1px solid var(--reuna);
    border-radius: 12px;
}

.omat-valitut-laskuri {
    margin-right: 4px;
    color: var(--himmea);
    font-size: 13.5px;
    font-weight: 600;
}

.omat-valitut select {
    flex: 0 1 240px;
    min-width: 0;
}

.kuvakortti.valittu,
.kuvakortti:has(> .kuvakortti-valinta > input:checked) {
    outline: 2px solid var(--oranssi);
}

/* Label on 44 × 44 px:n kosketusalue; itse ruutu on 22 px ja istuu alueen yläkulmaan (8 px reunasta kuten mallissa). */
.kuvakortti-valinta {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    cursor: pointer;
}

.kuvakortti-valinta input {
    appearance: none;
    display: block;
    width: 22px;
    height: 22px;
    margin: 0;
    background: rgba(0, 0, 0, .5);
    border: 1.5px solid #ddd;
    border-radius: 7px;
    cursor: pointer;
}

.kuvakortti-valinta input:checked {
    background: var(--oranssi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2 8.8-9.2'/%3E%3C/svg%3E") center / 16px no-repeat;
    border-color: var(--oranssi);
}

@media (max-width: 760px) {
    .omat-valitut select {
        flex: 1 1 140px;
    }
}

@media (max-width: 1100px) {
    .omat-ruudukko {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .omat-ruudukko {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .omat-ruudukko {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .kuvakortti-tiedot {
        padding: 8px 10px 10px;
    }

    .omat-haku {
        flex-basis: 100%;
    }
}

/* ---------- Gallerioiden hallinta (5.7, galleriat/hallinta) ---------- */

/* Tyhjän tilan toinen kappale (kehotus) erillisenä rivinä. */
.tyhja-tila > p + p {
    margin-top: 6px;
    font-size: 14px;
}

/* Luo galleria -kortti ruudukon yläpuolella: leveällä kentät ja Luo rinnakkain (kuvaus kentän korkuisena, venytettävissä),
   puhelimella allekkain. */
.galleria-luonti {
    margin-bottom: 24px;
}

.galleria-luonti h2 {
    margin: 0 0 12px;
    font-size: 17px;
}

.galleria-luonti form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
    align-items: end;
    gap: 14px;
    margin: 0;
}

.galleria-luonti .lomakerivi {
    margin: 0;
}

.galleria-luonti textarea {
    height: 43px;
    min-height: 43px;
}

/* Ruudukon sarakkeet vähintään 260 px (kortissa on painikkeita ja osoite): 1200 px:n sisällössä neljä. sizes-arvo
   (galleriat/hallinta) vastaa näitä mittoja. */
.ruudukko.galleriat {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

/* Galleriakortti (Omat kuvat -kortin tyyliin): kansikuva, nimi ja määrä, minikuvat, osoite ja Kopioi sekä poistot alareunassa
   (rivin kortit ovat yhtä korkeita). */
.galleriakortti {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--pinta);
    border: 1px solid var(--reuna);
    border-radius: 14px;
}

.galleriakortti-kansi {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 13px 13px 0 0;
    background: var(--pinta-2);
}

.galleriakortti-kansi img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: opacity .15s;
}

.galleriakortti-kansi:hover img {
    opacity: .88;
}

/* Tyhjä galleria: pelkkä pinta ja himmeä kuvake. */
.galleriakortti-kansi.tyhja {
    display: grid;
    place-items: center;
    color: #4d4d4d;
}

.galleriakortti-kansi.tyhja svg {
    width: 40px;
    height: 40px;
}

.galleriakortti-tiedot {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 12px 14px 14px;
}

/* Nimi yhdellä rivillä: ylipitkä (myös välilyönnitön) katkeaa kolmeen pisteeseen, kuvamäärä pysyy näkyvissä. */
.galleriakortti-nimi {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
    letter-spacing: 0;
}

.galleriakortti-nimi a {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.galleriakortti-nimi a:hover {
    text-decoration: underline;
}

.galleriakortti-maara {
    flex: none;
    color: var(--himmea);
    font-size: 13px;
    font-weight: 500;
}

/* Minikuvat (mini on enintään 50 × 50 px): kuusi saraketta ja näkymä tulostaa enintään 12 kuvaa, joten nauha on enintään
   kaksi riviä joka leveydellä. Jokainen tulostettu kuva näkyy: lazy-lataus hakisi myös overflow-rajauksen piilottamat. */
.galleriakortti-minit {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 48px));
    gap: 6px;
    overflow: hidden;
}

.galleriakortti-minit img {
    display: block;
    width: 100%;
    max-width: none;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 7px;
    background: var(--pinta-2);
}

/* Osoite yhdellä rivillä pisteisiin katkaistuna (koko osoite on linkissä ja kopioituu painikkeella). */
.galleriakortti-jaa {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.galleriakortti-jaa .galleria-osoite {
    display: block;
    overflow: hidden;
    font-size: 12.5px;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Poistot alareunassa erotettuina; kapeassa kortissa allekkain. Eivät oransseja (toissijainen ja vaarallinen). */
.galleriakortti-poisto {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--reuna);
}

.galleriakortti-poisto form {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.galleriakortti-poisto .nappi {
    flex: 1;
}

@media (max-width: 760px) {
    .galleria-luonti form {
        grid-template-columns: minmax(0, 1fr);
    }

    .galleria-luonti textarea {
        height: auto;
    }
}

/* ---------- Tekstisivut (5.9, sivut/info ja sivut/ohjelmat) ---------- */

/* Luettava teksti .sisalto.kapea-säiliössä: väliotsikoille tilaa, listoille oranssit merkit. */
.teksti h1 {
    margin-bottom: 16px;
}

.teksti h2 {
    margin: 36px 0 12px;
}

.teksti ul,
.teksti ol {
    margin: 0 0 1em;
    padding-left: 22px;
}

.teksti li {
    margin-bottom: 8px;
    padding-left: 4px;
}

.teksti li::marker {
    color: var(--oranssi-vaalea);
}

.teksti ol > li::marker {
    font-weight: 700;
}

.teksti strong {
    color: #fff;
}

.teksti code {
    padding: 1px 6px;
    border: 1px solid var(--reuna);
    border-radius: 6px;
    background: var(--pinta-2);
    color: #eee;
}

/* Ohjelmat: kortit allekkain väliotsikoiden alla. */
.teksti .kortti {
    margin-bottom: 16px;
    padding: 20px;
}

.kortti.ohjelma > h3 {
    margin-bottom: 12px;
}

/* QR-koodi ja ohje rinnakkain, kapealla allekkain. QR-kuvassa on oma valkoinen pohjansa. */
.ohjelma-qr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
}

.ohjelma-qr img {
    flex: none;
    border-radius: 8px;
}

.ohjelma-qr p {
    flex: 1 1 220px;
    min-width: 0;
    margin: 0;
}

/* Ohjekuvat rinnakkain luonnollisessa koossaan; kapealla ne pienenevät samassa suhteessa. */
.ohjelma-kuvat {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ohjelma-kuvat > * {
    flex: 0 1 auto;
    min-width: 0;
}

.ohjelma-kuvat a {
    display: block;
    border-radius: 10px;
}

.ohjelma-kuvat img {
    display: block;
    border: 1px solid var(--reuna);
    border-radius: 10px;
}

@media (max-width: 760px) {
    .teksti .kortti {
        padding: 16px;
    }
}

/* ---------- Tunnussivut (5.8, tunnukset/*) ---------- */

/* Kirjaudu, Rekisteröidy, Salasana unohtunut ja Vaihda salasana: näkymä täyttää yläpalkin alapuolen, taustalla himmeä
   mosaiikki ja keskellä lasimainen kortti. Yläpalkki on kiinteä tumma kuten muillakin sivuilla (5.1). */
body.tunnus {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}

body.tunnus main {
    display: grid;
    flex: 1 0 auto;
}

.tunnus-nakyma {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    padding: 48px var(--sivumarginaali);
    overflow: hidden;
}

.tunnus-kortti {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    padding: 26px 24px 20px;
    background: rgba(28, 28, 28, .88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-color: #333;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.tunnus-kortti .logo {
    margin-bottom: 18px;
}

.tunnus-kortti h1 {
    margin: 0 0 4px;
    font-size: 24px;
    letter-spacing: -.4px;
}

.tunnus-saate {
    margin: 0 0 20px;
    color: var(--himmea);
    font-size: 14px;
}

/* Muista minut ja Salasana unohtunut? samalla rivillä; kapealla ne rivittyvät. */
.tunnus-valinnat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 14px;
    margin: 2px 0 18px;
    font-size: 13.5px;
}

.valintaruutu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ccc;
    cursor: pointer;
}

.valintaruutu input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.tunnus-valinnat a {
    font-weight: 600;
}

.tunnus-nappi {
    width: 100%;
    min-height: 46px;
    font-size: 15px;
}

/* Linkki toiseen toimintoon kortin alaosassa (malli: "Ei vielä tunnusta? Rekisteröidy"). */
.tunnus-ala {
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--reuna);
    color: var(--himmea);
    font-size: 14px;
    text-align: center;
}

.tunnus-ala a {
    color: #fff;
    font-weight: 700;
}

.tunnus-ala a:hover {
    color: var(--oranssi-vaalea);
}

/* Asetukset: tavallinen sivu, lomake kortissa. */
.asetukset-kortti {
    max-width: 480px;
    padding: 22px;
}

.lomake-ohje {
    margin: -4px 0 18px;
    color: var(--himmea);
    font-size: 13px;
}

/* Ilmoita sisällöstä (DSA, 22.10.2026): lomake kortissa, pitkä vakuutus valintaruudun vieressä ylälaitaan tasattuna. */
.ilmoitus-kortti {
    padding: 22px;
}

.ilmoitus-kortti h1 {
    margin-bottom: 14px;
}

.ilmoitus-vakuutus {
    align-items: flex-start;
    margin: 4px 0 18px;
    line-height: 1.45;
}

.ilmoitus-vakuutus input {
    flex: none;
    margin-top: 1px;
}

/* Ilmoita sisällöstä -linkki kuvasivun sivupalkissa ja gallerian katselussa: pieni ja himmeä. */
.ilmoita-linkki {
    align-self: flex-start;
    color: var(--himmea);
    font-size: 13px;
    text-decoration: underline;
}

.ilmoita-linkki:hover {
    color: #fff;
}

@media (max-width: 760px) {
    .tunnus-nakyma {
        padding: 24px var(--sivumarginaali);
    }

    .tunnus-kortti {
        padding: 22px 18px 16px;
    }

    .asetukset-kortti {
        padding: 18px 16px;
    }
}

/* ---------- Virhesivut (5.9, errors/*, layouts/erillinen) ---------- */

/* Keskitetty kortti: iso virhekoodi korostusliukuna, viesti ja painike etusivulle. Toimii molemmilla pohjilla. */
.virhesivu {
    display: grid;
    place-items: center;
    padding: clamp(40px, 12vh, 120px) var(--sivumarginaali) 64px;
}

.virhekortti {
    width: 100%;
    max-width: 440px;
    padding: 32px 28px;
    border-radius: 20px;
    text-align: center;
}

.virhekortti .virhekoodi {
    margin: 0 0 10px;
    background: var(--korostusliuku);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 72px;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1;
}

.virhekortti p {
    margin: 0 0 22px;
    color: #c8c8c8;
}

@media (max-width: 760px) {
    .virhekortti {
        padding: 26px 18px;
    }

    .virhekortti .virhekoodi {
        font-size: 60px;
    }
}

/* ---------- Puhelin (4.2, 4.4) ---------- */

@media (max-width: 760px) {
    :root {
        --sivumarginaali: 16px;
    }

    h1 {
        font-size: 24px;
    }

    .sivu-otsikko h1 {
        font-size: 22px;
    }
}

/* Kosketusalue vähintään 44 × 44 px (min-* voittaa komponenttien kiinteän koon). */
@media (max-width: 760px), (pointer: coarse) {
    .logo,
    .nappi,
    .kuvakenappi,
    .kayttajavalikko summary,
    .valikko-paneeli a,
    .valikko-paneeli button,
    .pilleri > *,
    .linkkirivi .kopioi,
    .sivutus > a,
    .sivutus > .aktiivinen {
        min-height: 44px;
    }

    .kuvakenappi,
    .pilleri > *,
    .linkkirivi .kopioi,
    .sivutus > a,
    .sivutus > .aktiivinen {
        min-width: 44px;
    }

    /* Kentät: valinta (esim. Omat kuvat -kortin galleria) ja tekstimäiset kentät (haku, kuvaus, tunnuslomakkeet).
       Valintaruudut ja -napit eivät kuulu tähän: niiden kosketusalue mitoitetaan erikseen. */
    select,
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]):not(.linkkirivi-osoite) {
        min-height: 44px;
    }

    /* Omat kuvat -kortin kuvakepainikkeet rivittyvät 44 px:n sarakkeisiin (360 px:n puhelimella 2 × 2). */
    .kuvakortti-toiminnot {
        grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
    }

    /* Galleriakortin nimilinkki: kosketusalue 44 px korkea asettelua muuttamatta (yläpuolella on sama linkki kansikuvana). */
    .galleriakortti-nimi a {
        min-width: 44px;
        margin: -12px 0;
        padding: 12px 0;
    }

    /* Tunnuskortti: Muista minut -valinta (etiketti on valintaruudun kosketusalue) ja Salasana unohtunut? 44 px korkeina,
       alaosan linkki 44 px korkeana asettelua muuttamatta. */
    .valintaruutu,
    .tunnus-valinnat a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .tunnus-valinnat {
        margin-top: -4px;
        margin-bottom: 12px;
    }

    .tunnus-ala a {
        display: inline-block;
        min-width: 44px;
        margin: -12px 0;
        padding: 12px 0;
    }

    .ilmoita-linkki {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}