/* ============================================================================================
   SPONSOR STRIP (SponsorFooter.razor).

   Its own file because the static event website (/e/{slug}) shows the strip but loads none of
   the app's stylesheets. In the app it loads right after custom.css (AppAssets), where these
   rules used to sit. The details modal (.spModal) stays in custom.css: other pages put their own
   classes on the same shell (dshModal, dshCard, usrQrCard) and rely on coming after it.
   ============================================================================================ */

/* =========================================================================
   Sponsor footer (public pages) + its details modal, and the admin table.
   ========================================================================= */

.spFooter {
    margin-top: 2.5rem;
    padding: 36px 0 20px;
    border-top: 1px solid #e7e9ee;
    /* A quiet ground that lifts the strip off the form above it without competing with it. */
    background: linear-gradient(180deg, #fbfbfd 0%, #fff 55%);
}

.spFooter__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Eyebrow and tier names are set as centred rules: the hairline carries the eye across a
   strip that is otherwise all logos and gaps. */
.spFooter__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 26px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #8a90a0;
}

.spFooter__eyebrow::before,
.spFooter__eyebrow::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e5ec);
}

.spFooter__eyebrow::after {
    background: linear-gradient(90deg, #e2e5ec, transparent);
}

.spFooter__tier + .spFooter__tier {
    margin-top: 30px;
}

.spFooter__tierName {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #101828;
}

.spFooter__tierName::before,
.spFooter__tierName::after {
    content: "";
    width: 26px;
    height: 1px;
    background: #d7dbe4;
}

/* Rank sets the tile size: the top tier reads first from across the room, and each tier below
   it steps down. Ungrouped sponsors sit at the smallest size. */
.spFooter__tier {
    --sp-tile-w: 132px;
    --sp-tile-h: 66px;
}

.spFooter__tier.is-rank-1 {
    --sp-tile-w: 186px;
    --sp-tile-h: 92px;
}

.spFooter__tier.is-rank-2 {
    --sp-tile-w: 156px;
    --sp-tile-h: 78px;
}

.spFooter__tier.is-rank-1 .spFooter__tierName {
    font-size: .8rem;
    color: #1f2937;
}

.spFooter__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

/* One tile shape for all three states (button, link, plain), so a sponsor without
   a website does not look like a different kind of thing. */
.spFooter__logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sp-tile-w);
    height: var(--sp-tile-h);
    padding: 12px 16px;
    border: 1px solid #eceef2;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.spFooter__logo.is-plain {
    cursor: default;
}

.spFooter__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Sponsor logos arrive in every colour; muted until hover keeps the strip calm
       without hiding anyone. */
    filter: grayscale(1);
    opacity: .78;
    transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}

.spFooter__logo:hover:not(.is-plain),
.spFooter__logo:focus-visible {
    border-color: #d8d5ff;
    box-shadow: 0 14px 26px -18px rgba(31, 27, 96, .65);
    transform: translateY(-2px);
}

.spFooter__logo:hover img,
.spFooter__logo:focus-visible img,
.spFooter__logo.is-plain img {
    filter: none;
    opacity: 1;
}

/* A clickable logo says so on hover — otherwise a tile that opens a story and a tile that does
   nothing look identical. */
.spFooter__hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3px 0 4px;
    background: #4a3aff;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    transform: translateY(100%);
    transition: transform .18s ease;
}

.spFooter__logo--rich:hover .spFooter__hint,
.spFooter__logo--rich:focus-visible .spFooter__hint {
    transform: translateY(0);
}

.spFooter__logo--rich:hover img,
.spFooter__logo--rich:focus-visible img {
    transform: translateY(-5px);
}

.spFooter__logo:focus-visible {
    outline: 2px solid #4a3aff;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .spFooter__logo,
    .spFooter__logo img,
    .spFooter__hint {
        transition: none;
    }

    .spFooter__logo:hover:not(.is-plain),
    .spFooter__logo:focus-visible,
    .spFooter__logo--rich:hover img,
    .spFooter__logo--rich:focus-visible img {
        transform: none;
    }

    .spFooter__logo--rich:hover .spFooter__hint,
    .spFooter__logo--rich:focus-visible .spFooter__hint {
        transform: translateY(0);
    }
}

/* No hover on touch, so the affordance on a clickable logo is always showing. */
@media (hover: none) {
    .spFooter__hint {
        transform: translateY(0);
    }

    .spFooter__logo--rich img {
        transform: translateY(-5px);
    }
}

@media (max-width: 575px) {
    .spFooter {
        padding-top: 28px;
    }

    
    /* The rank steps stop paying for themselves once the tiles are this small. */
    .spFooter__tier,
    .spFooter__tier.is-rank-1,
    .spFooter__tier.is-rank-2 {
        --sp-tile-w: 132px;
        --sp-tile-h: 66px;
    }
}