/* Featured coverflow. Without JS the cards form a plain horizontal scroll row; featured-flow.js adds .is-ready
   and positions every card around the centre one, which leads and sits on top of its neighbours. */
@keyframes featured-flow-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

.home-featured-section { overflow: clip; }
.featured-flow-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 300px); gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.featured-flow-track::-webkit-scrollbar { display: none; }
.featured-flow-track > .featured-flow-card { scroll-snap-align: start; }

/* Photos fade in over a shimmering placeholder once loaded. */
.featured-flow-card .home-listing-image img { opacity: 0; transition: opacity .5s ease; }
.featured-flow-card .home-listing-image.is-loaded img { opacity: 1; }
.featured-flow-card .home-listing-image:not(.is-loaded, .is-image-missing) {
    background: linear-gradient(100deg, #e4e6f5 30%, #f4f5fc 50%, #e4e6f5 70%) 0 0 / 200% 100%;
    animation: featured-flow-shimmer 1.4s linear infinite;
}

.featured-flow-cta {
    display: inline-flex; align-items: center; gap: 8px; margin-inline-start: 12px; vertical-align: middle; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .04em;
    opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease;
}
.featured-flow-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .featured-flow-cta svg { transform: scaleX(-1); }

/* Heading-row navigation replaces "View all": a counter and two arrows. */
.featured-flow-nav { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.featured-flow-count { margin-inline-end: 6px; color: var(--ed-muted, #5d6385); font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.featured-flow-count b { color: var(--ed-ink, #141838); font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.featured-flow-progress { position: relative; width: min(240px, 50%); height: 2px; margin: 28px auto 0; overflow: hidden; border-radius: 2px; background: var(--ed-line, #dde0f2); }
.featured-flow-progress i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #3f47b8, #7f87ee); transform-origin: left; transform: scaleX(var(--flow-progress, 0)); transition: transform .4s ease; }
[dir="rtl"] .featured-flow-progress i { transform-origin: right; }

/* Coverflow. */
.featured-flow.is-ready { --flow-w: clamp(250px, 27vw, 340px); }
.featured-flow.is-ready .featured-flow-track {
    display: block; position: relative; height: calc(var(--flow-w) * 1.25); overflow: visible;
    touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
}
.featured-flow.is-dragging .featured-flow-track { cursor: grabbing; }
.featured-flow.is-ready .featured-flow-card {
    position: absolute; top: 0; left: 50%; width: var(--flow-w); margin-inline-start: calc(var(--flow-w) / -2);
    visibility: hidden; transition: box-shadow .4s ease; will-change: transform, opacity;
    -webkit-tap-highlight-color: transparent;
}
[dir="rtl"] .featured-flow.is-ready .featured-flow-card { left: auto; right: 50%; }
.featured-flow.is-ready .featured-flow-card.is-near { visibility: visible; }
/* Cards behind the centre are dimmed by an overlay, which is cheaper to animate than a filter. */
.featured-flow.is-ready .featured-flow-card::before {
    content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
    background: #0b1230; opacity: var(--flow-dim, 0);
}
.featured-flow.is-ready .featured-flow-card.is-center { box-shadow: 0 50px 70px -36px #1c2266b3, 0 0 0 1px #ffffff40; }
.featured-flow.is-ready .featured-flow-card:hover { transform: none; }
.featured-flow-card.is-center .home-listing-body p:not(.listing-distance) {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin: 0 0 12px; color: #ffffffd9; font-size: 13px; line-height: 1.5;
}
.featured-flow-card.is-center .featured-flow-cta { opacity: 1; transform: none; }
.featured-flow-card.is-center .home-listing-body h3 { font-size: 24px; }

@media (max-width: 767px) {
    .featured-flow.is-ready { --flow-w: min(66vw, 280px); }
    .featured-flow-nav { gap: 6px; }
    .featured-flow-count { display: none; }
    .featured-flow-card.is-center .home-listing-body h3 { font-size: 19px; }
    .featured-flow-progress { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .featured-flow-card .home-listing-image img, .featured-flow-cta, .featured-flow-progress i { transition: none; }
    .featured-flow-card .home-listing-image:not(.is-loaded, .is-image-missing) { animation: none; }
}
