/* The theme wraps page content in a single-child flex row
   (.max-w-7xl ... lg:flex-row); the <article> is flex:0 1 auto, so it sizes
   to its CONTENT. With every session accordion collapsed the content is
   narrow, so the article — and this block's 280px/1fr grid inside it —
   collapse to that width; the sessions column only reaches full width once an
   opened video's wide embed forces the article open. Pinning the article to
   the full line width keeps the grid at full width regardless of accordion
   state. Same fix as the Video Resource Hub block. */
article:has(> .nc-resource-includes) {
    width: 100%;
}

.nc-resource-includes {
    font-family: 'Inter', sans-serif;
    color: #1a2327;
    padding: 40px 0px 60px;
    /* The block pulls up (-4rem) to overlap the hero's bottom edge. Without
       a stacking position it renders behind the hero (which is
       position:relative — positioned elements paint above static ones), so
       the hero covers the sidebar + first session. Lift it above the hero. */
    position: relative;
    z-index: 1;
}

.nc-resource-includes a {
    text-decoration: none;
    /* color: inherit; */
}

.nc-resource-includes__grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
}

.nc-resource-includes__sidebar {
    grid-column: 1;
    background: #fff;
    border-radius: 14px;
    padding: 26px;
    box-shadow: 0 6px 24px rgba(13, 43, 52, 0.08);
}

.nc-resource-includes__sidebar-title {
    font-size: 13px;
    font-weight: 700;
    color: #20323a;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.nc-resource-includes__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nc-resource-includes__row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 10px;
    cursor: default;
}

a.nc-resource-includes__row {
    cursor: pointer;
}

.nc-resource-includes__row--highlighted {
    background: #e8f3f4;
}

.nc-resource-includes__row-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f2f5f5;
    color: #1a2327;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nc-resource-includes__row-icon svg {
    width: 20px;
    height: 20px;
}

.nc-resource-includes__row-icon svg.nc-resource-includes__row-icon-svg--video {
    width: 22px;
    height: 22px;
}

.nc-resource-includes__row-icon--highlighted {
    background: #008c9a;
    color: #fff;
}

.nc-resource-includes__row-label {
    font-size: 14px;
    font-weight: 700;
    color: #1a2327;
}

.nc-resource-includes__row--highlighted .nc-resource-includes__row-label {
    color: #008c9a;
}

.nc-resource-includes__row-subtitle {
    font-size: 12px;
    color: #7b8c90;
}

.nc-resource-includes__download-all {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 16px;
    background: #31aebe;
    border: none;
    color: #fff;
    padding: 14px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    box-sizing: border-box;
    text-transform: uppercase;
    transition: background-color 0.15s ease;
}

.nc-resource-includes__download-all:hover {
    background: #2a8692;
}

.nc-resource-includes__sessions {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nc-resource-includes__session {
    background: #fff;
    border-radius: 14px;
    padding: 26px;
    box-shadow: 0 6px 24px rgba(13, 43, 52, 0.06);
}

.nc-resource-includes__session-toggle {
    appearance: none;
    background: none;
    border: none;
    width: 100%;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.nc-resource-includes__session-heading {
    display: block;
}

.nc-resource-includes__session-tag {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #008c9a;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.nc-resource-includes__session-title {
    display: block;
    font-size: 19px;
    font-weight: 900;
    color: #1a2327;
    font-family: 'Inter', sans-serif;
}

.nc-resource-includes__session-publisher {
    display: none;
    font-size: 13px;
    color: #8b9a9e;
    margin-top: 4px;
}

.nc-resource-includes__session[data-open="true"] .nc-resource-includes__session-publisher {
    display: block;
}

.nc-resource-includes__session-glyph {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #008c9a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nc-resource-includes__session-glyph svg {
    width: 16px;
    height: 16px;
}

.nc-resource-includes__session[data-open="true"] .nc-resource-includes__session-glyph-vert {
    display: none;
}

.nc-resource-includes__session-body {
    margin-top: 20px;
}

.nc-resource-includes__session-video {
    border-radius: 10px;
    overflow: hidden;
    background: #3c484d;
    position: relative;
    aspect-ratio: 16 / 9;
}

.nc-resource-includes__session-video iframe,
.nc-resource-includes__session-video video,
.nc-resource-includes__session-video embed {
    display: block;
    width: 100%;
    height: 100%;
}

.nc-resource-includes__session-duration {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
}

.nc-resource-includes__session-description {
    font-size: 14px;
    color: #5b6b70;
    line-height: 1.7;
    margin: 18px 0;
}

.nc-resource-includes__session-download {
    display: inline-flex;
    align-items: center;
    background: #31aebe;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    transition: background-color 0.15s ease;
}

.nc-resource-includes__session-download:hover {
    background: #2a8692;
}

@media (max-width: 767px) {
    .nc-resource-includes {
        padding: 5.5rem 0px 18px;
    }

    .nc-resource-includes__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .nc-resource-includes__sidebar {
        grid-column: 1;
        grid-row: 2;
        padding: 18px;
        border-radius: 12px;
    }

    .nc-resource-includes__sessions {
        grid-column: 1;
        grid-row: 1;
        gap: 12px;
    }

    .nc-resource-includes__session {
        padding: 18px;
        border-radius: 12px;
    }

    .nc-resource-includes__session-title {
        font-size: 15px;
        line-height: 1.3;
    }

    .nc-resource-includes__session-glyph {
        width: 26px;
        height: 26px;
    }

    .nc-resource-includes__session-glyph svg {
        width: 14px;
        height: 14px;
    }

    .nc-resource-includes__session-body {
        margin-top: 14px;
    }

    .nc-resource-includes__session-description {
        font-size: 13px;
        margin: 14px 0;
    }

    .nc-resource-includes__session-download {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }
}