/* Úvodní stránka */

/* ── Hero ───────────────────────────────────────────────────────────── */

.home-hero {
  padding-top: clamp(72px, 12vh, 140px);
  text-align: center;
}

/* H1 = „Jsme vývojové oddělení skupiny ATLAS GROUP“, vizuálně dva řádky */
.home-hero-h1 {
  margin: 0;
}

.home-hero-h1 > span {
  display: block;
}

.home-hero-title {
  margin: 0.08em 0 0.12em;
  color: var(--white);
  font-size: var(--fs-hero);
  line-height: 1;
  letter-spacing: 0.02em;
}

/* ── Minihra ────────────────────────────────────────────────────────── */

.home-game {
  display: grid;
  grid-template-columns: 1fr minmax(0, 630px) 1fr;
  align-items: start;
  gap: 24px;
  margin-top: -20px;
  padding-inline: 72px;
}

.home-game-mark {
  margin-top: 72px;
}

.home-game-scene {
  height: 315px;
}

.home-game-scene spline-viewer {
  display: block;
  width: 100%;
  height: 100%;
}

.home-game-badge {
  justify-self: end;
  width: 200px;
  margin-top: 36px;
}

@media (max-width: 959px) {
  .home-game {
    display: block;
    padding: 36px var(--gutter) 0;
    text-align: center;
  }

  .home-game-mark,
  .home-game-scene {
    display: none;
  }

  .home-game-badge {
    width: 160px;
    margin: 0 auto;
  }
}

/* ── Technologie ────────────────────────────────────────────────────── */

.tech-strip {
  margin-top: 48px;
  overflow: hidden;
}

.tech-track {
  display: flex;
  width: max-content;
  animation: home-marquee 40s linear infinite;
}

/* Jako originál: logo 40 px uprostřed boxu 100 px, pás jede 40 s */
.tech-logos {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tech-logos img {
  width: 100px;
  height: 100px;
  padding: 30px;
  object-fit: contain;
}

.tech-strip-label {
  display: flex;
  justify-content: flex-end;
  margin-top: 72px;
}

.tech-strip-label .mark {
  width: 50%;
}

@media (max-width: 569px) {
  .tech-strip-label .mark {
    width: auto;
  }
}

@keyframes home-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ── Otevřené pozice ────────────────────────────────────────────────── */

.home-jobs-filters {
  margin-top: var(--space-s);
}

.home-jobs-empty {
  padding: 24px 0;
  color: var(--grey-300);
}

.home-jobs-more {
  margin-top: var(--space-m);
}

.home-jobs-more .btn {
  margin-top: 20px;
}

/* ── Textové sekce s médiem (Kdo jsme, Náš tým) ─────────────────────── */

.home-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-s) calc(var(--space-s) * 2);
  align-items: center;
}

.home-video {
  max-width: none;
  margin: 0;
}

.home-team-img {
  width: 100%;
  aspect-ratio: 9 / 16; /* stejný formát jako svislá videa */
  object-fit: cover;
}

.home-team-mark,
.home-blog-mark,
.home-projects-mark {
  margin-top: var(--space-m);
}

@media (max-width: 959px) {
  .home-split-grid {
    grid-template-columns: 1fr;
  }

  .home-video {
    max-width: 360px;
  }
}

/* ── Projekty: velké karty v posuvníku ──────────────────────────────── */

.home-projects-text {
  max-width: 720px;
}

.home-projects-slider {
  margin-top: var(--space-m);
}

/* 3 karty na šířku okna, na tabletu 2, na mobilu 1 + kousek další */
.home-projects-slider .slider-track {
  --per-view: 3;
}

@media (max-width: 959px) {
  .home-projects-slider .slider-track {
    --per-view: 2;
  }
}

@media (max-width: 569px) {
  .home-projects-slider .slider-track {
    --per-view: 1.15;
  }
}

/* ── Galerie ────────────────────────────────────────────────────────── */

.home-gallery {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px;
  height: min(90vh, 820px);
  padding-inline: 36px;
  overflow: hidden;
}

.home-gallery::before,
.home-gallery::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 25%;
  background: linear-gradient(#000, rgba(0, 0, 0, 0));
  pointer-events: none;
}

.home-gallery::after {
  inset: auto 0 0;
  background: linear-gradient(rgba(0, 0, 0, 0), #000);
}

.home-gallery-track {
  display: flex;
  flex-direction: column;
  gap: 36px;
  animation: home-gallery-up 40s linear infinite;
}

.home-gallery-col--down .home-gallery-track {
  animation-name: home-gallery-down;
  animation-duration: 46s;
}

.home-gallery-track img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}

/* Každá stopa má obrázky dvakrát; posun o polovinu = plynulá smyčka */
@keyframes home-gallery-up {
  to {
    transform: translateY(calc(-50% - 18px));
  }
}

@keyframes home-gallery-down {
  from {
    transform: translateY(calc(-50% - 18px));
  }
  to {
    transform: none;
  }
}

@media (max-width: 959px) {
  .home-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    height: 560px;
    padding-inline: var(--gutter);
  }

  .home-gallery-track {
    gap: 18px;
  }

  .home-gallery-col:nth-child(n + 3) {
    display: none;
  }
}

/* ── Blog ───────────────────────────────────────────────────────────── */

.home-blog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-s) calc(var(--space-s) * 2);
  align-items: start;
}

.home-blog-posts {
  display: grid;
  gap: var(--space-s);
}

.home-blog-posts .post-grid {
  grid-template-columns: 1fr;
}

.home-blog-posts .post-card-media {
  aspect-ratio: 1;
}

/* Text vpravo zůstává vidět, dokud vlevo běží články */
.home-blog-text {
  position: sticky;
  top: calc(var(--header-h) + var(--space-s));
}

@media (max-width: 959px) {
  .home-blog-grid {
    grid-template-columns: 1fr;
  }

  .home-blog-text {
    position: static;
    order: -1;
  }

  .home-blog-posts .post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 569px) {
  .home-blog-posts .post-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tech-track,
  .home-gallery-track {
    animation: none;
  }
}