/* ===================== Sdílené komponenty sekcí =====================
   Opakující se prvky z Figmy. Barvu textu nenastavují (dědí ze sekce),
   sekce je dolaďují modifikátory / kontextem. */

/* Eyebrow — titulek sekce: lime tečka + uppercase label */
.mm-web-eyebrow {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 26px;
  margin: 0;
  font-family: "Founders Grotesk", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 26px;
  text-transform: uppercase;
}
.mm-web-eyebrow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot-bg, var(--lime));
  flex-shrink: 0;
}
.mm-web-eyebrow--purple { --dot-bg: var(--purple-muted); }
.mm-web-eyebrow--blue   { --dot-bg: var(--blue-muted); }
.mm-web-eyebrow--green  { --dot-bg: var(--green-muted); }


/* Heading — nadpis sekce (32px, např. „Vystoupili u nás", „Nadcházející akce") */
.mm-web-heading {
  margin: 0;
  font-family: "Founders Grotesk", system-ui, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
}

/* Link — podtržený textový odkaz uvnitř odstavců */
.mm-web-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}
.mm-web-link:hover { text-decoration: none; }

/* Lead — velký úvodní odstavec sekce */
.mm-web-lead {
  margin: 0;
  font-family: "Founders Grotesk", system-ui, sans-serif;
  font-size: clamp(28px, 3.34vw, 48px); /* 48 px na 1440 */
  line-height: 1.1;
  font-weight: 400;
}

/* Mark — zvýrazněné slovo v lead textu (barevný podklad, tmavý text).
   inline-block s výškou 1.042em = 50 px při 48px fontu (dle Figmy): box je
   nižší než řádek (1.1em), takže mezi podklady řádků zůstává mezera, a
   line-height = height text uvnitř vertikálně vycentruje. Bez Y paddingu —
   prvek nezvětšuje řádkování. Fráze uvnitř se nezalamuje (jako ve Figmě). */
.mm-web-mark {
  display: inline-block;
  height: 1.042em;
  /* menší line-height než height = štítek se posune dolů pod text
     (text drží účaří odstavce) → optické vycentrování vč. dotahů („g").
     Posun = (height − line-height) / 2; menší hodnota = štítek níž. */
  line-height: 0.95em;
  padding: 0 0.17em;
  color: var(--fg-base);
  border-radius: 4px;
  /* Pozadí jako gradient kvůli scroll animaci výplně (GSAP animuje
     background-size 0 % → 100 % zleva). Default = vyplněno (fallback
     bez JS / reduced-motion). */
  background-color: transparent; /* vypnout žlutý UA default <mark> */
  background-image: linear-gradient(var(--mark-bg), var(--mark-bg));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
}
.mm-web-mark--blue   { --mark-bg: var(--blue-muted); }
.mm-web-mark--green  { --mark-bg: var(--green-muted); }
.mm-web-mark--lime   { --mark-bg: var(--lime); }
.mm-web-mark--purple { --mark-bg: var(--purple-muted); }

/* Btn — pill tlačítko (lime) */
.mm-web-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 32px;
  border: 0;
  border-radius: 100px;
  background: var(--lime);
  color: var(--fg-base);
  font-family: "Inter Display", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none; /* btn může být i <a> */
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}
/* hover: jednotně přes všechny barvy — černý fill 8 % nad barvu tlačítka
   (inset stín se vykreslí nad pozadím, ale pod textem; drží border-radius) */
.mm-web-btn:hover { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.08); }
.mm-web-btn__icon { display: block; width: 13.5px; height: 15.6px; }
.mm-web-btn--small  { padding: 16px 24px; }
.mm-web-btn--large  { font-size: 18px; }
.mm-web-btn--green  { background: var(--green-muted); }
.mm-web-btn--purple { background: var(--purple-muted); }

/* Dots — Page Control mobilních carouselů (generuje js/carousel.js) */
.mm-web-dots { display: none; }
.mm-web-dots__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c9c9c9;
  cursor: pointer;
}
.mm-web-dots__dot--active { background: var(--fg-base); }

/* ===================== Mobil (≤900px) ===================== */
@media (max-width: 900px) {
  .mm-web-eyebrow { gap: 24px; }
  .mm-web-lead { font-size: 36px; } /* marky (em) tím vyjdou na 37px dle Figmy */
  .mm-web-heading { font-size: 28px; }

  .mm-web-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 8px 0;
  }

  /* dlouhý eyebrow se může zalomit — tečka drží na prvním řádku */
  .mm-web-eyebrow { align-items: flex-start; }
  .mm-web-eyebrow__dot { margin-top: 9px; }
}