/* ==========================================================
   mod_bhg_howto - "Jak to funguje" / cislovane kroky
   Scopovano pod .bhg-howto, stavi na BHG design tokenech
   (merlot / heritage / grain). Pozadi sekce se ocekava svetle.

   Rozlozeni: jedna vodorovna rada. Kdyz se nevejde, rada
   se posouva (horizontalni scroll) - kroky se NESKLADAJI pod sebe.
   ========================================================== */

.bhg-howto {
  --howto-badge-size: 92px;
  --howto-icon-size: 36px;
  --howto-num-size: 30px;
  --howto-item-w: 200px;              /* zakladni (preferovana) sirka kroku */
  --howto-item-min: 152px;            /* min. sirka - pod ni se rada posouva */
  --howto-gap: clamp(10px, 2.2vw, 22px);

  /* Akcent (ikona, cislo, nadpis kroku) - default merlot */
  --howto-accent: var(--c-merlot-400);
  /* Podklad kruhu = tepla bezova, bez okraje */
  --howto-badge-bg: var(--c-grain-100);
  /* Text uvnitr tmaveho cisla */
  --howto-num-fg: var(--c-surface);
  /* Barva spojovaci sipky - tlumeny odstin akcentu na svetlem podkladu */
  --howto-arrow: color-mix(in srgb, var(--howto-accent) 40%, var(--c-surface));
}

/* Varianty akcentu ---------------------------------------- */
.bhg-howto--merlot   { --howto-accent: var(--c-merlot-400); }
.bhg-howto--heritage { --howto-accent: var(--c-heritage-400); }
.bhg-howto--ember    { --howto-accent: var(--c-ember-400); }
.bhg-howto--forest   { --howto-accent: var(--c-forest-400); }

/* Sirka kroku podle zvoleneho poctu sloupcu --------------- */
.bhg-howto--cols-2 { --howto-item-w: 240px; --howto-item-min: 180px; }
.bhg-howto--cols-3 { --howto-item-w: 200px; --howto-item-min: 152px; }
.bhg-howto--cols-4 { --howto-item-w: 176px; --howto-item-min: 140px; }

/* Nadpis sekce -------------------------------------------- */
.bhg-howto__heading {
  color: var(--c-merlot-400);
  font-size: var(--typo-h3-fs);
  line-height: var(--typo-h3-lh);
  font-weight: var(--typo-w-head);
  margin: 0 0 clamp(28px, 5vw, 56px);
}

.bhg-howto__heading--start  { text-align: left; }
.bhg-howto__heading--center { text-align: center; }

/* Rada kroku - vodorovny scroll pri preteceni -------------- */
.bhg-howto__list {
  list-style: none;
  margin: 0;
  padding: 10px 0 6px;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--howto-gap);
  justify-content: safe center;      /* vejde-li se, na stred; jinak od zacatku */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

/* Jemny scrollbar */
.bhg-howto__list::-webkit-scrollbar {
  height: 6px;
}

.bhg-howto__list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--howto-accent) 25%, transparent);
  border-radius: 3px;
}

/* Jedna polozka (krok) ------------------------------------ */
.bhg-howto__item {
  position: relative;
  /* roste do plne sirky (roztazeno); zaklad = --howto-item-w;
     nescvrkne se pod min-width, pak se rada zacne posouvat */
  flex: 1 1 var(--howto-item-w);
  min-width: var(--howto-item-min);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0;
  scroll-snap-align: center;
}

/* Zarovnani vlevo (varianta --start) */
.bhg-howto--start .bhg-howto__item {
  align-items: flex-start;
  text-align: left;
}

.bhg-howto--start .bhg-howto__text {
  margin-inline: 0;
}

/* Odznak = bezovy kruh s ikonou (bez okraje) -------------- */
.bhg-howto__badge {
  position: relative;
  width: var(--howto-badge-size);
  height: var(--howto-badge-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--howto-badge-bg);
  margin-bottom: 20px;
}

.bhg-howto__icon {
  display: inline-flex;
  color: var(--howto-accent);
}

.bhg-howto__icon svg {
  display: block;
  width: var(--howto-icon-size);
  height: var(--howto-icon-size);
}

/* Poradove cislo - tmavy kruh pres levy horni okraj odznaku */
.bhg-howto__num {
  position: absolute;
  top: -2px;
  left: -2px;
  width: var(--howto-num-size);
  height: var(--howto-num-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--howto-accent);
  color: var(--howto-num-fg);
  font-size: var(--typo-c1-fs);
  line-height: 1;
  font-weight: var(--typo-w-head);
  box-shadow: 0 0 0 3px var(--c-surface);
}

/* Nadpis kroku -------------------------------------------- */
.bhg-howto__title {
  color: var(--howto-accent);
  font-size: var(--typo-s2-fs);
  line-height: var(--typo-s2-lh);
  font-weight: var(--typo-w-sub);
  margin: 0 0 8px;
}

/* Font nadpisu - vzdy z tokenu, nikdy natvrdo zapsana rodina */
.bhg-howto--font-head .bhg-howto__title { font-family: var(--cassiopeia-font-family-headings); }
.bhg-howto--font-body .bhg-howto__title { font-family: var(--cassiopeia-font-family-body); }

/* Popisek kroku ------------------------------------------- */
.bhg-howto__text {
  color: var(--color-text-muted);
  font-size: var(--typo-c1-fs);
  line-height: var(--typo-c1-lh);
  font-weight: var(--typo-w-body);
  max-width: 26ch;
  margin: 0 auto;
}

/* Spojovaci sipka mezi kroky (samostatny flex prvek) ------- */
.bhg-howto__connector {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: calc(var(--howto-badge-size) / 2);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--howto-arrow);
  pointer-events: none;
}

.bhg-howto__connector svg {
  display: block;
  width: 56px;
  height: 24px;
}