/*
 * Related Carousel — stili del blocco bricks/related-carousel.
 *
 * Integra Swiper (caricato da bricks-swiper-style) con il sistema di token
 * del core. Le card (.bricks-related-card) sono usate come slideClass in
 * script.js al posto della classe swiper-slide di default.
 *
 * Le frecce e la paginazione usano i colori di default Swiper, ridefinibili
 * con i token brand del tema via CSS variables standard di Swiper 8+
 * (--swiper-navigation-color, --swiper-pagination-color).
 *
 * I token --bricks-related-card-* sono condivisi con bricks/related-grid
 * e sovrescrivibili dal tema cliente via @theme.
 */

/* ── Wrapper carosello ──────────────────────────────────────────────────────── */

.tnd-related-carousel {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.tnd-related-carousel__swiper {
    overflow: visible;
}

/* Le .bricks-related-card non hanno swiper-slide: questo failsafe garantisce
   che si comportino correttamente come slide flex nel wrapper Swiper. */
.tnd-related-carousel .swiper-wrapper > * {
    flex-shrink: 0;
    height: auto;
}

/* Gap laterale per navigation arrows */
.tnd-related-carousel--has-navigation {
    padding-inline: 40px;
}

/* Paginazione: spazio inferiore per i dots */
.tnd-related-carousel .tnd-related-carousel__pagination {
    margin-top: var(--spacing-sm, 8px);
    position: relative;
}

/* Fade effect: il CSS built-in di Swiper usa .swiper-slide come selettore,
   ma il slideClass del blocco è .bricks-related-card — le regole native non
   fanno match. Questa replica garantisce transition e pointer-events corretti. */
.swiper-fade .bricks-related-card {
    pointer-events: none;
    transition-property: opacity;
}
.swiper-fade .bricks-related-card.swiper-slide-active {
    pointer-events: auto;
}

/* ── Card correlato ─────────────────────────────────────────────────────────── */

.bricks-related-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--bricks-related-card-border-radius, 0);
}

/* Media (immagine + badge) */

.bricks-related-card__media {
    position: relative;
    overflow: hidden;
}

.bricks-related-card__media-link {
    display: block;
    line-height: 0;
}

.bricks-related-card__image {
    aspect-ratio: var(--bricks-related-card-aspect-ratio, 16 / 9);
    display: block;
    object-fit: cover;
    width: 100%;
    transition: transform 0.3s ease;
}

.bricks-related-card:hover .bricks-related-card__image {
    transform: scale(1.04);
}

/* Badge sovrapposto all'immagine */

.bricks-related-card__badge {
    background: var(--bricks-related-card-badge-bg, var(--color-brand, #000));
    border-radius: var(--bricks-related-card-badge-radius, var(--radius-sm, 4px));
    bottom: var(--spacing-xs, 4px);
    color: var(--bricks-related-card-badge-color, var(--color-brand-contrast, #fff));
    display: inline-block;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    left: var(--spacing-xs, 4px);
    letter-spacing: 0.04em;
    line-height: 1;
    padding: 4px 8px;
    position: absolute;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 0.2s ease;
    z-index: 1;
}

.bricks-related-card__badge:hover {
    opacity: 0.85;
}

/* Body (extra fields + titolo) */

.bricks-related-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--spacing-xs, 4px);
    padding: var(--spacing-sm, 8px) 0 0;
}

/* Titolo */

.bricks-related-card__title {
    font-size: var(--text-base, 1rem);
    font-weight: 600;
    line-height: var(--text-base--line-height, 1.4);
    margin: 0;
}

.bricks-related-card__title a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.bricks-related-card__title a:hover {
    opacity: 0.7;
}