/* ─── Leverandør Grid ────────────────────────────────────────────────────────── */
.lp-leverandoerer {
    display: grid;
    gap: 20px;
    padding: 12px 0;
}

.lp-cols-1 { grid-template-columns: repeat(1, 1fr); }
.lp-cols-2 { grid-template-columns: repeat(2, 1fr); }
.lp-cols-3 { grid-template-columns: repeat(3, 1fr); }
.lp-cols-4 { grid-template-columns: repeat(4, 1fr); }
.lp-cols-5 { grid-template-columns: repeat(5, 1fr); }
.lp-cols-6 { grid-template-columns: repeat(6, 1fr); }

/* ─── Kort ───────────────────────────────────────────────────────────────────── */
.lp-leverandoer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    border: 1px solid #EBEBEB;
    border-radius: 14px;
    padding: 28px 20px 20px;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
    position: relative;
    overflow: hidden;
}

.lp-leverandoer-item:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,.10);
    transform: translateY(-3px);
    border-color: #D4D4D4;
}

/* ─── Logo boks ──────────────────────────────────────────────────────────────── */
.lp-logo-box {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 16px;
    flex-shrink: 0;
}

.lp-logo-box img {
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
    display: block;
    transition: transform 0.25s ease;
}

.lp-leverandoer-item:hover .lp-logo-box img {
    transform: scale(1.05);
}

/* Grayscale */
.lp-leverandoer-item.lp-grayscale .lp-logo-box img {
    filter: grayscale(100%);
    opacity: .6;
    transition: filter .3s, opacity .3s, transform 0.25s ease;
}
.lp-leverandoer-item.lp-grayscale:hover .lp-logo-box img {
    filter: grayscale(0%);
    opacity: 1;
}

/* ─── Navn ───────────────────────────────────────────────────────────────────── */
.lp-leverandoer-navn {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #1A1A1A;
    text-align: center;
    line-height: 1.3;
    flex: 1;
}

/* ─── Link badge ─────────────────────────────────────────────────────────────── */
.lp-leverandoer-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #555;
    background: #F2F2F2;
    border: 1px solid #E0E0E0;
    border-radius: 20px;
    padding: 5px 13px 5px 10px;
    text-decoration: none;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-leverandoer-link svg {
    flex-shrink: 0;
    opacity: .5;
    transition: opacity 0.18s, transform 0.18s;
}

.lp-leverandoer-item:hover .lp-leverandoer-link {
    background: #1A1A1A;
    color: #fff;
    border-color: #1A1A1A;
}

.lp-leverandoer-item:hover .lp-leverandoer-link svg {
    opacity: 1;
    transform: translate(1px, -1px);
}

/* ─── Leverandør Slider ──────────────────────────────────────────────────────── */
.lps-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 24px 0;
    position: relative;
    /* Fade-maske i begge sider */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

/* Pause ved hover */
.lps-wrapper:hover .lps-track {
    animation-play-state: paused;
}

.lps-track {
    display: flex;
    align-items: center;
    gap: 56px;
    width: max-content;
    animation: lps-scroll linear infinite;
    will-change: transform;
}

@keyframes lps-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ─── Enkelt slide ───────────────────────────────────────────────────────────── */
.lps-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 120px;
    text-decoration: none;
    outline: none;
    border-radius: 8px;
    padding: 8px 16px;
    transition: background 0.22s ease, transform 0.22s ease;
}

a.lps-slide {
    cursor: pointer;
}

a.lps-slide:hover {
    transform: translateY(-2px);
}

.lps-slide img {
    display: block;
    object-fit: contain;
    width: auto;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.25s ease;
}

/* Grayscale tilstand – farve ved hover */
.lps-slide.lps-grayscale img {
    filter: grayscale(100%);
    opacity: 0.55;
}

.lps-slide.lps-grayscale:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Respekter reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .lps-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .lp-cols-5,
    .lp-cols-6 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 680px) {
    .lp-cols-4,
    .lp-cols-5,
    .lp-cols-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .lp-cols-2,
    .lp-cols-3,
    .lp-cols-4,
    .lp-cols-5,
    .lp-cols-6 { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Slider responsive ──────────────────────────────────────────────────────── */
/* Tablet */
@media (max-width: 900px) {
    .lps-track { gap: 40px; }
    .lps-slide { min-width: 90px; padding: 6px 12px; }
    .lps-slide img { max-height: 60px !important; }
}

/* Mobil */
@media (max-width: 600px) {
    .lps-track { gap: 28px; }
    .lps-slide { min-width: 70px; padding: 4px 8px; }
    .lps-slide img { max-height: 44px !important; }
}

/* Lille mobil */
@media (max-width: 380px) {
    .lps-track { gap: 20px; }
    .lps-slide { min-width: 60px; padding: 4px 6px; }
    .lps-slide img { max-height: 36px !important; }
}