/* ==========================================================================
   03-buttons.css — Tlačítka & CTA
   seoprakticky.cz
   ==========================================================================
   Všechny typy tlačítek na jednom místě.

   Obsah:
   1. Sdílené mikro-interakce (hover/active/focus mixin-pattern)
   2. .pk-cta          — hlavní CTA tlačítko (kulaté, žluté)
   3. .emoji-button    — tlačítko s emoji ikonou
   4. Varianty tlačítek v komponentách (.pk-case__btn, .pk-social__btn, atd.)
      jsou definovány přímo v komponentových souborech, ale sdílejí
      stejné tokeny odtud.
   ========================================================================== */


/* ── 1. Sdílený základ pro žlutá tlačítka ───────────────────────────────── */
/* Tuto skupinu vlastností sdílejí .pk-cta, .emoji-button, .pk-case__btn,
   .pk-social__btn, .pk-callout .pk-cta. Změna zde se projeví všude. */

.pk-cta,
.emoji-button {
  background: var(--color-accent);
  color: var(--color-text) !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: var(--radius-full);
  text-decoration: none !important;

  font-family: inherit;
  font-weight: 600;
  line-height: 1.25;

  box-shadow: var(--shadow-btn);
  white-space: normal;
  text-align: center;

  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.pk-cta:hover,
.emoji-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
}

.pk-cta:active,
.emoji-button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-btn);
}

.pk-cta:focus-visible,
.emoji-button:focus-visible {
  outline: 3px solid rgba(17, 17, 17, 0.22);
  outline-offset: 3px;
}


/* ── 2. .pk-cta — hlavní CTA ────────────────────────────────────────────── */

.pk-cta {
  gap: 12px;
  flex-wrap: wrap;
  row-gap: 10px;

  width: fit-content;
  max-width: 100%;

  padding: 24px 26px;

  font-size: var(--text-base) !important;

  /* Více CTA vedle sebe */
  margin: 6px;
  vertical-align: middle;
}

/* Jediné CTA = na střed */
.pk-cta:first-child:last-child {
  margin: 0 auto;
}

.pk-cta__text {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.pk-cta__text strong,
.pk-cta__text b {
  font-weight: 800;
}

.pk-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 520px) {
  .pk-cta {
    padding: 22px 20px;
    gap: 10px;
    row-gap: 12px;
    line-height: 1.3;
    margin: 6px;
  }
}


/* ── 3. .emoji-button — tlačítko s emoji ────────────────────────────────── */

.emoji-button {
  gap: 12px;
  flex-wrap: wrap;
  row-gap: 10px;

  margin: 0 auto;
  width: fit-content;
  max-width: 100%;

  padding: 24px 26px;

  font-size: var(--text-base) !important;
}

.emoji-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.emoji-button__text {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.emoji-button__text strong,
.emoji-button__text b {
  font-weight: 800;
}

@media (max-width: 520px) {
  .emoji-button {
    padding: 22px 20px;
    gap: 10px;
    row-gap: 12px;
    line-height: 1.3;
  }
}


/* ── 4. Sdílené malé tlačítko (používané v kartách) ─────────────────────── */
/* Třídy .pk-case__btn a .pk-social__btn žijí ve svých komponentách,
   ale sdílejí přesně tuto vizuální DNA: */

/*
  Vzor pro malá žlutá tlačítka v komponentách:

  background: var(--color-accent);
  color: var(--color-text);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px–14px 14px–18px;
  border-radius: var(--radius-full);
  text-decoration: none;
  font: inherit; font-weight: 700; line-height: 1;
  border: 0;
  box-shadow: var(--shadow-btn);
  transition: transform var(--transition-base), box-shadow var(--transition-base);

  :hover → translateY(-1px) + shadow-btn-hover
  :active → translateY(0) + shadow-btn
  :focus-visible → outline 3px rgba(17,17,17,.22) offset 3px
*/