/* ---------------------------------------------------------------------------
   Ateljé Plus: sivustokohtainen ilme (ladataan kirjaston CSS:n jälkeen)

   Värit asetetaan suoraan kirjaston --kp-*-muuttujiin, jotta sivuston omaan
   teemaan (Divi) ei tule uusia muuttujia. Ateljén beige (#C4B195) on
   tunnusväri, mutta valkoinen teksti ei kestä sitä taustana, joten napeissa
   on tummennettu ruskea.
   --------------------------------------------------------------------------- */
:root {
  --kp-primary:    #7A6650;
  --kp-primary-2:  #5C4C3B;
  --kp-on-primary: #fff;
  --kp-dark:       #2E2620;
  --kp-on-dark:    #EFE8DD;
  --kp-surface:    #fff;
  --kp-surface-2:  #F7F4EF;
  --kp-text:       #3D3D3D;
  --kp-heading:    #2A2420;
  --kp-muted:      #6F665C;
  --kp-border:     #E6DED2;
  --kp-font:       'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --atelje-beige:   #C4B195;
  --atelje-beige-2: #E9E1D3;
  --atelje-otsikko: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* Divi lisää otsikoille ja kappaleille alapehmusteen ja oman rivivälin.
   Paneelin ja lomakkeiden sisällä käytetään kirjaston mitoitusta. */
.kp-root h1, .kp-root h2, .kp-root h3, .kp-root h4 { padding-bottom: 0; line-height: 1.2; }
/* Otsikkofontti kuten esikatselussa. Ei väriä: kirjasto värittää otsikot itse.
   Kampanjanauhan otsikko jää leipätekstin fonttiin. */
.kp-root h1, .kp-root h2, .kp-root h3 { font-family: var(--atelje-otsikko); font-weight: 500; }
.kp-root .kp-kampanja h3, .kp-root .kp-kampanja h4 { font-family: var(--kp-font); font-weight: 700; }
.kp-root p { padding-bottom: 0; }

.kp-avaus__pallo { background: var(--atelje-beige); color: #2A2420; }
.kp-accent { display: none; }
.kp-navi button::before { display: none; }
.kp-navi button[aria-current="page"] { color: var(--kp-primary); }

/* 50 € -modaali: otsikko saa rivittyä (9.10.2026: pidempi arviokäyntiotsikko). */
@media (min-width: 861px) {
  .kp-tarjous--modaali { width: min(720px, calc(100vw - 32px)); }
  .kp-tarjous--modaali h3 { font-size: 28px; text-wrap: balance; }
}

/* ---------------------------------------------------------------------------
   Shortkoodien lomakkeet
   --------------------------------------------------------------------------- */
.atelje-plus-osio { font-family: var(--kp-font); color: var(--kp-text); }
.atelje-plus-osio--tausta { background: var(--atelje-beige-2); padding: 80px 0; }
.atelje-plus-osio__kaari { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.atelje-plus-osio--tausta .atelje-plus-osio__kaari { box-sizing: border-box; }
.atelje-plus-osio__paa { margin: 0 0 30px; }
.atelje-plus-osio__paa h2 {
  font-family: var(--atelje-otsikko); font-weight: 500; color: var(--kp-heading);
  font-size: clamp(28px, 4vw, 44px); line-height: 1.16; margin: 0 0 14px; padding: 0;
}
.atelje-plus-osio__paa p { font-size: 18px; line-height: 1.7; margin: 0; padding: 0; max-width: 660px; }

/* Selkeät reunat (Valtteri 9.10.2026): kortilla näkyvä reuna ja varjo, kentillä ja
   valintakorteilla tummempi reuna kuin kirjaston vaalea --kp-border. Vain sivun
   lomakkeissa, paneeli pysyy ennallaan. */
.atelje-plus-osio {
  --atelje-reuna: #CBBDA6;
  --atelje-kentta-reuna: #B3A48D;
}
.atelje-plus-osio .kp-lomake {
  border: 1px solid var(--atelje-reuna);
  box-shadow: 0 2px 6px rgba(42,36,32,.06), 0 22px 48px -26px rgba(42,36,32,.45);
}
.atelje-plus-osio .kp-kentta input,
.atelje-plus-osio .kp-kentta textarea,
.atelje-plus-osio .kp-kentta select { border: 1.5px solid var(--atelje-kentta-reuna); background: #fff; }
.atelje-plus-osio .kp-kentta input:focus,
.atelje-plus-osio .kp-kentta textarea:focus,
.atelje-plus-osio .kp-kentta select:focus { border-color: var(--kp-primary); }
/* Valittu ja hover-kortti pitävät kirjaston korostusreunan. */
.atelje-plus-osio .kp-kortti:not([aria-pressed="true"]):not(:hover) { border-color: var(--atelje-reuna); }
.atelje-plus-osio .kp-lomake__sisalto { padding: 22px 30px 28px; }
.atelje-plus-osio .kp-edistyminen { padding: 0 30px; margin-top: 22px; }
.atelje-plus-osio .kp-vaihelaskuri { padding-left: 30px; padding-right: 30px; }
.atelje-plus-osio .kp-lomake h3 { font-size: 24px; }

/* Pääpainike keskellä, Takaisin vasemmassa reunassa. */
.atelje-plus-osio .kp-toiminnot-rivi { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.atelje-plus-osio .kp-toiminnot-rivi .kp-btn--hiljainen { grid-column: 1; justify-self: start; }
.atelje-plus-osio .kp-toiminnot-rivi .kp-btn:not(.kp-btn--hiljainen) {
  grid-column: 2; margin-left: 0; min-width: 180px; justify-content: center;
}
.atelje-plus-osio .kp-valitse-virhe { text-align: center; }

/* Ilman taustaa (Ota yhteyttä -sivu ja etusivun viestiosio): Divin rivi on niillä koko
   näytön levyinen ilman reunuksia, joten lomake rajataan itse keskelle ja sille annetaan
   väliä ylös ja alas. Otsikko keskellä ja isompana, jotta lomake erottuu (Valtteri 9.10.2026). */
.atelje-plus-osio:not(.atelje-plus-osio--tausta) .atelje-plus-osio__kaari {
  max-width: 780px; margin: 0 auto; padding: 88px 24px 104px; box-sizing: border-box;
}
.atelje-plus-osio:not(.atelje-plus-osio--tausta) .kp-lomake__sisalto { padding: 40px 44px 44px; }
.atelje-plus-osio:not(.atelje-plus-osio--tausta) .kp-lomake h3 {
  font-size: clamp(28px, 3.2vw, 38px); text-align: center; margin-bottom: 10px;
}
.atelje-plus-osio:not(.atelje-plus-osio--tausta) .kp-lomake__ohje {
  text-align: center; font-size: 16px; margin-bottom: 26px;
}

@media (max-width: 640px) {
  .atelje-plus-osio--tausta { padding: 56px 0; }
  .atelje-plus-osio__kaari { padding: 0 16px; }
  .atelje-plus-osio .kp-lomake__sisalto { padding: 18px 18px 22px; }
  .atelje-plus-osio .kp-edistyminen { padding: 0 18px; margin-top: 18px; }
  .atelje-plus-osio .kp-vaihelaskuri { padding-left: 18px; padding-right: 18px; }
  .atelje-plus-osio .kp-lomake h3 { font-size: 21px; }
  .atelje-plus-osio:not(.atelje-plus-osio--tausta) .atelje-plus-osio__kaari { padding: 56px 16px 64px; }
  .atelje-plus-osio:not(.atelje-plus-osio--tausta) .kp-lomake__sisalto { padding: 26px 20px 28px; }
  .atelje-plus-osio:not(.atelje-plus-osio--tausta) .kp-lomake h3 { font-size: 27px; }
  .atelje-plus-osio .kp-toiminnot-rivi { grid-template-columns: 1fr; justify-items: center; gap: 6px; }
  .atelje-plus-osio .kp-toiminnot-rivi .kp-btn:not(.kp-btn--hiljainen) { grid-column: 1; grid-row: 1; }
  .atelje-plus-osio .kp-toiminnot-rivi .kp-btn--hiljainen { grid-column: 1; grid-row: 2; justify-self: center; }
  /* Kolmen kuvakortin vaihe vaakariveinä: kuva vasemmalla, teksti oikealla. */
  .atelje-plus-osio .kp-kortit--kuvat:has(> :last-child:nth-child(3)) { grid-template-columns: 1fr; }
  .atelje-plus-osio .kp-kortit--kuvat:has(> :last-child:nth-child(3)) .kp-kortti--kuva { flex-direction: row; text-align: left; }
  .atelje-plus-osio .kp-kortit--kuvat:has(> :last-child:nth-child(3)) .kp-kortti--kuva img { width: 42%; flex: none; }
  .atelje-plus-osio .kp-kortit--kuvat:has(> :last-child:nth-child(3)) .kp-kortti__nimi { padding: 10px 14px; font-size: 14.5px; }
}