/* ==========================================================================
   TimLuks – home-extra.css
   Doplnkové sekcie hlavnej stránky: textový úvod (#o-tvorbe), „Z blogu“ (#z-blogu) a pás odkazov.
   Využíva existujúce komponenty (.section, .section__title, .card, .services__grid, .btn),
   preto tu je len pár doplnkov. Farby idú cez tokeny, takže fungujú v tmavom aj svetlom režime.
   ========================================================================== */

.home-intro {
  max-width: 46em;
  margin-inline: auto;
}
.home-intro p {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.7;
  color: var(--muted);
}
.home-intro p + p { margin-top: 1.1em; }
.home-intro a {
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.home-intro a:hover { text-decoration-thickness: 2px; }

.section--home-blog .section__title { margin-bottom: clamp(24px, 3vw, 40px); }
.section--home-blog .card { padding-block: clamp(24px, 3vw, 32px); }

.home-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(28px, 4vw, 44px);
}

/* ---------- Úvod pod formulárom: text + ilustrácia ---------- */

.home-intro-layout {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (min-width: 900px) {
  .home-intro-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
.home-intro-layout .home-intro { max-width: none; margin: 0; }

.home-art {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  padding: 28px 0 40px;
}
.home-art__window {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 92%, var(--ink) 8%);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  transform: rotate(-2deg);
}
.home-art__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.home-art__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.home-art__bar span {
  margin-left: 10px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.06);
  color: var(--muted);
  font-size: 0.72rem;
}
.home-art__body { padding: 20px; display: grid; gap: 16px; }
.home-art__hero {
  display: grid;
  gap: 10px;
  padding: 22px 18px;
  border-radius: calc(var(--radius) * 0.7);
  background:
    radial-gradient(80% 120% at 15% 0%, rgba(var(--accent-rgb), 0.28), transparent 70%),
    rgba(var(--ink-rgb), 0.04);
}
.home-art__hero b { display: block; height: 12px; width: 70%; border-radius: 6px; background: rgba(var(--ink-rgb), 0.78); }
.home-art__hero b + b { width: 45%; background: rgba(var(--accent-rgb), 0.95); }
.home-art__hero span { display: block; margin-top: 6px; width: 90px; height: 26px; border-radius: 999px; background: rgba(var(--ink-rgb), 0.85); }
.home-art__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.home-art__cards i { display: block; height: 64px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--ink-rgb), 0.04); }
.home-art__cards i:first-child { border-color: rgba(var(--accent-rgb), 0.6); }
.home-art__line { height: 8px; width: 60%; border-radius: 4px; background: rgba(var(--ink-rgb), 0.12); }

.home-art__chip {
  position: absolute;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  background: rgba(10, 11, 14, 0.82);
  color: var(--on-ink);
  font-size: 0.82rem;
  font-weight: 600;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: home-art-float 6s ease-in-out infinite;
}
.home-art__chip--1 { top: 0; right: 4%; }
.home-art__chip--2 { top: 46%; left: -4%; animation-delay: -2s; }
.home-art__chip--3 { bottom: 4px; right: 10%; animation-delay: -4s; }
.home-art__pin {
  position: absolute;
  left: 8%;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.95);
  color: var(--ink-fixed);
  font-size: 0.8rem;
  font-weight: 700;
}
.home-art__pin::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-fixed);
}
@keyframes home-art-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .home-art__chip { animation: none; }
}