/* =========================================================
   ARTICLE.CSS
   Premium Dental Article
========================================================= */

.article-page {
    position: relative;
    min-height: 100vh;
    padding: 145px 0 100px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(74, 196, 149, .14),
            transparent 26%
        ),
        radial-gradient(
            circle at 10% 75%,
            rgba(199, 164, 90, .09),
            transparent 24%
        ),
        var(--bg);

    color: var(--text);
    overflow: hidden;
}


/* =========================================
   BACKGROUND EFFECTS
========================================= */

.article-page::before {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    right: -180px;
    top: 230px;

    border-radius: 50%;

    border: 1px solid rgba(74, 196, 149, .13);

    box-shadow:
        0 0 0 35px rgba(74, 196, 149, .025),
        0 0 0 70px rgba(74, 196, 149, .015);

    animation: articleRotate 16s linear infinite;

    pointer-events: none;
}

.article-page::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -170px;
    bottom: 250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(199, 164, 90, .12),
            transparent 70%
        );

    animation: articleFloat 8s ease-in-out infinite;

    pointer-events: none;
}

@keyframes articleRotate {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes articleFloat {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(30px, -25px);
    }
}


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

.article-wrapper {
    position: relative;
    z-index: 2;

    width: min(1050px, calc(100% - 30px));

    margin: auto;
}


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

.article-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 32px;

    padding: 9px 15px;

    width: fit-content;

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

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

    border-radius: 50px;

    backdrop-filter: blur(12px);

    color: var(--text-light);

    font-size: 10px;

    animation:
        articleFade .7s ease both;
}

.article-breadcrumb a {
    color: var(--primary);

    transition: .3s ease;
}

.article-breadcrumb a:hover {
    color: var(--gold);

    transform: translateX(-3px);
}

.article-breadcrumb span {
    opacity: .7;
}


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

.article-header {
    max-width: 850px;

    margin: 0 auto 50px;

    text-align: center;

    animation:
        articleHeaderIn .9s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes articleHeaderIn {
    from {
        opacity: 0;
        transform: translateY(35px);
        filter: blur(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.article-category {
    display: inline-flex;
    align-items: center;

    padding: 7px 18px;

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            rgba(74, 196, 149, .12),
            rgba(199, 164, 90, .08)
        );

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

    color: var(--primary-dark);

    font-size: 11px;
    font-weight: 700;

    box-shadow:
        0 8px 25px rgba(52, 85, 72, .06);

    animation:
        categoryFloat 3s ease-in-out infinite;
}

@keyframes categoryFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

.article-header h1 {
    margin: 18px auto 15px;

    color: var(--text);

    font-size: clamp(31px, 5vw, 52px);

    line-height: 1.55;

    font-weight: 800;

    letter-spacing: -.7px;
}

.article-header h1::after {
    content: "";

    display: block;

    width: 65px;
    height: 3px;

    margin: 18px auto 0;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--gold)
        );

    animation:
        lineGrow .8s .3s ease both;
}

@keyframes lineGrow {
    from {
        width: 0;
        opacity: 0;
    }

    to {
        width: 65px;
        opacity: 1;
    }
}

.article-header > p {
    max-width: 700px;

    margin: auto;

    color: var(--text-light);

    font-size: 14px;

    line-height: 2.3;
}


/* =========================================
   META
========================================= */

.article-meta {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 22px;

    color: var(--text-light);

    font-size: 10px;
}

.article-meta span {
    position: relative;
}

.article-meta span + span::before {
    content: "";

    position: absolute;

    right: -12px;
    top: 50%;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--gold);

    transform: translateY(-50%);
}


/* =========================================
   COVER
========================================= */

.article-cover {
    position: relative;

    width: 100%;
    height: 500px;

    margin-bottom: 60px;

    overflow: hidden;

    background: var(--surface);

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

    border-radius: 34px;

    box-shadow:
        0 30px 80px rgba(52, 85, 72, .14);

    animation:
        coverReveal 1s .15s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes coverReveal {
    from {
        opacity: 0;

        transform:
            translateY(35px)
            scale(.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

.article-cover::before {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    top: -85px;
    right: -85px;

    border-radius: 50%;

    border: 1px solid rgba(199, 164, 90, .28);

    z-index: 3;

    animation:
        articleRotate 12s linear infinite;
}

.article-cover::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(74, 196, 149, .08),
            transparent 42%,
            rgba(199, 164, 90, .08)
        );

    pointer-events: none;

    z-index: 2;
}

.article-cover img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1s cubic-bezier(.2,.8,.2,1),
        filter .5s ease;
}

.article-cover:hover img {
    transform: scale(1.055);

    filter: saturate(1.05);
}


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

.article-body {
    width: min(820px, 100%);

    margin: auto;
}

.article-body p {
    margin-bottom: 23px;

    color: var(--text-light);

    font-size: 14px;

    line-height: 2.45;
}


/* =========================================
   HEADINGS
========================================= */

.article-body h2 {
    position: relative;

    margin: 58px 0 23px;

    padding-right: 19px;

    color: var(--text);

    font-size: 26px;

    line-height: 1.7;
}

.article-body h2::before {
    content: "";

    position: absolute;

    right: 0;
    top: 8px;

    width: 4px;
    height: 40px;

    border-radius: 10px;

    background:
        linear-gradient(
            to bottom,
            var(--primary),
            var(--gold)
        );

    box-shadow:
        0 6px 18px rgba(74, 196, 149, .18);
}

.article-body h2::after {
    content: "";

    display: block;

    width: 35px;
    height: 2px;

    margin-top: 8px;

    border-radius: 10px;

    background: var(--gold);

    opacity: .55;
}

.article-body h3 {
    margin: 35px 0 14px;

    color: var(--primary-dark);

    font-size: 19px;
}


/* =========================================
   HIGHLIGHT
========================================= */

.article-highlight {
    position: relative;

    margin: 38px 0;

    padding: 27px 29px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.82),
            rgba(238,245,241,.92)
        );

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

    border-right: 4px solid var(--primary);

    border-radius: 23px;

    color: var(--text);

    line-height: 2.2;

    box-shadow:
        0 15px 45px rgba(52, 85, 72, .08);

    overflow: hidden;

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.article-highlight::before {
    content: "“";

    position: absolute;

    left: 18px;
    top: -20px;

    font-family: Georgia, serif;

    font-size: 100px;

    color: var(--primary);

    opacity: .08;
}

.article-highlight:hover {
    transform: translateX(-6px);

    box-shadow:
        0 22px 55px rgba(52, 85, 72, .12);
}


/* =========================================
   LIST
========================================= */

.article-body ul {
    list-style: none;

    padding: 0;

    margin: 28px 0 38px;
}

.article-body li {
    position: relative;

    margin-bottom: 11px;

    padding: 14px 43px 14px 16px;

    background: var(--surface);

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

    border-radius: 16px;

    color: var(--text-light);

    font-size: 13px;

    box-shadow:
        0 8px 25px rgba(52, 85, 72, .04);

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

.article-body li::before {
    content: "✓";

    position: absolute;

    right: 13px;
    top: 50%;

    width: 23px;
    height: 23px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(74, 196, 149, .11);

    color: var(--primary);

    font-size: 11px;
    font-weight: 800;

    transform: translateY(-50%);
}

.article-body li:hover {
    transform: translateX(-6px);

    border-color:
        rgba(74,196,149,.28);

    box-shadow:
        0 13px 32px rgba(52, 85, 72, .08);
}


/* =========================================
   SECOND IMAGE
========================================= */

.article-body .article-image {
    position: relative;

    width: 100%;
    height: 360px;

    margin: 45px 0;

    overflow: hidden;

    background: var(--surface);

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

    border-radius: 28px;

    box-shadow:
        0 18px 50px rgba(52, 85, 72, .09);
}

.article-body .article-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .9s cubic-bezier(.2,.8,.2,1);
}

.article-body .article-image:hover img {
    transform: scale(1.06);
}


/* =========================================
   DOCTOR NOTE
========================================= */

.doctor-note {
    position: relative;

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 50px;

    padding: 23px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.83),
            rgba(238,245,241,.92)
        );

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

    border-radius: 24px;

    box-shadow:
        0 16px 42px rgba(52, 85, 72, .08);

    overflow: hidden;

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.doctor-note::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    left: -65px;
    bottom: -65px;

    border-radius: 50%;

    border: 1px solid rgba(199, 164, 90, .15);
}

.doctor-note:hover {
    transform: translateY(-5px);

    box-shadow:
        0 22px 52px rgba(52, 85, 72, .12);
}

.doctor-note-logo {
    position: relative;

    z-index: 2;

    flex-shrink: 0;

    width: 65px;
    height: 65px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: var(--surface-2);

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

    border-radius: 18px;
}

.doctor-note-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.doctor-note-text {
    position: relative;
    z-index: 2;
}

.doctor-note-text strong {
    display: block;

    margin-bottom: 4px;

    color: var(--text);

    font-size: 14px;
}

.doctor-note-text span {
    color: var(--text-light);

    font-size: 11px;
}


/* =========================================
   BACK BUTTON
========================================= */

.article-back {
    display: flex;

    justify-content: center;

    margin-top: 50px;
}

.article-back a {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 13px 26px;

    overflow: hidden;

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 12px 30px rgba(74,196,149,.23);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.article-back a::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.38),
            transparent
        );

    transform: skewX(-20deg);

    transition: .7s;
}

.article-back a:hover::before {
    left: 140%;
}

.article-back a:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 42px rgba(74,196,149,.32);
}


/* =========================================
   DARK MODE
========================================= */

body.dark .article-page {
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(74,196,149,.08),
            transparent 26%
        ),
        radial-gradient(
            circle at 10% 75%,
            rgba(199,164,90,.05),
            transparent 24%
        ),
        var(--bg);
}

body.dark .article-breadcrumb {
    background: rgba(255,255,255,.035);

    border-color:
        rgba(142,178,161,.15);
}

body.dark .article-category {
    background:
        rgba(74,196,149,.08);

    color: var(--primary-light);
}

body.dark .article-highlight,
body.dark .doctor-note {
    background:
        linear-gradient(
            135deg,
            rgba(49,73,64,.95),
            rgba(41,69,58,.95)
        );

    border-color:
        rgba(142,178,161,.14);
}

body.dark .article-body li {
    background: var(--surface);

    border-color:
        rgba(142,178,161,.12);
}

body.dark .article-cover,
body.dark .article-body .article-image {
    background: var(--surface);
}


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

@media (max-width: 850px) {

    .article-page {
        padding: 125px 0 80px;
    }

    .article-cover {
        height: 400px;

        border-radius: 28px;
    }

    .article-body h2 {
        font-size: 23px;
    }

    .article-body p {
        font-size: 13px;

        line-height: 2.3;
    }
}


@media (max-width: 600px) {

    .article-page {
        padding: 115px 0 65px;
    }

    .article-wrapper {
        width: calc(100% - 24px);
    }

    .article-breadcrumb {
        font-size: 9px;

        margin-bottom: 24px;
    }

    .article-header {
        margin-bottom: 35px;
    }

    .article-header h1 {
        font-size: 28px;

        line-height: 1.65;
    }

    .article-header > p {
        font-size: 12px;

        line-height: 2.15;
    }

    .article-cover {
        height: 260px;

        margin-bottom: 40px;

        border-radius: 23px;
    }

    .article-body h2 {
        margin-top: 42px;

        font-size: 20px;
    }

    .article-body h2::before {
        height: 30px;
    }

    .article-body p {
        font-size: 12px;

        line-height: 2.25;
    }

    .article-highlight {
        padding: 20px;

        font-size: 12px;
    }

    .article-body li {
        padding: 12px 39px 12px 13px;

        font-size: 11px;
    }

    .article-body .article-image {
        height: 240px;

        border-radius: 22px;
    }

    .doctor-note {
        gap: 13px;

        padding: 18px;
    }

    .doctor-note-logo {
        width: 55px;
        height: 55px;
    }

    .doctor-note-text strong {
        font-size: 12px;
    }

    .doctor-note-text span {
        font-size: 9px;
    }
}


/* =========================================
   REDUCE MOTION
========================================= */

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}