/* hover-carousal.css — recreated
   - All hover animation knobs are exposed as CSS variables
   - Carousel width locked to 80% viewport on ALL sizes
   - Containers locked to 1:4 aspect ratio (width:height = 1:4)
   - Variables to control decay for each attribute included
*/

:root{
    /* ---------- Layout ---------- */
    --carousel-vw: 1;               /* fraction of viewport width (80%) — applied on all sizes */
    --carousel-max-width: 3300px;     /* upper cap for carousel width */
    --carousel-min-width: 320px;
    --carousel-side-padding: 50px;    /* breathing room on sides */
    --carousel-margin: 5px;          /* margin around carousel (user requested) */
    --carousel-top-gap: var(--site-header-occupy) + 5px;         /* distance between nav pill and top of carousel (user requested) */
    --carousel-aspect: 3;             /* guidance ratio used in JS (width / height baseline) */
    --carousel-max-height: 1540px;     /* safety cap for carousel height */

    /* ---------- Tile / Aspect ---------- */
    --tile-aspect-w: 1;
    --tile-aspect-h: 3;               /* enforces 1:4 aspect ratio */
    --tile-preferred: clamp(56px, 6vw, 140px);           /* preferred base width per tile (fallback) */
    --gap: 1px;

    /* ---------- Image sizing control ---------- */
    --min-img-mult: 1.35;
    --max-img-mult: 2.0;
    --img-height-mult: 1.5;

    /* ---------- Animation / timing ---------- */
    --transition: 260ms cubic-bezier(.2,.9,.25,1);
    --inertia: 0.1;

    /* ---------- Visual ---------- */
    --dimmer: 0.30;                   /* baseline image brightness */
    --bright-max: 1;                  /* brightness when focused */
    --shadow-base: 0 8px 28px rgba(0,0,0,0.28);

    /* ---------- Hover knobs (exposed) ----------
       x increase: how much a hovered item grows horizontally (multiplier)
       y increase: vertical growth multiplier
       jump: vertical translate when hovered (px)
       shadow-mult: applied to shadow strength on focus
       dimmer-min: baseline dimmer (duplicate for clarity)
    */
    --hover-x-mult: 2.5;              /* width multiplier for hover center */
    --hover-y-mult: 1.2;             /* height multiplier for hover center */
    --hover-jump-px: 1;              /* vertical 'lift' in px for hovered item */
    --hover-shadow-mult: 1.8;         /* shadow intensity multiplier for hovered item */
    --hover-dimmer-min: var(--dimmer);/* min brightness */
    --hover-bright-max: var(--bright-max);

    /* ---------- Per-attribute decay factors:
       How fast the effect decays as you move away from the hovered item.
       closer to 0 => steep decay, closer to 1 => slow decay.
    */
    --decay-steps: 3;                 /* how many neighbors influence */
    --decay-factor-width: 0.7;        /* decay for width */
    --decay-factor-height: 0.72;      /* decay for height */
    --decay-factor-jump: 0.6;         /* decay for vertical jump */
    --decay-factor-shadow: 0.68;      /* decay for shadow growth */
    --decay-factor-bright: 0.65;      /* decay for brightness */

    /* ---------- Fallback tuning ---------- */
    --hover-push-px: 18;              /* horizontal push for neighbors */
    --hc-max-aspect: 3;               /* constrain image aspect in defensive sizing */
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html,body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial; overflow-x: hidden; }

.featured-carousel {
    width: calc(var(--carousel-vw) * 100vw); /* locked 80% of viewport */
    max-width: var(--carousel-max-width);
    margin: var(--carousel-margin) auto;
    margin-top: var(--carousel-top-gap);
    padding: 0;
    padding-inline: max(12px, var(--carousel-side-padding));
    overflow: visible;
    box-sizing: border-box;
}

/* carousel strip */
.hover-carousel {
    display: flex;
    align-items: center;
    justify-content: center; /* will be set by JS via padding-inline */
    position: relative;
    width: 100%;
    overflow: visible; /* allows expansion */
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0 auto;
    touch-action: pan-y; /* allow vert scroll but handle horizontal for hover? */
}

.hc-container {
    position: relative;
    box-sizing: border-box;
    /* width/height set by JS */
    background: #000; /* or dark gray */
    border-radius: 6px; /* slightly rounded */
    overflow: hidden;
    margin-right: var(--gap, 8px);
    cursor: pointer;
    will-change: transform, width, height, box-shadow;
    /* defaults */
    width: 60px;
    height: 240px;
    transform-origin: center center;
    user-select: none;
    -webkit-user-select: none;
    transition: none; /* driven by RAF */
    z-index: 1;
}

.hc-container:last-child {
    margin-right: 0;
}


/* hovered / focused state class for accessibility */
.hc-container.in-focus { z-index: 30; }

/* image inside container */
.hc-img {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--min-img-mult) * 100%);
    height: auto;
    object-fit: cover;
    pointer-events: none;
    /*user-select: none;*/
    /*-webkit-user-drag: none;*/
    image-rendering: auto;
    backface-visibility: hidden;
    /*will-change: left, top, filter;*/
    transition: filter var(--transition) ease;
    /*display: block;*/
    display: none; /* shown by JS */
    /* position/size managed by JS */
    will-change: transform, filter, left, top, width, height;
    user-select: none;
    -webkit-user-select: none;
    filter: brightness(var(--dimmer));
}

.hc-container:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* responsive: keep same 80% rule on small screens, but reduce paddings */
@media (max-width: 900px) {
    :root {
        --carousel-side-padding: 18px;
        --carousel-max-width: 900px;
        --carousel-min-width: 280px;
        /* KEEP --carousel-vw = 0.8 (no change) */
    }
    .featured-carousel { padding: 1rem 1rem 0.5rem; }
}

@media (max-width: 640px) {
    :root {
        --carousel-side-padding: 12px;
        --carousel-max-width: 600px;
        --carousel-min-width: 240px;
        /* KEEP --carousel-vw = 0.8 (no change) to enforce same 80% rule */
        /* On very small screens you may still override --carousel-vw in a theme var if needed */
    }
    .featured-carousel { padding: 0.6rem 0.6rem 0.4rem; }
}

/* coarse pointer / touch: lower visual complexity */
@media (hover: none), (pointer: coarse) {
    :root {
        --inertia: 0.28;
    }
    .hc-container { transition: box-shadow 180ms linear; }
    .hc-img { transition: opacity 160ms linear, filter 160ms linear; }
}

/* keep layout responsibility to JS for fine-grained animations — CSS exposes knobs only */