/* ============================================================
   ICNRD 2027
   SPONSORS PAGE
============================================================ */


/* ============================================================
   VARIABLES / WRAPPER
============================================================ */

.sponsor-wrap {
    width: min(1120px, calc(100% - 64px));
    margin: 0 auto;
}


/* ============================================================
   MASTHEAD
============================================================ */

.sponsor-masthead {

    position: relative;

    padding: 58px 0 62px;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse 55% 90% at 10% 50%,
            rgba(155, 134, 255, .16),
            transparent 65%
        ),
        radial-gradient(
            ellipse 50% 80% at 90% 10%,
            rgba(79, 216, 196, .09),
            transparent 65%
        ),
        linear-gradient(
            135deg,
            var(--void) 0%,
            var(--void-soft) 58%,
            var(--void-alt) 100%
        );

    border-bottom: 1px solid var(--line-dark);

    color: var(--parchment);

}


.sponsor-masthead::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--terracotta),
            var(--bronze),
            var(--violet),
            transparent
        );

    opacity: .65;

}


.sponsor-masthead .sponsor-wrap {

    position: relative;

    z-index: 2;

    text-align: center;

}


.sponsor-eyebrow {

    margin-bottom: 10px;

    font-family:
        'Space Mono',
        monospace;

    font-size: .68rem;

    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;

    color: var(--cyan);

}


.sponsor-masthead h1 {

    margin: 0;

    color: var(--parchment);

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        clamp(2.5rem, 5vw, 4rem);

    line-height: 1.05;

    font-weight: 600;

}


.sponsor-masthead p {

    max-width: 700px;

    margin: 15px auto 0;

    color: #d5cce2;

    font-size: 1rem;

    line-height: 1.6;

}


/* ============================================================
   ENQUIRY SECTION
============================================================ */

.sponsor-enquiry-section {

    padding: 65px 0;

    background: var(--paper);

}


/* ============================================================
   INTRO
============================================================ */

.sponsor-section-intro {

    display: grid;

    grid-template-columns: 70px 1fr;

    gap: 28px;

    margin-bottom: 38px;

}


.sponsor-section-number {

    padding-top: 7px;

    color: var(--bronze);

    font-family:
        'Cormorant Garamond',
        serif;

    font-size: 1.7rem;

    font-style: italic;

}


.sponsor-kicker {

    display: inline-block;

    margin-bottom: 8px;

    color: var(--terracotta);

    font-family:
        'Space Mono',
        monospace;

    font-size: .67rem;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;

}


.sponsor-section-intro h2 {

    max-width: 680px;

    margin: 0;

    color: var(--charcoal);

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        clamp(1.9rem, 3.5vw, 2.7rem);

    line-height: 1.12;

    font-weight: 600;

}


.sponsor-section-intro p {

    max-width: 720px;

    margin: 13px 0 0;

    color: var(--ink-soft);

    font-size: .95rem;

    line-height: 1.65;

}


/* ============================================================
   MAIN GRID
============================================================ */

.sponsor-enquiry-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, .95fr);

    gap: 28px;

    align-items: stretch;

}


/* ============================================================
   FORM CARD
============================================================ */

.sponsor-form-card {

    position: relative;

    padding: 32px;

    background: #fff;

    border: 1px solid var(--line);

    border-top: 4px solid var(--terracotta);

    box-shadow: var(--shadow);

}


.sponsor-card-heading {

    margin-bottom: 25px;

}


.sponsor-card-heading > span {

    display: block;

    margin-bottom: 5px;

    color: var(--bronze);

    font-family:
        'Space Mono',
        monospace;

    font-size: .65rem;

    font-weight: 700;

    letter-spacing: .1em;

    text-transform: uppercase;

}


.sponsor-card-heading h3 {

    margin: 0;

    color: var(--charcoal);

    font-family:
        'Cormorant Garamond',
        serif;

    font-size: 1.75rem;

    line-height: 1.15;

}


.sponsor-card-heading p {

    margin: 7px 0 0;

    color: var(--ink-soft);

    font-size: .78rem;

}


/* ============================================================
   FORM
============================================================ */

.sponsor-form {

    display: flex;

    flex-direction: column;

    gap: 17px;

}


.sponsor-field {

    display: flex;

    flex-direction: column;

    gap: 6px;

}


.sponsor-field label {

    color: var(--ink);

    font-family:
        'IBM Plex Mono',
        monospace;

    font-size: .67rem;

    font-weight: 700;

    letter-spacing: .04em;

    text-transform: uppercase;

}


.sponsor-field label sup {

    color: var(--terracotta);

    font-size: .75rem;

}


.sponsor-field input,
.sponsor-field select,
.sponsor-field textarea {

    width: 100%;

    padding: 11px 13px;

    border: 1px solid var(--line);

    border-radius: 0;

    outline: none;

    background: var(--paper);

    color: var(--ink);

    font-family:
        'EB Garamond',
        serif;

    font-size: .95rem;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.sponsor-field input,
.sponsor-field select {

    height: 45px;

}


.sponsor-field textarea {

    min-height: 115px;

    resize: vertical;

    line-height: 1.5;

}


.sponsor-field input::placeholder,
.sponsor-field textarea::placeholder {

    color: #8b8492;

}


.sponsor-field input:focus,
.sponsor-field select:focus,
.sponsor-field textarea:focus {

    background: #fff;

    border-color: var(--violet);

    box-shadow:
        0 0 0 3px rgba(155, 134, 255, .10);

}


/* ============================================================
   SUBMIT
============================================================ */

.sponsor-submit {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    width: fit-content;

    min-width: 175px;

    margin-top: 3px;

    padding: 12px 20px;

    border: 1px solid var(--terracotta);

    background: var(--terracotta);

    color: var(--paper);

    font-family:
        'Space Mono',
        monospace;

    font-size: .68rem;

    font-weight: 700;

    letter-spacing: .05em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


.sponsor-submit:hover {

    background: var(--terracotta-deep);

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(181, 80, 46, .18);

}


.sponsor-submit i {

    font-size: .75rem;

}


/* ============================================================
   INFORMATION CARD
============================================================ */

.sponsor-info-card {

    position: relative;

    overflow: hidden;

    padding: 32px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(79, 216, 196, .09),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            var(--void) 0%,
            var(--void-soft) 100%
        );

    border: 1px solid var(--line-dark);

    color: var(--parchment);

}


.sponsor-info-card::before {

    content: "";

    position: absolute;

    inset: 9px;

    border: 1px solid rgba(155, 134, 255, .15);

    pointer-events: none;

}


.sponsor-info-top,
.sponsor-benefits,
.sponsor-contact {

    position: relative;

    z-index: 2;

}


.sponsor-info-label {

    display: block;

    margin-bottom: 10px;

    color: var(--cyan);

    font-family:
        'Space Mono',
        monospace;

    font-size: .65rem;

    font-weight: 700;

    letter-spacing: .1em;

    text-transform: uppercase;

}


.sponsor-info-top h3 {

    max-width: 470px;

    margin: 0;

    color: var(--parchment);

    font-family:
        'Cormorant Garamond',
        serif;

    font-size: 2rem;

    line-height: 1.1;

    font-weight: 600;

}


.sponsor-info-top p {

    margin: 15px 0 0;

    color: #cfc5dd;

    font-size: .9rem;

    line-height: 1.65;

}


/* ============================================================
   BENEFITS
============================================================ */

.sponsor-benefits {

    margin-top: 28px;

    border-top: 1px solid var(--line-dark);

}


.sponsor-benefit {

    display: grid;

    grid-template-columns: 38px 1fr;

    gap: 13px;

    padding: 15px 0;

    border-bottom: 1px solid var(--line-dark);

}


.sponsor-benefit-number {

    padding-top: 2px;

    color: var(--violet);

    font-family:
        'Space Mono',
        monospace;

    font-size: .65rem;

    font-weight: 700;

}


.sponsor-benefit strong {

    display: block;

    color: var(--parchment);

    font-family:
        'Cormorant Garamond',
        serif;

    font-size: 1.08rem;

    font-weight: 600;

}


.sponsor-benefit p {

    margin: 3px 0 0;

    color: #bcb1cc;

    font-size: .76rem;

    line-height: 1.5;

}


/* ============================================================
   CONTACT
============================================================ */

.sponsor-contact {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 4px;

    margin-top: 23px;

}


.sponsor-contact > span {

    margin-bottom: 4px;

    color: var(--bronze-light);

    font-family:
        'Space Mono',
        monospace;

    font-size: .61rem;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

}


.sponsor-contact a {

    color: var(--cyan) !important;

    font-family:
        'IBM Plex Mono',
        monospace;

    font-size: .72rem;

}


.sponsor-contact a:hover {

    color: var(--violet) !important;

}


/* ============================================================
   SPONSOR SHOWCASE
============================================================ */

.sponsor-showcase-section {

    padding: 65px 0 75px;

    background: var(--parchment);

    border-top: 1px solid var(--line);

}


.sponsor-showcase-heading {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 40px;

    margin-bottom: 30px;

}


.sponsor-showcase-heading h2 {

    margin: 0;

    color: var(--charcoal);

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        clamp(2rem, 3.5vw, 2.7rem);

    line-height: 1.1;

}


.sponsor-showcase-heading > p {

    max-width: 470px;

    margin: 0;

    color: var(--ink-soft);

    font-size: .88rem;

    line-height: 1.6;

}


/* ============================================================
   SPONSOR GRID
============================================================ */

.sponsor-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;

}


.sponsor-logo-card {

    min-height: 190px;

    background: var(--paper);

    border: 1px solid var(--line);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}


.sponsor-logo-card:hover {

    transform: translateY(-3px);

    border-color: var(--bronze);

    box-shadow: var(--shadow);

}


.sponsor-logo-area {

    min-height: 150px;

    padding: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.sponsor-logo-area img {

    max-width: 85%;

    max-height: 90px;

    width: auto;

    height: auto;

    object-fit: contain;

}


.sponsor-logo-footer {

    padding: 9px 15px;

    border-top: 1px solid var(--line);

    text-align: center;

}


.sponsor-logo-footer span {

    color: var(--bronze);

    font-family:
        'Space Mono',
        monospace;

    font-size: .58rem;

    font-weight: 700;

    letter-spacing: .09em;

    text-transform: uppercase;

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

    .sponsor-wrap {

        width: min(
            100%,
            calc(100% - 40px)
        );

    }


    .sponsor-enquiry-grid {

        grid-template-columns: 1fr;

    }


    .sponsor-info-card {

        min-height: auto;

    }


    .sponsor-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

    .sponsor-wrap {

        width: calc(100% - 30px);

    }


    .sponsor-masthead {

        padding: 45px 0 48px;

    }


    .sponsor-masthead h1 {

        font-size: 2.45rem;

    }


    .sponsor-masthead p {

        font-size: .86rem;

    }


    .sponsor-enquiry-section {

        padding: 45px 0;

    }


    .sponsor-section-intro {

        grid-template-columns: 1fr;

        gap: 5px;

        margin-bottom: 28px;

    }


    .sponsor-section-number {

        padding-top: 0;

    }


    .sponsor-section-intro h2 {

        font-size: 2rem;

    }


    .sponsor-section-intro p {

        font-size: .86rem;

    }


    .sponsor-form-card,
    .sponsor-info-card {

        padding: 23px 20px;

    }


    .sponsor-card-heading h3 {

        font-size: 1.55rem;

    }


    .sponsor-info-top h3 {

        font-size: 1.7rem;

    }


    .sponsor-showcase-section {

        padding: 45px 0 55px;

    }


    .sponsor-showcase-heading {

        display: block;

        margin-bottom: 25px;

    }


    .sponsor-showcase-heading > p {

        margin-top: 12px;

        font-size: .84rem;

    }


    .sponsor-grid {

        grid-template-columns: 1fr;

    }


    .sponsor-logo-card {

        min-height: 170px;

    }

}


/* ============================================================
   SMALL PHONES
============================================================ */

@media (max-width: 420px) {

    .sponsor-wrap {

        width: calc(100% - 24px);

    }


    .sponsor-masthead {

        padding: 38px 0 42px;

    }


    .sponsor-masthead h1 {

        font-size: 2.15rem;

    }


    .sponsor-masthead p {

        font-size: .8rem;

    }


    .sponsor-form-card,
    .sponsor-info-card {

        padding: 20px 16px;

    }


    .sponsor-field input,
    .sponsor-field select {

        height: 43px;

        font-size: .87rem;

    }


    .sponsor-field textarea {

        font-size: .87rem;

    }


    .sponsor-submit {

        width: 100%;

    }


    .sponsor-benefit {

        grid-template-columns: 32px 1fr;

    }

}