/* =========================================================
   ARTYKUŁ
========================================================= */

.article-page {
    position: relative;

    padding: 3rem 0 5rem;
}


/* =========================
   POWRÓT
========================= */

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

    gap: .85rem;

    margin-bottom: 3rem;
    padding: .6rem 1.4rem .6rem .6rem;

    border: 1px solid rgba(77, 124, 255, .35);
    border-radius: 999px;

    background: linear-gradient(
        145deg,
        rgba(16, 35, 72, .6),
        rgba(5, 15, 32, .9)
    );

    color: #e8edf7;
    text-decoration: none;

    font-size: .92rem;
    font-weight: 600;
    line-height: 1;
    width: min(100% - 48px, var(--container));
    transition:
        border-color .3s ease,
        background .3s ease,
        transform .3s ease;
}


/* strzałka w kółku */

.article-back-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 34px;
    height: 34px;

    border: 1px solid rgba(242, 140, 40, .5);
    border-radius: 50%;

    background: rgba(242, 140, 40, .08);

    color: var(--color-accent);

    font-size: 1.05rem;
    line-height: 1;

    transition:
        background .3s ease,
        transform .3s ease;
}


/* =========================
   HOVER
========================= */

.article-back:hover {
    border-color: rgba(242, 140, 40, .5);

    background: linear-gradient(
        145deg,
        rgba(35, 30, 28, .65),
        rgba(5, 15, 32, .92)
    );

    transform: translateX(-4px);
}

.article-back:hover .article-back-icon {
    background: rgba(242, 140, 40, .16);

    transform: translateX(-3px);
}


/* =========================================================
   UKŁAD
========================================================= */

.article-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        380px;

    align-items: start;

    gap: 4rem;

    margin-bottom: 4rem;
}

.article-intro {
    min-width: 0;

    text-align: left;
}


/* =========================================================
   TREŚĆ NA PEŁNĄ SZEROKOŚĆ
========================================================= */

.article-body {
    width: 100%;
}

.article-main {
    min-width: 0;
    max-width: 100%;
}


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

.article-hero {
    margin-bottom: 3rem;

    text-align: left;
}


/* =========================
   KATEGORIA
========================= */

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

    gap: .65rem;

    margin-bottom: 1.75rem;
    padding: .7rem 1.35rem;

    border: 1px solid rgba(77, 124, 255, .45);
    border-radius: 999px;

    background: rgba(77, 124, 255, .08);

    color: #86b0ff;

    font-size: .82rem;
    font-weight: 700;
    line-height: 1;

    letter-spacing: .1em;
    text-transform: uppercase;
}

.article-category img {
    display: block;

    width: 18px;
    height: 18px;

    object-fit: contain;
}



/* =========================
   TYTUŁ
========================= */

.article-title {
    margin: 0 0 1.75rem;

    color: #fff;

    font-size: clamp(2.2rem, 3.4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.15;

    letter-spacing: -.035em;
}


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

.article-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;

    gap: 2rem;
}

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

    gap: .6rem;

    color: var(--color-text-muted);

    font-size: 1.1rem;
    line-height: 1;
}

.article-meta-item img {
    display: block;

    width: 24px;
    height: 24px;

    object-fit: contain;

    opacity: .75;
}

/* =========================
   ZAJAWKA
========================= */

.article-lead {
    max-width: 720px;
    margin: 2rem 0 0;

    color: var(--color-text-muted);

    font-size: 1.1rem;
    line-height: 1.75;

    text-align: left;
}

/* =========================================================
   NAJKRÓCEJ
========================================================= */

.article-summary {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 2rem;

    margin-bottom: 3.5rem;
    padding: 1.75rem 2.25rem;

    border: 1px solid rgba(77, 124, 255, .28);
    border-radius: 18px;

    background: linear-gradient(
        100deg,
        rgba(13, 31, 63, .7),
        rgba(7, 17, 32, .8)
    );

    box-shadow:
        0 0 30px rgba(77, 124, 255, .05),
        inset 0 0 35px rgba(77, 124, 255, .02);

    text-align: left;
    max-width: 100%;
}

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

    position: absolute;
    top: -1px;
    left: 50%;

    width: 120px;
    height: 2px;

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

    transform: translateX(-50%);
}

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

    flex-shrink: 0;

    margin: 0;
    padding: .6rem 1.25rem;

    border: 1px solid rgba(242, 140, 40, .5);
    border-radius: 999px;

    color: var(--color-accent);

    font-size: .7rem;
    font-weight: 700;
    line-height: 1;

    letter-spacing: .14em;
    text-transform: uppercase;
}

.article-summary p {
    margin: 0;

    color: var(--color-text-muted);

    font-size: 1rem;
    line-height: 1.75;
}


/* =========================================================
   TREŚĆ
========================================================= */

.article-content {
    color: var(--color-text-muted);

    font-size: 1.1rem;
    line-height: 1.85;

    text-align: left;
}

.article-content > *:first-child {
    margin-top: 0;
}


/* =========================
   NAGŁÓWKI
========================= */

.article-content h2 {
    position: relative;

    margin: 4rem 0 2.25rem;
    padding-bottom: 1.5rem;

    color: #fff;

    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    font-weight: 700;
    line-height: 1.25;

    letter-spacing: -.03em;

    scroll-margin-top: 110px;
}

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

    position: absolute;
    bottom: 0;
    left: 1.8%;

    width: 48px;
    height: 2px;

    background: var(--color-accent);

    transform: translateX(-50%);
}

.article-content h3 {
    margin: 2.5rem 0 1rem;

    color: #fff;

    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.35;

    letter-spacing: -.02em;
}


/* =========================
   AKAPITY
========================= */

.article-content p {
    margin: 0 0 1.5rem;
}

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

    text-decoration: underline;
    text-underline-offset: 3px;

    transition: color .3s ease;
}

.article-content a:hover {
    color: #86b0ff;
}

.article-content strong {
    color: #e8edf7;
    font-weight: 600;
}


/* =========================
   LISTY
========================= */

.article-content ul,
.article-content ol {
    display: inline-block;

    margin: 0 0 1.75rem;
    padding-left: 1.5rem;

    text-align: left;
}

.article-content li {
    margin-bottom: .65rem;
}

.article-content ul li::marker {
    color: var(--color-accent);
}

.article-content ol li::marker {
    color: var(--color-primary);
    font-weight: 600;
}


/* =========================
   CYTAT
========================= */

.article-content blockquote {
    margin: 2.5rem 0;
    padding: 1.5rem 1.75rem;

    border-left: 3px solid var(--color-accent);
    border-radius: 0 12px 12px 0;

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

    color: #e8edf7;

    font-size: 1.1rem;
    line-height: 1.65;
}

.article-content blockquote p:last-child {
    margin-bottom: 0;
}


/* =========================
   OBRAZY
========================= */

.article-content img {
    display: block;

    width: 100%;
    height: auto;

    margin: 2.5rem 0;

    border-radius: 14px;
}

.article-content figure {
    margin: 2.5rem 0;
}

.article-content figure img {
    margin: 0;
}

.article-content figcaption {
    margin-top: .85rem;

    color: rgba(165, 178, 198, .8);

    font-size: .85rem;
    line-height: 1.5;

    text-align: center;
}


/* =========================================================
   ZAPAMIĘTAJ
========================================================= */

.article-takeaways {
    margin-top: 4.5rem;
    padding: 2.75rem 3rem;

    border: 1px solid rgba(242, 140, 40, .55);
    border-radius: 20px;

    background: linear-gradient(
        145deg,
        #141519 0%,
        #10131a 50%,
        #0c1119 100%
    );

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .02);

    text-align: left;
}

.article-takeaways-header {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 1rem;

    margin-bottom: 2.5rem;
}

.article-takeaways-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 52px;
    height: 52px;
}

.article-takeaways-icon img {
    display: block;

    width: 45px;
    height: 45px;

    object-fit: contain;
}

.article-takeaways-header span {
    color: var(--color-primary);

    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;

    letter-spacing: -.01em;
    text-transform: none;
}


/* =========================
   PUNKTY
========================= */

.article-takeaways-grid {
    display: grid;

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

    gap: 1.75rem 2.5rem;
}

.article-takeaway {
    display: grid;

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

    align-items: start;

    gap: 1.1rem;
}

.article-takeaway-check {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 36px;
    height: 36px;

    border: 1px solid rgba(242, 140, 40, .6);
    border-radius: 50%;

    background: rgba(242, 140, 40, .08);

    color: var(--color-accent);

    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.article-takeaway p {
    margin: 0;
    padding-top: .45rem;

    color: var(--color-text-muted);

    font-size: .95rem;
    line-height: 1.65;
}


/* =========================================================
   SPIS TREŚCI
========================================================= */

.article-toc {
    position: static;
}

.article-toc-inner {
    position: relative;

    display: flex;
    flex-direction: column;

    padding: 2rem 1.75rem;

    border: 1px solid rgba(242, 140, 40, .4);
    border-radius: 18px;

    background: linear-gradient(
        145deg,
        rgba(22, 44, 88, .9),
        rgba(8, 20, 40, .96)
    );

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .3),
        0 0 40px rgba(77, 124, 255, .07);
}

.article-toc-inner::before {
    content: "";

    position: absolute;
    top: -1px;
    left: 2rem;

    width: 90px;
    height: 2px;

    background: var(--color-accent);
}

.article-toc-label {
    flex-shrink: 0;

    margin-bottom: 1.5rem;

    color: var(--color-accent);

    font-size: .72rem;
    font-weight: 700;
    line-height: 1;

    letter-spacing: .14em;
    text-transform: uppercase;
}

.article-toc-list {
    display: flex;
    flex-direction: column;

    gap: .35rem;
}

.article-toc-item {
    display: grid;

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

    align-items: start;

    gap: .85rem;

    padding: .85rem .9rem;

    border-radius: 10px;

    color: #c4d2e8;
    text-decoration: none;

    font-size: .9rem;
    line-height: 1.45;

    transition:
        background .25s ease,
        color .25s ease;
}

.article-toc-number {
    color: #86b0ff;

    font-size: .8rem;
    font-weight: 700;
    line-height: 1.45;
}

.article-toc-item:hover {
    background: rgba(77, 124, 255, .12);

    color: #fff;
}

.article-toc-item.is-active {
    background: rgba(242, 140, 40, .12);

    color: #fff;

    font-weight: 600;
}

.article-toc-item.is-active .article-toc-number {
    color: var(--color-accent);
}

/* =========================================================
   FAQ
========================================================= */

.article-faq {
    padding: 5rem 0 0;
}

.article-faq .faq-grid {
    display: block;
}

.article-faq-heading {
    margin-bottom: 3.5rem;

    text-align: center;
}

.article-faq .section-eyebrow,
.article-related .section-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: .75rem;
    margin: 0 auto 2rem;

    color: #55a2f6;

    font-size: 13.6px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: .08em;
    text-transform: uppercase;
}

.article-faq .section-eyebrow .accent-line,
.article-related .section-eyebrow .accent-line {
    display: block;

    width: 36px;
    height: 2px;

    flex-shrink: 0;

    background: #f28c28;
}

.article-faq-title,
.article-related-title {
    margin: 0 auto;
    color: #fff;

    font-size: clamp(2.2rem, 3.4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.08;

    letter-spacing: -.03em;
}

.article-faq-title span,
.article-related-title span {
    color: var(--color-primary);
}

.article-faq-divider,
.article-related-divider {
    display: flex;
    justify-content: center;

    margin-top: 1.5rem;
}

.article-faq-divider span,
.article-related-divider span {
    width: 64px;
    height: 2px;

    background: linear-gradient(
        90deg,
        var(--color-accent),
        var(--color-primary)
    );
}


/* =========================================================
   MILLIE MÓWI
========================================================= */

.article-millie {
    padding: 5rem 0 0;
}

.article-millie-card {
    position: relative;

    display: grid;

    grid-template-columns: 200px 1fr;

    align-items: center;

    gap: 2.5rem;

    width: 100%;
    padding: 2.25rem 2.75rem;

    box-sizing: border-box;
    overflow: hidden;

    border: 1px solid rgba(242, 140, 40, .42);
    border-radius: 20px;

    background:
        radial-gradient(
            circle at 72% 100%,
            rgba(77, 124, 255, .10),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #151515 0%,
            #111317 48%,
            #0b111d 100%
        );

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .25),
        inset 0 1px 0 rgba(255, 255, 255, .025);
}

.article-millie-card::before {
    content: "";

    position: absolute;
    top: -1px;
    right: 10%;

    width: 190px;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent 0%,
        #f28c28 35%,
        #f28c28 100%
    );

    box-shadow: 0 0 12px rgba(242, 140, 40, .25);
}


/* =========================
   ZDJĘCIE
========================= */

.article-millie-image {
    position: relative;

    width: 200px;
    height: 200px;

    flex-shrink: 0;

    overflow: visible;
}

.article-millie-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .28);
}


/* =========================
   ŁAPKA
========================= */

.article-millie-paw {
    position: absolute;

    right: -13px;
    bottom: -13px;

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

    width: 46px;
    height: 46px;

    box-sizing: border-box;

    border: 1px solid rgba(242, 140, 40, .65);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(242, 140, 40, .10),
            transparent 70%
        ),
        #071126;

    box-shadow:
        0 0 0 5px rgba(7, 17, 38, .85),
        0 8px 22px rgba(0, 0, 0, .3);
}

.article-millie-paw img {
    display: block;

    width: 21px;
    height: 21px;

    object-fit: contain;
}


/* =========================
   TREŚĆ
========================= */

.article-millie-content {
    min-width: 0;
}

.article-millie-eyebrow {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    margin: 0 0 2rem;

    color: rgb(255, 122, 0);

    font-size: 1rem;
    font-weight: 700;
    line-height: 1;

    letter-spacing: .16em;
    text-transform: uppercase;
}

.article-millie-body {
    display: flex;
    align-items: flex-start;

    gap: .85rem;
}

.article-millie-mark {
    flex-shrink: 0;

    margin-top: -.35rem;

    color: rgb(255, 122, 0);

    font-family: Georgia, "Times New Roman", serif;

    font-size: 3.5rem;
    font-weight: 700;
    line-height: .8;

    opacity: .9;
}

.article-millie-body p {
    margin: 0;

    color: #f5f7fb;

    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.55;

    letter-spacing: -.015em;
}


/* =========================================================
   CZYTAJ DALEJ
========================================================= */

.article-related {
    padding: 5rem 0 0;
}

.article-related-heading {
    margin-bottom: 3rem;
}

.article-related-grid {
    display: grid;

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

    gap: 1.5rem;
}

/* =========================================================
   RESPONSIVE — 1200px
========================================================= */

@media (max-width: 1200px) {

    .article-layout {
        grid-template-columns:
            minmax(0, 1fr)
            300px;

        gap: 3rem;
    }

}


/* =========================================================
   RESPONSIVE — 1024px
========================================================= */

@media (max-width: 1024px) {

    .article-layout {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }

    .article-main {
        max-width: 100%;

        order: 2;
    }


    /* spis treści na górze, zwijany */

    .article-toc {
        position: static;

        order: 1;
    }

    .article-toc-inner {
        max-height: none;
    }

    .article-toc-list {
        display: grid;

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

        gap: .35rem 1rem;

        overflow: visible;
    }

}

/* =========================================================
   RESPONSIVE — 900px
========================================================= */

@media (max-width: 900px) {

    .article-related-grid {
        grid-template-columns: 1fr;
    }

    .article-millie-card {
        grid-template-columns: 1fr;

        gap: 2rem;
    }

    .article-millie-image {
        margin: 0 auto;
    }

}

/* =========================================================
   RESPONSIVE — 768px
========================================================= */

@media (max-width: 768px) {

    .article-page {
        padding: 2rem 0 4rem;
    }

    .article-back {
        margin-bottom: 2rem;
    }

    .article-summary {
        grid-template-columns: 1fr;

        gap: 1.25rem;

        padding: 1.5rem;
    }

    .article-takeaways {
        padding: 1.75rem 1.5rem;
    }

    .article-takeaways-grid {
        grid-template-columns: 1fr;
    }

    .article-toc-list {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   RESPONSIVE — 600px
========================================================= */

@media (max-width: 600px) {

    .article-title {
        font-size: clamp(1.8rem, 8vw, 2.4rem);
    }

    .article-meta {
        gap: 1rem;
    }

    .article-content {
        font-size: .98rem;
    }

    .article-content h2 {
        margin: 2.75rem 0 1rem;

        scroll-margin-top: 90px;
    }

    .article-toc-inner {
        padding: 1.5rem 1.25rem;
    }

    .article-takeaways {
        margin-top: 3rem;
    }

}