/**
 * HNMC Logo Manager – Frontend Styles
 *
 * Uses CSS Custom Properties for flexible configuration via shortcode attributes.
 * --hnmc-cols:        Spaltenanzahl Desktop
 * --hnmc-cols-tablet: Spaltenanzahl Tablet
 * --hnmc-cols-mobile: Spaltenanzahl Mobile
 * --hnmc-gap:         Abstand zwischen Logos
 * --hnmc-height:      Normalisierte Höhe
 * --hnmc-max-width:   Max-Breite des Containers
 */

/* ========================================
   Grid Container
   ======================================== */

.hnmc-logos {
    display: grid;
    grid-template-columns: repeat(var(--hnmc-cols, 4), 1fr);
    gap: var(--hnmc-gap, 20px);
    align-items: center;
    justify-items: center;
    max-width: var(--hnmc-max-width, none);
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

/* ========================================
   Grid Item
   ======================================== */

.hnmc-logos__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.hnmc-logos__item a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
    outline: none;
}

.hnmc-logos__item a:hover,
.hnmc-logos__item a:focus {
    opacity: 1;
}

.hnmc-logos__item img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 0;
}

/* ========================================
   Normalisierung: Gleiche Höhe
   ======================================== */

.hnmc-logos--normalized .hnmc-logos__item img {
    height: var(--hnmc-height, 60px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* ========================================
   Formen
   ======================================== */

.hnmc-logos__item--round img {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.hnmc-logos__item--square img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* ========================================
   Graustufen-Effekt
   ======================================== */

.hnmc-logos--grayscale .hnmc-logos__item img {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.hnmc-logos--grayscale .hnmc-logos__item:hover img,
.hnmc-logos--grayscale .hnmc-logos__item:focus-within img {
    filter: grayscale(0%);
    opacity: 1;
}

/* ========================================
   Responsive: Tablet (< 768px)
   ======================================== */

@media screen and (max-width: 768px) {
    .hnmc-logos {
        grid-template-columns: repeat(var(--hnmc-cols-tablet, 3), 1fr);
    }
}

/* ========================================
   Responsive: Mobile (< 480px)
   ======================================== */

@media screen and (max-width: 480px) {
    .hnmc-logos {
        grid-template-columns: repeat(var(--hnmc-cols-mobile, 2), 1fr);
    }

    .hnmc-logos--normalized .hnmc-logos__item img {
        height: calc(var(--hnmc-height, 60px) * 0.75);
    }
}