/* ============================================================
   RESOURCES PAGE HERO
============================================================ */

.resources-hero h1 {
    margin:.5rem 0 1rem;
}

.resources-hero p {
    max-width:900px;
    margin:0 auto;
    text-align:center;
}


/* ============================================================
   RESOURCE NAV
============================================================ */

.resources-nav {
    position:sticky;
    top:6rem;
    z-index:1500;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:0;
    width:100%;
    box-sizing:border-box;
    padding:.9rem 1.25rem;
    background:#fff;
    border-bottom:1px solid #d9d9d9;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    float:none;
    clear:both;
}

.resources-nav a {
    display:inline-block;
    padding:.35rem 1.25rem;
    color:#1c6f83;
    text-decoration:none;
    font-size:.85rem;
    line-height:1.2rem;
    font-weight:700;
    letter-spacing:.06em;
    transition:color .25s ease, background-color .25s ease;
}

.resources-nav a:hover {
    color:#e0593a;
}

.resources-nav a + a {
    border-left:1px solid #d9d9d9;
}


/* ============================================================
   GENERAL RESOURCE SECTIONS
============================================================ */

.resources-section {
    box-sizing:border-box;
}

.resources-section-intro {
    max-width:800px;
    margin:0 auto 3rem;
    text-align:center;
    color:#555;
}


/* ============================================================
   RESOURCE LINKS
============================================================ */

.resource-link {
    display:inline-block;
    color:#e0593a;
    font-size:.85rem;
    line-height:1.2rem;
    font-weight:800;
    letter-spacing:.05em;
    text-decoration:none;
}

.resource-link:hover {
    color:#1c6f83;
}

.resource-arrow {
    display:inline-block;
    margin-left:.25rem;
    transition:transform .2s ease;
}

.resource-link:hover .resource-arrow {
    transform:translateX(3px);
}

.resource-type {
    display:block;
    margin-bottom:.55rem;
    color:#1c6f83;
    font-size:.75rem;
    line-height:1rem;
    font-weight:800;
    letter-spacing:.1em;
}


/* ============================================================
   FREE GUIDES & COURSES
============================================================ */

.free-resource-grid {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:2rem;
    width:100%;
    max-width:1100px;
    margin:0 auto;
}

.free-resource-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;
    background:#f7f7f7;
    border:1px solid #dedede;
    border-radius:4px;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.free-resource-image {
    display:block;
    width:100%;
    aspect-ratio:4 / 3;
    overflow:hidden;
    background:#eee;
}

.free-resource-image img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s ease;
}

.free-resource-image:hover img {
    transform:scale(1.025);
}

.free-resource-content {
    display:flex;
    flex-direction:column;
    flex:1;
    padding:1.5rem 1.5rem 1.75rem;
}

.free-resource-content h3 {
    margin:0 0 .8rem;
    color:#333;
    font-size:1.2rem;
    line-height:1.45rem;
    font-weight:800;
}

.free-resource-content p {
    margin:0 0 1.35rem;
    color:#555;
    font-size:1rem;
    line-height:1.55rem;
}

.free-resource-content .resource-link {
    margin-top:auto;
}


/* ============================================================
   LATEST ARTICLE
============================================================ */

.latest-article {
    display:flex;
    width:100%;
    max-width:1050px;
    margin:0 auto 2.5rem;
    background:#f7f7f7;
    border:1px solid #dedede;
    border-radius:4px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.latest-article-image {
    display:block;
    flex:0 0 42%;
    width:42%;
    background:#eee;
    overflow:hidden;
}

.latest-article-image img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s ease;
}

.latest-article-image:hover img {
    transform:scale(1.025);
}

.latest-article-content {
    display:flex;
    flex-direction:column;
    justify-content:center;
    flex:1;
    padding:2rem 2.5rem 2.25rem;
}

.latest-article-content h3 {
    margin:0 0 .8rem;
    color:#333;
    font-size:1.6rem;
    line-height:2rem;
    font-weight:800;
}

.latest-article-content p {
    margin:0 0 1.25rem;
    color:#555;
    font-size:1.05rem;
    line-height:1.7rem;
}

.latest-article-content .resource-link {
    margin-top:auto;
}


/* ============================================================
   COMMUNITY
============================================================ */

.community-options {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:2rem;
    width:100%;
    max-width:1050px;
    margin:0 auto;
}

.community-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;
    background:#f7f7f7;
    border:1px solid #dedede;
    border-radius:4px;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.community-card-image {
    display:block;
    width:100%;
    aspect-ratio:16 / 9;
    overflow:hidden;
    background:#eee;
}

.community-card-image img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.community-card-content {
    display:flex;
    flex-direction:column;
    flex:1;
    padding:2rem;
}

.community-card-content h3 {
    margin:0 0 .8rem;
    color:#333;
    font-size:1.3rem;
    line-height:1.5rem;
    font-weight:800;
}

.community-card-content p {
    margin:0 0 1.35rem;
    color:#555;
    font-size:1rem;
    line-height:1.6rem;
}

.community-card-content .resource-link {
    margin-top:auto;
}


/* ============================================================
   GUIDEBOOK EXCERPT
============================================================ */

.resources-feature {
    width:100%;
    max-width:800px;
    margin:0 auto;
    text-align:center;
}

.resources-feature p {
    text-align:center;
}


/* ============================================================
   WATCH & LISTEN
============================================================ */

.watch-listen-feature {
    width:100%;
    max-width:1050px;
    margin:0 auto 3rem;
    box-sizing:border-box;
}

.watch-listen-video-feature {
    background:#f7f7f7;
    border:1px solid #dedede;
    border-radius:4px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.featured-video {
    position:relative;
    width:100%;
    aspect-ratio:16 / 9;
    background:#eee;
    overflow:hidden;
}

.featured-video iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
}

.watch-listen-feature-content {
    padding:2rem 2.5rem 2.25rem;
}

.watch-listen-type {
    display:block;
    margin-bottom:.55rem;
    color:#1c6f83;
    font-size:.75rem;
    line-height:1rem;
    font-weight:800;
    letter-spacing:.1em;
}

.watch-listen-feature-content h3 {
    margin:0 0 .8rem;
    color:#333;
    font-size:1.6rem;
    line-height:2rem;
    font-weight:800;
}

.watch-listen-feature-content p {
    margin:0;
    color:#555;
    font-size:1.05rem;
    line-height:1.7rem;
}

.watch-listen-podcast-feature {
    display:flex;
    background:#f7f7f7;
    border:1px solid #dedede;
    border-radius:4px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.watch-listen-podcast-image {
    display:block;
    flex:0 0 42%;
    width:42%;
    background:#eee;
    overflow:hidden;
}

.watch-listen-podcast-image img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .35s ease;
}

.watch-listen-podcast-image:hover img {
    transform:scale(1.025);
}

.watch-listen-podcast-feature .watch-listen-feature-content {
    display:flex;
    flex-direction:column;
    justify-content:center;
    flex:1;
}

.watch-listen-podcast-feature .resource-link {
    display:block;
    margin-top:1.25rem;
    color:#e0593a;
    font-size:.85rem;
    line-height:1.2rem;
    font-weight:800;
    letter-spacing:.05em;
    text-decoration:none;
}


/* ============================================================
   VIDEO SERIES
============================================================ */

.watch-listen-series {
    width:100%;
    margin:0;
    padding:4rem 0 1.5rem;
    background:#f3f3f3;
    box-sizing:border-box;
}

.watch-listen-series-inner {
    width:100%;
    max-width:1050px;
    margin:0 auto;
}

.watch-listen-series-heading {
    max-width:700px;
    margin:0 auto 2.25rem;
    text-align:center;
}

.watch-listen-series-heading h3 {
    margin:0 0 .7rem;
    color:#333;
    font-size:1.7rem;
    line-height:2rem;
    font-weight:800;
}

.watch-listen-series-heading p {
    max-width:650px;
    margin:0 auto;
    color:#555;
    font-size:1.05rem;
    line-height:1.6rem;
    text-align:center;
}

.watch-listen-playlists {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:2rem;
    width:100%;
    margin:0 auto;
}

.playlist-card {
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
    min-width:0;
    padding:2rem;
    background:#fff;
    border:1px solid #dedede;
    border-radius:4px;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.playlist-card h3 {
    margin:0 0 .8rem;
    color:#333;
    font-size:1.25rem;
    line-height:1.5rem;
    font-weight:800;
}

.playlist-card p {
    margin:0 0 1.35rem;
    color:#555;
    font-size:1rem;
    line-height:1.6rem;
}

.playlist-card .resource-link {
    margin-top:auto;
    color:#e0593a;
    font-size:.85rem;
    line-height:1.2rem;
    font-weight:800;
    letter-spacing:.05em;
}

.watch-more-youtube {
    margin:2rem 0 0;
    text-align:center;
}


/* ============================================================
   BREAKPOINTS
============================================================ */

@media (max-width:950px) {

    .free-resource-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .watch-listen-feature-content {
        padding:1.75rem 2rem 2rem;
    }

    .watch-listen-playlists {
        gap:1.5rem;
    }

}


@media (max-width:700px) {

    .resources-nav {
        position:sticky;
        top:4.5rem;
        z-index:1500;
        justify-content:flex-start;
        flex-wrap:nowrap;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        padding:.75rem .5rem;
        padding-right:2.75rem;
        box-shadow:0 1px 5px rgba(0,0,0,.08);
        scrollbar-width:none;
        -ms-overflow-style:none;
    }

    .resources-nav::-webkit-scrollbar {
        display:none;
    }

    .resources-nav a {
        flex:0 0 auto;
        padding:.4rem .8rem;
        white-space:nowrap;
        font-size:.72rem;
        letter-spacing:.04em;
    }

    .resources-nav a + a {
        border-left:0;
    }

    .resources-nav::after {
        content:"";
        position:absolute;
        top:50%;
        right:.7rem;
        width:0;
        height:0;
        transform:translateY(-50%);
        border-left:.35rem solid transparent;
        border-right:.35rem solid transparent;
        border-top:.45rem solid #1c6f83;
        pointer-events:none;
    }


    .resources-section-intro {
        margin-bottom:2rem;
    }


    .free-resource-grid {
        grid-template-columns:1fr;
        gap:1.5rem;
    }


    .latest-article {
        display:block;
    }

    .latest-article-image {
        width:100%;
        height:auto;
        aspect-ratio:16 / 10;
    }

    .latest-article-content {
        padding:1.5rem 1.35rem 1.65rem;
    }

    .latest-article-content h3 {
        font-size:1.4rem;
        line-height:1.75rem;
    }

    .latest-article-content p {
        font-size:1rem;
        line-height:1.6rem;
    }


    .community-options {
        grid-template-columns:1fr;
        gap:1.5rem;
    }

    .community-card-content {
        padding:1.5rem 1.35rem 1.65rem;
    }


    .watch-listen-feature {
        margin-bottom:2.5rem;
    }

    .watch-listen-feature-content {
        padding:1.5rem 1.35rem 1.65rem;
    }

    .watch-listen-feature-content h3 {
        font-size:1.4rem;
        line-height:1.75rem;
    }

    .watch-listen-feature-content p {
        font-size:1rem;
        line-height:1.6rem;
    }

    .watch-listen-podcast-feature {
        display:block;
    }

    .watch-listen-podcast-image {
        width:100%;
        height:auto;
        aspect-ratio:16 / 10;
    }


    .watch-listen-series {
        padding:3rem 0 3.5rem;
    }

    .watch-listen-series-inner {
        width:100%;
    }

    .watch-listen-series-heading {
        padding:0 1.35rem;
        margin-bottom:1.75rem;
    }

    .watch-listen-series-heading h3 {
        font-size:1.5rem;
        line-height:1.8rem;
    }

    .watch-listen-playlists {
        grid-template-columns:1fr;
        gap:1.5rem;
        padding:0 1.35rem;
        box-sizing:border-box;
    }

    .playlist-card {
        padding:1.5rem 1.35rem 1.65rem;
    }

    .playlist-card h3 {
        font-size:1.2rem;
        line-height:1.45rem;
    }

    .watch-more-youtube {
        margin-top:1.75rem;
    }

}


@media (max-width:450px) {

    .watch-listen-feature-content {
        padding:1.3rem 1.1rem 1.45rem;
    }

    .watch-listen-podcast-image {
        aspect-ratio:16 / 10;
    }

    .watch-listen-series-heading {
        padding:0 1.1rem;
    }

    .watch-listen-playlists {
        padding:0 1.1rem;
    }

    .playlist-card {
        padding:1.3rem 1.1rem 1.45rem;
    }

}