/* ==========================================================================
   ЛУЧ ШОП — pages/index.css
   Home-page-only styles. Layout blocks (.hero, .trust, .tiles, .band,
   .info-cards, .club-chip) come from main.css; this file adds the hero
   motion layers, the mobile hero order, counters and hover polish.
   Only transform / opacity are animated.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* Paragraphs are flex children of .hero__copy — the column gap does the spacing */
.home-hero .hero__copy > p { margin: 0; }

/* Two rink backdrops: the full rink on desktop, the lighter one on phones */
.home-hero__rink--mobile { display: none; }

/* Jersey layers: .hero__jersey (position + rotation, main.css)
   > .home-hero__layer (pointer parallax, transform set by JS)
   > .home-hero__float (gentle idle bobbing, CSS keyframes) */
.home-hero__layer { will-change: transform; }
.home-hero__float { animation: home-float 5.6s ease-in-out infinite; will-change: transform; }
.hero__jersey--2 .home-hero__float { animation-duration: 6.8s; animation-delay: -2.4s; }
.hero__jersey--3 .home-hero__float { animation-duration: 6.2s; animation-delay: -1.2s; }
@keyframes home-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* The collection chip is a link: lift on hover, red title */
.home-hero .hero__note { z-index: 2; transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
.home-hero .hero__note:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 30, 61, .16); }
.home-hero .hero__note b { transition: color var(--t-hover) var(--ease); }
.home-hero .hero__note:hover b { color: var(--red); }

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */
/* Extra words that only the mobile mockup shows («25+ лет на рынке») */
.home-trust__more { display: none; }

/* --------------------------------------------------------------------------
   Clubs
   -------------------------------------------------------------------------- */
/* Last chip leads to team tailoring for schools — navy to stand apart from the clubs */
.club-chip.home-clubs__chip--custom { background: var(--navy); color: var(--white); border-color: var(--navy); }
.club-chip.home-clubs__chip--custom svg { color: var(--white); }
.club-chip.home-clubs__chip--custom:hover { background: var(--navy-2); border-color: var(--navy-2); color: var(--white); }

/* --------------------------------------------------------------------------
   Band («Форма для вашей команды»)
   -------------------------------------------------------------------------- */
.home-band .band__copy > p { margin: 0; }
/* Desktop mockup has the full paragraph, the mobile mockup a one-liner (swapped at ≤640) */
.home-band__text--short { display: none; }
.home-band__float { animation: home-float 7s ease-in-out infinite; animation-delay: -3s; will-change: transform; }

/* --------------------------------------------------------------------------
   Product grids: exactly four cards per section, so never leave one orphaned
   on its own row — four columns down to 1025px, then two (main.css uses
   three between 641 and 1280px, which is right for the catalogue, not here)
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .home-new .cards, .home-popular .cards { --cols: 4; }
}
@media (max-width: 1024px) {
  .home-new .cards, .home-popular .cards { --cols: 2; }
}

/* --------------------------------------------------------------------------
   Info cards (links)
   -------------------------------------------------------------------------- */
.home-info .info-card { transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), border-color 240ms var(--ease); }
.home-info .info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: transparent; }
.home-info .info-card__title { transition: color var(--t-hover) var(--ease); }
.home-info .info-card:hover .info-card__title { color: var(--red); }
.home-info .info-card__icon svg { transition: transform 240ms var(--ease); }
.home-info .info-card:hover .info-card__icon svg { transform: scale(1.08); }
.home-info__phone { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .home-band .band__art-jersey svg { width: 240px; height: 240px; }
}

@media (max-width: 640px) {
  /* Mobile mockup order: eyebrow, title, text, rink, buttons.
     .hero__copy dissolves into the grid so the art can sit between the text and the buttons. */
  .home-hero .hero__copy { display: contents; }
  .home-hero .hero__art { order: 4; }
  .home-hero .hero__cta { order: 5; margin-top: 0; }
  .home-hero__rink--desktop { display: none; }
  .home-hero__rink--mobile { display: block; }
  .home-hero__float { animation-name: home-float-sm; }
  .home-trust__more { display: inline; }
  /* Skeletons match the mobile card media height, so the swap to real cards does not shift the page */
  .home-new .skeleton--media, .home-popular .skeleton--media { height: 150px; }
  .home-band .band__art-jersey svg { width: 170px; height: 170px; }
  .home-band__text--full { display: none; }
  .home-band__text--short { display: block; }
  /* Mobile mockup order inside the band: eyebrow, title, text, jersey, buttons.
     .band__copy dissolves into the grid (same trick as the hero) and the art loses its fixed height. */
  .home-band .band__copy { display: contents; }
  .home-band .band__art { order: 1; height: auto; }
  .home-band .band__cta { order: 2; margin-top: 0; }
  /* Two tiles per row: the longest one-word title («Экипировка», 87px in Oswald 15px) must fit
     next to the art without a mid-word break — sizes are measured, not guessed.
     overflow-wrap stays as a safety net for fallback fonts (wrap beats clipping). */
  .home-catalog .tile { padding: 12px; }
  .home-catalog .tile__art { width: 48px; height: 48px; }
  .home-catalog .tile__art svg { width: 44px; height: 44px; }
  .home-catalog .tile__title { font-size: 15px; overflow-wrap: anywhere; }
}
@media (max-width: 380px) {
  /* 360px phones: 159px tiles leave 87px for the title at these sizes («Экипировка» is 81px at 14px) */
  .home-catalog .tile { padding: 12px 10px; }
  .home-catalog .tile__art { width: 44px; height: 44px; }
  .home-catalog .tile__art svg { width: 40px; height: 40px; }
  .home-catalog .tile__title { font-size: 14px; }
}
@keyframes home-float-sm {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* --------------------------------------------------------------------------
   Reduced motion: no idle bobbing, no hover lifts (main.css already stops
   transitions, reveals and view transitions)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .home-hero__float, .home-band__float { animation: none; }
  .home-hero .hero__note:hover, .home-info .info-card:hover { transform: none; }
  .home-info .info-card:hover .info-card__icon svg { transform: none; }
}