/* ===================================================================
   Yhteystiedot — oman yhteystietosivun tyylit

   Kaikki säännöt on rajattu .yt-juureen, samasta syystä kuin
   seo-asiantuntija.css:ssä: main.css:n .reveal h2::after -tyyppiset
   säännöt osuvat samoihin elementteihin samalla spesifisyydellä.

   HUOM: tässä tiedostossa ei ole yhtään paljasta ".yt a" -sääntöä.
   Se olisi spesifisyydeltään (0,1,1) ja voittaisi main.css:n
   .btn-gold-säännön (0,1,0), jolloin kultanapin teksti jäisi creamiksi
   kullalla eli noin 1,9:1. Linkkivärit asetetaan aina luokkakohtaisesti.
   =================================================================== */

.yt {
  --yt-gap: clamp(28px, 4vw, 56px);

  /* Paikalliset tummennukset creamin päälle. Teeman --gold-deep yltää
     creamilla 4,2:1 ja --ink-mute 4,4:1, eli molemmat jäävät alle WCAG
     AA:n 4,5:1 rajan pienellä tekstillä. Tämän sivun kaikki pikkuteksti
     (kanavaotsikot, laatikoiden h3, selitteet) on juuri sitä kokoa.
     Tokeneita ei muuteta globaalisti, koska ne vaikuttaisivat koko
     sivustoon kerralla. 4,78:1 ja 4,81:1. */
  --yt-gold-teksti: #806741;
  --yt-mute:        #55706A;
}

/* ---------- Hero ---------- */
.yt .yt-hero {
  background: var(--green-deep);
  color: var(--on-dark);
  padding: clamp(28px, 4vw, 48px) 0 clamp(64px, 8vw, 110px);
}
.yt .yt-hero .breadcrumbs { margin-bottom: clamp(32px, 5vw, 56px); }

.yt .yt-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: var(--yt-gap);
  align-items: center;
}

.yt .yt-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-soft);
}
.yt .yt-eyebrow .dash { width: 28px; height: 1px; background: var(--gold); display: block; }

.yt .yt-hero h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 18px 0 24px;
  color: var(--on-dark);
  max-width: 18ch;
}
.yt .yt-hero h1 em { font-style: italic; color: var(--gold-soft); }

/* Vastauskappale. Sivun tärkein tekstilohko: hakutuloksen tietopala ja
   kielimallin poiminta tulevat tästä, joten puhelinnumero ja sähköposti
   ovat nimenomaan tässä eivätkä vasta alempana. */
.yt .yt-vastaus {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.65;
  color: var(--on-dark-soft);
  border-left: 2px solid var(--gold);
  padding-left: 22px;
  margin: 0 0 32px;
  max-width: 58ch;
}
.yt .yt-vastaus a {
  color: var(--gold-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.yt .yt-vastaus a:hover { color: var(--cream); }

.yt .yt-hero-napit { display: flex; flex-wrap: wrap; gap: 14px; }

/* Henkilökortti. Pieni, koska kävijä tuli hakemaan numeroa eikä kuvaa.
   Kasvot kuitenkin kertovat kenelle soittaa, mikä laskee kynnystä. */
.yt .yt-kortti {
  margin: 0;
  background: rgba(247, 242, 232, .04);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}
.yt .yt-kortti img {
  display: block;
  width: 96px; height: 112px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(184, 155, 110, .32);
}
.yt .yt-kortti-teksti { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.yt .yt-kortti-teksti strong {
  font-family: 'Fraunces', serif;
  font-size: 1.12rem; font-weight: 400; color: var(--on-dark);
}
.yt .yt-kortti-teksti span { font-size: .84rem; color: var(--on-dark-mute); }

/* ---------- Suorat kanavat ---------- */
.yt .yt-kanavat {
  background: var(--cream);
  color: var(--ink);
  padding: clamp(48px, 6vw, 80px) 0;
}
.yt .yt-kanavalista {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.yt .yt-kanavalista li {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 20px;
  border-top: 2px solid var(--gold);
  min-width: 0;
}
.yt .yt-kanava-label {
  font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--yt-gold-teksti);
}
.yt .yt-kanava-arvo {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.2;
  color: var(--green);
  /* Pitkä sähköpostiosoite ei saa työntää saraketta leveämmäksi. */
  overflow-wrap: anywhere;
}
a.yt-kanava-arvo:hover { color: var(--gold-deep); }
.yt .yt-kanavalista p {
  font-size: .9rem; line-height: 1.55; color: var(--yt-mute); margin: 0;
}

/* ---------- Lomakeosio ---------- */
.yt .yt-viesti {
  background: var(--green);
  color: var(--on-dark);
  padding: clamp(64px, 8vw, 110px) 0;
}
.yt .yt-viesti-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.yt .yt-viesti h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.15; letter-spacing: -.01em;
  margin: 14px 0 20px;
  color: var(--on-dark);
}
.yt .yt-viesti h2 em { font-style: italic; color: var(--gold-soft); }
.yt .yt-viesti .lead {
  font-size: 1.05rem; line-height: 1.65;
  color: var(--on-dark-mute); margin: 0 0 40px; max-width: 48ch;
}

.yt .yt-askeleet {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 26px;
}
.yt .yt-askeleet li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--border-dark);
}
.yt .yt-askel-num {
  grid-row: 1 / span 2;
  font-family: 'Fraunces', serif;
  font-size: 1.35rem; line-height: 1; color: var(--gold);
}
.yt .yt-askeleet strong { font-size: 1rem; color: var(--on-dark); }
.yt .yt-askeleet p {
  margin: 6px 0 0; font-size: .92rem; line-height: 1.6; color: var(--on-dark-mute);
}

/* main.css:n .section-dark p värjää kappaleet vaaleiksi (--on-dark-mute).
   Lomake on cream-pohjainen kortti saman tumman osion sisällä, joten sen
   oma huomautusteksti jäi 1,9:1 kontrastiin creamilla. Kolmiosainen
   valitsin (0,3,1) voittaa .section-dark p:n (0,1,1). */
.yt .yt-viesti .contact-form p,
.yt .yt-viesti .contact-form .form-note { color: var(--yt-mute); }

/* Lomakkeen perustyylit tulevat main.css:n .contact-form-säännöistä.
   Täällä vain poistetaan sivupalkkimainen leijuva reunus, joka osuisi
   kahden sarakkeen gridissä viereiseen tekstiin. */
.yt .yt-form { position: relative; }
.yt .yt-form::before { inset: -8px -8px 8px 8px; }
.yt .lp-rivi { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.yt .lp-hunaja {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Yritys- ja laskutustiedot ---------- */
.yt .yt-tiedot {
  background: var(--cream-soft);
  color: var(--ink);
  padding: clamp(64px, 8vw, 100px) 0;
}
.yt .yt-osio-otsikko {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  line-height: 1.2; letter-spacing: -.01em;
  margin: 0 0 clamp(32px, 4vw, 48px);
  color: var(--green);
}
/* Kaksi laatikkoa, ei kolmea: laskutusosoitetta ei näytetä sivulla.
   Kolmen sarakkeen ruudukko jättäisi yhden solun tyhjäksi. Leveys on
   rajattu, ettei kahdesta laatikosta veny 1240 pikseliä leveitä. */
.yt .yt-tiedot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
  max-width: 880px;
}
.yt .yt-tietolaatikko {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 34px);
}
.yt .yt-tietolaatikko h3 {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--yt-gold-teksti);
  margin: 0 0 20px;
}
/* column-gap on nolla tarkoituksella: dt ja dd ovat erillisiä
   ruudukkosoluja, joilla kummallakin on oma border-top. Väli katkaisisi
   viivan jokaisen rivin keskeltä. Väli tehdään siksi dd:n padding-leftillä. */
.yt .yt-tietolaatikko dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  column-gap: 0;
}
.yt .yt-tietolaatikko dt {
  font-size: .82rem; color: var(--yt-mute);
  padding: 9px 0; border-top: 1px solid var(--border);
}
.yt .yt-tietolaatikko dd {
  margin: 0; text-align: right;
  font-family: 'Fraunces', serif; font-size: 1rem; color: var(--green);
  padding: 9px 0 9px 20px; border-top: 1px solid var(--border);
  overflow-wrap: anywhere;
}
.yt .yt-tietolaatikko dt:first-of-type,
.yt .yt-tietolaatikko dd:first-of-type { border-top: 0; }
.yt .yt-tietolaatikko dd a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.yt .yt-tietolaatikko dd a:hover { color: var(--gold-deep); }

.yt .yt-osoite {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem; line-height: 1.7; color: var(--green); margin: 0;
}
.yt .yt-osoite-huom {
  margin: 18px 0 0; padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: .86rem; line-height: 1.6; color: var(--yt-mute);
}

/* ---------- UKK ---------- */
.yt .yt-ukk {
  background: var(--cream);
  color: var(--ink);
  padding: clamp(64px, 8vw, 100px) 0;
}
.yt .yt-ukk-lista { max-width: 860px; }
.yt .yt-ukk-lista details {
  border-top: 1px solid var(--border);
  padding: 0;
}
.yt .yt-ukk-lista details:last-child { border-bottom: 1px solid var(--border); }
.yt .yt-ukk-lista summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: 'Fraunces', serif;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.35;
  color: var(--green);
}
.yt .yt-ukk-lista summary::-webkit-details-marker { display: none; }
.yt .yt-ukk-lista summary::after {
  content: '';
  position: absolute; right: 8px; top: 50%;
  width: 11px; height: 11px;
  margin-top: -7px;
  border-right: 1.5px solid var(--gold-deep);
  border-bottom: 1.5px solid var(--gold-deep);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.yt .yt-ukk-lista details[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}
.yt .yt-ukk-lista summary:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.yt .yt-ukk-lista details p {
  margin: 0 0 24px;
  padding-right: 44px;
  font-size: .97rem; line-height: 1.7; color: var(--ink-soft);
  max-width: 68ch;
}


/* ---------- Responsiivisuus ---------- */
@media (max-width: 1000px) {
  .yt .yt-viesti-grid  { grid-template-columns: minmax(0, 1fr); }
}

/* Kanavia on kolme. Kahden sarakkeen välitila jättäisi yhden kortin
   orvoksi omalle rivilleen, joten kolmesta siirrytään suoraan yhteen. */
@media (max-width: 760px) {
  .yt .yt-kanavalista { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  /* Kortti otsikon jälkeen: kävijä tuli hakemaan numeroa, joten H1 ja
     vastauskappale saavat ensimmäisen ruudun. Kortti kutistuu samalla
     yhden rivin tunnisteeksi, ettei se vie koko näkymää. */
  .yt .yt-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .yt .yt-kortti {
    order: 1;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px; padding: 14px;
  }
  .yt .yt-kortti img { width: 64px; height: 74px; }
  .yt .yt-hero h1 { max-width: none; }
}

@media (max-width: 640px) {
  .yt .yt-tiedot-grid { grid-template-columns: minmax(0, 1fr); }
  .yt .lp-rivi        { grid-template-columns: minmax(0, 1fr); }
  .yt .yt-hero-napit .btn { width: 100%; justify-content: center; }
  .yt .yt-tietolaatikko dl { grid-template-columns: minmax(0, 1fr); }
  .yt .yt-tietolaatikko dt { padding-bottom: 0; border-top: 1px solid var(--border); }
  .yt .yt-tietolaatikko dd { text-align: left; padding: 2px 0 9px; border-top: 0; }
  .yt .yt-ukk-lista details p { padding-right: 0; }
}