/**
 * B10 - Brands Showcase Styles
 *
 * A framed white card (like B03 "Polecane produkty") holding brand logos in
 * bordered tiles. Layouts: grid / carousel (circular side ‹ › arrows) / list.
 *
 * Driven by inline CSS vars from the builder config (set on the <section>):
 *   --saly-ps-brands-columns      tiles per row / per carousel page (3-8) — DESKTOP value
 *   --saly-ps-brands-gap          gap between tiles (px)
 *   --saly-ps-brands-logo-height  logo max-height (auto|<length>)
 *
 * RESPONSIVE CONTRACT
 *   The builder's "columns" is a desktop setting. Tablet/mobile derive their own
 *   density so the block stays usable regardless of what the merchant picked:
 *     desktop  > 1024px  : exactly `columns` per page/row
 *     tablet   ≤ 1024px  : min(columns, 4)
 *     mobile   ≤  640px  : carousel = 1.5 tiles (one full + a peeking half → swipe
 *                          affordance), tiles ~30% taller with bigger logos, arrows move
 *                          below the card (bottom-right, on the page background);
 *                          grid = 3 per row, list = 1 per row
 *   Because the config vars are inline on the section, breakpoint rules must NOT try
 *   to redefine them (inline always wins). Instead the *effective* values are computed
 *   on the child containers (--saly-ps-brands-cols-eff / --saly-ps-brands-gap-eff)
 *   and every width formula reads only those.
 *
 * CSS Isolation: every class uses the .saly-ps- prefix; rules scoped under
 * .saly-ps-block-brands-showcase. Brand accent = var(--brand-500/700), neutrals =
 * Saly tokens (var(--gray-*, fallback), var(--black, #333333)).
 */

/* ============ FRAMED CONTAINER (mirrors B03) ============ */
.saly-ps-block-brands-showcase {
    width: 100%;
    margin-bottom: 3rem;
}

.saly-ps-block-brands-showcase .saly-ps-brands-frame {
    max-width: 1400px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 13px;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.05);
    padding: 22px clamp(16px, 2.5vw, 32px) clamp(20px, 2.5vw, 32px);
}

.saly-ps-block-brands-showcase .saly-ps-brands-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 1.5rem;
    color: var(--black, #333333);
}

.saly-ps-block-brands-showcase .saly-ps-brands-empty {
    text-align: center;
    color: var(--gray-800, #717175);
    padding: 1.5rem 0;
    margin: 0;
}

/* Effective density — the only vars the width formulas below may read. */
.saly-ps-block-brands-showcase .saly-ps-brands-carousel-track,
.saly-ps-block-brands-showcase .saly-ps-brands-grid,
.saly-ps-block-brands-showcase .saly-ps-brands-list {
    --saly-ps-brands-cols-eff: var(--saly-ps-brands-columns, 6);
    --saly-ps-brands-gap-eff: var(--saly-ps-brands-gap, 20px);
}

/* ============ BRAND TILE (bordered card) ============ */
.saly-ps-block-brands-showcase .saly-ps-brand-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 96px;
    padding: 22px 12px;
    background: #ffffff;
    border: 1px solid var(--gray-300, #EBEEF1);
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.saly-ps-brands-hoverable .saly-ps-brand-tile:hover {
    border-color: var(--brand-500, #5E2CED);
    box-shadow: 0 4px 14px rgba(var(--brand-500-rgb, 94, 44, 237), 0.12);
}

/* Whole-tile link (when a brand has a link) */
.saly-ps-block-brands-showcase a.saly-ps-brand-tile {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.saly-ps-block-brands-showcase .saly-ps-brand-logo {
    max-width: 100%;
    width: auto;
    height: var(--saly-ps-brands-logo-height, auto);
    max-height: 56px;
    object-fit: contain;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.saly-ps-block-brands-showcase .saly-ps-brand-name {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--gray-900, #4E4F55);
    text-align: center;
    /* one line, ellipsis — keeps every tile the same height regardless of name length */
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* grayscale + hover colourise */
.saly-ps-brands-grayscale .saly-ps-brand-logo {
    filter: grayscale(100%);
    opacity: 0.65;
}

.saly-ps-brands-grayscale.saly-ps-brands-hoverable .saly-ps-brand-tile:hover .saly-ps-brand-logo,
.saly-ps-brands-grayscale.saly-ps-brands-hoverable a.saly-ps-brand-row:hover .saly-ps-brand-logo {
    filter: grayscale(0%);
    opacity: 1;
}

/* ============ GRID ============ */
.saly-ps-block-brands-showcase .saly-ps-brands-grid {
    display: grid;
    grid-template-columns: repeat(var(--saly-ps-brands-cols-eff), minmax(0, 1fr));
    gap: var(--saly-ps-brands-gap-eff);
}

/* ============ CAROUSEL ============ */
.saly-ps-block-brands-showcase .saly-ps-brands-carousel {
    display: flex;
    align-items: center;
    gap: 14px;
}

.saly-ps-block-brands-showcase .saly-ps-brands-viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    /* No CSS scroll-behavior / scroll-snap on desktop: arrow paging is animated by
       the enhancer (requestAnimationFrame). The storefront cancels native smooth
       scrolls, and snap fought the scroll near the edge (yanking scrollLeft back
       to 0). Native swipe/track scrolling still works for no-JS users. */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.saly-ps-block-brands-showcase .saly-ps-brands-viewport::-webkit-scrollbar {
    display: none;
}

.saly-ps-block-brands-showcase .saly-ps-brands-carousel-track {
    display: flex;
    gap: var(--saly-ps-brands-gap-eff);
}

.saly-ps-block-brands-showcase .saly-ps-brands-carousel-track .saly-ps-brand-tile {
    flex: 0 0 calc(
        (100% - (var(--saly-ps-brands-cols-eff) - 1) * var(--saly-ps-brands-gap-eff))
        / var(--saly-ps-brands-cols-eff)
    );
    /* logos are wider than tall — never let a tile grow into a vertical pill */
    min-width: 0;
}

/* Circular side arrows (design: 42px round buttons) */
.saly-ps-block-brands-showcase .saly-ps-brands-arrow {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--gray-300, #EBEEF1);
    color: var(--black, #333333);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.saly-ps-block-brands-showcase .saly-ps-brands-arrow:hover {
    border-color: var(--brand-500, #5E2CED);
    color: var(--brand-500, #5E2CED);
    box-shadow: 0 2px 10px rgba(var(--brand-500-rgb, 94, 44, 237), 0.15);
}

.saly-ps-block-brands-showcase .saly-ps-brands-arrow[hidden] {
    display: none;
}

.saly-ps-block-brands-showcase .saly-ps-brands-arrow:disabled {
    opacity: 0.35;
    cursor: default;
    border-color: var(--gray-300, #EBEEF1);
    color: var(--black, #333333);
    box-shadow: none;
}

/* ============ LIST ============ */
/* Row-style brand cards laid out across the configured number of columns
   (uses the same effective columns/gap as the grid layout) so the section
   fills the width instead of a single narrow column. */
.saly-ps-block-brands-showcase .saly-ps-brands-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--saly-ps-brands-cols-eff), minmax(0, 1fr));
    gap: var(--saly-ps-brands-gap-eff);
}

.saly-ps-block-brands-showcase .saly-ps-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border: 1px solid var(--gray-300, #EBEEF1);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.saly-ps-block-brands-showcase .saly-ps-brand-row .saly-ps-brand-logo {
    margin-right: auto;
    max-height: 36px;
}

.saly-ps-block-brands-showcase .saly-ps-brand-row .saly-ps-brand-name {
    white-space: normal;
    text-align: left;
}

.saly-ps-block-brands-showcase a.saly-ps-brand-row:hover {
    border-color: var(--brand-500, #5E2CED);
    box-shadow: 0 2px 10px rgba(var(--brand-500-rgb, 94, 44, 237), 0.12);
}

.saly-ps-block-brands-showcase .saly-ps-brand-chevron {
    display: inline-flex;
    color: var(--gray-800, #717175);
    transition: color 0.2s ease, transform 0.2s ease;
}

.saly-ps-block-brands-showcase a.saly-ps-brand-row:hover .saly-ps-brand-chevron {
    color: var(--brand-500, #5E2CED);
    transform: translateX(2px);
}

/* ============ RESPONSIVE ============ */

/* ---- Tablet (≤1024px): at most 4 tiles per row / per page ---- */
@media (max-width: 1024px) {
    .saly-ps-block-brands-showcase .saly-ps-brands-carousel-track,
    .saly-ps-block-brands-showcase .saly-ps-brands-grid {
        --saly-ps-brands-cols-eff: min(var(--saly-ps-brands-columns, 6), 4);
    }

    /* Grid: legacy fallback first (browsers without calc() in repeat()), then the
       real rule which honours a smaller desktop config (e.g. 3 stays 3). */
    .saly-ps-block-brands-showcase .saly-ps-brands-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-columns: repeat(min(var(--saly-ps-brands-columns, 6), 4), minmax(0, 1fr));
    }

    /* list rows are wider than grid tiles — cap at 2 columns on tablet */
    .saly-ps-block-brands-showcase .saly-ps-brands-list {
        --saly-ps-brands-cols-eff: 2;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* slimmer arrows so the viewport keeps its width */
    .saly-ps-block-brands-showcase .saly-ps-brands-carousel {
        gap: 10px;
    }

    .saly-ps-block-brands-showcase .saly-ps-brands-arrow {
        width: 36px;
        height: 36px;
    }

    .saly-ps-block-brands-showcase .saly-ps-brands-arrow svg {
        width: 17px;
        height: 17px;
    }

    .saly-ps-block-brands-showcase .saly-ps-brand-tile {
        min-height: 88px;
        padding: 18px 10px;
    }
}

/* ---- Mobile (≤640px): swipe carousel with peek, denser tiles ---- */
@media (max-width: 640px) {
    /* The merchant's vertical section padding (inline, from the builder) is a
       desktop rhythm setting — on phones the card itself is the spacing unit, so
       the padding is dropped and its height is given back to the tiles (block
       height stays the same, less page background around small logos). */
    .saly-ps-block-brands-showcase {
        margin-bottom: 1.5rem;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        /* new BFC: without padding the frame's arrow reserve (margin-bottom) would
           collapse through the section and swallow the block's own margin */
        display: flow-root;
    }

    .saly-ps-block-brands-showcase .saly-ps-brands-frame {
        padding: 16px;
    }

    /* Section title matches B03 mobile header: 18/28 bold */
    .saly-ps-block-brands-showcase .saly-ps-brands-title {
        font-size: 1.125rem;
        line-height: 1.75rem;
        margin-bottom: 12px;
    }

    .saly-ps-block-brands-showcase .saly-ps-brands-carousel-track,
    .saly-ps-block-brands-showcase .saly-ps-brands-grid,
    .saly-ps-block-brands-showcase .saly-ps-brands-list {
        --saly-ps-brands-gap-eff: clamp(8px, var(--saly-ps-brands-gap, 20px), 12px);
    }

    /* Carousel: 1 full tile + half of the next (peek = "swipe me"). Bigger tiles
       and logos than the desktop density would give — the card fills the screen
       instead of leaving a lot of page background around small logos. */
    .saly-ps-block-brands-showcase .saly-ps-brands-carousel-track {
        --saly-ps-brands-cols-eff: 1.5;
    }

    .saly-ps-block-brands-showcase .saly-ps-brands-carousel {
        gap: 0;
    }

    /* Arrows leave the card: pinned below the frame, bottom-right, on the page
       background (design request) — the swipe viewport keeps the full width.
       The frame reserves 46px (36px button + 10px gap) underneath; when the
       enhancer hides both arrows (nothing overflows) that reserve collapses. */
    .saly-ps-block-brands-showcase .saly-ps-brands-frame {
        position: relative;
    }

    .saly-ps-brands-layout-carousel .saly-ps-brands-frame {
        margin-bottom: 46px;
    }

    .saly-ps-brands-layout-carousel .saly-ps-brands-frame:has(.saly-ps-brands-arrow--next[hidden]) {
        margin-bottom: 0;
    }

    .saly-ps-block-brands-showcase .saly-ps-brands-arrow {
        position: absolute;
        top: calc(100% + 10px);
        width: 36px;
        height: 36px;
    }

    .saly-ps-block-brands-showcase .saly-ps-brands-arrow--next {
        right: 16px;
    }

    .saly-ps-block-brands-showcase .saly-ps-brands-arrow--prev {
        right: calc(16px + 36px + 8px);
    }

    /* Bleed the scroll area to the frame edges so the peeking tile is cut by the
       screen edge, not by an inner padding line; native snap for touch paging.
       The 16px inset lives on the TRACK; because the tiles overflow the track box,
       neither its trailing padding nor the last tile's margin count as scrollable
       overflow — a 16px ::after spacer (a real box) does, so the last tile stops
       16px from the edge rather than flush against it. */
    .saly-ps-block-brands-showcase .saly-ps-brands-viewport {
        margin-inline: -16px;
        scroll-padding-inline: 16px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    /* While the enhancer animates an arrow click (rAF-driven scrollLeft) snap is
       switched off so it cannot re-snap every frame; the animation itself lands
       on a tile boundary, so re-enabling snap afterwards causes no jump. */
    .saly-ps-block-brands-showcase .saly-ps-brands-viewport.saly-ps-brands-viewport--animating {
        scroll-snap-type: none;
    }

    .saly-ps-block-brands-showcase .saly-ps-brands-carousel-track {
        padding-inline-start: 16px;
        padding-inline-end: 16px;
    }

    .saly-ps-block-brands-showcase .saly-ps-brands-carousel-track::after {
        content: '';
        flex: 0 0 16px;
        margin-inline-start: calc(-1 * var(--saly-ps-brands-gap-eff)); /* cancel the flex gap → exactly 16px */
    }

    .saly-ps-block-brands-showcase .saly-ps-brands-carousel-track .saly-ps-brand-tile {
        scroll-snap-align: start;
    }

    /* Grid: 3 per row (config ignored) — logos stay legible down to 320px */
    .saly-ps-block-brands-showcase .saly-ps-brands-grid {
        --saly-ps-brands-cols-eff: 3;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* List: single column on phones */
    .saly-ps-block-brands-showcase .saly-ps-brands-list {
        --saly-ps-brands-cols-eff: 1;
        grid-template-columns: 1fr;
    }

    /* Tile: fixed 154px (= the height freed by dropping 2×20px section padding
       plus the previous 114px), logo box up to 84px, 14px name — logos read at a
       glance from arm's length. min-height keeps every tile equal even when a
       small source image cannot be upscaled. */
    .saly-ps-block-brands-showcase .saly-ps-brand-tile {
        min-height: 154px;
        padding: 20px 12px;
        gap: 10px;
    }

    .saly-ps-block-brands-showcase .saly-ps-brand-logo {
        max-height: 84px;
    }

    .saly-ps-block-brands-showcase .saly-ps-brand-name {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }

    .saly-ps-block-brands-showcase .saly-ps-brand-row {
        padding: 12px 14px;
    }
}

/* ============ ACCESSIBILITY ============ */
@media (prefers-reduced-motion: reduce) {
    .saly-ps-block-brands-showcase .saly-ps-brands-viewport {
        scroll-behavior: auto;
    }
    .saly-ps-block-brands-showcase .saly-ps-brand-logo,
    .saly-ps-block-brands-showcase .saly-ps-brand-chevron {
        transition: none;
    }
}