/* Sponsor band (home), sponsor cards (conference page), sponsor rows (admin).
   Replaces the previous sponsors.css.

   Logos arrive from third parties in wildly different aspect ratios, so every
   rule here constrains a box and lets the image fit inside it. Nothing is ever
   stretched: distorting a sponsor's mark usually breaches their brand
   guidelines, and it looks careless. */

/* ── Home page title sponsor band ──────────────────────────────────────── */

.sponsor-band {
    background: #f5f7fa;
    border-top: 1px solid #e3e8ef;
    border-bottom: 1px solid #e3e8ef;
    padding: 1.25rem 0;
}

.sponsor-band-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    text-align: center;
}

.sponsor-band-intro {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.sponsor-band-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6b7a90;
}

.sponsor-band-context {
    font-size: .95rem;
    color: #12263f;
}

.sponsor-band-link {
    display: inline-flex;
    text-decoration: none;
}

/* Fixed height, automatic width: a wide wordmark and a square badge both sit
   on the same optical line. */
.sponsor-band-logo {
    display: block;
    height: 56px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
}

.sponsor-band-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #12263f;
}

/* ── Conference page sponsor cards ─────────────────────────────────────── */

.sponsors {
    margin: 2.5rem 0;
    padding-top: 1.5rem;
    border-top: 1px solid #e3e8ef;
}

.sponsors-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: #12263f;
    margin-bottom: 1.25rem;
}

.sponsors-tier + .sponsors-tier {
    margin-top: 2rem;
}

.sponsors-tier-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6b7a90;
    margin-bottom: .9rem;
}

.sponsor-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.sponsor-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    text-align: center;
}

.sponsor-card-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: inherit;
}

    .sponsor-card-link:hover .sponsor-card-name {
        text-decoration: underline;
    }

/* The logo sits in a fixed box so cards in a row line up regardless of the
   artwork's proportions. */
.sponsor-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .sponsor-card-logo img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }

.sponsor-card-name {
    font-size: .85rem;
    font-weight: 600;
    color: #12263f;
}

.sponsor-card.is-title {
    min-width: 220px;
}

    .sponsor-card.is-title .sponsor-card-logo {
        width: 200px;
        height: 90px;
    }

    .sponsor-card.is-title .sponsor-card-name {
        font-size: 1rem;
    }

.sponsor-card.is-supporting {
    min-width: 150px;
}

    .sponsor-card.is-supporting .sponsor-card-logo {
        width: 130px;
        height: 56px;
    }

@media (max-width: 576px) {
    .sponsor-band-logo {
        height: 42px;
    }

    .sponsor-grid {
        gap: .75rem;
    }

    .sponsor-card.is-title .sponsor-card-logo {
        width: 150px;
        height: 70px;
    }

    .sponsor-card.is-supporting .sponsor-card-logo {
        width: 110px;
        height: 48px;
    }
}

/* ── Admin sponsor rows ────────────────────────────────────────────────── */

.sponsor-row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem;
    margin-bottom: .6rem;
    background: #fafbfc;
    border: 1px solid #e3e8ef;
    border-radius: 6px;
}

/* Thumbnail first, so which logo belongs to which sponsor is obvious at a
   glance — the thing the previous version got wrong. */
.sponsor-row-logo {
    flex: 0 0 auto;
    width: 84px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 4px;
    overflow: hidden;
}

    .sponsor-row-logo img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.sponsor-row-nologo {
    font-size: .7rem;
    color: #9aa7b8;
}

.sponsor-row-fields {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

    .sponsor-row-fields input,
    .sponsor-row-fields select {
        width: 100%;
        padding: .45rem .6rem;
        border: 1px solid #ccd4e0;
        border-radius: 4px;
        font-size: .9rem;
    }

.sponsor-url-input {
    grid-column: 1 / -1;
}

/* The file input itself is hidden behind a styled label: browsers render the
   default control inconsistently and it is always the ugliest thing on the
   form. */
.sponsor-file-label {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    color: #0a4d8c;
    cursor: pointer;
}

    .sponsor-file-label input[type="file"] {
        font-size: .75rem;
    }

.sponsor-row-remove {
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .sponsor-row {
        flex-wrap: wrap;
    }

    .sponsor-row-fields {
        grid-template-columns: 1fr;
    }
}