/* ==========================================================
   mod_deer_perks - USP / benefity rada

   ARCHITEKTURA (DEER):
   - Hook tridy .deer-perks__* nesou jen STRUKTURU (layout, rozmery,
     pozicovani) na bezne specificite.
   - Vychozi VZHLED (typografie, barvy) je v :where(...) = nulova
     specificita, takze jakakoli utilita v poli administrace
     (typo-*, ff-*, text-*, fw-*, mb-*) prebije default BEZ !important.
   - Barva jde z --perk-accent (token), font z --ff-mono (token).
   ========================================================== */

/* --- STRUKTURA -------------------------------------------------- */

.deer-perks {
  --perk-badge-size: 64px;
  --perk-icon-size: 60%;
  --perk-accent: var(--world-nest);
}

/* Akcent = hover barvy hero modulu (jen nastavuji promennou) */
.deer-perks--nest  { --perk-accent: var(--world-nest); }
.deer-perks--roots { --perk-accent: var(--world-roots); }
.deer-perks--apple { --perk-accent: var(--world-apple); }
.deer-perks--none  { --perk-accent: var(--c-surface); }

.deer-perks__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.deer-perks--start .deer-perks__item {
  align-items: flex-start;
}

/* Cislovana varianta - mensi odznak */
.deer-perks--number {
  --perk-badge-size: 44px;
}

.deer-perks__badge {
  width: var(--perk-badge-size);
  height: var(--perk-badge-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
}

.deer-perks--number .deer-perks__badge {
  border-radius: 12px;
}

/* --- VYCHOZI VZHLED (prebitelny utilitami) ---------------------- */

:where(.deer-perks__badge) {
  margin-bottom: 1rem;
  color: var(--perk-accent);
  background: color-mix(in srgb, var(--perk-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--perk-accent) 22%, transparent);
}

:where(.deer-perks__badge svg) {
  display: block;
  width: auto;
  height: var(--perk-icon-size);
  max-width: 100%;
  max-height: 100%;
}

:where(.deer-perks__num) {
  font-family: var(--ff-mono);
  font-size: var(--typo-c1-fs);
  line-height: 1;
  font-weight: var(--typo-w-head);
  letter-spacing: 0.02em;
}

:where(.deer-perks__title) {
  margin-bottom: 0.5rem;
  color: var(--perk-accent);
  font-family: var(--ff-mono);
  font-size: var(--typo-c1-fs);
  line-height: var(--typo-c1-lh);
  font-weight: var(--typo-w-sub);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

:where(.deer-perks__text) {
  margin-bottom: 0;
  max-width: 34ch;
  margin-inline: auto;
  color: var(--c-forest-100);
  font-size: var(--typo-c1-fs);
  line-height: var(--typo-c1-lh);
  font-weight: var(--typo-w-body);
}

.deer-perks--start :where(.deer-perks__text) {
  margin-inline: 0;
}