/* ==========================================================================
   TimLuks – service-extras.css
   Doplnkové sekcie na podstránkach služieb (medzi .service-hero a existujúcim
   "Čo to zahŕňa" gridom z service-page.css) – na výslovnú žiadosť rozšíriť
   podstránky na viac sekcií s obrázkami/efektami, nech nie sú všetky rovnaké:

   - .why-section / .why-grid   – "Prečo to potrebujete" (na všetkých podstránkach)
   - .compare-panel             – "Bez toho / S tým" porovnanie
   - .examples-grid             – skutočné ukážky (len komplexne-weby.html, zdieľa
                                   .project-card z projects-page.css)
   - .chips-panel               – plávajúce "kanálové" štítky (marketingove-kampane.html)
   - .content-mock              – drôtený náhľad telefónu/obsahu (tvorba-obsahu.html)
   - orb (guľa) sa recykluje z base.css/orb.js – žiadne nové štýly netreba,
     len rovnaká značka .orb-anchor/.orb-clip/canvas[data-orb] + <script assets/js/orb.js>.
   ========================================================================== */

.why-section { position: relative; }

.why-section__lead {
  max-width: 48em;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink-soft);
  line-height: 1.65;
}

.why-grid {
  display: grid;
  gap: 20px;
  margin-top: clamp(32px, 4vw, 48px);
}
@media (min-width: 700px) {
  .why-grid { grid-template-columns: repeat(3, 1fr); }
  .why-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 44em; }
}

.why-item {
  padding: clamp(22px, 2.6vw, 28px);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 94%, var(--ink) 6%);
}

.why-item__num {
  display: block;
  margin-bottom: 10px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent-text);
}

.why-item__title {
  margin-bottom: 8px;
  font-size: 1.05rem;
  font-weight: 700;
}

.why-item__text {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ---------- "Bez toho / S tým" porovnanie ---------- */

.compare-panel {
  display: grid;
  gap: 16px;
  margin-top: clamp(32px, 4vw, 48px);
}
@media (min-width: 700px) {
  .compare-panel { grid-template-columns: 1fr 1fr; }
}

.compare-col {
  padding: clamp(22px, 2.6vw, 28px);
  border-radius: var(--radius);
  border: 1.5px solid var(--line);
}
.compare-col--bad { opacity: 0.85; }
.compare-col--good {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: color-mix(in srgb, var(--bg) 94%, var(--ink) 6%);
}

.compare-col__title {
  margin-bottom: 14px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.compare-col--bad .compare-col__title { color: var(--muted); }
.compare-col--good .compare-col__title { color: var(--accent-text); }

.compare-list { display: grid; gap: 11px; }
.compare-list li {
  position: relative;
  padding-left: 26px;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}
.compare-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}
.compare-col--bad .compare-list li::before { content: "\2715"; color: var(--muted); }
.compare-col--good .compare-list li::before { content: "\2713"; color: var(--accent-text); }

/* ---------- Ukážky (komplexne-weby.html) – zdieľa .project-card z projects-page.css,
   len je karta o čosi menšia/nižšia (nie je to celá projects.html galéria). ---------- */

.examples-grid {
  display: grid;
  gap: clamp(24px, 3vw, 32px);
  margin-top: clamp(32px, 4vw, 48px);
}
@media (min-width: 700px) {
  .examples-grid { grid-template-columns: repeat(2, 1fr); }
}
.examples-grid .project-card__window { aspect-ratio: 16 / 11; }

/* ---------- Plávajúce štítky kanálov (marketingove-kampane.html) ---------- */

.chips-panel {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(28px, 4vw, 44px);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg) 94%, var(--ink) 6%);
}

.chip {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(var(--accent-rgb), 0.4);
  background: color-mix(in srgb, var(--bg) 88%, var(--ink) 12%);
  font-weight: 600;
  font-size: 0.92rem;
  animation: chip-float 5s ease-in-out infinite;
}
.chip:nth-child(2n) { animation-delay: -1.6s; }
.chip:nth-child(3n) { animation-delay: -3.2s; }
.chip:nth-child(4n) { animation-delay: -0.8s; }

@keyframes chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* ---------- Drôtený náhľad telefónu/obsahu (tvorba-obsahu.html) ---------- */

.content-mock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 4vw, 40px);
  margin-top: clamp(32px, 4vw, 48px);
}

.content-mock__phone {
  flex-shrink: 0;
  width: 168px;
  aspect-ratio: 9 / 17;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1.5px solid var(--line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg) 94%, var(--ink) 6%);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.content-mock__media {
  flex: 1;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.28), rgba(var(--accent-rgb), 0.05));
  border: 1px dashed rgba(var(--accent-rgb), 0.55);
}
.content-mock__line { height: 7px; border-radius: 4px; background: var(--line); }
.content-mock__line--short { width: 55%; }

.content-mock__note {
  flex: 1;
  min-width: 220px;
  max-width: 32em;
  color: var(--ink-soft);
  line-height: 1.6;
}