/* =========================================================
   LAVENDER COUNSELING CENTER
   Seasonal Depression Article
   File: /assets/css/articles/article.css
========================================================= */


/* =========================================================
   ARTICLE WRAPPER
========================================================= */

.lavArticle {
    position: relative;
    padding:
        clamp(4.5rem, 7vw, 7.5rem)
        0
        clamp(5rem, 8vw, 8rem);
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fcfafc 100%
        );
}

.lavArticle::before {
    content: "";
    position: absolute;
    inset:
        0
        0
        auto;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(123, 88, 164, 0.18),
            transparent
        );
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.lavArticleLayout {
    display: grid;
    grid-template-columns:
        minmax(220px, 280px)
        minmax(0, 1fr);
    gap:
        clamp(3rem, 6vw, 6rem);
    align-items: start;
    margin-left: 10px;
}


/* =========================================================
   STICKY ARTICLE NAVIGATION
========================================================= */

.lavArticleAside {
    position: relative;
    min-width: 0;
}

.lavArticleAsideInner {
    position: sticky;
    top: 8rem;
    padding: 1.5rem;
    border: 1px solid rgba(113, 82, 145, 0.12);
    border-radius: 1.5rem;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.94),
            rgba(249, 245, 251, 0.92)
        );
    box-shadow:
        0 1.2rem 3rem rgba(55, 42, 70, 0.07);
    backdrop-filter: blur(12px);
}

.lavArticleAsideTitle {
    margin:
        0
        0
        1.25rem;
    color: var(--lavender-heading, #30283b);
    font-family: "DM Sans", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-transform: uppercase;
}

.lavArticleContents {
    display: grid;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lavArticleContents li {
    margin: 0;
}

.lavArticleContents a {
    position: relative;
    display: block;
    padding:
        0.65rem
        0.75rem
        0.65rem
        1.15rem;
    border-radius: 0.9rem;
    color: var(--lavender-text-light, #746d7d);
    font-size: 0.9rem;
    line-height: 1.45;
    text-decoration: none;
    transition:
        color 220ms ease,
        background-color 220ms ease,
        transform 220ms ease;
}

.lavArticleContents a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.45rem;
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 50%;
    background: rgba(123, 88, 164, 0.35);
    transform: translateY(-50%);
    transition:
        transform 220ms ease,
        background-color 220ms ease;
}

.lavArticleContents a:hover,
.lavArticleContents a:focus-visible,
.lavArticleContents a.is-active {
    color: var(--lavender-primary, #77539a);
    background: rgba(124, 88, 165, 0.08);
    transform: translateX(0.2rem);
}

.lavArticleContents a:hover::before,
.lavArticleContents a:focus-visible::before,
.lavArticleContents a.is-active::before {
    background: var(--lavender-primary, #77539a);
    transform:
        translateY(-50%)
        scale(1.35);
}

.lavArticleContents a:focus-visible {
    outline:
        3px solid
        rgba(119, 83, 154, 0.22);
    outline-offset: 2px;
}


/* =========================================================
   ARTICLE BODY
========================================================= */

.lavArticleBody {
    width: 100%;
    max-width: 54rem;
    min-width: 0;
}

.lavArticleBody p {
    margin:
        0
        0
        1.5rem;
    color: var(--lavender-text, #554e5d);
    font-family: "DM Sans", sans-serif;
    font-size:
        clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.9;
}

.lavArticleBody p:last-child {
    margin-bottom: 0;
}

.lavArticleBody strong {
    color: var(--lavender-heading, #30283b);
}

.lavArticleBody a {
    color: var(--lavender-primary, #77539a);
    text-underline-offset: 0.18em;
}

.lavArticleBody a:hover {
    text-decoration-thickness: 2px;
}


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

.lavArticleIntroduction {
    position: relative;
    padding:
        clamp(2rem, 4vw, 3rem);
    border: 1px solid rgba(114, 83, 145, 0.12);
    border-radius:
        clamp(1.5rem, 3vw, 2.2rem);
    background:
        radial-gradient(
            circle at top right,
            rgba(214, 196, 231, 0.28),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbf8fc 100%
        );
    box-shadow:
        0 1.5rem 4rem rgba(58, 45, 72, 0.08);
}

.lavArticleIntroduction::after {
    content: "";
    position: absolute;
    right: clamp(1.4rem, 3vw, 2.5rem);
    bottom: clamp(1.2rem, 3vw, 2.2rem);
    width: 4.5rem;
    height: 4.5rem;
    border:
        1px solid
        rgba(120, 86, 158, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.lavArticleOpening {
    position: relative;
    margin-bottom: 2rem;
    padding-left: 1.4rem;
    color: var(--lavender-heading, #30283b) !important;
    font-family: "Newsreader", serif !important;
    font-size:
        clamp(1.3rem, 2.2vw, 1.75rem) !important;
    line-height: 1.65 !important;
}

.lavArticleOpening::before {
    content: "";
    position: absolute;
    top: 0.2rem;
    bottom: 0.2rem;
    left: 0;
    width: 3px;
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            #a782c4,
            #d5bfdc
        );
}


/* =========================================================
   SECTIONS
========================================================= */

.lavArticleSection {
    scroll-margin-top: 8.5rem;
}

.lavArticleSection + .lavArticleSection,
.lavArticleSection + .lavArticleBooks,
.lavArticleBooks + .lavArticleClosing {
    margin-top:
        clamp(4.5rem, 8vw, 7rem);
}

.lavArticleSectionHeader {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    margin-bottom: 2rem;
}

.lavArticleSectionNumber {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    margin-top: 0.15rem;
    border: 1px solid rgba(118, 82, 155, 0.18);
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            rgba(241, 234, 246, 0.95),
            rgba(255, 255, 255, 0.96)
        );
    color: var(--lavender-primary, #77539a);
    box-shadow:
        0 0.75rem 1.8rem rgba(82, 59, 104, 0.08);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.lavArticleSectionHeader h2,
.lavArticleBooks h2,
.lavArticleClosing h2,
.lavArticleReferences h2 {
    margin: 0;
    color: var(--lavender-heading, #30283b);
    font-family: "Newsreader", serif;
    font-size:
        clamp(2rem, 4vw, 3.25rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.08;
}

.lavArticleContentBlock {
    margin:
        clamp(2rem, 4vw, 3rem)
        0;
}

.lavArticleContentBlock h3,
.lavArticleRecommendation h3,
.lavArticleAdditionalResource h3,
.lavArticleScientificInsight h3,
.lavArticleTip h3 {
    margin:
        0
        0
        1rem;
    color: var(--lavender-heading, #30283b);
    font-family: "Newsreader", serif;
    font-size:
        clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 500;
    line-height: 1.25;
}


/* =========================================================
   LISTS
========================================================= */

.lavArticleList {
    display: grid;
    gap: 0.9rem;
    margin:
        0
        0
        1.75rem;
    padding: 0;
    list-style: none;
}

.lavArticleList li {
    position: relative;
    padding-left: 1.8rem;
    color: var(--lavender-text, #554e5d);
    font-size:
        clamp(1rem, 1.1vw, 1.08rem);
    line-height: 1.75;
}

.lavArticleList li::before {
    content: "";
    position: absolute;
    top: 0.72em;
    left: 0;
    width: 0.52rem;
    height: 0.52rem;
    border:
        2px solid
        rgba(119, 83, 154, 0.52);
    border-radius:
        55% 45% 60% 40%;
    background:
        rgba(216, 198, 229, 0.38);
    transform: rotate(32deg);
}

.lavArticleAppList {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    margin:
        2rem
        0
        2.5rem;
}

.lavArticleAppList li {
    min-height: 100%;
    padding:
        1rem
        1rem
        1rem
        2.5rem;
    border: 1px solid rgba(116, 84, 148, 0.11);
    border-radius: 1rem;
    background: rgba(253, 250, 253, 0.88);
}

.lavArticleAppList li::before {
    left: 1rem;
}


/* =========================================================
   INFORMATION CARDS
========================================================= */

.lavArticleRecommendation,
.lavArticleAdditionalResource,
.lavArticleScientificInsight,
.lavArticleTip {
    position: relative;
    margin:
        clamp(2rem, 4vw, 3rem)
        0;
    padding:
        clamp(1.5rem, 3vw, 2rem);
    border-radius: 1.45rem;
    overflow: hidden;
}

.lavArticleRecommendation {
    border:
        1px solid
        rgba(111, 84, 137, 0.14);
    background:
        linear-gradient(
            145deg,
            #fbf8fc,
            #ffffff
        );
    box-shadow:
        0 1rem 2.5rem rgba(55, 42, 67, 0.06);
}

.lavArticleAdditionalResource {
    border:
        1px solid
        rgba(88, 137, 132, 0.16);
    background:
        linear-gradient(
            145deg,
            rgba(238, 248, 245, 0.92),
            rgba(255, 255, 255, 0.95)
        );
}

.lavArticleScientificInsight {
    border:
        1px solid
        rgba(93, 104, 147, 0.15);
    background:
        linear-gradient(
            145deg,
            rgba(242, 244, 252, 0.95),
            rgba(255, 255, 255, 0.96)
        );
}

.lavArticleTip {
    border:
        1px solid
        rgba(150, 116, 69, 0.13);
    background:
        linear-gradient(
            145deg,
            rgba(252, 247, 238, 0.95),
            rgba(255, 255, 255, 0.96)
        );
}

.lavArticleRecommendation::before,
.lavArticleAdditionalResource::before,
.lavArticleScientificInsight::before,
.lavArticleTip::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0.32rem;
    height: 100%;
}

.lavArticleRecommendation::before {
    background: #9c78b9;
}

.lavArticleAdditionalResource::before {
    background: #76a49c;
}

.lavArticleScientificInsight::before {
    background: #818bb5;
}

.lavArticleTip::before {
    background: #c4a26a;
}


/* =========================================================
   FEET, HANDS AND MOUTH CARDS
========================================================= */

.lavArticleApproachGrid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin:
        2.25rem
        0
        2.75rem;
}

.lavArticleApproachCard {
    position: relative;
    padding:
        1.6rem
        1.45rem;
    border: 1px solid rgba(113, 83, 142, 0.12);
    border-radius: 1.35rem;
    background:
        radial-gradient(
            circle at top right,
            rgba(218, 204, 232, 0.25),
            transparent 45%
        ),
        #ffffff;
    box-shadow:
        0 1rem 2.5rem rgba(60, 47, 72, 0.06);
}

.lavArticleApproachCard h3 {
    margin:
        0
        0
        0.8rem;
    color: var(--lavender-primary, #77539a);
    font-family: "Newsreader", serif;
    font-size: 1.55rem;
    font-weight: 500;
}

.lavArticleApproachCard p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.75;
}


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

.lavArticleQuote {
    position: relative;
    margin:
        2.5rem
        0;
    padding:
        clamp(2rem, 4vw, 3rem);
    border:
        1px solid
        rgba(122, 88, 160, 0.13);
    border-radius: 1.8rem;
    background:
        linear-gradient(
            145deg,
            rgba(246, 240, 249, 0.95),
            rgba(255, 255, 255, 0.96)
        );
}

.lavArticleQuote::before {
    content: "“";
    position: absolute;
    top: 0.65rem;
    left: 1.2rem;
    color: rgba(120, 86, 158, 0.18);
    font-family: "Newsreader", serif;
    font-size: 6rem;
    line-height: 1;
}

.lavArticleQuote p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--lavender-heading, #30283b);
    font-family: "Newsreader", serif;
    font-size:
        clamp(1.25rem, 2.1vw, 1.65rem);
    font-style: italic;
    line-height: 1.65;
}


/* =========================================================
   BOOKS
========================================================= */

.lavArticleBooks {
    scroll-margin-top: 8.5rem;
    padding:
        clamp(2rem, 4vw, 3rem);
    border:
        1px solid
        rgba(112, 83, 140, 0.12);
    border-radius: 1.8rem;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #faf6fb
        );
    box-shadow:
        0 1.2rem 3rem rgba(57, 44, 69, 0.07);
}

.lavArticleBooks h2 {
    margin-bottom: 1.25rem;
}

.lavArticleBookList {
    display: grid;
    gap: 1rem;
    margin:
        2rem
        0
        0;
    padding: 0;
    list-style: none;
}

.lavArticleBookList li {
    position: relative;
    padding:
        1.15rem
        1.2rem
        1.15rem
        3.2rem;
    border: 1px solid rgba(115, 84, 145, 0.1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.82);
    color: var(--lavender-text, #554e5d);
    line-height: 1.65;
}

.lavArticleBookList li::before {
    content: "";
    position: absolute;
    top: 1.2rem;
    left: 1.15rem;
    width: 1rem;
    height: 1.25rem;
    border:
        1px solid
        rgba(119, 83, 154, 0.42);
    border-radius: 0.2rem;
    background:
        linear-gradient(
            90deg,
            rgba(213, 195, 228, 0.48) 0 28%,
            transparent 28%
        );
}

.lavArticleBookList cite {
    color: var(--lavender-heading, #30283b);
    font-family: "Newsreader", serif;
    font-size: 1.18rem;
    font-style: italic;
    font-weight: 500;
}


/* =========================================================
   CLOSING MESSAGE
========================================================= */

.lavArticleClosing {
    position: relative;
    margin-top:
        clamp(4rem, 7vw, 6rem);
    padding:
        clamp(2rem, 4vw, 3rem);
    border-radius: 1.8rem;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #6f4f89,
            #8966a4
        );
    box-shadow:
        0 1.5rem 4rem rgba(79, 55, 98, 0.2);
}

.lavArticleClosing::before,
.lavArticleClosing::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.lavArticleClosing::before {
    top: -4rem;
    right: -3rem;
    width: 12rem;
    height: 12rem;
    background: rgba(255, 255, 255, 0.08);
}

.lavArticleClosing::after {
    bottom: -5rem;
    left: -4rem;
    width: 10rem;
    height: 10rem;
    background: rgba(255, 255, 255, 0.06);
}

.lavArticleClosing h2,
.lavArticleClosing p {
    position: relative;
    z-index: 1;
    color: #ffffff;
}

.lavArticleClosing h2 {
    margin-bottom: 1rem;
}

.lavArticleClosing p {
    max-width: 42rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
}


/* =========================================================
   AUTHOR
========================================================= */

.lavArticleAuthor {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap:
        0.5rem
        2rem;
    margin-top: 2rem;
    padding:
        1.3rem
        1.5rem;
    border:
        1px solid
        rgba(113, 84, 140, 0.1);
    border-radius: 1rem;
    background: rgba(250, 247, 251, 0.85);
}

.lavArticleAuthor p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
}

.lavArticleAuthor p:first-child {
    color: var(--lavender-heading, #30283b);
    font-weight: 600;
}


/* =========================================================
   REFERENCES
========================================================= */

.lavArticleReferences {
    scroll-margin-top: 8.5rem;
    margin-top:
        clamp(4rem, 7vw, 6rem);
    padding-top:
        clamp(2.5rem, 5vw, 4rem);
    border-top:
        1px solid
        rgba(110, 83, 137, 0.14);
}

.lavArticleReferences h2 {
    margin-bottom: 1.6rem;
    font-size:
        clamp(1.8rem, 3vw, 2.5rem);
}

.lavArticleReferenceList {
    display: grid;
    gap: 0.9rem;
    margin: 0;
    padding-left: 1.5rem;
}

.lavArticleReferenceList li {
    padding-left: 0.35rem;
    color: var(--lavender-text-light, #746d7d);
    font-size: 0.9rem;
    line-height: 1.7;
}

.lavArticleReferenceList li::marker {
    color: var(--lavender-primary, #77539a);
    font-weight: 600;
}


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

.lavArticleVisuallyHidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* =========================================================
   REVEAL SUPPORT
========================================================= */

.js .lavArticle [data-article-section] {
    opacity: 0;
    transform: translateY(2rem);
    transition:
        opacity 700ms ease,
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .lavArticle [data-article-section].is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .lavArticleLayout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .lavArticleAside {
        order: 0;
    }

    .lavArticleAsideInner {
        position: static;
        padding: 1.25rem;
    }

    .lavArticleContents {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .lavArticleBody {
        max-width: none;
    }

}


@media (max-width: 800px) {

    .lavArticle {
        padding:
            3.5rem
            0
            5rem;
    }

    .lavArticleContents {
        grid-template-columns: 1fr;
    }

    .lavArticleSectionHeader {
        grid-template-columns: 1fr;
    }

    .lavArticleSectionNumber {
        width: 2.75rem;
        height: 2.75rem;
    }

    .lavArticleApproachGrid {
        grid-template-columns: 1fr;
    }

    .lavArticleAppList {
        grid-template-columns: 1fr;
    }

    .lavArticleAuthor {
        flex-direction: column;
    }

}


@media (max-width: 560px) {

    .lavArticleIntroduction,
    .lavArticleBooks,
    .lavArticleClosing {
        padding: 1.5rem;
        border-radius: 1.3rem;
    }

    .lavArticleRecommendation,
    .lavArticleAdditionalResource,
    .lavArticleScientificInsight,
    .lavArticleTip {
        padding:
            1.4rem
            1.25rem;
        border-radius: 1.2rem;
    }

    .lavArticleOpening {
        padding-left: 1rem;
    }

    .lavArticleQuote {
        padding:
            2rem
            1.5rem
            1.6rem;
    }

    .lavArticleQuote::before {
        left: 0.8rem;
    }

    .lavArticleBookList li {
        padding:
            1rem
            1rem
            1rem
            2.8rem;
    }

}


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

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

    .lavArticleContents a,
    .lavArticleContents a::before,
    .js .lavArticle [data-article-section] {
        transition: none;
    }

    .js .lavArticle [data-article-section] {
        opacity: 1;
        transform: none;
    }

}


/* =========================================================
   PRINT
========================================================= */

@media print {

    .lavArticle {
        padding: 0;
        background: #ffffff;
    }

    .lavArticleAside {
        display: none;
    }

    .lavArticleLayout {
        display: block;
    }

    .lavArticleBody {
        max-width: none;
    }

    .lavArticleIntroduction,
    .lavArticleRecommendation,
    .lavArticleAdditionalResource,
    .lavArticleScientificInsight,
    .lavArticleTip,
    .lavArticleBooks,
    .lavArticleClosing,
    .lavArticleApproachCard,
    .lavArticleQuote {
        border:
            1px solid
            #d9d9d9;
        background: #ffffff;
        box-shadow: none;
        color: #000000;
    }

    .lavArticleClosing h2,
    .lavArticleClosing p {
        color: #000000;
    }

}