/* =========================================================
   NOTES SECTION
========================================================= */

.notes-section{
    position:relative;
}


/* =========================================================
   NOTES GRID
========================================================= */

.notes-grid,
.notes-archive{
    display:grid;

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

    gap:14px;
}


/* =========================================================
   NOTE CARD
========================================================= */

.note-card{
    position:relative;

    min-width:0;

    min-height:240px;

    padding:23px;

    display:flex;

    flex-direction:column;

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

    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(
                38,
                62,
                105,
                .055
            ),
            rgba(
                255,
                255,
                255,
                .014
            )
        );

    overflow:hidden;

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


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

@media(hover:hover){

    .note-card:hover{
        transform:
            translateY(-4px);

        border-color:
            rgba(
                var(--accent-rgb),
                .27
            );

        background:
            linear-gradient(
                145deg,
                rgba(
                    var(--accent-rgb),
                    .07
                ),
                rgba(
                    255,
                    255,
                    255,
                    .018
                )
            );

        box-shadow:
            0 20px 50px
            rgba(
                0,
                0,
                0,
                .13
            );
    }

}


/* =========================================================
   CARD TOP
========================================================= */

.note-card-top{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;
}


.note-index{
    display:inline-flex;

    width:40px;
    height:40px;

    flex:
        0 0 40px;

    border-radius:13px;

    align-items:center;

    justify-content:center;

    background:
        rgba(
            var(--accent-rgb),
            .10
        );

    color:
        var(--accent);

    font-size:12px;

    font-weight:800;
}


.note-category{
    overflow:hidden;

    color:
        var(--muted);

    font-size:10px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    text-overflow:ellipsis;

    white-space:nowrap;
}


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

.note-card-content{
    flex:1;
}


.note-card h3{
    margin:
        18px 0 8px;

    font-size:18px;

    line-height:1.28;

    letter-spacing:-.02em;
}


.note-card h3 a{
    color:
        var(--text);

    text-decoration:none;
}


.note-card h3 a:hover{
    color:
        var(--accent);
}


.note-card p{
    margin:0;

    color:
        var(--muted);

    line-height:1.7;

    font-size:13px;
}


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

.note-card-footer{
    margin-top:22px;

    padding-top:14px;

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

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;
}


.note-read-time{
    color:
        var(--muted);

    font-size:10px;

    white-space:nowrap;
}


.note-read-link{
    display:inline-flex;

    align-items:center;

    gap:5px;

    color:
        var(--accent);

    font-size:11px;

    font-weight:800;

    text-decoration:none;
}


.note-read-arrow{
    transition:
        transform .18s ease;
}


.note-read-link:hover
.note-read-arrow{
    transform:
        translateX(3px);
}


html[dir="rtl"]
.note-read-link:hover
.note-read-arrow{
    transform:
        translateX(-3px);
}


/* =========================================================
   ALL NOTES PAGE
========================================================= */

.notes-page{
    min-height:100vh;
}


.notes-archive{
    gap:18px;

    padding-bottom:20px;
}


.notes-archive .note-card{
    min-height:270px;
}


/* =========================================================
   NOTE DETAIL PAGE
========================================================= */

.note-detail-page{
    min-height:100vh;
}


.note-detail-container{
    max-width:900px;
}


/* =========================================================
   NOTE DETAIL HERO
========================================================= */

.note-detail-hero{
    padding:
        calc(var(--header-h) + 64px)
        0
        54px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .04
        );
}


.note-back-link{
    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-bottom:34px;

    color:
        var(--muted);

    font-size:12px;

    font-weight:700;

    text-decoration:none;

    transition:
        color .18s ease,
        transform .18s ease;
}


.note-back-link:hover{
    color:
        var(--text);

    transform:
        translateX(-3px);
}


html[dir="rtl"]
.note-back-link:hover{
    transform:
        translateX(3px);
}


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

.note-detail-meta{
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:16px;

    color:
        var(--muted);

    font-size:11px;
}


.note-detail-category{
    color:
        var(--accent);

    font-weight:800;

    letter-spacing:.05em;
}


.note-meta-divider{
    opacity:.42;
}


/* =========================================================
   NOTE TITLE
========================================================= */

.note-detail-hero h1{
    max-width:850px;

    margin:
        0 0 18px;

    font-size:
        clamp(
            44px,
            6vw,
            76px
        );

    line-height:1.02;

    letter-spacing:-.05em;
}


html[dir="rtl"]
.note-detail-hero h1{
    line-height:1.18;

    letter-spacing:0;
}


.note-detail-lead{
    max-width:760px;

    margin:0;

    color:
        var(--muted);

    font-size:17px;

    line-height:1.85;
}


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

.note-article-section{
    padding:
        58px 0 80px;
}


.note-article{
    max-width:780px;

    margin:auto;
}


.note-article h2{
    margin:
        48px 0 16px;

    color:
        var(--text);

    font-size:
        clamp(
            25px,
            3vw,
            33px
        );

    line-height:1.25;

    letter-spacing:-.03em;
}


html[dir="rtl"]
.note-article h2{
    letter-spacing:0;
}


.note-paragraph{
    margin:
        0 0 22px;

    color:
        #b8c7db;

    font-size:15px;

    line-height:1.95;
}


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

.note-list{
    margin:
        6px 0 28px;

    padding-left:22px;

    display:grid;

    gap:11px;

    color:
        #bdcade;

    font-size:14px;

    line-height:1.75;
}


html[dir="rtl"]
.note-list{
    padding-left:0;

    padding-right:22px;
}


.note-list li::marker{
    color:
        var(--accent);
}


/* =========================================================
   CODE BLOCK
========================================================= */

.note-code-block{
    margin:
        28px 0;

    overflow:hidden;

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

    border-radius:18px;

    background:
        #07111f;

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


.note-code-head{
    min-height:36px;

    padding:
        0 14px;

    display:flex;

    align-items:center;

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

    color:
        var(--muted);

    font-size:10px;

    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;
}


.note-code-block pre{
    margin:0;

    padding:
        20px;

    overflow-x:auto;

    direction:ltr;

    text-align:left;
}


.note-code-block code{
    color:
        #d7e5fa;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size:13px;

    line-height:1.75;
}


/* =========================================================
   CALLOUT
========================================================= */

.note-callout{
    margin:
        30px 0;

    padding:
        18px 20px;

    display:grid;

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

    gap:14px;

    border:
        1px solid
        rgba(
            var(--accent-rgb),
            .22
        );

    border-radius:18px;

    background:
        rgba(
            var(--accent-rgb),
            .055
        );
}


.note-callout-icon{
    width:34px;
    height:34px;

    display:grid;

    place-items:center;

    border-radius:11px;

    background:
        rgba(
            var(--accent-rgb),
            .12
        );

    color:
        var(--accent);

    font-size:13px;

    font-weight:900;
}


.note-callout strong{
    display:block;

    margin-bottom:5px;

    color:
        var(--text);

    font-size:13px;
}


.note-callout p{
    margin:0;

    color:
        var(--muted);

    font-size:13px;

    line-height:1.75;
}


/* =========================================================
   ARTICLE IMAGE
========================================================= */

.note-content-image{
    margin:
        32px 0;
}


.note-content-image img{
    display:block;

    width:100%;

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

    border-radius:18px;

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


.note-content-image figcaption{
    margin-top:9px;

    color:
        var(--muted);

    font-size:11px;

    line-height:1.6;
}


/* =========================================================
   DETAIL FOOTER
========================================================= */

.note-detail-footer{
    max-width:780px;

    margin:
        50px auto 0;

    padding-top:24px;

    border-top:
        1px solid
        var(--line);
}


/* =========================================================
   NOT FOUND
========================================================= */

.note-not-found{
    min-height:
        calc(
            100vh - var(--header-h)
        );

    padding:
        calc(var(--header-h) + 70px)
        0
        80px;

    display:flex;

    align-items:center;
}


.note-not-found-card{
    max-width:680px;

    margin:auto;

    padding:42px;

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

    border-radius:28px;

    background:
        rgba(
            9,
            19,
            34,
            .72
        );

    box-shadow:
        var(--shadow);

    text-align:center;
}


.note-not-found-card h1{
    margin:
        8px 0 14px;

    font-size:
        clamp(
            38px,
            6vw,
            68px
        );
}


.note-not-found-card p{
    max-width:520px;

    margin:
        0 auto 24px;

    color:
        var(--muted);

    line-height:1.8;
}


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

@media(max-width:1050px){

    .notes-archive{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


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

@media(max-width:700px){

    .notes-archive{
        grid-template-columns:1fr;

        gap:14px;
    }


    .notes-archive .note-card{
        min-height:0;
    }


    .note-detail-hero{
        padding:
            calc(var(--header-h) + 34px)
            0
            38px;
    }


    .note-back-link{
        margin-bottom:24px;
    }


    .note-detail-hero h1{
        font-size:
            clamp(
                38px,
                11vw,
                52px
            );
    }


    .note-detail-lead{
        font-size:14px;

        line-height:1.8;
    }


    .note-article-section{
        padding:
            40px 0 64px;
    }


    .note-article h2{
        margin-top:38px;

        font-size:25px;
    }


    .note-paragraph{
        font-size:14px;

        line-height:1.9;
    }


    .note-code-block pre{
        padding:16px;
    }


    .note-code-block code{
        font-size:12px;
    }


    .note-callout{
        padding:16px;

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


    .note-callout-icon{
        width:30px;
        height:30px;
    }


    .note-not-found-card{
        padding:
            30px 22px;
    }

}


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

@media(max-width:420px){

    .note-card{
        padding:19px;

        min-height:0;

        border-radius:20px;
    }


    .note-card h3{
        font-size:17px;
    }


    .note-card-footer{
        align-items:flex-start;

        flex-direction:column;

        gap:8px;
    }


    .note-detail-meta{
        gap:6px;

        font-size:10px;
    }


    .note-callout{
        grid-template-columns:1fr;
    }

}