/* ==========================================================
   LITTLE EXPLORERS LEARNING HUB
   LEARNING CENTERS
   FILE:
   /styles/learning-centers.css

   Page-specific stylesheet
   Designed specifically for:
   library/interest-areas/index.html
========================================================== */


/* ==========================================================
   LEARNING CENTERS THEME
========================================================== */

.learning-centers-page {

    --learning-green: #6f9478;
    --learning-green-dark: #456b50;
    --learning-green-light: #edf5ee;

    --learning-blue: #7da9bd;
    --learning-blue-dark: #527f94;
    --learning-blue-light: #edf5f8;

    --learning-purple: #8b78a8;
    --learning-purple-dark: #66558a;
    --learning-purple-light: #f2eef7;

    --learning-peach: #d99783;
    --learning-peach-light: #faeee9;

    --learning-yellow: #d7b467;
    --learning-yellow-light: #fbf5e6;

    --learning-teal: #70a6a1;
    --learning-teal-light: #edf6f5;

    --learning-cream: #fffaf4;
    --learning-paper: #fffdf9;
    --learning-white: #ffffff;

    --learning-text: #2d3940;
    --learning-muted: #68767c;

    --learning-border: #e4ddd5;

    --learning-shadow:
        0 14px 35px rgba(53, 66, 70, 0.08);

    --learning-shadow-hover:
        0 20px 45px rgba(53, 66, 70, 0.14);

    color:
        var(--learning-text);

    background:
        var(--learning-paper);

}


/* ==========================================================
   RESET / BASE
========================================================== */

.learning-centers-page,
.learning-centers-page *,
.learning-centers-page *::before,
.learning-centers-page *::after {

    box-sizing: border-box;

}


.learning-centers-page {

    margin: 0;

    font-family:
        "Inter",
        sans-serif;

}


.learning-centers-page img {

    display: block;

    max-width: 100%;

}


.learning-centers-page a {

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


.learning-centers-page button {

    font: inherit;

}


.learning-centers-page .container {

    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    margin-inline: auto;

}


/* ==========================================================
   HEADER
========================================================== */

.learning-centers-page header {

    position:
        relative;

    z-index:
        1000;

    background:
        rgba(255, 255, 255, .98);

    border-bottom:
        1px solid var(--learning-border);

}


.learning-centers-page .nav-container {

    min-height:
        82px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        28px;

}


/* ==========================================================
   LOGO
========================================================== */

.learning-centers-page .logo {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    flex-shrink:
        0;

    color:
        inherit;

    text-decoration:
        none;

}


.learning-centers-page .logo img {

    width:
        56px;

    height:
        56px;

    object-fit:
        contain;

}


.learning-centers-page .logo h1 {

    margin:
        0;

    color:
        var(--learning-purple-dark);

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        1.35rem;

    font-weight:
        800;

    line-height:
        1;

}


.learning-centers-page .logo span {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--learning-green-dark);

    font-size:
        .72rem;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


/* ==========================================================
   NAVIGATION
========================================================== */

.learning-centers-page nav {

    margin-left:
        auto;

}


.learning-centers-page nav ul {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.learning-centers-page nav a {

    display:
        block;

    padding:
        11px 14px;

    border-radius:
        10px;

    color:
        var(--learning-text);

    font-size:
        .82rem;

    font-weight:
        800;

    text-decoration:
        none;

}


.learning-centers-page nav a:hover {

    background:
        var(--learning-green-light);

    color:
        var(--learning-green-dark);

}


.learning-centers-page nav a.active {

    background:
        var(--learning-purple-light);

    color:
        var(--learning-purple-dark);

}


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

.learning-centers-page .mobile-menu {

    display:
        none;

    width:
        46px;

    height:
        46px;

    padding:
        0;

    border:
        1px solid var(--learning-border);

    border-radius:
        12px;

    background:
        var(--learning-white);

    color:
        var(--learning-purple-dark);

    font-size:
        1.45rem;

    line-height:
        1;

    cursor:
        pointer;

}


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

.learning-centers-page .study-hero {

    position:
        relative;

    overflow:
        hidden;

    padding:
        78px 0 86px;

    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(111, 148, 120, .14),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 15%,
            rgba(139, 120, 168, .15),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--learning-cream),
            var(--learning-purple-light) 55%,
            var(--learning-blue-light)
        );

    border-bottom:
        1px solid var(--learning-border);

}


.learning-centers-page .study-hero::after {

    content:
        "";

    position:
        absolute;

    right:
        -110px;

    bottom:
        -160px;

    width:
        330px;

    height:
        330px;

    border-radius:
        50%;

    background:
        rgba(111, 148, 120, .08);

}


.learning-centers-page .study-hero .container {

    position:
        relative;

    z-index:
        2;

}


/* ==========================================================
   BREADCRUMB
========================================================== */

.learning-centers-page .breadcrumb {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        25px;

    color:
        var(--learning-muted);

    font-size:
        .82rem;

}


.learning-centers-page .breadcrumb a {

    color:
        var(--learning-purple-dark);

    font-weight:
        800;

    text-decoration:
        none;

}


.learning-centers-page .breadcrumb a:hover {

    color:
        var(--learning-green-dark);

}


/* ==========================================================
   SECTION LABEL
========================================================== */

.learning-centers-page .section-label {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        8px 14px;

    border:
        1px solid rgba(111, 148, 120, .20);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .76);

    color:
        var(--learning-green-dark);

    font-size:
        .72rem;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


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

.learning-centers-page .study-hero h1 {

    max-width:
        900px;

    margin:
        18px 0 20px;

    color:
        var(--learning-purple-dark);

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        clamp(
            2.7rem,
            6vw,
            4.8rem
        );

    font-weight:
        800;

    line-height:
        1.05;

    letter-spacing:
        -.035em;

}


.learning-centers-page .study-hero p {

    max-width:
        820px;

    margin:
        0;

    color:
        var(--learning-muted);

    font-size:
        1.05rem;

    line-height:
        1.8;

}


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

.learning-centers-page .hero-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        28px;

}


.learning-centers-page .btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        48px;

    padding:
        12px 20px;

    border-radius:
        999px;

    font-size:
        .8rem;

    font-weight:
        900;

    text-decoration:
        none;

}


.learning-centers-page .btn-primary {

    border:
        1px solid var(--learning-peach);

    background:
        var(--learning-peach);

    color:
        white;

    box-shadow:
        0 8px 20px rgba(217, 151, 131, .18);

}


.learning-centers-page .btn-primary:hover {

    background:
        #c98672;

    border-color:
        #c98672;

    transform:
        translateY(-2px);

}


.learning-centers-page .btn-secondary {

    border:
        1px solid var(--learning-border);

    background:
        white;

    color:
        var(--learning-purple-dark);

}


.learning-centers-page .btn-secondary:hover {

    border-color:
        var(--learning-purple);

    background:
        var(--learning-purple-light);

    transform:
        translateY(-2px);

}


/* ==========================================================
   INTRODUCTION
========================================================== */

.learning-centers-page .learning-centers-intro {

    padding:
        72px 0;

    background:
        var(--learning-paper);

}


.learning-centers-page .intro-card {

    position:
        relative;

    overflow:
        hidden;

    padding:
        50px;

    border:
        1px solid var(--learning-border);

    border-radius:
        30px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            var(--learning-green-light)
        );

    box-shadow:
        var(--learning-shadow);

}


.learning-centers-page .intro-card::after {

    content:
        "✦";

    position:
        absolute;

    top:
        28px;

    right:
        38px;

    color:
        var(--learning-yellow);

    font-size:
        2rem;

    opacity:
        .65;

}


.learning-centers-page .intro-content {

    max-width:
        900px;

}


.learning-centers-page .intro-content h2 {

    margin:
        16px 0 15px;

    color:
        var(--learning-green-dark);

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        clamp(
            2rem,
            4vw,
            3.1rem
        );

    line-height:
        1.12;

}


.learning-centers-page .intro-content p {

    max-width:
        820px;

    margin:
        0 0 14px;

    color:
        var(--learning-muted);

    font-size:
        .96rem;

    line-height:
        1.8;

}


/* ==========================================================
   INTRO HIGHLIGHTS
========================================================== */

.learning-centers-page .intro-highlights {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-top:
        25px;

}


.learning-centers-page .intro-highlights span {

    padding:
        9px 14px;

    border:
        1px solid var(--learning-border);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .82);

    color:
        var(--learning-text);

    font-size:
        .76rem;

    font-weight:
        800;

}


/* ==========================================================
   MAIN LEARNING CENTER SECTION
========================================================== */

.learning-centers-page .learning-centers-section {

    padding:
        90px 0;

    background:
        var(--learning-cream);

}


/* ==========================================================
   SECTION HEADER
========================================================== */

.learning-centers-page .section-header {

    max-width:
        800px;

    margin:
        0 auto 45px;

    text-align:
        center;

}


.learning-centers-page .section-header .section-label {

    margin-bottom:
        12px;

}


.learning-centers-page .section-header h2 {

    margin:
        12px 0;

    color:
        var(--learning-purple-dark);

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        clamp(
            2rem,
            4vw,
            3.2rem
        );

    line-height:
        1.1;

}


.learning-centers-page .section-header p {

    margin:
        0;

    color:
        var(--learning-muted);

    font-size:
        .95rem;

    line-height:
        1.75;

}


/* ==========================================================
   CENTER GRID
========================================================== */

.learning-centers-page .study-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        24px;

}


/* ==========================================================
   CENTER CARDS
========================================================== */

.learning-centers-page .study-card {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    overflow:
        hidden;

    border:
        1px solid var(--learning-border);

    border-radius:
        24px;

    background:
        white;

    box-shadow:
        var(--learning-shadow);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}


.learning-centers-page .study-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--learning-shadow-hover);

}


/* ==========================================================
   CARD IMAGE
========================================================== */

.learning-centers-page .card-image {

    position:
        relative;

    overflow:
        hidden;

    background:
        var(--learning-green-light);

}


.learning-centers-page .card-image img {

    width:
        100%;

    aspect-ratio:
        16 / 10;

    object-fit:
        cover;

    transition:
        transform .4s ease;

}


.learning-centers-page .study-card:hover .card-image img {

    transform:
        scale(1.035);

}


/* ==========================================================
   CARD CATEGORY
========================================================== */

.learning-centers-page .card-category {

    position:
        absolute;

    left:
        14px;

    bottom:
        14px;

    padding:
        7px 10px;

    border:
        1px solid rgba(255, 255, 255, .65);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .90);

    color:
        var(--learning-purple-dark);

    font-size:
        .64rem;

    font-weight:
        900;

    letter-spacing:
        .06em;

}


/* ==========================================================
   CARD CONTENT
========================================================== */

.learning-centers-page .study-content {

    display:
        flex;

    flex:
        1;

    flex-direction:
        column;

    padding:
        24px;

}


.learning-centers-page .study-content h3 {

    margin:
        0 0 11px;

    color:
        var(--learning-text);

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        1.3rem;

    line-height:
        1.25;

}


.learning-centers-page .study-content p {

    margin:
        0;

    color:
        var(--learning-muted);

    font-size:
        .86rem;

    line-height:
        1.7;

}


/* ==========================================================
   CARD FOOTER
========================================================== */

.learning-centers-page .study-footer {

    margin-top:
        auto;

    padding-top:
        20px;

}


.learning-centers-page .study-footer a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    color:
        var(--learning-purple-dark);

    font-size:
        .78rem;

    font-weight:
        900;

    text-decoration:
        none;

}


.learning-centers-page .study-footer a:hover {

    color:
        var(--learning-green-dark);

    transform:
        translateX(3px);

}


/* ==========================================================
   CENTER COLOR ACCENTS
========================================================== */

.learning-centers-page .center-blocks {

    border-top:
        5px solid var(--learning-green);

}


.learning-centers-page .center-art {

    border-top:
        5px solid var(--learning-peach);

}


.learning-centers-page .center-writing {

    border-top:
        5px solid var(--learning-purple);

}


.learning-centers-page .center-library {

    border-top:
        5px solid var(--learning-blue);

}


.learning-centers-page .center-science {

    border-top:
        5px solid var(--learning-teal);

}


.learning-centers-page .center-music {

    border-top:
        5px solid var(--learning-yellow);

}


.learning-centers-page .center-dramatic-play {

    border-top:
        5px solid var(--learning-purple);

}


.learning-centers-page .center-sensory {

    border-top:
        5px solid var(--learning-blue);

}


.learning-centers-page .center-math {

    border-top:
        5px solid var(--learning-green);

}


.learning-centers-page .center-technology {

    border-top:
        5px solid var(--learning-teal);

}


.learning-centers-page .center-outdoor {

    border-top:
        5px solid var(--learning-yellow);

}


/* ==========================================================
   PHILOSOPHY / FINAL MESSAGE
========================================================== */

.learning-centers-page .learning-centers-message {

    padding:
        90px 0;

    background:
        white;

}


.learning-centers-page .message-card {

    max-width:
        1000px;

    margin:
        0 auto;

    padding:
        52px;

    border:
        1px solid var(--learning-border);

    border-radius:
        30px;

    background:
        linear-gradient(
            135deg,
            var(--learning-green-light),
            var(--learning-blue-light),
            var(--learning-purple-light)
        );

    box-shadow:
        var(--learning-shadow);

    text-align:
        center;

}


.learning-centers-page .message-card h2 {

    max-width:
        780px;

    margin:
        15px auto;

    color:
        var(--learning-green-dark);

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    line-height:
        1.12;

}


.learning-centers-page .message-card > p {

    max-width:
        760px;

    margin:
        0 auto;

    color:
        var(--learning-muted);

    font-size:
        .94rem;

    line-height:
        1.8;

}


/* ==========================================================
   MESSAGE HIGHLIGHTS
========================================================== */

.learning-centers-page .message-highlights {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        14px;

    margin-top:
        30px;

}


.learning-centers-page .message-highlights div {

    padding:
        20px 15px;

    border:
        1px solid rgba(255, 255, 255, .85);

    border-radius:
        18px;

    background:
        rgba(255, 255, 255, .72);

}


.learning-centers-page .message-highlights strong {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--learning-purple-dark);

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        1rem;

}


.learning-centers-page .message-highlights span {

    display:
        block;

    color:
        var(--learning-muted);

    font-size:
        .74rem;

    line-height:
        1.55;

}


/* ==========================================================
   FOOTER
   NO LOGO
========================================================== */

.learning-centers-page footer {

    background:
        #252b34;

    color:
        #dce2e5;

}


.learning-centers-page .footer-grid {

    display:
        grid;

    grid-template-columns:
        1.45fr
        1fr
        1fr
        1.2fr;

    gap:
        42px;

    padding:
        62px 0 48px;

}


.learning-centers-page .footer-brand {

    max-width:
        350px;

}


.learning-centers-page .footer-site-name {

    display:
        inline-block;

    margin-bottom:
        14px;

    color:
        white;

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        1.3rem;

    font-weight:
        800;

    line-height:
        1.2;

    text-decoration:
        none;

}


.learning-centers-page .footer-site-name:hover {

    color:
        #dcefe5;

}


.learning-centers-page .footer-brand p {

    margin:
        0;

    color:
        #b9c4c9;

    font-size:
        .8rem;

    line-height:
        1.7;

}


.learning-centers-page .footer-column {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


.learning-centers-page .footer-column h4 {

    margin:
        0 0 8px;

    color:
        white;

    font-family:
        "Nunito",
        sans-serif;

    font-size:
        .95rem;

}


.learning-centers-page .footer-column a {

    color:
        #c9d2d6;

    font-size:
        .76rem;

    text-decoration:
        none;

}


.learning-centers-page .footer-column a:hover {

    color:
        white;

    transform:
        translateX(3px);

}


.learning-centers-page .footer-bottom {

    border-top:
        1px solid rgba(255, 255, 255, .12);

}


.learning-centers-page .footer-bottom .container {

    padding:
        20px 0;

}


.learning-centers-page .footer-bottom p {

    margin:
        0;

    color:
        #aeb8bd;

    font-size:
        .74rem;

    text-align:
        center;

}


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

@media (max-width: 1000px) {

    .learning-centers-page .study-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .learning-centers-page .footer-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .learning-centers-page .message-highlights {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


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

@media (max-width: 850px) {

    .learning-centers-page .nav-container {

        min-height:
            76px;

    }


    .learning-centers-page .mobile-menu {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

    }


    .learning-centers-page nav {

        position:
            absolute;

        top:
            76px;

        left:
            0;

        right:
            0;

        display:
            none;

        width:
            100%;

        margin:
            0;

        background:
            white;

        border-bottom:
            1px solid var(--learning-border);

        box-shadow:
            0 14px 30px rgba(0, 0, 0, .08);

    }


    .learning-centers-page nav.open {

        display:
            block;

    }


    .learning-centers-page nav ul {

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            3px;

        padding:
            12px;

    }


    .learning-centers-page nav li {

        width:
            100%;

    }


    .learning-centers-page nav a {

        width:
            100%;

        padding:
            13px 15px;

    }


    .learning-centers-page .study-hero {

        padding:
            62px 0 70px;

    }


    .learning-centers-page .intro-card {

        padding:
            36px 30px;

    }

}


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

@media (max-width: 700px) {

    .learning-centers-page .container {

        width:
            min(
                calc(100% - 28px),
                1180px
            );

    }


    .learning-centers-page .logo img {

        width:
            52px;

        height:
            52px;

    }


    .learning-centers-page .logo h1 {

        font-size:
            1.15rem;

    }


    .learning-centers-page .logo span {

        font-size:
            .62rem;

    }


    .learning-centers-page .study-hero {

        padding:
            52px 0 62px;

    }


    .learning-centers-page .study-hero h1 {

        font-size:
            clamp(
                2.35rem,
                11vw,
                3.5rem
            );

    }


    .learning-centers-page .study-hero p {

        font-size:
            .94rem;

        line-height:
            1.7;

    }


    .learning-centers-page .hero-buttons {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .learning-centers-page .hero-buttons .btn {

        width:
            100%;

    }


    .learning-centers-page .learning-centers-intro,
    .learning-centers-page .learning-centers-section,
    .learning-centers-page .learning-centers-message {

        padding:
            62px 0;

    }


    .learning-centers-page .intro-card {

        padding:
            30px 23px;

        border-radius:
            24px;

    }


    .learning-centers-page .intro-content h2 {

        font-size:
            2rem;

    }


    .learning-centers-page .intro-highlights {

        display:
            grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .learning-centers-page .intro-highlights span {

        text-align:
            center;

    }


    .learning-centers-page .study-grid {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .learning-centers-page .study-content {

        padding:
            22px;

    }


    .learning-centers-page .message-card {

        padding:
            35px 22px;

        border-radius:
            24px;

    }


    .learning-centers-page .message-highlights {

        grid-template-columns:
            1fr;

    }


    .learning-centers-page .footer-grid {

        grid-template-columns:
            1fr;

        gap:
            30px;

        padding:
            50px 0 38px;

    }


    .learning-centers-page .footer-brand {

        max-width:
            none;

    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width: 430px) {

    .learning-centers-page .logo h1 {

        font-size:
            1.02rem;

    }


    .learning-centers-page .logo span {

        font-size:
            .56rem;

    }


    .learning-centers-page .mobile-menu {

        width:
            43px;

        height:
            43px;

    }


    .learning-centers-page .breadcrumb {

        font-size:
            .76rem;

    }


    .learning-centers-page .study-hero h1 {

        font-size:
            2.25rem;

    }


    .learning-centers-page .section-header h2 {

        font-size:
            1.9rem;

    }


    .learning-centers-page .intro-highlights {

        grid-template-columns:
            1fr;

    }


    .learning-centers-page .card-category {

        font-size:
            .58rem;

    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

.learning-centers-page a:focus-visible,
.learning-centers-page button:focus-visible {

    outline:
        3px solid var(--learning-yellow);

    outline-offset:
        3px;

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .learning-centers-page *,
    .learning-centers-page *::before,
    .learning-centers-page *::after {

        scroll-behavior:
            auto !important;

        transition:
            none !important;

        animation:
            none !important;

    }

}