/* =========================================================
   UNDER THE BOARDS
   Jim Knute Schafer Foundation
   ========================================================= */


/* =========================================================
   PAGE BASE
   ========================================================= */

#jks-under-the-boards {
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    color: #082f4b;
}

#jks-under-the-boards *,
#jks-under-the-boards *::before,
#jks-under-the-boards *::after {
    box-sizing: border-box;
}

#jks-under-the-boards .jks-container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}


/* =========================================================
   SHARED TYPOGRAPHY
   ========================================================= */

#jks-under-the-boards h1,
#jks-under-the-boards h2,
#jks-under-the-boards h3 {
    margin-top: 0;
    font-weight: 800;
    letter-spacing: -0.03em;
}

#jks-under-the-boards h2 {
    font-size: clamp(2.8rem, 4.4vw, 4.5rem);
    line-height: 1.04;
    margin-bottom: 28px;
}

#jks-under-the-boards h3 {
    font-size: clamp(2rem, 3vw, 2.65rem);
    line-height: 1.1;
    margin-bottom: 24px;
}

#jks-under-the-boards p {
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 1.25rem;
    line-height: 1.72;
}

#jks-under-the-boards .jks-section-label,
#jks-under-the-boards .jks-story-eyebrow,
#jks-under-the-boards .jks-story-kicker {
    display: block;
    color: #d2a653;
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

#jks-under-the-boards .jks-story-lead,
#jks-under-the-boards .jks-utb-people-lead {
    font-size: 1.5rem;
    line-height: 1.62;
    font-weight: 500;
}


/* =========================================================
   SHARED BUTTONS
   ========================================================= */

#jks-under-the-boards .jks-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-height: 66px;
    padding: 19px 34px !important;

    border-radius: 2px;

    font-size: 1.3rem;
    line-height: 1.2;
    font-weight: 800 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none !important;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

#jks-under-the-boards .jks-btn-gold {
    background: #d2a653 !important;
    border: 2px solid #d2a653 !important;
    color: #062e49 !important;
}

#jks-under-the-boards .jks-btn-gold:hover {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #062e49 !important;
    transform: translateY(-2px);
}

#jks-under-the-boards .jks-btn-outline-light {
    background: transparent !important;
    border: 2px solid rgba(255,255,255,0.9) !important;
    color: #ffffff !important;
}

#jks-under-the-boards .jks-btn-outline-light:hover {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #062e49 !important;
    transform: translateY(-2px);
}


/* =========================================================
   HERO
   ========================================================= */

#jks-under-the-boards .jks-story-hero {
    position: relative;
    overflow: hidden;

    padding: 85px 0 90px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(47,119,150,0.42),
            transparent 40%
        ),
        linear-gradient(
            115deg,
            #052b45 0%,
            #073854 55%,
            #125774 100%
        );

    color: #ffffff;

    border-bottom: 3px solid #d2a653;
}

#jks-under-the-boards .jks-story-hero::after {
    content: "";
    position: absolute;

    width: 600px;
    height: 600px;

    right: -280px;
    top: -300px;

    border: 1px solid rgba(210,166,83,0.16);
    border-radius: 50%;

    pointer-events: none;
}

#jks-under-the-boards .jks-story-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0,1.2fr)
        minmax(320px,0.8fr);

    gap: 80px;
    align-items: center;
}

#jks-under-the-boards .jks-story-hero-copy {
    max-width: 720px;
}

#jks-under-the-boards .jks-story-hero .jks-story-eyebrow {
    color: #d2a653;
    font-size: 1.55rem;
    margin-bottom: 26px;
}

#jks-under-the-boards .jks-story-hero h1 {
    color: #ffffff;

    font-size: clamp(4rem,7vw,6.8rem);
    line-height: 0.91;
    letter-spacing: -0.045em;

    margin: 0 0 22px;
}

#jks-under-the-boards .jks-story-byline {
    color: #d9aa53;

    font-size: 1.35rem;
    line-height: 1.4;
    font-weight: 700;

    margin-bottom: 35px;
}

#jks-under-the-boards .jks-story-hero-lead {
    max-width: 720px;

    color: #ffffff;

    font-size: 1.5rem;
    line-height: 1.65;
    font-weight: 500;

    margin-bottom: 22px;
}

#jks-under-the-boards .jks-story-development {
    color: rgba(255,255,255,0.75);

    font-size: 1.15rem;
    line-height: 1.6;
    font-style: italic;

    margin-bottom: 0;
}


/* =========================================================
   HERO ACTIONS
   ========================================================= */

#jks-under-the-boards .jks-story-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 16px;
    margin-top: 34px;
}

#jks-under-the-boards .jks-story-hero-actions .jks-btn-gold {
    min-width: 235px;
}

#jks-under-the-boards .jks-story-hero-actions .jks-btn-outline-light {
    min-width: 255px;
}


/* =========================================================
   HERO POSTER
   ========================================================= */

#jks-under-the-boards .jks-story-hero-art {
    position: relative;

    width: 100%;
    max-width: 500px;

    justify-self: end;
}

#jks-under-the-boards .jks-story-hero-art::before {
    content: "";

    position: absolute;
    inset: 18px -18px -18px 18px;

    border: 1px solid rgba(210,166,83,0.45);

    z-index: -1;
}

#jks-under-the-boards .jks-story-hero-art img {
    display: block;

    width: 100%;
    height: auto;

    border-bottom: 3px solid #d2a653;

    box-shadow: 0 25px 60px rgba(0,0,0,0.35);
}


/* =========================================================
   CHAMPIONSHIP YEARS
   ========================================================= */

#jks-under-the-boards .jks-story-championships {
    position: relative;
    overflow: hidden;

    padding: 110px 0 115px;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(34,101,132,0.22),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #052b45 0%,
            #073854 58%,
            #0d4966 100%
        );

    color: #ffffff;
}

#jks-under-the-boards .jks-story-championships::after {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -330px;
    bottom: -270px;

    border: 1px solid rgba(210,166,83,0.14);
    border-radius: 50%;

    pointer-events: none;
}


/* Championship heading */

#jks-under-the-boards .jks-championship-heading {
    position: relative;
    z-index: 2;

    max-width: 880px;

    margin-bottom: 65px;
}

#jks-under-the-boards .jks-championship-heading .jks-section-label {
    color: #d2a653;
}

#jks-under-the-boards .jks-championship-heading h2 {
    color: #ffffff;

    max-width: 780px;
}

#jks-under-the-boards .jks-championship-heading .jks-story-lead {
    max-width: 820px;

    color: rgba(255,255,255,0.88);
}


/* =========================================================
   CHAMPIONSHIP GRID
   ========================================================= */

#jks-under-the-boards .jks-championship-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(0,0.95fr);

    grid-template-areas:
        "main story"
        "main secondary1"
        "secondary2 secondary1";

    gap: 28px;
}


/* Main 2005 image */

#jks-under-the-boards .jks-championship-photo {
    position: relative;

    margin: 0;

    overflow: visible;
}

#jks-under-the-boards .jks-championship-photo-main {
    grid-area: main;
}

#jks-under-the-boards .jks-championship-photo-main::before {
    content: "";

    position: absolute;
    inset: 18px -18px -18px 18px;

    border: 1px solid rgba(210,166,83,0.45);

    z-index: 0;
}

#jks-under-the-boards .jks-championship-photo img {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    box-shadow: 0 22px 50px rgba(0,0,0,0.28);
}

#jks-under-the-boards .jks-championship-photo-main img {
    min-height: 630px;
}


/* Secondary championship photos */

#jks-under-the-boards .jks-championship-photo-secondary {
    overflow: hidden;

    min-height: 290px;

    border-bottom: 3px solid #d2a653;
}

#jks-under-the-boards .jks-championship-photo-secondary:nth-of-type(2) {
    grid-area: secondary1;
}

#jks-under-the-boards .jks-championship-photo-secondary:nth-of-type(3) {
    grid-area: secondary2;
}

#jks-under-the-boards .jks-championship-photo-secondary img {
    min-height: 290px;
}


/* Image captions */

#jks-under-the-boards .jks-championship-photo figcaption {
    position: absolute;
    z-index: 3;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 70px 28px 25px;

    color: #ffffff;

    background:
        linear-gradient(
            to top,
            rgba(3,31,50,0.97),
            rgba(3,31,50,0)
        );
}

#jks-under-the-boards .jks-championship-photo figcaption span,
#jks-under-the-boards .jks-championship-photo figcaption strong {
    display: block;
}

#jks-under-the-boards .jks-championship-photo figcaption span {
    color: #e0b75f;

    font-size: 1.05rem;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: 0.08em;
}

#jks-under-the-boards .jks-championship-photo figcaption strong {
    margin-top: 6px;

    color: #ffffff;

    font-size: 1.25rem;
    line-height: 1.35;
}


/* =========================================================
   CHAMPIONSHIP STORY
   ========================================================= */

#jks-under-the-boards .jks-championship-story {
    grid-area: story;

    align-self: stretch;

    padding: 42px 44px;

    background: rgba(255,255,255,0.055);

    border-top: 3px solid #d2a653;
    border-left: 1px solid rgba(255,255,255,0.10);
    border-right: 1px solid rgba(255,255,255,0.10);
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

#jks-under-the-boards .jks-championship-story .jks-story-kicker {
    color: #d2a653;

    font-size: 1.12rem;
}

#jks-under-the-boards .jks-championship-story h3 {
    color: #ffffff;

    font-size: clamp(2.25rem,3vw,3rem);
}

#jks-under-the-boards .jks-championship-story p {
    color: rgba(255,255,255,0.82);

    font-size: 1.2rem;
    line-height: 1.7;
}


/* Championship quote */

#jks-under-the-boards .jks-championship-story blockquote {
    margin: 34px 0 0;

    padding: 24px 0 4px 27px;

    border-left: 3px solid #d2a653;
}

#jks-under-the-boards .jks-championship-story blockquote p {
    margin: 0;

    color: #ffffff;

    font-size: 1.35rem;
    line-height: 1.5;
    font-weight: 600;
    font-style: italic;
}


/* =========================================================
   PEOPLE BEHIND THE STORY
   ========================================================= */

#jks-under-the-boards .jks-utb-people {
    position: relative;
    overflow: hidden;

    padding: 115px 0;

    background:
        linear-gradient(
            115deg,
            #f7f4ec 0%,
            #ffffff 58%,
            #f4f1e8 100%
        );
}

#jks-under-the-boards .jks-utb-people::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -330px;
    bottom: -280px;

    border: 1px solid rgba(210,166,83,0.18);
    border-radius: 50%;

    pointer-events: none;
}


/* People grid */

#jks-under-the-boards .jks-utb-people-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0,0.95fr)
        minmax(0,1.05fr);

    gap: 85px;

    align-items: center;
}


/* =========================================================
   PEOPLE PHOTO
   ========================================================= */

#jks-under-the-boards .jks-utb-people-photo {
    position: relative;

    width: calc(100% - 18px);
}

#jks-under-the-boards .jks-utb-people-photo::before {
    content: "";

    position: absolute;

    inset: 18px -18px -18px 18px;

    border: 1px solid rgba(210,166,83,0.65);

    z-index: 0;
}

#jks-under-the-boards .jks-utb-people-photo img {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    height: auto;

    border-bottom: 3px solid #d2a653;

    box-shadow: 0 25px 55px rgba(5,43,69,0.20);
}


/* =========================================================
   PEOPLE STORY
   ========================================================= */

#jks-under-the-boards .jks-utb-people-content {
    max-width: 650px;
}

#jks-under-the-boards .jks-utb-people-content .jks-section-label {
    color: #c5963f;

    font-size: 1.25rem;
}

#jks-under-the-boards .jks-utb-people-content h2 {
    color: #082f4b;
}

#jks-under-the-boards .jks-utb-people-content .jks-utb-people-lead {
    color: #082f4b;

    font-size: 1.5rem;
    line-height: 1.62;
    font-weight: 600;

    margin-bottom: 28px;
}

#jks-under-the-boards .jks-utb-people-content > p:not(.jks-utb-people-lead) {
    color: #465a69;

    font-size: 1.18rem;
    line-height: 1.72;
}


/* =========================================================
   PEOPLE QUOTE
   ========================================================= */

#jks-under-the-boards .jks-utb-people-quote {
    position: relative;

    margin: 36px 0 24px;

    padding: 26px 0 8px 32px;

    background: transparent;

    border-left: 3px solid #d2a653;
}

#jks-under-the-boards .jks-utb-people-quote > span {
    display: none;
}

#jks-under-the-boards .jks-utb-people-quote p {
    margin: 0 !important;

    color: #082f4b;

    font-size: 1.35rem;
    line-height: 1.5;
    font-weight: 600;
    font-style: italic;
}

#jks-under-the-boards .jks-utb-people-caption {
    padding-left: 35px;
}

#jks-under-the-boards .jks-utb-people-caption strong,
#jks-under-the-boards .jks-utb-people-caption span {
    display: block;
}

#jks-under-the-boards .jks-utb-people-caption strong {
    color: #082f4b;

    font-size: 1.12rem;
}

#jks-under-the-boards .jks-utb-people-caption span {
    margin-top: 3px;

    color: #788692;

    font-size: 1rem;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

#jks-under-the-boards .jks-story-cta {
    position: relative;
    overflow: hidden;

    padding: 110px 0;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(45,117,150,0.30),
            transparent 45%
        ),
        linear-gradient(
            115deg,
            #052b45,
            #073854
        );

    color: #ffffff;
    text-align: center;

    border-top: 3px solid #d2a653;
}

#jks-under-the-boards .jks-story-cta-inner {
    position: relative;
    z-index: 2;

    max-width: 950px;
}

#jks-under-the-boards .jks-story-cta .jks-section-label {
    color: #e0b75f;

    font-size: 1.25rem;
}

#jks-under-the-boards .jks-story-cta h2 {
    color: #ffffff;
}

#jks-under-the-boards .jks-story-cta p {
    max-width: 760px;

    margin-left: auto;
    margin-right: auto;

    color: rgba(255,255,255,0.84);

    font-size: 1.25rem;
    line-height: 1.72;
}

#jks-under-the-boards .jks-story-cta-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 16px;

    margin-top: 36px;
}


/* =========================================================
   TRAILER LIGHTBOX
   ========================================================= */

.jks-trailer-lightbox {
    position: fixed;

    inset: 0;

    z-index: 999999;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 30px;
}

.jks-trailer-lightbox.is-open {
    display: flex;
}

.jks-trailer-backdrop {
    position: absolute;

    inset: 0;

    background: rgba(0,0,0,0.90);
}

.jks-trailer-modal {
    position: relative;

    z-index: 2;

    width: min(1000px,100%);

    background: #000000;

    box-shadow: 0 25px 80px rgba(0,0,0,0.6);
}

.jks-trailer-video {
    position: relative;

    width: 100%;

    padding-top: 56.25%;
}

.jks-trailer-video iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}

.jks-trailer-close {
    position: absolute;

    z-index: 5;

    top: -48px;
    right: 0;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;
    background: transparent;

    color: #ffffff;

    font-size: 2.5rem;
    line-height: 1;

    cursor: pointer;
}

body.jks-trailer-open {
    overflow: hidden;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    #jks-under-the-boards .jks-story-hero {
        padding: 70px 0 75px;
    }

    #jks-under-the-boards .jks-story-hero-grid {
        grid-template-columns:
            minmax(0,1fr)
            minmax(280px,0.75fr);

        gap: 45px;
    }

    #jks-under-the-boards .jks-story-championships,
    #jks-under-the-boards .jks-utb-people {
        padding: 90px 0;
    }

    #jks-under-the-boards .jks-championship-layout {
        grid-template-columns: 1fr 1fr;

        grid-template-areas:
            "main story"
            "secondary2 secondary1";
    }

    #jks-under-the-boards .jks-championship-photo-main img {
        min-height: 560px;
    }

    #jks-under-the-boards .jks-utb-people-grid {
        gap: 55px;
    }

    #jks-under-the-boards p {
        font-size: 1.15rem;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #jks-under-the-boards .jks-container {
        width: calc(100% - 34px);
    }


    /* Hero */

    #jks-under-the-boards .jks-story-hero {
        padding: 55px 0 65px;
    }

    #jks-under-the-boards .jks-story-hero-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    #jks-under-the-boards .jks-story-hero .jks-story-eyebrow {
        font-size: 1.15rem;
    }

    #jks-under-the-boards .jks-story-hero h1 {
        font-size: clamp(3.2rem,16vw,5rem);
    }

    #jks-under-the-boards .jks-story-byline {
        font-size: 1.15rem;

        margin-bottom: 25px;
    }

    #jks-under-the-boards .jks-story-hero-lead {
        font-size: 1.2rem;
    }

    #jks-under-the-boards .jks-story-development {
        font-size: 1rem;
    }

    #jks-under-the-boards .jks-story-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    #jks-under-the-boards .jks-story-hero-actions .jks-btn {
        width: 100%;
        min-width: 0;

        font-size: 1.05rem;

        min-height: 60px;
    }

    #jks-under-the-boards .jks-story-hero-art {
        justify-self: center;

        width: calc(100% - 14px);
        max-width: 520px;
    }

    #jks-under-the-boards .jks-story-hero-art::before {
        inset: 12px -12px -12px 12px;
    }


    /* Shared */

    #jks-under-the-boards h2 {
        font-size: clamp(2.15rem,10vw,3rem);
        line-height: 1.08;
    }

    #jks-under-the-boards h3 {
        font-size: 1.9rem;
    }

    #jks-under-the-boards .jks-section-label,
    #jks-under-the-boards .jks-story-kicker {
        font-size: 1rem;
        letter-spacing: 0.07em;
    }

    #jks-under-the-boards p {
        font-size: 1.08rem;
        line-height: 1.7;
    }

    #jks-under-the-boards .jks-story-lead,
    #jks-under-the-boards .jks-utb-people-lead {
        font-size: 1.2rem;
        line-height: 1.6;
    }


    /* Championships */

    #jks-under-the-boards .jks-story-championships {
        padding: 75px 0 80px;
    }

    #jks-under-the-boards .jks-championship-heading {
        margin-bottom: 42px;
    }

    #jks-under-the-boards .jks-championship-layout {
        grid-template-columns: 1fr;

        grid-template-areas:
            "main"
            "story"
            "secondary1"
            "secondary2";

        gap: 24px;
    }

    #jks-under-the-boards .jks-championship-photo-main {
        width: calc(100% - 12px);
    }

    #jks-under-the-boards .jks-championship-photo-main::before {
        inset: 12px -12px -12px 12px;
    }

    #jks-under-the-boards .jks-championship-photo-main img {
        min-height: 420px;
    }

    #jks-under-the-boards .jks-championship-photo-secondary,
    #jks-under-the-boards .jks-championship-photo-secondary img {
        min-height: 260px;
    }

    #jks-under-the-boards .jks-championship-story {
        padding: 32px 27px;
    }

    #jks-under-the-boards .jks-championship-story h3 {
        font-size: 2rem;
    }

    #jks-under-the-boards .jks-championship-story p {
        font-size: 1.08rem;
    }

    #jks-under-the-boards .jks-championship-story blockquote p {
        font-size: 1.2rem;
    }


    /* People */

    #jks-under-the-boards .jks-utb-people {
        padding: 80px 0;
    }

    #jks-under-the-boards .jks-utb-people-grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    #jks-under-the-boards .jks-utb-people-photo {
        width: calc(100% - 12px);
    }

    #jks-under-the-boards .jks-utb-people-photo::before {
        inset: 12px -12px -12px 12px;
    }

    #jks-under-the-boards .jks-utb-people-content {
        max-width: none;
    }

    #jks-under-the-boards .jks-utb-people-content .jks-utb-people-lead {
        font-size: 1.2rem;
    }

    #jks-under-the-boards .jks-utb-people-content > p:not(.jks-utb-people-lead) {
        font-size: 1.08rem;
    }

    #jks-under-the-boards .jks-utb-people-quote {
        padding-left: 25px;
    }

    #jks-under-the-boards .jks-utb-people-quote p {
        font-size: 1.2rem;
    }

    #jks-under-the-boards .jks-utb-people-caption {
        padding-left: 28px;
    }


    /* CTA */

    #jks-under-the-boards .jks-story-cta {
        padding: 75px 0;
    }

    #jks-under-the-boards .jks-story-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    #jks-under-the-boards .jks-story-cta-actions .jks-btn {
        width: 100%;

        font-size: 1.05rem;

        min-height: 60px;
    }


    /* Trailer */

    .jks-trailer-lightbox {
        padding: 18px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    #jks-under-the-boards .jks-container {
        width: calc(100% - 28px);
    }

    #jks-under-the-boards .jks-story-hero {
        padding-top: 45px;
    }

    #jks-under-the-boards .jks-story-hero h1 {
        font-size: 3.15rem;
    }

    #jks-under-the-boards .jks-story-championships,
    #jks-under-the-boards .jks-utb-people {
        padding: 65px 0;
    }

    #jks-under-the-boards .jks-championship-photo-main img {
        min-height: 360px;
    }

    #jks-under-the-boards .jks-story-cta {
        padding: 65px 0;
    }
}