/* Lidé a směr
   Stránka skládá existující prvky z homepage a o-skupine.css.
   Zde jsou pouze pravidla pro jejich rozložení, ne nový vizuální systém. */

/* Navy pás hlavičky s claimem (.about-top, .about-claim__*) je sdílený
   s Historií, viz o-skupine.css. Tady zůstává jen to, co má vlastní
   jen tato stránka. */

/* Vize a mise jsou dva bloky jednoho pásu. Zlatý vlas mezi nimi je stejný
   předěl jako pod herem — čte se, že mise navazuje na vizi, ne že jde
   o další sekci. Kotvy #vize a #mise míří dovnitř pásu, proto odsazení
   pod lepící se navigaci. */
.people-vm {
  display: grid;
  gap: clamp(44px, 5.4vw, 78px);
}

.people-vm > .o-skupine-3 {
  scroll-margin-top: 82px;
}

.people-vm__rule {
  display: block;
  height: 1px;
  background: rgba(216, 161, 58, .35);
}

/* Hlavička sekce už nemá pravý sloupec s perexem, takže dvousloupcová
   mřížka z .about-strategy__head odsunula nadpis doprostřed pásu. Očko
   a nadpis stojí pod sebou. */
.people-direction .about-strategy__head {
  display: block;
}

.people-direction .about-strategy__head .about-h2 {
  margin-top: clamp(14px, 1.6vw, 22px);
}

.people-direction .about-h2 {
  max-width: 19ch;
}

/* Tři karty vedle sebe. .about-vision z /o-skupine/ má mřížku na čtyři
   položky, tady jsou tři — jinak se komponenta .avis přebírá celá. */
.people-direction__cards {
  margin: clamp(38px, 4.2vw, 64px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}

/* Karty tu nikam nevedou, takže nesmí reagovat na kurzor: na /o-skupine/
   se .avis nadzvedla, fotka přijela blíž a kolečko dostalo zlatý prstenec,
   což slibuje klik. Vypnutá je i tranzice, ať nezůstane cesta bez cíle. */
@media (hover: hover) {

  .people-direction__cards .avis:hover {
    transform: none;
    border-color: rgba(8, 25, 47, .1);
  }

  .people-direction__cards .avis:hover .avis__img,
  .people-direction__cards .avis:hover .avis__ico {
    transform: none;
  }

  .people-direction__cards .avis:hover .avis__ico {
    box-shadow:
      0 0 0 4px #fff,
      0 0 0 4px rgba(216, 161, 58, 0);
  }

  .people-direction__cards .avis:hover .p-ico {
    color: var(--gold);
  }
}

.people-direction__cards .avis,
.people-direction__cards .avis__img,
.people-direction__cards .avis__ico {
  transition: none;
}

/* Závěrečné CTA stojí na béžovém pásu, ne na navy: po tmavých principech
   by třetí tmavý blok v řadě stránku uzavřel „do noci“. Text je proto
   v tmavých rolích pro papír. */
.people-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(20px, 2.4vw, 32px);
}

.people-cta__title {
  max-width: 26ch;
}

.people-cta__text {
  max-width: 62ch;
  margin: 0;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.72;
  color: var(--ink-soft);
}

.people-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--gold);
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--navy);
  transition: color .25s ease;
}

.people-cta__link:hover,
.people-cta__link:focus-visible {
  color: var(--gold-on-paper);
}

.people-cta__link span {
  font-size: 1.35em;
  line-height: 1;
  transition: transform .25s ease;
}

@media (hover: hover) {
  .people-cta__link:hover span {
    transform: translateX(4px);
  }
}

@media (max-width: 1000px) {
  .people-direction__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .people-direction__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .people-cta__link span {
    transition: none;
  }
}