/* Brandbook-osio — kaksi esimerkkiohjeistoa (Paneeli Outlet, Kasvukonstit).
   Ks. inc/brandbook.php. Osio on graafinen-ilme-sivun toinen työnäyte
   gallerian alla: galleria näyttää että tunnuksia syntyy moneen tyyliin,
   brandbook näyttää mitä ostaja saa tunnuksen mukana — värit, typografian
   ja käyttösäännöt yhtenä järjestelmänä.

   Fontit ovat teeman omalla palvelimella (assets/fontit/), eivät Googlelta:
   näytefontit on upotettava, muuten typografianäyte näyttäisi eri fontilla
   eri laitteilla. Century Gothic ja Corbel ovat asiakkaiden lisensoituja
   fontteja — niitä ei jaeta, joten näyte nojaa järjestelmäfonttiin ja
   Questrialiin (Century Gothicin vapaa vastine). */

/*
 * ⚠ TÄSSÄ ON swap, VAIKKA MUUALLA ON optional.
 *
 * Teeman omat fontit (theme.json) ovat `optional`: jos fontti ei ehdi,
 * käytetään varafonttia eikä vaihdeta — silloin sivulle ei tule
 * asettelusiirtymää. Brändikirjaston fonttinäytteissä sääntö on
 * päinvastainen: niissä fontti EI ole tyyliä vaan sisältöä. Näyte, joka
 * näyttää Arialia ja väittää olevansa Poppins, on virheellinen tieto.
 * Siksi täällä odotetaan oikeaa fonttia ja vaihdetaan kun se saapuu.
 */

@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fontit/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fontit/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fontit/lato-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Questrial'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fontit/questrial-400.woff2') format('woff2');
}

.brandbookit { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 44px); }

/* Landeri antaa jokaiselle <section>ille pystypehmusteen mutta 0 vaakaa
   (.landeri-sisalto section{padding:… 0}) — vaakasuunta hoituu normaalisti
   .wrapilla. Tämä osio on suora shortcode-lohko ilman .wrapia, joten
   annetaan sille sama vaakapehmuste itse. Valitsin on .landeri-sisalto-
   scopattu, jotta se voittaa teeman section-säännön tarkkuudessa. */
.landeri-sisalto .brandbookit { padding-inline: clamp(20px, 5vw, 72px); }

.brandbookit-otsikko { max-width: 64ch; }
.brandbookit-kick {
  font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  color: #8a7a52; font-weight: 600; margin: 0;
}
.brandbookit-otsikko h2 {
  color: #1c1c22; font-weight: 800; font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -.02em; margin: 14px 0 0; text-wrap: balance;
}
.brandbookit-johto {
  color: #55555f; font-size: clamp(15px, 1.4vw, 16.5px); line-height: 1.6;
  margin: 14px 0 0; max-width: 62ch;
}

/* Yksi ohjeistokortti. Värit tulevat inline-muuttujina PHP:stä, jotta sama
   rakenne piirtyy kunkin brändin omilla sävyillä. */
.bb {
  --tausta: #241608; --korostus: #bb994a; --teksti: #f3e9da; --himmea: #b79b78;
  background: radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--tausta) 80%, #fff 5%) 0%, var(--tausta) 58%);
  border-radius: 24px; padding: clamp(28px, 4vw, 56px); color: var(--teksti);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; gap: clamp(28px, 3.6vw, 44px);
}

.bb-paa { display: flex; justify-content: space-between; align-items: flex-start; gap: 36px; }
.bb-paa-teksti { max-width: 60ch; }
.bb-kick { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--korostus); font-weight: 600; margin: 0; }
.bb-paa h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -.02em; margin: 12px 0 0; color: #fff; }
.bb-johto { color: var(--himmea); font-size: 15.5px; margin: 14px 0 0; line-height: 1.6; }
.bb-logo {
  flex: 0 0 auto; width: clamp(150px, 20vw, 220px); height: 140px; background: #f6f5f1; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; padding: 22px; box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .5);
}
.bb-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bb-logo.on-oma { padding: 0; overflow: hidden; }
.bb-logo.on-oma img { width: 100%; height: 100%; object-fit: cover; }

.bb-osa h3 {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--korostus); font-weight: 600;
  margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--korostus) 26%, transparent);
}
.bb-osa-selite { color: var(--teksti); font-size: 15.5px; line-height: 1.6; max-width: 68ch; opacity: .92; margin: 0; }
.bb-versiot-intro { margin-top: 14px; opacity: .8; font-size: 14px; }

.bb-versiot { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 22px; }
.bb-v { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.bb-v-kuva {
  background: #f6f5f1; border-radius: 12px; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.bb-v-kuva img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bb-v figcaption { text-align: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--himmea); }

.bb-kaksi { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 54px); }
.sw-lista { display: flex; flex-direction: column; gap: 20px; }
.sw { display: flex; gap: 16px; align-items: flex-start; }
.sw-lappu { width: 56px; height: 56px; border-radius: 11px; flex: 0 0 auto; }
.sw-tiedot { min-width: 0; }
.sw-yla { display: flex; align-items: baseline; gap: 10px; }
.sw-yla .sw-rooli { font-size: 14.5px; color: #fff; font-weight: 700; }
.sw-yla .sw-hex { font-size: 11.5px; color: var(--himmea); font-family: ui-monospace, monospace; }
.sw-nimi { display: block; font-size: 11.5px; color: var(--himmea); letter-spacing: .02em; margin-top: 2px; }
.sw-selite { color: var(--teksti); opacity: .82; font-size: 13px; line-height: 1.5; margin-top: 6px; max-width: 40ch; }

.fr { padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.fr:last-child { border-bottom: 0; }
.fr-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.fr-meta .fr-nimi { font-size: 15px; color: #fff; font-weight: 700; }
.fr-meta .fr-tiedot { font-size: 10.5px; color: var(--himmea); letter-spacing: .03em; text-transform: uppercase; text-align: right; }
.fr-nayte { font-size: clamp(20px, 2.3vw, 27px); color: var(--teksti); line-height: 1.15; }
.fr-selite { color: var(--teksti); opacity: .8; font-size: 12.5px; line-height: 1.5; margin-top: 8px; max-width: 46ch; }

.kr-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kr b { display: block; color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.kr p { color: var(--teksti); opacity: .82; font-size: 13px; line-height: 1.55; margin: 0; }

@media (max-width: 820px) {
  .bb-kaksi, .kr-lista { grid-template-columns: 1fr; }
  .bb-paa { flex-direction: column; }
  .bb-logo { width: clamp(150px, 44vw, 200px); }
}