/* Soft Evolution — Training page styles
 * Page-specific komponenty pro /skoleni-ai/ a /en/ai-training/.
 * Načítá se ZA main.css, takže má přístup ke všem tokens / komponentám.
 *
 * Konvence: třídy jsou prefixované doménově (training-*, outline*,
 * topic-tile*, process-step*, audience-pill*, benefit-item*) aby se
 * nepletly s komponentami HP.
 */

/* ─── Hero (compact varianta) ──────────────────────── */

.training-hero {
  position: relative;
  padding-top: clamp(6rem, 11vw, 9rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}

.training-hero__copy {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.training-hero .hero__eyebrow {
  margin: 0 auto var(--sp-5);
}

.training-hero .hero__title {
  text-align: center;
  font-size: clamp(1.95rem, 4.4vw, 3rem);
  margin-bottom: var(--sp-5);
}

.training-hero .hero__lead {
  margin: 0 auto var(--sp-8);
  max-width: 640px;
  font-size: var(--fs-lead);
  color: var(--text-soft);
}

.training-hero .hero__cta {
  justify-content: center;
}

/* Hero visual — decorative cluster pod copy.
 * Dvě varianty: desktop (široký horizontální layout s 3 vrstvami nodes a
 * vlevo umístěnými popisky) a mobile (kompaktní vertikální layout
 * s popisky nad každým řádkem — na úzkém viewportu jsou čitelné).
 * Přepíná se media query níže. */
.training-hero__visual {
  position: relative;
  margin: var(--sp-12) auto 0;
  pointer-events: none;
  z-index: 1;
}
.training-hero__visual svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.training-hero__visual--desktop {
  max-width: 880px;
  aspect-ratio: 5 / 2;
}
.training-hero__visual--mobile {
  display: none;
}
@media (max-width: 600px) {
  .training-hero__visual--desktop { display: none; }
  .training-hero__visual--mobile {
    display: block;
    max-width: 340px;
    aspect-ratio: 1 / 1;
    margin-top: var(--sp-10);
  }
}

/* ─── Sekce wrapper ──────────────────────────────── */

.training-section {
  position: relative;
  padding: var(--section-py) 0;
  overflow: hidden;
  isolation: isolate;
}
.training-section--alt {
  background: var(--night-900);
  box-shadow: inset 0 1px 0 var(--hairline), inset 0 -1px 0 var(--hairline);
}

.training-section .section-head {
  margin-bottom: var(--sp-8);
}

/* ─── Tools showcase: 2 rodiny po 2 nástrojích ────── */

.tools-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  max-width: 820px;
  margin: var(--sp-10) auto 0;
}
@media (max-width: 600px) {
  .tools-showcase { grid-template-columns: 1fr; }
}

.tools-showcase__family {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid var(--hairline);
  box-shadow: var(--ring-soft);
  transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.tools-showcase__family:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.16);
}

.tools-showcase__family-label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

.tools-showcase__row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.tools-showcase__tool {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--text);
}
.tools-showcase__tool svg {
  width: 26px; height: 26px;
  flex-shrink: 0;
}

/* ─── Pro koho — audience pills ────────────────────── */

.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}
@media (max-width: 720px) {
  .audience-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .audience-grid { grid-template-columns: 1fr; }
}

.audience-pill {
  position: relative;
  padding: var(--sp-6);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  text-align: center;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
  isolation: isolate;
  overflow: hidden;
}
.audience-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(153,192,39,0.10), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-base);
  pointer-events: none;
  z-index: -1;
}
.audience-pill:hover {
  transform: translateY(-2px);
  border-color: rgba(153,192,39,0.30);
}
.audience-pill:hover::after { opacity: 1; }

.audience-pill__icon {
  width: 40px; height: 40px;
  margin: 0 auto var(--sp-3);
  color: var(--brand-green);
}
.audience-pill__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--text);
  display: block;
  margin-bottom: 6px;
}
.audience-pill__note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  display: block;
}

/* ─── Benefits — sloupce s ikonami ─────────────────── */

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-8) var(--sp-6);
  margin-top: var(--sp-10);
}

.benefit-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.benefit-item__icon {
  width: 44px; height: 44px;
  color: var(--brand-green);
  margin-bottom: var(--sp-1);
}
.benefit-item__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.benefit-item__desc {
  font-size: 0.95rem;
  color: var(--text-soft);
  line-height: var(--lh-normal);
  margin: 0;
}

/* ─── Topics grid — výpis oblastí ─────────────────── */

.topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-10);
}

.topic-tile {
  position: relative;
  padding: var(--sp-6);
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
  overflow: hidden;
  isolation: isolate;
}
.topic-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(153,192,39,0.10), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-base);
  pointer-events: none;
  z-index: -1;
}
.topic-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(153,192,39,0.30);
}
.topic-tile:hover::after { opacity: 1; }

.topic-tile__icon {
  width: 32px; height: 32px;
  color: var(--brand-green);
  margin-bottom: var(--sp-3);
}
.topic-tile__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 var(--sp-2);
  color: var(--text);
}
.topic-tile__desc {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: var(--lh-normal);
}

/* ─── Outline timeline — milníky osnovy ───────────── */

.outline {
  position: relative;
  max-width: 760px;
  margin: var(--sp-12) auto 0;
  padding-left: 68px;
  list-style: none;
}
.outline::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-green), var(--brand-blue));
  border-radius: 2px;
  opacity: 0.40;
}

.outline__step {
  position: relative;
  padding-bottom: var(--sp-8);
}
.outline__step:last-child {
  padding-bottom: 0;
}

.outline__num {
  position: absolute;
  left: -68px;
  top: 0;
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--night-950);
  background: var(--gradient-brand);
  border-radius: 50%;
  box-shadow:
    0 6px 22px -4px rgba(153,192,39,0.40),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

.outline__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 8px 0 var(--sp-2);
  color: var(--text);
  line-height: var(--lh-snug);
}
.outline__desc {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: var(--lh-normal);
}

@media (max-width: 600px) {
  .outline { padding-left: 56px; }
  .outline::before { left: 19px; }
  .outline__num {
    left: -56px;
    width: 40px; height: 40px;
    font-size: 0.95rem;
  }
  .outline__title { margin-top: 4px; }
}

/* ─── Bonus box — premium giveaway pod osnovou ────── */

.bonus-box {
  position: relative;
  margin: var(--sp-12) auto 0;
  max-width: 760px;
  padding: var(--sp-8) var(--sp-8) var(--sp-8) calc(var(--sp-8) + 80px);
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, rgba(153,192,39,0.10), rgba(0,146,209,0.10));
  border: 1px solid var(--hairline);
  overflow: hidden;
  isolation: isolate;
}
.bonus-box::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--gradient-brand);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.55;
  pointer-events: none;
}
.bonus-box::after {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(153,192,39,0.18), transparent 60%);
  pointer-events: none;
  z-index: -1;
}

.bonus-box__icon {
  position: absolute;
  left: var(--sp-6);
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: var(--night-950);
  box-shadow:
    0 8px 28px -6px rgba(153,192,39,0.45),
    inset 0 1px 0 rgba(255,255,255,0.35);
  flex-shrink: 0;
}
.bonus-box__icon svg {
  width: 28px;
  height: 28px;
}

.bonus-box__tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-green);
  margin-bottom: var(--sp-2);
}

.bonus-box__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 var(--sp-2);
  color: var(--text);
  line-height: var(--lh-snug);
}

.bonus-box__desc {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-soft);
  line-height: var(--lh-normal);
}

@media (max-width: 560px) {
  .bonus-box {
    /* override desktop padding-left meant for absolute icon */
    padding: var(--sp-6);
  }
  .bonus-box__icon {
    position: static;
    transform: none;
    margin: 0 0 var(--sp-4);
    width: 48px;
    height: 48px;
  }
  .bonus-box__icon svg {
    width: 24px;
    height: 24px;
  }
}

/* ─── Process flow — 5 kroků ──────────────────────── */

.process-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-10);
  counter-reset: process;
  list-style: none;
  padding: 0;
}

.process-step {
  position: relative;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  counter-increment: process;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.process-step:hover {
  transform: translateY(-3px);
  border-color: rgba(0,146,209,0.28);
}
.process-step::before {
  content: counter(process);
  position: absolute;
  top: 10px;
  right: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: 0.6;
}
.process-step__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 var(--sp-2);
  color: var(--text);
  max-width: calc(100% - 40px);
}
.process-step__desc {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: var(--lh-normal);
}

/* ─── Practice highlight ──────────────────────────── */

.practice-highlight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--sp-12);
  align-items: center;
  margin-top: var(--sp-8);
}
@media (max-width: 800px) {
  .practice-highlight {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}
.practice-highlight__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--hairline);
}
.practice-highlight__visual svg {
  width: 100%; height: 100%; display: block;
}
.practice-highlight__copy h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: 0 0 var(--sp-4);
  color: var(--text);
}
.practice-highlight__copy p {
  color: var(--text-soft);
  margin: 0 0 var(--sp-5);
  line-height: var(--lh-normal);
}
.practice-highlight__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.practice-highlight__list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: var(--sp-3);
  color: var(--text-soft);
}
.practice-highlight__list li::before {
  content: "";
  position: absolute;
  left: 0;
  /* Vertically centred against the cap height of the first text line.
   * With line-height: 1.65 the middle of the line sits at ~0.82em;
   * subtract half of the bar's height (1px ≈ 0.06em) and round up to
   * land cleanly on the cap-height midline of Inter. */
  top: 0.78em;
  width: 16px; height: 2px;
  background: var(--gradient-brand);
  border-radius: 2px;
}

/* ─── Tailored CTA — finální box ──────────────────── */

.tailored-cta {
  position: relative;
  padding: clamp(var(--sp-8), 5vw, var(--sp-12));
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--hairline);
  overflow: hidden;
  isolation: isolate;
  margin-top: var(--sp-10);
}
.tailored-cta::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--gradient-brand);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.35;
  pointer-events: none;
}
.tailored-cta::after {
  content: "";
  position: absolute;
  inset: -50% -10% auto auto;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(0,146,209,0.18), transparent 60%);
  pointer-events: none;
  z-index: -1;
}

.tailored-cta__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: 0 0 var(--sp-4);
  color: var(--text);
  line-height: var(--lh-snug);
}
.tailored-cta__lead {
  font-size: var(--fs-lead);
  color: var(--text-soft);
  margin: 0 0 var(--sp-6);
  max-width: 600px;
}
.tailored-cta__checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-3) var(--sp-6);
}
.tailored-cta__checklist li {
  position: relative;
  padding-left: 2rem;
  color: var(--text-soft);
  font-size: 0.95rem;
}
.tailored-cta__checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.35em;
  width: 18px; height: 18px;
  background: var(--gradient-brand);
  border-radius: 50%;
  opacity: 0.2;
}
.tailored-cta__checklist li::after {
  content: "✓";
  position: absolute;
  left: 4px; top: 0.05em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand-green);
}
.tailored-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* ─── Decorative — variant of section-head pro podstránku ─ */

.training-section .section-head__title {
  font-size: clamp(1.55rem, 3vw, 2.25rem);
}
.training-section .section-head__lead {
  max-width: 680px;
  margin-inline: auto;
}