/* ABOUTME: The sponsor strip, the same on every page of the site */
/* ABOUTME: Even boxes, one shared logo height, and a per-logo optical trim */

.sponsors {
    padding: 1rem 1rem 0;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.sponsors-inner {
    max-width: 1050px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 2.5rem 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}

.sponsors-title {
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--light-blue);
    margin: 0;
    text-align: center;
}

/* The boxes read on any ground, the heading does not — so the pages with a
   dark one ask the component for the other colour. */
.sponsors-inner--on-dark .sponsors-title {
    color: white;
}

/* Even boxes rather than a row of logos at their own sizes: every logo gets
   the same box, and the box — not the artwork — decides how big it comes out.
 *
 * The boxes are deliberately wider than the widest logo's own proportions
 * (BBSK is close to 4:1). A logo fitted into a box is held back by whichever
 * side runs out first, so once every box is wider than that, height is the
 * side that runs out for all of them — and they all come out the same height
 * instead of some hitting the ceiling and others the walls. */
.sponsors-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.75rem;
    width: 100%;
}

/* The logo's ground. It carries the fill and the corners because the recolour
   below is a filter, and a filter would take the ground down with it. Side
   padding is kept thin on purpose: it is the width left over that decides how
   tall the widest logo — and so every logo — comes out. */
.sponsor-logo-box {
    /* Four to a row. A wrapping row rather than a grid one, so a last row that
       does not fill up sits centred instead of hanging off to the left. The
       height is stated outright, because the logo inside is fitted against it. */
    flex: 0 0 calc((100% - 2.25rem) / 4);
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    box-sizing: border-box;
    background-color: white;
    border: 1px solid rgba(32, 29, 252, 0.15);
    border-radius: 0.4rem;
}

.sponsor-logo {
    /* Fills the box and is fitted inside it. Left to its own size an SVG draws
       at its viewBox — 23px for the smallest of these — and a max-width only
       ever holds a logo back, it never brings one up. */
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Per-logo optical trim, set on the element by the shared component. It is
       a transform so the boxes stay the size they are and only the artwork in
       them moves. */
    transform: scale(var(--logo-scale, 1));
    /* The logos are drawn in one pale pink. Flattened to a single ink they
       read as one set, which is what a sponsor strip wants to be. */
    filter: brightness(0);
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.sponsor-logo-box:hover .sponsor-logo {
    opacity: 1;
}

/* ---- Responsive ---- */

/* Tablet: 768px – 1023px */
@media (max-width: 1023px) {
    .sponsor-logo-box {
        flex-basis: calc((100% - 1.5rem) / 3);
        height: 3.75rem;
    }
}

/* Mobile (nagy): 480px – 767px */
@media (max-width: 767px) {
    .sponsors-inner {
        padding: 2rem 0.5rem 1rem;
        gap: 1.5rem;
    }

    .sponsor-logo-box {
        flex-basis: calc((100% - 0.75rem) / 2);
        height: 3.5rem;
    }
}

/* Mobile (kicsi): 320px – 480px */
@media (max-width: 480px) {
    .sponsor-logo-box {
        height: 3rem;
    }
}