/* Yhteystietokortti (contact card), 15.9.2026. Uudelleenkaytettava
   komponentti: sama merkkaus joka sivulla, ei sivukohtaista
   erikoismerkkausta. Ensimmainen kaytto: palvelujen yhteyshenkilo
   Palvelut- ja Yhteystiedot-sivuilla. Suunniteltu myos Lab-sivun
   tulevaa henkilostoosiota varten (.ccards-ruudukko).

   Merkkaus:
     <div class="ccard" itemscope itemtype="https://schema.org/Person">
       <img class="ccard-img" src="…" alt="" width="96" height="96">
           valokuva, tai paikkamerkki assets/logos/contact-placeholder.svg
       <div class="ccard-body">
         <p class="ccard-lb">Service contact</p>           valinnainen nimio
         <p class="ccard-name" itemprop="name">Nimi</p>
         <p class="ccard-role">Rooli, yksikko</p>          valinnainen
         <p class="ccard-desc">Lyhyt kuvaus.</p>           valinnainen
         <dl class="ccard-dl">
           <div><dt>Email</dt><dd><a href="mailto:…" itemprop="email">…</a></dd></div>
           <div><dt>Phone</dt><dd><a href="tel:+…" itemprop="telephone">…</a></dd></div>
         </dl>
       </div>
     </div>
   Useampi kortti rinnakkain: <div class="ccards"> kortit </div>.
   Ladataan subpage.css:n (tai styles.css:n) jalkeen niilla sivuilla,
   joilla kortti on. Kaikki tokenit colors_and_type.css:sta. */
.ccard{display:grid;grid-template-columns:96px 1fr;gap:24px;align-items:start;max-width:640px;margin:24px 0 0;padding:24px;background:var(--aic-neutral-50);border-top:2px solid var(--aic-blue-900)}
.ccard-img{display:block;width:96px;height:96px;object-fit:cover;background:var(--aic-neutral-100)}
.ccard-body{min-width:0}
.ccard-body p{margin:0}
.ccard-body .ccard-lb{font-family:var(--font-display-narrow);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--aic-neutral-600);margin:0 0 6px}
.ccard-name{font-family:var(--font-display);font-size:20px;font-weight:600;line-height:1.3;color:var(--aic-blue-900)}
.ccard-body .ccard-role{font-size:15px;line-height:1.45;color:var(--aic-neutral-700);margin-top:2px}
.ccard-body .ccard-desc{font-size:15px;line-height:1.5;color:var(--aic-neutral-700);margin-top:8px;max-width:52ch}
.ccard-dl{margin:14px 0 0;padding:0}
.ccard-dl div{display:grid;grid-template-columns:minmax(72px,auto) 1fr;gap:12px;padding:6px 0;border-top:1px solid var(--color-border-default);align-items:baseline}
.ccard-dl dt{font-family:var(--font-display-narrow);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--aic-neutral-600)}
.ccard-dl dd{margin:0;font-size:16px;line-height:1.5;color:var(--aic-neutral-700);overflow-wrap:anywhere}
.ccard-dl a{color:var(--aic-blue-900)}
.ccard-dl a:hover{color:var(--aic-orange-900)}
/* Kortin jalkeen tuleva huomautus saa saman valin kuin .facts+.note. */
.ccard+.note{margin-top:24px}
/* Ruudukko useammalle kortille (henkilostoosio). */
.ccards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:24px}
.ccards .ccard{max-width:none;margin:0}
@media(max-width:599.98px){
  .ccard{grid-template-columns:72px 1fr;gap:16px;padding:20px 18px}
  .ccard-img{width:72px;height:72px}
  .ccard-name{font-size:18px}
  .ccard-dl div{grid-template-columns:1fr;gap:2px}
}