/* aieo/brand-slider (1.1.0, 10 Nov 2026): the brands as a row that scrolls sideways and snaps to each card, drawn by
   CSS alone (the first paint is the final one: view.js only moves the row for the arrows).

   No colour of its own (the owner, 10 Nov 2026: inherit the colours the theme specifies): every colour is a theme
   token, with currentColor, Canvas or CanvasText where a theme has none. On Rooster Zero a brand card is the theme's
   product card on the same page, read from the theme's tokens and its body classes, never copied: the surface (Design
   `card_surface`, `rooster-card-surface--tile`: the card on neutral-50 in the card corners, the picture across its
   top, the body padded by spacing 4) and the hover (Design `card_motion`: the lift of 2 px with the md shadow, the
   picture's zoom to 1.03). Elsewhere the card is plain: the picture square in the media corners, the name under it.
   The title is the theme's section heading (render.php prints the heading block's classes; nothing here sets its
   type). A logo stands on its own white plate in both schemes, as product photos do (R9): the browser's light Canvas,
   not a colour of ours. */

.aieo-brand-slider {
    --aieo-bs-gap: var(--wp--preset--spacing--4, 1rem);
    /* The track scrolls sideways, so it clips both axes: room above for the 2 px lift and the focus ring, below for
       the shadow (taken back by the track's own negative margins, so nothing around it moves). */
    --aieo-bs-room-top: 4px;
    --aieo-bs-room: 4px;
    /* The picture's shape: a square; the logo strip's plate is 16:9 (the arrows sit on its middle). */
    --aieo-bs-ratio: 1;
}
.aieo-brand-slider.is-style-logo {
    --aieo-bs-ratio: 0.5625;
}
@media (min-width: 783px) {
    .aieo-brand-slider {
        --aieo-bs-gap: var(--wp--preset--spacing--5, 1.5rem);
    }
}
:is(.rooster-card-motion--lift, .rooster-card-motion--lift-zoom) .aieo-brand-slider.is-style-hero {
    --aieo-bs-room: var(--wp--preset--spacing--6, 2rem);
}

/* The header: the theme's section heading and its line of text. No rule under it: the theme's headings have none. */
.aieo-brand-slider__header {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--2, 0.5rem);
    margin: 0 0 var(--wp--preset--spacing--5, 1.5rem);
}
.aieo-brand-slider__header > h2 {
    margin: 0;
}
.aieo-brand-slider__subtitle {
    margin: 0;
    color: var(--wp--preset--color--muted, currentColor);
    font-size: var(--wp--preset--font-size--md, 1rem);
}
/* The feature heading (headingFeature) draws its own underline, full-bleed in the theme it came from: contained to
   the block's width. Two classes beat the recommendations sheet's `.aieo-recommendations-title::after`. */
.aieo-brand-slider--heading-feature .aieo-recommendations-title::after {
    left: 0;
    width: 100%;
}

/* The row. On a phone each card is 78 % of the row's width, the next one peeking (the designer's strip); from 600 px
   the cards in view are the block's own count (slidesPerView) at most, fewer on the narrower screens (2.4 up to
   782 px, 4 up to 1024 px, as the theme's product rows). */
.aieo-brand-slider__viewport {
    --aieo-bs-cards: min(var(--aieo-spv, 5), 2.4);
    position: relative;
    container-type: inline-size;
    timeline-scope: --aieo-bs-row;
}
@media (min-width: 783px) {
    .aieo-brand-slider__viewport {
        --aieo-bs-cards: min(var(--aieo-spv, 5), 4);
    }
}
@media (min-width: 1025px) {
    .aieo-brand-slider__viewport {
        --aieo-bs-cards: var(--aieo-spv, 5);
    }
}

.aieo-brand-slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: var(--aieo-bs-gap);
    margin: calc(-1 * var(--aieo-bs-room-top)) 0 calc(-1 * var(--aieo-bs-room));
    padding: var(--aieo-bs-room-top) 0 var(--aieo-bs-room);
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-timeline: --aieo-bs-row inline;
    -webkit-overflow-scrolling: touch;
}
.aieo-brand-slider__track::-webkit-scrollbar {
    display: none;
}
@media (min-width: 600px) {
    .aieo-brand-slider__track {
        grid-auto-columns: calc((100% - (var(--aieo-bs-cards) - 1) * var(--aieo-bs-gap)) / var(--aieo-bs-cards));
    }
}

.aieo-brand-slider__slide {
    display: flex;
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
}

/* The card: the picture, then the name. A link that is a card: the text colour in every state (over the global
   styles' link hover), and none of the theme's content-link underline (a faint line drawn as a background). */
.aieo-brand-slider .aieo-brand-slide {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    background: none;
    color: inherit;
    text-decoration: none;
}
/* The focus ring inside the card's edge, over its picture: outside, the row (which scrolls sideways and so clips) cut
   it at its first and last card. In place of the theme's ring around focused elements, not beside it. */
.aieo-brand-slider .aieo-brand-slide:focus-visible {
    outline: none;
    box-shadow: none;
}
.aieo-brand-slider .aieo-brand-slide:focus-visible::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px currentColor;
    pointer-events: none;
}

/* The picture square: a hero picture, a logo on its plate, or the brand's initial; the ground under it is the
   theme's subtle surface, as under a product's picture. */
.aieo-brand-slide__hero,
.aieo-brand-slide__placeholder,
.aieo-brand-slide--hero .aieo-brand-slide__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--wp--custom--rooster--shape--media, 0.5rem);
    background: var(--wp--preset--color--subtle, color-mix(in srgb, currentColor 6%, transparent));
}
.aieo-brand-slide__hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* The logo on its own white plate in both schemes: logos are drawn for a light ground, as product photos are (R9).
   The plate is the image's own box (a square logo fills the square, a wide one is a band across it), padded so the
   mark keeps clear of its edge. */
.aieo-brand-slide--hero .aieo-brand-slide__logo img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    max-height: 100%;
    padding: var(--wp--preset--spacing--4, 1rem);
    object-fit: contain;
    color-scheme: light;
    background: Canvas;
}
.aieo-brand-slide__placeholder-glyph {
    font-family: var(--wp--preset--font-family--heading, inherit);
    font-size: var(--wp--preset--font-size--4-xl, 3rem);
    font-stretch: var(--wp--custom--rooster--stretch--heading, normal);
    font-weight: 650;
    line-height: 1;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted, currentColor);
}

/* The name: the product card's name on the same page (the text face, sm, 600, two lines at most), in normal case,
   from the start edge. Under the pointer and the keyboard it is underlined, as a product card's name. */
.aieo-brand-slide__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    padding-block-start: var(--wp--preset--spacing--2, 0.5rem);
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: normal;
    text-align: start;
    overflow-wrap: anywhere;
}
.aieo-brand-slide:is(:hover, :focus-visible) .aieo-brand-slide__name {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.aieo-brand-slide__meta {
    display: block;
    padding-block-start: var(--wp--preset--spacing--1, 0.25rem);
    color: var(--wp--preset--color--muted, currentColor);
    font-size: var(--wp--preset--font-size--xs, 0.75rem);
    text-align: start;
}

/* On Rooster Zero's tile surface the card is the theme's tile: a panel on neutral-50 in the card corners, the picture
   across its top in those corners, the body padded spacing 4 at the sides and under the picture, spacing 4 under the
   last part (spacing 3 at the sides on a phone, as the theme's). */
.rooster-card-surface--tile .aieo-brand-slider .aieo-brand-slide--hero {
    overflow: hidden;
    padding-block-end: var(--wp--preset--spacing--4, 1rem);
    border-radius: var(--wp--custom--rooster--shape--card, 0);
    background: var(--wp--preset--color--neutral-50, Canvas);
    color: var(--wp--preset--color--fg, CanvasText);
}
.rooster-card-surface--tile .aieo-brand-slide--hero > :is(.aieo-brand-slide__hero, .aieo-brand-slide__logo, .aieo-brand-slide__placeholder) {
    border-radius: 0;
}
.rooster-card-surface--tile .aieo-brand-slide--hero > :is(.aieo-brand-slide__name, .aieo-brand-slide__meta) {
    padding-inline: var(--wp--preset--spacing--4, 1rem);
}
.rooster-card-surface--tile .aieo-brand-slide--hero > .aieo-brand-slide__name {
    padding-block-start: var(--wp--preset--spacing--4, 1rem);
}
@media (max-width: 599px) {
    .rooster-card-surface--tile .aieo-brand-slide--hero > :is(.aieo-brand-slide__name, .aieo-brand-slide__meta) {
        padding-inline: var(--wp--preset--spacing--3, 0.75rem);
    }
}

/* The theme's card motion (Design `card_motion`), for visitors who have not asked for less and where a pointer
   hovers: the card lifts 2 px with the md shadow, the picture grows to 1.03 inside its square; the timings are the
   theme's product cards'. Transforms only: nothing around the card moves. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    :is(.rooster-card-motion--lift, .rooster-card-motion--lift-zoom) .aieo-brand-slide--hero {
        transition: transform 260ms cubic-bezier(.2, .7, .2, 1), box-shadow 260ms cubic-bezier(.2, .7, .2, 1);
    }
    :is(.rooster-card-motion--lift, .rooster-card-motion--lift-zoom) .aieo-brand-slide--hero:hover {
        transform: translateY(-2px);
        box-shadow: var(--wp--custom--rooster--shadow--md, none);
    }
    :is(.rooster-card-motion--zoom, .rooster-card-motion--lift-zoom) .aieo-brand-slide--hero img {
        transition: transform 600ms cubic-bezier(.2, .7, .2, 1);
    }
    :is(.rooster-card-motion--zoom, .rooster-card-motion--lift-zoom) .aieo-brand-slide--hero:hover img {
        transform: scale(1.03);
    }
}

/* The logo strip (cardStyle logo, the "Top brands" rail): each logo on its white plate in a 16:9 frame, its name
   small and muted under it, centred as the strip. */
.aieo-brand-slider .aieo-brand-slide--logo {
    text-align: center;
}
/* min-height and overflow: the frame keeps its 16:9 whatever the logo's file (an aspect ratio otherwise grows to its
   content, and a square logo made the frame square). */
.aieo-brand-slide--logo .aieo-brand-slide__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    aspect-ratio: 16 / 9;
    min-height: 0;
    overflow: hidden;
    padding: var(--wp--preset--spacing--3, 0.75rem);
    border: 1px solid var(--wp--preset--color--line, color-mix(in srgb, currentColor 16%, transparent));
    border-radius: var(--wp--custom--rooster--shape--media, 0.375rem);
    color-scheme: light;
    background: Canvas;
}
.aieo-brand-slide--logo .aieo-brand-slide__logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.aieo-brand-slide--logo .aieo-brand-slide__placeholder {
    aspect-ratio: 16 / 9;
}
.aieo-brand-slide--logo :is(.aieo-brand-slide__name, .aieo-brand-slide__meta) {
    color: var(--wp--preset--color--muted, currentColor);
    font-size: var(--wp--preset--font-size--xs, 0.75rem);
    text-align: center;
}

/* The arrows: the theme's icon buttons as on its product rows (a 44 px circle on the page's ground, its line and its
   md shadow, Lucide's chevron in the muted ink), inside the row's box, on the middle of the pictures. Only where a
   fine pointer hovers and from 600 px: a phone swipes the strip (and gets no arrows in its page at all). */
.aieo-brand-slider__nav {
    display: none;
}
@media (min-width: 600px) and (hover: hover) and (pointer: fine) {
    .aieo-brand-slider__nav {
        position: absolute;
        z-index: 2;
        top: 40%;
        top: calc((100cqi - (var(--aieo-bs-cards) - 1) * var(--aieo-bs-gap)) / var(--aieo-bs-cards) * var(--aieo-bs-ratio) / 2);
        display: grid;
        place-items: center;
        box-sizing: border-box;
        width: 2.75rem;
        height: 2.75rem;
        margin: 0;
        padding: 0;
        border: 1px solid var(--wp--preset--color--line, color-mix(in srgb, CanvasText 16%, transparent));
        border-radius: 50%;
        background: var(--wp--preset--color--bg, var(--wp--preset--color--base, Canvas));
        box-shadow: var(--wp--custom--rooster--shadow--md, none);
        color: var(--wp--preset--color--muted, CanvasText);
        cursor: pointer;
        translate: 0 -50%;
    }
    .aieo-brand-slider__nav:hover {
        color: var(--wp--preset--color--fg, CanvasText);
    }
    .aieo-brand-slider__nav:focus-visible {
        outline: none;
        box-shadow: var(--wp--custom--rooster--focus-ring, 0 0 0 3px CanvasText);
    }
    .aieo-brand-slider__nav--prev {
        inset-inline-start: var(--wp--preset--spacing--2, 0.5rem);
    }
    .aieo-brand-slider__nav--next {
        inset-inline-end: var(--wp--preset--spacing--2, 0.5rem);
    }
    .aieo-brand-slider__nav[hidden] {
        display: none;
    }
    .aieo-brand-slider__nav > :is(svg, .rooster-icon--mask) {
        width: 20px;
        height: 20px;
    }
    [dir="rtl"] .aieo-brand-slider__nav > svg {
        transform: scaleX(-1);
    }
}
/* Where the browser follows the row's scroll in CSS, the arrows show only while the row has more on their side: none
   when every brand fits, the previous one from the first move, the next one up to the end. Before any script runs,
   as the theme's own row buttons (view.js keeps the same state with the hidden attribute elsewhere). */
@supports (animation-timeline: scroll()) and (timeline-scope: none) {
    @media (min-width: 600px) and (hover: hover) and (pointer: fine) {
        .aieo-brand-slider__nav {
            visibility: hidden;
            animation: linear both;
            animation-timeline: --aieo-bs-row;
        }
        .aieo-brand-slider__nav--prev {
            animation-name: aieo-bs-prev;
        }
        .aieo-brand-slider__nav--next {
            animation-name: aieo-bs-next;
        }
    }
    @keyframes aieo-bs-prev {
        0% { visibility: hidden; }
        1%, 100% { visibility: visible; }
    }
    @keyframes aieo-bs-next {
        0%, 99% { visibility: visible; }
        100% { visibility: hidden; }
    }
}

/* The link to all brands, under the row. */
.aieo-brand-slider__footer {
    margin-top: var(--wp--preset--spacing--5, 1.5rem);
}
.aieo-brand-slider__cta {
    display: inline-block;
    padding-block: var(--wp--preset--spacing--2, 0.5rem);
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.aieo-brand-slider__cta:hover {
    color: var(--wp--preset--color--accent-text, currentColor);
}