/* assets/public/widgets/file-container.css
   File container (image strip) widget styles.
   Loaded dynamically only on pages that contain a FILE_CONTAINER widget.

   Layout strategy: items are fixed-width per row (JS computes the width in
   file-container.js and writes --fc-item-width). The strip is centered. The
   gap is also JS-controlled via --fc-gap. As the viewport grows, leftover
   space is consumed in priority: items grow first (up to --fc-max-width),
   then gap grows (up to --fc-max-gap), then outer margin absorbs the rest.

   Overlay text is always visible. Hover signals are layered:
     • Card lifts -6px with a deeper shadow (the dominant motion)
     • Image zooms 1.06× on a longer arc (slow continuation feel)
     • Overlay scrim deepens slightly
     • Button shadow grows
   All hover transitions share the same cubic-bezier (ease-out-quart) and
   harmonized durations so the four effects feel like one motion. */


/* ── Section header ──────────────────────────────────────────────────────── */

.wgt-fc__title {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.5vw, 32px);
    font-weight: 700;
    color: var(--color-brand-primary);
    margin: 0 0 var(--space-5);
}


/* ── Strip row ───────────────────────────────────────────────────────────── */
/* Centered group of items. Each row wraps independently; the JS recomputes
   item width and gap on resize so every row in the strip uses the same
   metrics, including a partially-filled last row. */

.wgt-fc__strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* gap is set by JS via --fc-gap; provide a sensible fallback for the
       brief moment before the JS runs. */
    gap: var(--fc-gap, 16px);
    /* The four constraints (min_gap / max_gap / min_width / max_width) are
       set inline by the view as CSS vars — the JS reads them. */
}


/* ── Individual item ─────────────────────────────────────────────────────── */
/* No flex growth: items take exactly the width the JS computed. The "fill
   leftover space" behavior is handled centrally by the JS, not per-item.
   The item's own resting shadow + hover-lift give the card depth without
   needing the overlay to disappear — overlay is always-on.

   Hover ease: cubic-bezier(0.22, 1, 0.36, 1) — ease-out-quart. Velvet feel,
   used here intentionally instead of --ease-itau because hover wants a
   smooth glide, not the codebase's snappier default. */

.wgt-fc__item {
    flex: 0 0 var(--fc-item-width, var(--fc-min-width, 280px));
    width: var(--fc-item-width, var(--fc-min-width, 280px));
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    background: var(--surface-primary);
    display: block;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(15, 25, 35, 0.08);
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.wgt-fc__item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 42px rgba(15, 25, 35, 0.20);
}

.wgt-fc__item-img-wrap {
    width: 100%;
    aspect-ratio: 3 / 2;
    position: relative;
    overflow: hidden;
}

.wgt-fc__item-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Slightly longer arc than the card lift — image keeps moving after the
       card has settled, which reads as a slow continuation rather than a
       quick snap. */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.wgt-fc__item:hover img {
    transform: scale(1.06);
}


/* ── Overlay — gradient scrim with text + optional button ────────────────── */
/* Always visible. The scrim covers ~55% of the image height and uses navy as
   the anchor color so the overlay reads as part of the brand surface, not a
   neutral overlay. The scrim deepens on hover for added emphasis — same
   ease-out-quart as the card so they animate together. */

.wgt-fc__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 56px var(--space-4) var(--space-4);
    background: linear-gradient(to top,
            rgba(15, 25, 35, 0.85) 0%,
            rgba(15, 25, 35, 0.55) 45%,
            transparent 100%);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: background 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.wgt-fc__item:hover .wgt-fc__overlay {
    background: linear-gradient(to top,
            rgba(15, 25, 35, 0.92) 0%,
            rgba(15, 25, 35, 0.65) 45%,
            transparent 100%);
}

.wgt-fc__overlay-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wgt-fc__item-title {
    font-family: var(--font-display);
    font-size: clamp(14px, 1.8vw, 18px);
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}

.wgt-fc__item-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.45;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}

.wgt-fc__item-btn {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    padding: 7px var(--space-4);
    background: var(--color-brand-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-body);
    border-radius: var(--radius-pill);
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(42, 68, 90, 0.30);
    transition:
        background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.wgt-fc__item:hover .wgt-fc__item-btn {
    box-shadow: 0 8px 24px rgba(42, 68, 90, 0.50);
}


/* ── Empty state ─────────────────────────────────────────────────────────── */

.wgt-fc__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 24px;
    color: var(--color-label-quaternary);
    font-size: 13px;
    border: 2px dashed var(--separator-default);
    border-radius: var(--radius-lg);
    width: 100%;
}