/**
 * @file
 * Logo Grid Component
 * 
 * A responsive grid for displaying logo images with colored border lines.
 * 
 * USAGE:
 * ------
 * Wrap the grid in .logo-grid-container with a line color class.
 * Each logo cell uses .logo-grid-cell.
 * 
 * LINE COLORS:
 * ------------
 * Add a line color class to .logo-grid-container:
 * 
 * Neutral:
 *   - logo-grid-lines-gray      (#d1d5db - medium gray)
 *   - logo-grid-lines-light     (#e5e7eb - light gray, default)
 * 
 * Teal/Turquoise family:
 *   - logo-grid-lines-preussen  (#11A8C1 - teal/cyan)
 *   - logo-grid-lines-smaragd   (#00B08A - emerald green)
 *   - logo-grid-lines-himmel    (#5DE6E9 - sky blue)
 *   - logo-grid-lines-meer      (#89FFE6 - seafoam)
 * 
 * Other colors:
 *   - logo-grid-lines-rubin     (#D71760 - ruby red)
 *   - logo-grid-lines-amethyst  (#A36AB7 - purple)
 *   - logo-grid-lines-kornblume (#0046AC - deep blue)
 *   - logo-grid-lines-aprikose  (#FFA29B - peach)
 *   - logo-grid-lines-erde      (#C0BC1A - olive/earth)
 * 
 * Example: <div class="logo-grid-container logo-grid-lines-preussen">
 */

/* ==========================================================================
   LOGO GRID - Container
   ========================================================================== */

.logo-grid-container {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    background: white;
    border-top: 1px solid #e5e7eb;
    border-left: 1px solid #e5e7eb;
}

/* ==========================================================================
   LOGO GRID - Grid Layout
   ========================================================================== */

.logo-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    width: 100%;
}

@media (max-width: 1024px) {
    .logo-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .logo-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   LOGO GRID - Individual Cell
   ========================================================================== */

.logo-grid-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    padding: 1.5rem 2rem;
    background: white;
    overflow: hidden;
    box-sizing: border-box;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.logo-grid-cell img {
    display: block;
    max-width: 100%;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.9;
    margin: auto;
}

/* Hidden state for incomplete rows */
.logo-grid-cell.hidden {
    display: none;
}

/* ==========================================================================
   LOGO GRID - Line Color Options
   ========================================================================== */

/* --- Neutral --- */
.logo-grid-container.logo-grid-lines-gray {
    border-color: #d1d5db;
}
.logo-grid-container.logo-grid-lines-gray .logo-grid-cell {
    border-color: #d1d5db;
}

.logo-grid-container.logo-grid-lines-light {
    border-color: #e5e7eb;
}
.logo-grid-container.logo-grid-lines-light .logo-grid-cell {
    border-color: #e5e7eb;
}

/* --- Teal / Turquoise family --- */
.logo-grid-container.logo-grid-lines-preussen {
    border-color: #11A8C1;
}
.logo-grid-container.logo-grid-lines-preussen .logo-grid-cell {
    border-color: #11A8C1;
}

.logo-grid-container.logo-grid-lines-smaragd {
    border-color: #00B08A;
}
.logo-grid-container.logo-grid-lines-smaragd .logo-grid-cell {
    border-color: #00B08A;
}

.logo-grid-container.logo-grid-lines-himmel {
    border-color: #5DE6E9;
}
.logo-grid-container.logo-grid-lines-himmel .logo-grid-cell {
    border-color: #5DE6E9;
}

.logo-grid-container.logo-grid-lines-meer {
    border-color: #89FFE6;
}
.logo-grid-container.logo-grid-lines-meer .logo-grid-cell {
    border-color: #89FFE6;
}

/* --- Other colors --- */
.logo-grid-container.logo-grid-lines-rubin {
    border-color: #D71760;
}
.logo-grid-container.logo-grid-lines-rubin .logo-grid-cell {
    border-color: #D71760;
}

.logo-grid-container.logo-grid-lines-amethyst {
    border-color: #A36AB7;
}
.logo-grid-container.logo-grid-lines-amethyst .logo-grid-cell {
    border-color: #A36AB7;
}

.logo-grid-container.logo-grid-lines-kornblume {
    border-color: #0046AC;
}
.logo-grid-container.logo-grid-lines-kornblume .logo-grid-cell {
    border-color: #0046AC;
}

.logo-grid-container.logo-grid-lines-aprikose {
    border-color: #FFA29B;
}
.logo-grid-container.logo-grid-lines-aprikose .logo-grid-cell {
    border-color: #FFA29B;
}

.logo-grid-container.logo-grid-lines-erde {
    border-color: #C0BC1A;
}
.logo-grid-container.logo-grid-lines-erde .logo-grid-cell {
    border-color: #C0BC1A;
}