/* Esiintymiset: etusivun kortit (article.card.tapahtuma.esiintyminen ottaa sanomalehtityylin globaalista article.tapahtuma-säännöstä) ja jäsensivun lomake. */
.esiintyminen-lisaa{margin:0 0 .9rem}
.esiintyminen-lisaa .btn{display:inline-block}

/* Esiintymiskortti: juliste isona vasemmalla (44 %), tiedot isolla serif-tekstillä oikealla; juliste koko leveydellä ylhäällä mobiilissa. */
article.esiintyminen{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 30px;margin:0 0 2rem;min-width:0}
article.esiintyminen::before{grid-column:1/-1}
article.esiintyminen:has(.esiintyminen-juliste){grid-template-columns:minmax(0,44%) minmax(0,1fr);align-items:stretch}
.esiintyminen-juliste{display:block;align-self:start}
.esiintyminen-juliste img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;border:1px solid var(--soft);box-shadow:0 4px 12px rgba(28,27,24,.15);background:#fff}
.esiintyminen-tiedot{display:flex;flex-direction:column;min-width:0;overflow-wrap:break-word}
article.esiintyminen .esiintyminen-tiedot h2{margin:0 0 1.1rem;font:700 clamp(1.8rem,3.2vw,2.6rem)/1.08 var(--head);hyphens:manual;-webkit-hyphens:manual;text-wrap:balance}
.esiintyminen-tiedot dl{display:flex;flex-direction:column;gap:1.1rem;margin:0}
.esiintyminen-rivi{min-width:0}
.esiintyminen-tiedot dt{font:700 .72rem/1.4 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:0 0 .15rem}
.esiintyminen-tiedot dd{margin:0;min-width:0}
.esiintyminen-aika{font:700 clamp(1.9rem,3.2vw,2.5rem)/1.12 var(--head);color:var(--ink)}
.esiintyminen-paiva,.esiintyminen-kello,.esiintyminen-paikka,.esiintyminen-osoite{display:block}
.esiintyminen-paikka{font:600 clamp(1.4rem,2.5vw,1.9rem)/1.2 var(--head);color:var(--ink)}
.esiintyminen-osoite{margin-top:.25rem;font:italic 400 1rem/1.4 var(--head)}
.esiintyminen-kartta{display:inline-block;max-width:100%;box-sizing:border-box;margin-top:.8rem;padding:.55rem .9rem;border:2px solid var(--ink);background:transparent;color:var(--ink);font:700 .72rem/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.esiintyminen-kartta:hover,.esiintyminen-kartta:focus-visible{background:var(--ink);color:var(--paper)}
.esiintyminen-kuvaus{margin:0 0 1.2rem;font-size:1.12rem;line-height:1.55}
.esiintyminen-toiminnot{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:1.1rem 0 0;font-size:.85rem}
.esiintyminen-toiminnot form{margin:0}
.esiintyminen-poista button{font:600 .7rem/1.3 var(--ui);padding:.35rem .6rem}
/* Ei julistetta: tiedot koko leveydellä, Milloin ja Missä rinnakkain */
@media (min-width:601px){
  article.esiintyminen.esiintyminen-ei-julistetta .esiintyminen-tiedot dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.5rem}
}
/* Leveä näyttö: juliste vuorotellen oikealla */
@media (min-width:1001px){
  article.esiintyminen.esiintyminen-oikea:has(.esiintyminen-juliste){grid-template-columns:minmax(0,1fr) minmax(0,44%)}
  article.esiintyminen.esiintyminen-oikea .esiintyminen-juliste{grid-column:2;grid-row:2}
  article.esiintyminen.esiintyminen-oikea .esiintyminen-tiedot{grid-column:1;grid-row:2}
}
/* Keskileveä: juliste 40 % */
@media (max-width:1000px){
  article.esiintyminen:has(.esiintyminen-juliste){grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:16px 22px}
}
/* Mobiili: juliste koko leveydellä ylhäällä, tiedot alla */
@media (max-width:600px){
  article.esiintyminen:has(.esiintyminen-juliste){grid-template-columns:minmax(0,1fr)}
  .esiintyminen-juliste{max-width:100%}
  .esiintyminen-tiedot h2{margin-bottom:.8rem}
}

.esiintymiset{min-width:0}
.esiintymiset h1{margin-top:0}
.esiintymiset-form{padding:1rem;min-width:0;max-width:46rem}
.esiintymiset-form h2{margin-top:0}
.esiintymiset-form .kentta{margin:0 0 .9rem;min-width:0}
.esiintymiset-form label{display:block;font:600 .8rem/1.4 var(--ui);margin-bottom:.25rem}
.esiintymiset-form .valinn{font-weight:400;color:var(--muted)}
.esiintymiset-form input[type=text],.esiintymiset-form input[type=date],.esiintymiset-form input[type=time],.esiintymiset-form input[type=file],.esiintymiset-form textarea{width:100%;max-width:100%;box-sizing:border-box;font-size:1rem}
.esiintymiset-form .rivi2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 1rem}
.esiintymiset-form .ohje{font:.75rem/1.4 var(--ui);color:var(--muted);margin:.25rem 0 0}
.esiintymiset-form .esikatselu img{display:block;max-width:220px;max-height:300px;width:auto;height:auto;margin-top:.5rem;border:1px solid var(--soft)}
.esiintymiset-form .nykyinen-juliste{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:.5rem}
.esiintymiset-form .nykyinen-juliste img{height:auto;border:1px solid var(--soft)}
.esiintymiset-form .valinta{display:inline-flex;gap:.4rem;align-items:center;font-weight:400}
.esiintymiset-form .esiintyminen-napit{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0 0}
.esiintyminen-ilmoitus,.esiintyminen-virhe{margin:0 0 1rem;padding:.6rem .8rem;border:2px solid var(--ink);background:#fff;font:600 .9rem/1.4 var(--ui)}
.esiintyminen-ilmoitus.ok{border-color:var(--teal);color:var(--teal)}
.esiintyminen-ilmoitus.virhe,.esiintyminen-virhe{border-color:var(--red);color:var(--red)}
.esiintymiset-lista-otsikko{margin:1.6rem 0 .8rem}
@media (max-width:600px){.esiintymiset-form .rivi2{grid-template-columns:minmax(0,1fr)}}
/* Kapea näyttö: päivämäärä- ja kellokenttien sisältö (esim. "07:00 PM" + kuvake) mahtuu kenttään */
@media (max-width:380px){.esiintymiset-form input[type=date],.esiintymiset-form input[type=time]{font-size:.85rem;padding-left:.35rem;padding-right:.25rem}}