/* ─── Image marquee (Elementor widget — "Karuzela zdjęć") ────────────────
   Rendered by AO_Elementor_Marquee_Widget (inc/elementor-marquee-widget.php).
   Same scrolling mechanism as .ao-ig-marquee BUT with uniform HEIGHT tiles
   and AUTO widths — portrait/landscape/square images align at top + bottom,
   widths vary by aspect ratio. Height, gap, animation speed are per-instance
   via CSS custom properties set from widget inline style.

   Default tile height 240px (overridden via --ao-marquee-h).
   Mobile auto-scales to ≤180px. Pause on hover.
   prefers-reduced-motion stops animation. */

.ao-marquee {
    --ao-marquee-h: 240px;
    --ao-marquee-speed: 60s;
    --ao-marquee-gap: 16px;
    position: relative;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    overflow: hidden;
}

.ao-marquee__track {
    display: flex;
    width: max-content;
    animation: ao-marquee-scroll var(--ao-marquee-speed) linear infinite;
}

.ao-marquee:hover .ao-marquee__track {
    animation-play-state: paused;
}

@keyframes ao-marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .ao-marquee__track { animation: none; }
}

/* Tile — fixed height, AUTO width (determined by image aspect ratio).
   Uniform gap via margin-right on every tile (including last in each set)
   so the seamless loop spacing is identical to inter-tile spacing. */
.ao-marquee__tile {
    flex: 0 0 auto;
    height: var(--ao-marquee-h);
    margin-right: var(--ao-marquee-gap);
    overflow: hidden;
    background: var(--color-gray-100);
}

.ao-marquee__tile .ao-marquee__img,
.ao-marquee__tile img.ao-marquee__img {
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
    display: block;
    object-fit: cover;
}

@media (max-width: 767px) {
    .ao-marquee__tile { height: min(var(--ao-marquee-h), 180px); }
}