/**
 * Content detail neighbors strip — full-width band above footer (outside site-wrapper).
 */

body.page-blog-post-detail .gallery-neighbors-strip,
body.page-article-detail .gallery-neighbors-strip,
body.page-home .gallery-neighbors-strip.sponsors-strip,
body.page-live .gallery-neighbors-strip.sponsors-strip,
body.forum-phpbb-page .gallery-neighbors-strip.sponsors-strip,
body.wall-page .gallery-neighbors-strip.sponsors-strip {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 10px clamp(12px, 2vw, 28px) 12px;
    background: linear-gradient(180deg, #e8ecef 0%, #dfe4e8 100%);
    border-top: 1px solid #cfd4da;
    border-bottom: 1px solid #cfd4da;
    border-radius: 0;
    box-sizing: border-box;
}

body.page-blog-post-detail .site-footer,
body.page-article-detail .site-footer,
body.page-home .site-footer,
body.page-live .site-footer,
body.forum-phpbb-page .site-footer,
body.wall-page .site-footer {
    margin-top: 0;
}

.gallery-neighbors-strip__inner {
    width: 100%;
    max-width: none;
    margin: 0;
}

.gallery-neighbors-strip__title {
    margin: 0 0 8px;
    padding: 0 2px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.gallery-neighbors-strip__title i {
    color: #3498db;
    font-size: 0.85rem;
}

.publication-neighbors-strip--blog .publication-neighbors-strip__icon,
.publication-neighbors-strip--article .publication-neighbors-strip__icon {
    color: #3498db;
}

.publication-neighbors-strip--sponsors .publication-neighbors-strip__icon {
    color: #c9a227;
}

.gallery-neighbors-group--sponsors {
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
}

.sponsors-slider {
    position: relative;
    width: 100%;
}

.sponsors-slider__viewport {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 28px,
        #000 calc(100% - 28px),
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 28px,
        #000 calc(100% - 28px),
        transparent 100%
    );
}

.sponsors-slider__track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    width: max-content;
    will-change: transform;
}

.sponsors-slider__track.is-animated {
    animation: sponsors-marquee var(--sponsors-marquee-duration, 36s) linear infinite;
}

.sponsors-slider__track.is-animated:hover {
    animation-play-state: paused;
}

.sponsors-slider__viewport.is-static {
    display: flex;
    justify-content: center;
    -webkit-mask-image: none;
    mask-image: none;
}

.sponsors-slider__track:not(.is-animated) {
    margin: 0;
}

@keyframes sponsors-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100% / var(--sponsors-marquee-copies, 2)));
    }
}

.sponsors-slider__fade {
    display: none;
}

.gallery-neighbor-card__image--logo {
    background: #fff;
}

.gallery-neighbor-card__image--logo img {
    object-fit: contain;
    padding: 8px;
}

.gallery-neighbor-card--sponsor .gallery-neighbor-card__title {
    text-transform: none;
    letter-spacing: 0;
}

.sponsor-card__rating {
    color: #c9a227;
    font-size: 0.62rem;
    gap: 2px;
}

.sponsor-card__rating i {
    color: #c9a227;
}

.sponsor-card__rating .sponsor-star--empty {
    opacity: 0.22;
}

@media (prefers-reduced-motion: reduce) {
    .sponsors-slider__track.is-animated {
        animation: none;
        overflow-x: auto;
        max-width: 100%;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    .sponsors-slider__viewport {
        -webkit-mask-image: none;
        mask-image: none;
        overflow-x: auto;
    }
}

.gallery-neighbors-strip__hint {
    font-size: 0.7rem;
    font-weight: 500;
    color: #6c757d;
}

.gallery-neighbors-strip__track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0;
    width: 100%;
    min-height: 0;
}

.gallery-neighbors-group {
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    gap: 12px;
}

.gallery-neighbors-strip__track:has(.gallery-neighbors-group:only-child) {
    justify-content: center;
}

.gallery-neighbors-gap {
    flex: 1 1 auto;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(32px, 6vw, 120px);
    height: 100px;
    margin: 0 8px;
}

.gallery-neighbors-gap__line {
    display: block;
    width: 2px;
    height: 70%;
    max-height: 72px;
    border-radius: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        #b8c0c8 12%,
        #b8c0c8 88%,
        transparent 100%
    );
}

.gallery-neighbor-card--compact {
    flex: 0 0 336px;
    width: 336px;
    max-width: 336px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border-radius: 2px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 3px 10px rgba(0, 0, 0, 0.08);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.gallery-neighbor-card--compact:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.gallery-neighbor-card__photo {
    border: 1px solid #c5c5c5;
    border-bottom: none;
    padding: 6px 6px 0;
    background: #fff;
    box-sizing: border-box;
}

.gallery-neighbor-card__image {
    display: block;
    aspect-ratio: 8 / 3;
    overflow: hidden;
    background: #f0f0f0;
    line-height: 0;
}

.gallery-neighbor-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.gallery-neighbor-card--compact:hover .gallery-neighbor-card__image img {
    transform: scale(1.04);
}

.gallery-neighbor-card__caption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 46px;
    padding: 7px 10px 9px;
    background: #fff;
    border: 1px solid #c5c5c5;
    border-top: none;
    box-sizing: border-box;
}

.gallery-neighbor-card__title {
    font-size: 0.68rem;
    font-weight: 700;
    color: #333;
    line-height: 1.25;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gallery-neighbor-card__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 18px;
}

.gallery-neighbor-card__meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 0.62rem;
    color: #777;
    line-height: 1.2;
}

.gallery-neighbor-card__category {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 2px;
    font-size: 0.6rem;
    font-weight: 600;
    color: #fff;
    background: var(--bmw-blue, #1c69d4);
    white-space: nowrap;
}

.gallery-neighbor-card__stats {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 0.62rem;
    color: #888;
    white-space: nowrap;
}

.gallery-neighbor-card__stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.gallery-neighbor-card__stat i {
    font-size: 0.6rem;
    color: #aaa;
}

.gallery-neighbor-card__stat--likes i {
    color: #d45c5c;
}

@media (max-width: 900px) {
    .gallery-neighbors-strip__track {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .gallery-neighbors-group {
        flex-wrap: wrap;
        justify-content: center;
    }

    .gallery-neighbors-gap {
        flex: 1 1 100%;
        order: 1;
        height: 2px;
        min-width: 0;
        margin: 4px 0;
    }

    .gallery-neighbors-group--before {
        order: 0;
    }

    .gallery-neighbors-group--after {
        order: 2;
    }

    .gallery-neighbors-gap__line {
        width: 45%;
        height: 2px;
        max-height: none;
        background: linear-gradient(
            90deg,
            transparent 0%,
            #b8c0c8 20%,
            #b8c0c8 80%,
            transparent 100%
        );
    }
}

@media (max-width: 760px) {
    .gallery-neighbor-card--compact {
        flex: 0 0 280px;
        width: 280px;
        max-width: 280px;
    }
}

@media (max-width: 400px) {
    .gallery-neighbor-card--compact {
        flex: 0 0 240px;
        width: 240px;
        max-width: 240px;
    }
}