/* ==========================================================================
   Calea Soimului LAYOUT SYSTEM
   /public_html/assets/css/layout.css
   ========================================================================== */


/* ==========================================================================
   01. LAYOUT TOKENS
   ========================================================================== */

:root{
    --layout-shell:var(--shell,1180px);

    --layout-gutter:
        clamp(
            18px,
            3.2vw,
            44px
        );

    --layout-section:
        clamp(
            72px,
            8vw,
            110px
        );

    --layout-section-sm:
        clamp(
            44px,
            5vw,
            64px
        );

    --layout-gap-xs:8px;
    --layout-gap-sm:12px;
    --layout-gap-md:18px;
    --layout-gap-lg:28px;
    --layout-gap-xl:42px;
    --layout-gap-2xl:64px;

    --layout-radius:0;

    --layout-line:
        var(
            --line,
            #d7d0c4
        );

    --layout-paper:
        #fbfaf6;

    --layout-cream:
        var(
            --cream,
            #eee8de
        );

    --layout-black:
        var(
            --black,
            #101813
        );

    --layout-ink:
        var(
            --ink,
            #172019
        );

    --layout-muted:
        var(
            --muted,
            #687068
        );
}


/* ==========================================================================
   02. DOCUMENT / OVERFLOW SAFETY
   ========================================================================== */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

body{
    margin:0;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

main,
section,
article,
aside,
header,
footer,
nav,
div{
    min-width:0;
}

img,
svg,
video,
iframe,
canvas{
    max-width:100%;
}


/* ==========================================================================
   03. ORIGINAL Calea Soimului CLASSES
   ========================================================================== */

.shell{
    width:min(calc(100% - 44px),var(--shell));
    margin-inline:auto;
}

.section{
    padding:92px 0;
}

.section-sm{
    padding:55px 0;
}

.section-cream{
    background:var(--cream);
}

.section-dark{
    background:var(--black);
    color:#fff;
}

.grid-2{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}

.content-sidebar{
    display:grid;
    grid-template-columns:minmax(0,1fr) 350px;
    gap:34px;
}

.stack{
    display:grid;
    gap:18px;
}


/* ==========================================================================
   04. EXTENDED SHELL SYSTEM
   ========================================================================== */

.shell{
    width:
        min(
            calc(
                100% - 44px
            ),
            var(
                --shell,
                var(--layout-shell)
            )
        );

    max-width:100%;

    margin-left:auto;
    margin-right:auto;
}

.shell-wide{
    width:
        min(
            calc(
                100% - 44px
            ),
            1480px
        );

    max-width:100%;

    margin-inline:auto;
}

.shell-narrow{
    width:
        min(
            calc(
                100% - 44px
            ),
            860px
        );

    max-width:100%;

    margin-inline:auto;
}

.shell-reading{
    width:
        min(
            calc(
                100% - 44px
            ),
            760px
        );

    max-width:100%;

    margin-inline:auto;
}

.full-width{
    width:100%;
    max-width:100%;
}

.full-bleed{
    width:100vw;
    max-width:100vw;

    margin-left:
        calc(
            50% - 50vw
        );

    margin-right:
        calc(
            50% - 50vw
        );
}


/* ==========================================================================
   05. SECTION SYSTEM
   ========================================================================== */

.section{
    position:relative;

    padding:
        var(
            --layout-section
        )
        0;
}

.section-sm{
    position:relative;

    padding:
        var(
            --layout-section-sm
        )
        0;
}

.section-lg{
    padding:
        clamp(
            90px,
            10vw,
            150px
        )
        0;
}

.section-xl{
    padding:
        clamp(
            110px,
            13vw,
            190px
        )
        0;
}

.section-none{
    padding-top:0;
    padding-bottom:0;
}

.section-paper{
    background:var(--layout-paper);
}

.section-cream{
    background:var(--layout-cream);
}

.section-dark{
    background:var(--layout-black);
    color:#fff;
}

.section-ink{
    background:var(--layout-ink);
    color:#fff;
}

.section-bordered{
    border-top:
        1px solid
        var(--layout-line);

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


/* ==========================================================================
   06. GRID SYSTEM
   ========================================================================== */

.grid{
    display:grid;
}

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

.grid-2{
    display:grid;

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

    gap:28px;
}

.grid-3{
    display:grid;

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

    gap:22px;
}

.grid-4{
    display:grid;

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

    gap:18px;
}

.grid-5{
    display:grid;

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

    gap:18px;
}

.grid-auto{
    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(
                    260px,
                    100%
                ),
                1fr
            )
        );

    gap:24px;
}

.grid-auto-sm{
    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(
                    200px,
                    100%
                ),
                1fr
            )
        );

    gap:18px;
}

.grid-auto-lg{
    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(
                    320px,
                    100%
                ),
                1fr
            )
        );

    gap:28px;
}

.grid-gap-sm{
    gap:var(--layout-gap-sm);
}

.grid-gap-md{
    gap:var(--layout-gap-md);
}

.grid-gap-lg{
    gap:var(--layout-gap-lg);
}

.grid-gap-xl{
    gap:var(--layout-gap-xl);
}

.grid-gap-2xl{
    gap:var(--layout-gap-2xl);
}


/* ==========================================================================
   07. ASYMMETRIC GRIDS
   ========================================================================== */

.grid-40-60{
    display:grid;

    grid-template-columns:
        minmax(
            0,
            .8fr
        )
        minmax(
            0,
            1.2fr
        );

    gap:
        clamp(
            32px,
            5vw,
            72px
        );
}

.grid-60-40{
    display:grid;

    grid-template-columns:
        minmax(
            0,
            1.2fr
        )
        minmax(
            0,
            .8fr
        );

    gap:
        clamp(
            32px,
            5vw,
            72px
        );
}

.grid-33-67{
    display:grid;

    grid-template-columns:
        minmax(
            0,
            .66fr
        )
        minmax(
            0,
            1.34fr
        );

    gap:
        clamp(
            36px,
            6vw,
            90px
        );
}

.grid-67-33{
    display:grid;

    grid-template-columns:
        minmax(
            0,
            1.34fr
        )
        minmax(
            0,
            .66fr
        );

    gap:
        clamp(
            36px,
            6vw,
            90px
        );
}


/* ==========================================================================
   08. CONTENT + SIDEBAR
   ========================================================================== */

.content-sidebar{
    display:grid;

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

    gap:34px;

    align-items:start;
}

.content-sidebar-wide{
    display:grid;

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

    gap:
        clamp(
            32px,
            5vw,
            64px
        );

    align-items:start;
}

.content-sidebar-left{
    display:grid;

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

    gap:34px;

    align-items:start;
}

.sidebar{
    min-width:0;
}

.sidebar-sticky{
    position:sticky;
    top:100px;
}


/* ==========================================================================
   09. STACKS
   ========================================================================== */

.stack{
    display:grid;
    gap:18px;
}

.stack-xs{
    display:grid;
    gap:8px;
}

.stack-sm{
    display:grid;
    gap:12px;
}

.stack-md{
    display:grid;
    gap:18px;
}

.stack-lg{
    display:grid;
    gap:28px;
}

.stack-xl{
    display:grid;
    gap:42px;
}

.stack-2xl{
    display:grid;
    gap:64px;
}


/* ==========================================================================
   10. FLEX UTILITIES
   ========================================================================== */

.row{
    display:flex;
    align-items:center;
    gap:14px;
}

.row-wrap{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px;
}

.row-between{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.row-start{
    display:flex;
    align-items:flex-start;
    gap:18px;
}

.row-end{
    display:flex;
    align-items:flex-end;
    gap:18px;
}

.center{
    display:flex;
    align-items:center;
    justify-content:center;
}

.center-grid{
    display:grid;
    place-items:center;
}


/* ==========================================================================
   11. ALIGNMENT
   ========================================================================== */

.align-start{
    align-items:start;
}

.align-center{
    align-items:center;
}

.align-end{
    align-items:end;
}

.justify-start{
    justify-content:start;
}

.justify-center{
    justify-content:center;
}

.justify-end{
    justify-content:end;
}

.justify-between{
    justify-content:space-between;
}

.text-left{
    text-align:left;
}

.text-center{
    text-align:center;
}

.text-right{
    text-align:right;
}


/* ==========================================================================
   12. SPLIT LAYOUT
   ========================================================================== */

.split{
    display:grid;

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

    gap:
        clamp(
            36px,
            6vw,
            90px
        );

    align-items:center;
}

.split-top{
    align-items:start;
}

.split-media{
    overflow:hidden;
}

.split-media img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}


/* ==========================================================================
   13. MEDIA LAYOUTS
   ========================================================================== */

.media-frame{
    position:relative;

    overflow:hidden;

    background:var(--layout-cream);
}

.media-frame img,
.media-frame video{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}

.media-16-9{
    aspect-ratio:16 / 9;
}

.media-16-10{
    aspect-ratio:16 / 10;
}

.media-4-3{
    aspect-ratio:4 / 3;
}

.media-3-2{
    aspect-ratio:3 / 2;
}

.media-square{
    aspect-ratio:1 / 1;
}

.media-portrait{
    aspect-ratio:4 / 5;
}


/* ==========================================================================
   14. CARDS / PANELS
   ========================================================================== */

.layout-card{
    min-width:0;

    padding:
        clamp(
            20px,
            3vw,
            32px
        );

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

    background:var(--layout-paper);
}

.layout-card-flat{
    min-width:0;

    padding:
        clamp(
            20px,
            3vw,
            32px
        );

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

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

.layout-panel-dark{
    padding:
        clamp(
            24px,
            4vw,
            44px
        );

    background:var(--layout-black);
    color:#fff;
}


/* ==========================================================================
   15. DIVIDERS
   ========================================================================== */

.rule{
    width:100%;
    height:1px;

    border:0;

    background:var(--layout-line);
}

.rule-dark{
    width:100%;
    height:1px;

    border:0;

    background:
        rgba(
            255,
            255,
            255,
            .18
        );
}

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

.border-bottom{
    border-bottom:
        1px solid
        var(--layout-line);
}


/* ==========================================================================
   16. SPACING UTILITIES
   ========================================================================== */

.mt-0{margin-top:0!important}
.mt-xs{margin-top:8px!important}
.mt-sm{margin-top:12px!important}
.mt-md{margin-top:18px!important}
.mt-lg{margin-top:28px!important}
.mt-xl{margin-top:42px!important}
.mt-2xl{margin-top:64px!important}

.mb-0{margin-bottom:0!important}
.mb-xs{margin-bottom:8px!important}
.mb-sm{margin-bottom:12px!important}
.mb-md{margin-bottom:18px!important}
.mb-lg{margin-bottom:28px!important}
.mb-xl{margin-bottom:42px!important}
.mb-2xl{margin-bottom:64px!important}

.pt-0{padding-top:0!important}
.pb-0{padding-bottom:0!important}


/* ==========================================================================
   17. WIDTH UTILITIES
   ========================================================================== */

.w-full{
    width:100%;
}

.max-reading{
    width:100%;
    max-width:760px;
}

.max-copy{
    width:100%;
    max-width:680px;
}

.max-wide-copy{
    width:100%;
    max-width:900px;
}

.mx-auto{
    margin-left:auto;
    margin-right:auto;
}


/* ==========================================================================
   18. VISIBILITY UTILITIES
   ========================================================================== */

.desktop-only{
    display:block;
}

.mobile-only{
    display:none;
}


/* ==========================================================================
   19. STICKY / POSITION
   ========================================================================== */

.relative{
    position:relative;
}

.absolute{
    position:absolute;
}

.sticky{
    position:sticky;
    top:100px;
}

.overflow-hidden{
    overflow:hidden;
}

.overflow-x-auto{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}


/* ==========================================================================
   20. TWO-COLUMN EDITORIAL HEADER
   ========================================================================== */

.section-head{
    display:grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        minmax(
            260px,
            .55fr
        );

    gap:
        clamp(
            30px,
            5vw,
            56px
        );

    align-items:end;

    margin-bottom:
        clamp(
            34px,
            5vw,
            62px
        );
}

.section-head>div,
.section-head>p{
    min-width:0;
}

.section-head>p{
    margin:0;

    color:var(--layout-muted);

    font-size:.94rem;
    line-height:1.7;
}


/* ==========================================================================
   21. MOBILE-FIRST SAFETY
   ========================================================================== */

@media(max-width:1180px){

    .content-sidebar,
    .content-sidebar-wide{
        grid-template-columns:
            minmax(
                0,
                1fr
            )
            320px;
    }

    .content-sidebar-left{
        grid-template-columns:
            320px
            minmax(
                0,
                1fr
            );
    }

}


/* ==========================================================================
   22. TABLET
   ========================================================================== */

@media(max-width:980px){

    .shell{
        width:
            min(
                calc(
                    100% - 40px
                ),
                var(
                    --shell,
                    var(--layout-shell)
                )
            );
    }

    .shell-wide,
    .shell-narrow,
    .shell-reading{
        width:
            calc(
                100% - 40px
            );
    }

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

        gap:22px;
    }

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

    .content-sidebar,
    .content-sidebar-wide,
    .content-sidebar-left{
        grid-template-columns:1fr;
        gap:42px;
    }

    .sidebar-sticky,
    .sticky{
        position:static;
    }

    .grid-40-60,
    .grid-60-40,
    .grid-33-67,
    .grid-67-33{
        gap:42px;
    }

}


/* ==========================================================================
   23. SMALL TABLET / LARGE PHONE
   ========================================================================== */

@media(max-width:820px){

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

    .split,
    .grid-40-60,
    .grid-60-40,
    .grid-33-67,
    .grid-67-33{
        grid-template-columns:1fr;
    }

    .section-head{
        grid-template-columns:1fr;
        gap:18px;
    }

}


/* ==========================================================================
   24. MOBILE
   ========================================================================== */

@media(max-width:720px){

    :root{
        --layout-section:
            clamp(
                64px,
                12vw,
                82px
            );

        --layout-section-sm:
            clamp(
                38px,
                9vw,
                52px
            );
    }

    .shell,
    .shell-wide,
    .shell-narrow,
    .shell-reading{
        width:
            calc(
                100% - 32px
            );

        max-width:100%;

        margin-left:auto;
        margin-right:auto;
    }

    .section{
        padding:
            var(
                --layout-section
            )
            0;
    }

    .section-sm{
        padding:
            var(
                --layout-section-sm
            )
            0;
    }

    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5{
        grid-template-columns:1fr;
    }

    .grid-auto,
    .grid-auto-sm,
    .grid-auto-lg{
        grid-template-columns:1fr;
    }

    .content-sidebar,
    .content-sidebar-wide,
    .content-sidebar-left{
        grid-template-columns:1fr;
        gap:36px;
    }

    .row-between{
        align-items:flex-start;
        flex-direction:column;
    }

    .row{
        flex-wrap:wrap;
    }

    .desktop-only{
        display:none!important;
    }

    .mobile-only{
        display:block!important;
    }

    .full-bleed{
        width:100%;
        max-width:100%;

        margin-left:0;
        margin-right:0;
    }

}


/* ==========================================================================
   25. SMALL PHONE
   ========================================================================== */

@media(max-width:480px){

    .shell,
    .shell-wide,
    .shell-narrow,
    .shell-reading{
        width:
            calc(
                100% - 28px
            ) !important;

        max-width:100% !important;

        margin-left:auto !important;
        margin-right:auto !important;

        padding-left:0 !important;
        padding-right:0 !important;
    }

    .section{
        padding:
            68px
            0;
    }

    .section-sm{
        padding:
            42px
            0;
    }

    .section-lg{
        padding:
            78px
            0;
    }

    .section-xl{
        padding:
            90px
            0;
    }

    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .grid-auto,
    .grid-auto-sm,
    .grid-auto-lg,
    .content-sidebar,
    .content-sidebar-wide,
    .content-sidebar-left,
    .split,
    .grid-40-60,
    .grid-60-40,
    .grid-33-67,
    .grid-67-33{
        width:100%;
        max-width:100%;
    }

    .layout-card,
    .layout-panel-dark{
        padding:
            22px
            18px;
    }

    .section-head{
        gap:16px;
        margin-bottom:34px;
    }

}


/* ==========================================================================
   26. EXTRA SMALL PHONE
   ========================================================================== */

@media(max-width:359px){

    .shell,
    .shell-wide,
    .shell-narrow,
    .shell-reading{
        width:
            calc(
                100% - 22px
            ) !important;
    }

    .layout-card,
    .layout-panel-dark{
        padding:
            20px
            14px;
    }

    .row-wrap{
        gap:9px;
    }

}


/* ==========================================================================
   27. LANDSCAPE PHONE
   ========================================================================== */

@media
(max-width:950px)
and (orientation:landscape)
and (max-height:620px){

    .shell,
    .shell-wide,
    .shell-narrow,
    .shell-reading{
        width:
            calc(
                100% - 36px
            );
    }

    .section{
        padding:
            64px
            0;
    }

    .section-sm{
        padding:
            40px
            0;
    }

}


/* ==========================================================================
   28. PRINT
   ========================================================================== */

@media print{

    .shell,
    .shell-wide,
    .shell-narrow,
    .shell-reading{
        width:100%;
        max-width:none;
    }

    .section,
    .section-sm,
    .section-lg,
    .section-xl{
        padding:
            24px
            0;
    }

    .sidebar-sticky,
    .sticky{
        position:static;
    }

    .desktop-only,
    .mobile-only{
        display:block!important;
    }

}