/* ==========================================================
   Shared public resource-page system
   Common hero sizing/spacing belongs here so one change
   updates every page that uses the shared classes.
   ========================================================== */

.resource-page {
    width: min(1080px, calc(100% - 32px));
    margin: 0 auto;
    padding: 0 0 42px;
    box-sizing: border-box;
}

.resource-hero {
    position: relative;
    overflow: hidden;
    min-height: 235px;
    margin: 0 0 30px;
    padding: 38px 42px 36px;
    border: 1px solid #d7e7f1;
    border-radius: 22px;
    background: linear-gradient(110deg, #f4f9fd 0%, #eff8fc 55%, #dceef8 100%);
    box-shadow: 0 12px 30px rgba(27,64,94,.09);
    box-sizing: border-box;
}

.resource-hero::before,
.resource-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.resource-hero::before {
    right: -90px;
    top: -105px;
    width: 350px;
    height: 350px;
    border: 26px solid rgba(56,135,184,.075);
    border-radius: 50%;
    box-sizing: border-box;
}

.resource-hero::after {
    right: 15px;
    top: 3px;
    width: 245px;
    height: 245px;
    border: 20px solid rgba(56,135,184,.05);
    border-radius: 50%;
    box-sizing: border-box;
}

.resource-hero-content {
    position: relative;
    z-index: 1;
    max-width: 780px;
}

.resource-kicker {
    margin: 0 0 8px;
    color: #176fae;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.resource-hero h1 {
    margin: 0;
    color: #183f60;
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.1;
}

.resource-hero p {
    margin: 13px 0 0;
    max-width: 760px;
    color: #4e6e85;
    font-size: 1.05rem;
    line-height: 1.55;
}

/* Optional dark variant for a program-branded hero. */
.resource-hero--dark {
    border-color: transparent;
    background:
        radial-gradient(circle at 72% 30%, rgba(255,255,255,.20), transparent 22%),
        radial-gradient(circle at 30% 72%, rgba(70,157,220,.18), transparent 28%),
        linear-gradient(135deg, #091421 0%, #102a42 45%, #123d59 100%);
    box-shadow: 0 14px 32px rgba(17,49,76,.18);
}

.resource-hero--dark::before {
    right: -80px;
    top: -90px;
    width: 290px;
    height: 290px;
    border: 2px solid rgba(116,210,255,.28);
    box-shadow:
        0 0 0 20px rgba(116,210,255,.05),
        0 0 0 52px rgba(116,210,255,.03);
}

.resource-hero--dark::after {
    width: 10px;
    height: 10px;
    left: 15%;
    top: 22%;
    right: auto;
    background: #fff;
    border-radius: 50%;
    box-shadow:
        130px 26px 0 1px rgba(255,255,255,.82),
        250px 70px 0 0 rgba(255,255,255,.72),
        370px 24px 0 1px rgba(255,255,255,.65),
        465px 102px 0 0 rgba(255,255,255,.78),
        565px 40px 0 0 rgba(255,255,255,.58),
        650px 125px 0 0 rgba(255,255,255,.68);
}

.resource-hero--dark .resource-kicker {
    color: #69cfff;
}

.resource-hero--dark h1 {
    color: #fff;
}

.resource-hero--dark h1 span {
    color: #3bc7ff;
}

.resource-hero--dark p {
    color: #d7e9f6;
}

.resource-hero-rule {
    width: 108px;
    height: 5px;
    margin: 18px 0 15px;
    border-radius: 5px;
    background: linear-gradient(90deg, #2cc4ff, #c845ff);
}

@media (max-width: 600px) {
    .resource-page {
        width: min(100% - 20px, 1080px);
        padding-bottom: 30px;
    }

    .resource-hero {
        min-height: 220px;
        padding: 30px 20px 28px;
        border-radius: 18px;
    }

    .resource-hero h1 {
        font-size: 29px;
    }

    .resource-hero p {
        font-size: 15px;
    }
}