/* Kumppanigalleria (public/galleria.php) — "vitriini": tummanvihreä paneeli,
   valkoiset logolaatat ja kultaiset korostukset. Laatan koko kertoo tason:
   Premium puolet rivistä ja kaksinkertainen korkeus, Plus kolmannes, Kumppani kuudesosa. */

@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fontit/dm-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113;
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fontit/dm-sans-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;
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(fontit/space-grotesk-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113;
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(fontit/space-grotesk-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 {
  --tumma: #213c24;
  --tumma-2: #2e5232;
  --reuna-tumma: #4a782a;
  --vaalea-vihrea: #dce8c8;
  --lehti: #b9d089;
  --keltainen: #f2c300;
  --otsikkofontti: "Space Grotesk", "DM Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; font: 16px/1.5 "DM Sans", system-ui, sans-serif; color: var(--vaalea-vihrea); }
.galleriasivu:not(.upotus) { padding: 24px 16px; }
.galleriasivu.upotus { background: transparent; }   /* isäntäsivun tausta näkyy pyöristettyjen kulmien takaa */
/* Upotettuna isäntäsivun ikkuna venyy sisällön mukana (upotus.js) */
html.venyy { overflow: hidden; }

.vitriini {
  max-width: 880px; margin: 0 auto; padding: 32px;
  display: flex; flex-direction: column; gap: 24px;
  background: var(--tumma); border-radius: 20px;
}
.vitriini-ylaosa { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 20px; flex-wrap: wrap; }
.ylarivi { margin: 0 0 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--keltainen); }
h1 { margin: 0; font: 700 34px/1.1 var(--otsikkofontti); color: #fff; }

.suotimet { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--tumma-2); }
.suotimet a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--vaalea-vihrea); text-decoration: none;
}
.suotimet a:hover { color: #fff; }
.suotimet a[aria-current="true"] { background: var(--keltainen); color: var(--tumma); }

/* Jokainen taso omalla rivillään, laatat vasemmalta oikealle. Leveydet: Premium 2,
   Plus 3 ja Kumppani 6 riviin (12 px välein). */
.tasot { display: flex; flex-direction: column; gap: 12px; }
.laatat { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; }
.laatta {
  position: relative; flex: 0 0 calc((100% - 60px) / 6); height: 84px;
  display: flex; align-items: center; justify-content: center; padding: 10px;
  background: #fff; border: 3px solid transparent; border-radius: 14px;
  color: var(--tumma); text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.laatta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.laatta[aria-expanded="true"] { border-color: var(--keltainen); }
.laatta:focus-visible, .suotimet a:focus-visible, .tiedot a:focus-visible { outline: 3px solid var(--keltainen); outline-offset: 2px; }
.laatta img { display: block; width: 86%; height: 72%; object-fit: contain; }   /* pieni logo venyy laatan kokoiseksi */
.laatta-nimi { font: 700 13px/1.2 var(--otsikkofontti); text-align: center; overflow-wrap: anywhere; }

.taso-plus { flex-basis: calc((100% - 24px) / 3); padding: 14px 18px; }
.taso-plus img { height: 64%; }
.taso-plus .laatta-nimi { font-size: 20px; }

.taso-premium { flex-basis: calc((100% - 12px) / 2); height: 180px; padding: 30px 26px 22px; }
.taso-premium img { width: 80%; height: 62%; }
.taso-premium .laatta-nimi { font-size: 30px; }
.laatta-merkki {
  position: absolute; top: 12px; left: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--tumma); color: var(--keltainen);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

.laatta.liity {
  background: transparent; border: 1.5px dashed var(--reuna-tumma);
  color: var(--keltainen); font-size: 13px; font-weight: 700; line-height: 1.3; text-align: center; padding: 6px;
}
.laatta.liity:hover { color: #fff; box-shadow: none; }

#tiedot { display: contents; }   /* piilotetut tiedot eivät jätä väliä ruudukon alle */
.tiedot {
  display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px 24px; align-items: start;
  padding: 22px 24px; background: var(--tumma-2); border: 1px solid var(--reuna-tumma); border-radius: 16px;
}
.tiedot-teksti { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tiedot-otsikko { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; }
.tiedot h2 { margin: 0; font: 700 24px/1.2 var(--otsikkofontti); color: #fff; }
.tasomerkki {
  padding: 3px 10px; border-radius: 999px; background: var(--keltainen); color: var(--tumma);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.toimiala { margin: 0; font-size: 14px; font-weight: 600; color: var(--lehti); }
.esittely { margin: 0; font-size: 15px; line-height: 1.55; color: #fff; }
.tiedot-toiminnot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 14px; }
.www { color: var(--keltainen); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.www:hover { color: #fff; }
.sulje {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--reuna-tumma); color: #fff; font-weight: 700; text-decoration: none;
}
.sulje:hover { background: var(--tumma); }

.tyhja { margin: 0; padding: 32px; text-align: center; border: 1.5px dashed var(--reuna-tumma); border-radius: 14px; }

@media (max-width: 640px) {
  .vitriini { padding: 22px 16px; gap: 18px; border-radius: 16px; }
  h1 { font-size: 28px; }
  /* Puhelimella Premium ja Plus täysi leveys (Premium korkeampi), Kumppani puolikas */
  .tasot, .laatat { gap: 10px; }
  .laatta { flex-basis: calc((100% - 10px) / 2); height: 76px; }
  .taso-premium { flex-basis: 100%; height: 160px; padding: 26px 20px 16px; }
  .taso-plus { flex-basis: 100%; }
  .taso-premium .laatta-nimi { font-size: 26px; }
  .tiedot { grid-template-columns: 1fr; padding: 18px; }
  .tiedot-toiminnot { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .laatta { transition: none; }
  .laatta:hover { transform: none; }
}