/* ==============================================================
   Vistaarly · pages/index-featured.css
   Homepage featured-influencers carousel (below the hero).
   Reads from admin-managed featured_influencers table.
   Loaded via $pageCss on index.php only, right after landing.css —
   this is now the SINGLE source of truth for .v-featured-* (a
   duplicate copy in landing.css used to fight with this one over
   load order; that copy has been removed).

   2026-07 fixes:
   - Image crop is 1:1 (was 3:4) per admin-panel request, matching
     the square crop admin/featured-influencers.php now produces.
   - Swipe/scroll-snap tuned so a diagonal touch drag on mobile
     doesn't get force-corrected mid-gesture ("auto swiping" feel):
     `proximity` snapping + touch-action/overscroll containment.
   - Card width scales with clamp() instead of jumping at fixed
     breakpoints.
   - Hover-lift disabled on touch (`hover: none`) — it only added
     layout jitter the moment a finger landed on a card.
   - Arrows hidden below 768px (swiping the track is primary there).

   2026-07 follow-up fix:
   - touch-action was set to `pan-y`, which tells the browser to
     natively handle only VERTICAL panning on this element — that
     disables the native horizontal swipe needed to scroll a
     HORIZONTAL carousel, so the track was stuck on the first card
     with no way to swipe. Corrected to `pan-x`: horizontal drags
     scroll the track natively, any vertical component of a touch
     is left for the page to handle, so it still won't hijack a
     mostly-vertical scroll.
   ============================================================== */

.v-featured-strip {
    padding: var(--space-8) 0;
    background: var(--color-bg-subtle);
    border-top: 1px solid var(--color-border-soft);
    border-bottom: 1px solid var(--color-border-soft);
}
.v-featured-strip-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}
@media (min-width: 768px) { .v-featured-strip-inner { padding: 0 var(--space-6); } }

.v-featured-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
@media (max-width: 640px) {
    .v-featured-strip-inner { padding: 0 var(--space-4); }
    .v-featured-heading { margin-bottom: var(--space-4); align-items: start; }
    .v-featured-heading h2 { font-size: 1.3rem; }
}
.v-featured-heading h2 { margin: 0; }
.v-featured-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent-hover);
    margin-bottom: 4px;
}

.v-featured-viewport {
    position: relative;
    overflow: hidden;
}
.v-featured-track {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--space-2) 0 var(--space-4);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    /* "proximity" (not "mandatory") snaps when a card is already
       close to aligned but never force-corrects mid-gesture — that
       forced correction is what read as the carousel "auto swiping"
       on mobile. */
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;

    /* pan-x: let the browser natively scroll THIS element on a
       horizontal drag (that's the swipe gesture the carousel needs).
       A touch that's mostly vertical is left for the page to handle
       normally, so this still won't hijack page scroll. */
    touch-action: pan-x;
    overscroll-behavior-x: contain;
}
.v-featured-track::-webkit-scrollbar { display: none; }

.v-featured-item {
    flex: 0 0 auto;
    /* scales smoothly between a 220px floor and 300px ceiling instead
       of jumping at fixed breakpoints — on a narrow phone this lands
       close to one-card-plus-a-peek, the standard swipeable-carousel
       pattern. */
    width: clamp(220px, 72vw, 300px);
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
    display: block;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    box-shadow: var(--sh-card);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
    position: relative;
}
@media (min-width: 1024px) { .v-featured-item { width: 300px; } }

.v-featured-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-card-hover);
}
/* Hover-lift is a mouse-only affordance — on touch it just adds a
   layout jitter the moment a finger lands on the card. */
@media (hover: none) {
    .v-featured-item:hover { transform: none; box-shadow: var(--sh-card); }
}

.v-featured-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* square, matches the admin-panel upload crop */
    background: var(--color-bg-alt);
    overflow: hidden;
}
.v-featured-cover-bg {
    position: absolute;
    inset: -6%;
    width: 112%;
    height: 112%;
    object-fit: cover;
    filter: blur(24px) brightness(0.9);
    transform: scale(1.08);
    z-index: 0;
}
.v-featured-cover-fg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.v-featured-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-4);
    z-index: 2;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 100%);
    color: #fff;
}
.v-featured-overlay .name { font-weight: 600; font-size: 1.05rem; line-height: 1.2; }
.v-featured-overlay .meta { font-size: 0.75rem; opacity: 0.85; margin-top: 3px; }
@media (max-width: 640px) {
    .v-featured-overlay { padding: var(--space-3); }
    .v-featured-overlay .name { font-size: 0.95rem; }
}

.v-featured-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 3;
    transform: translateY(-50%);
    padding: 0 var(--space-2);
}
.v-featured-arrow {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 3px 12px rgba(0,0,0,0.14);
    border: 0;
    cursor: pointer;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--t-fast);
}
.v-featured-arrow:hover { transform: scale(1.06); }
.v-featured-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
/* Arrows are a mouse/desktop affordance — on touch, swiping the
   track directly is the primary interaction, and floating buttons
   over the cards just block content and add clutter. */
@media (max-width: 767px), (hover: none) { .v-featured-arrows { display: none; } }