/* Active classic homepage recommendation gallery. */

.ar-home__gallery { width: 100%; max-width: 1200px; margin-inline: auto; }
.ar-home__gallery-controls { display: flex; gap: 10px; justify-content: flex-end; margin: -8px 0 18px; }
.ar-home__gallery-button { display: grid; width: 46px; height: 46px; padding: 0; place-items: center; border: 1px solid rgba(66, 72, 70, .16); border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(66, 72, 70, .12); color: var(--ar-ink); cursor: pointer; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease, opacity .2s ease, transform .2s ease; }
.ar-home__gallery-button:hover:not(:disabled) { border-color: rgba(120, 155, 152, .5); box-shadow: 0 14px 28px rgba(66, 72, 70, .18); color: var(--ar-mint-dark); transform: translateY(-2px); }
.ar-home__gallery-button:focus-visible { border-color: var(--ar-mint); outline: none; box-shadow: 0 0 0 4px rgba(120, 155, 152, .24), 0 14px 28px rgba(66, 72, 70, .16); }
.ar-home__gallery-button:disabled { opacity: .35; cursor: default; }
.ar-home__gallery-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ar-home__gallery-viewport { --ar-gallery-columns: 3; width: 100%; overflow-x: auto; padding-bottom: 18px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-x pan-y; }
.ar-home__gallery-viewport::-webkit-scrollbar { display: none; width: 0; height: 0; }
.ar-home__gallery-viewport.is-gallery-navigating,
.ar-home__gallery-viewport.is-gallery-normalizing { scroll-snap-type: none; }
.ar-home__gallery-viewport:focus-visible { outline: 3px solid rgba(120, 155, 152, .45); outline-offset: -3px; }
.ar-home__gallery-track { display: flex; width: max-content; gap: clamp(20px, 2.5vw, 32px); align-items: stretch; }
.ar-home__cards.ar-home__gallery-track { grid-template-columns: none; }
.ar-home__gallery-track > .ar-card { flex: 0 0 var(--ar-gallery-card-width, 300px); min-width: 0; scroll-snap-align: start; }

@media (max-width: 1024px) {
  .ar-home__gallery-viewport { --ar-gallery-columns: 2; }
}

@media (max-width: 767px) {
  .ar-home__gallery-viewport { --ar-gallery-columns: 1; padding-bottom: 12px; }
  .ar-home__gallery-controls { margin-top: -4px; }
  .ar-home__gallery-button { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-home__gallery-viewport { scroll-behavior: auto; }
  .ar-home__gallery-button,
  .ar-home__gallery-track > .ar-card { transition: none; }
}
