/*
 * Buhalterija.com
 * Layout Foundation
 *
 * Tik struktūra / proporcijos / spacing.
 *
 * NELIEČIA:
 * - SEO tekstų
 * - contact module
 * - spalvų identiteto
 * - analytics
 * - backend
 */


/* ==========================================================
   GLOBAL WIDTH
   ========================================================== */

:root {
    --container: 1240px;
}

.container {
    width: min(
        var(--container),
        calc(100% - 56px)
    ) !important;
}


/* ==========================================================
   GLOBAL SECTION RHYTHM
   ========================================================== */

.section {
    padding-top: 92px;
    padding-bottom: 92px;
}

.content-section {
    padding-top: 76px !important;
    padding-bottom: 104px !important;
}

.directory-section {
    padding-top: 76px !important;
    padding-bottom: 104px !important;
}


/* ==========================================================
   PAGE HEROES
   ========================================================== */

.page-hero {
    padding-top: 72px !important;
    padding-bottom: 68px !important;
}

.page-hero .index-heading,
.page-hero .article-heading {
    max-width: 980px;
}

.page-hero h1 {
    max-width: 920px;
}

.page-lead {
    max-width: 780px !important;

    font-size: 18px !important;
    line-height: 1.7 !important;
}


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

.section-intro {
    max-width: 820px;
    margin-bottom: 44px;
}

.section-intro.split {
    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(320px, .88fr) !important;

    gap: 56px !important;

    align-items: end;
}

.section-intro.split p {
    max-width: 470px;
}


/* ==========================================================
   SERVICE DIRECTORY
   ========================================================== */

.directory-intro {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(320px, .9fr) !important;

    gap: 56px !important;

    align-items: end !important;

    margin-bottom: 44px !important;
}

.directory-intro p {
    max-width: 500px;
}


/*
 * 3 vienodos kortelės eilėje dabar atrodo per daug kaip template.
 * Darom 2 platesnes kolonas.
 */

.directory-grid {
    display: grid !important;

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

    gap: 20px !important;
}

.directory-card {
    min-height: 250px !important;

    padding: 32px !important;

    border-radius: 18px !important;
}

.directory-card h3 {
    margin-top: 34px !important;

    font-size: 27px !important;
}

.directory-card p {
    max-width: 500px;

    line-height: 1.65;
}


/* ==========================================================
   HOMEPAGE SERVICES
   ========================================================== */

.service-showcase-grid {
    display: grid !important;

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

    gap: 20px !important;
}

.service-showcase {
    min-height: 235px !important;

    padding: 31px !important;

    border-radius: 18px !important;
}

.service-showcase h3 {
    max-width: 470px;

    margin-top: 30px !important;

    font-size: 27px !important;
}

.service-showcase p {
    max-width: 510px;

    line-height: 1.65;
}


/* ==========================================================
   PROCESS
   ========================================================== */

.process-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(0, 1.08fr) !important;

    gap: 72px !important;
}

.process-copy {
    max-width: 520px;
}

.steps li {
    grid-template-columns:
        54px
        minmax(0,1fr) !important;

    gap: 22px !important;

    padding: 30px 0 !important;
}

.steps h3 {
    font-size: 22px !important;
}


/* ==========================================================
   SERVICE / SEO EDITORIAL PAGES
   ========================================================== */

.editorial-layout {
    display: grid !important;

    grid-template-columns:
        minmax(0, 830px)
        minmax(270px, 320px) !important;

    justify-content: space-between !important;

    gap: 64px !important;

    align-items: start !important;
}

.editorial-body {
    width: 100%;
    max-width: none !important;

    font-size: 17px !important;
    line-height: 1.78 !important;
}

.editorial-body > p {
    max-width: 790px;
}

.editorial-body > p:first-of-type {
    max-width: 810px;

    font-size: 19px !important;
}

.editorial-body h2 {
    max-width: 790px;

    margin-top: 64px !important;
    margin-bottom: 20px !important;
}

.editorial-body h3 {
    max-width: 760px;
}

.editorial-body ul,
.editorial-body ol {
    max-width: 790px;
}


/*
 * Content index ne per visą milžinišką plotį.
 */

.content-index {
    max-width: 790px !important;

    grid-template-columns:
        165px
        minmax(0,1fr) !important;

    padding: 24px 26px !important;

    border-radius: 14px !important;
}


/* ==========================================================
   ASIDE
   ========================================================== */

.editorial-aside {
    width: 100%;

    gap: 20px !important;
}

.aside-card {
    padding: 28px !important;

    border-radius: 18px !important;
}

.aside-card h3 {
    font-size: 25px !important;
}

.aside-links a {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}


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

.article-shell {
    max-width: 900px !important;
}

.article-shell .editorial-body {
    max-width: 820px !important;

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

.article-featured-image {
    width: min(100%, 1080px);

    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 46px !important;
}

.article-featured-image img {
    border-radius: 8px !important;
}

.article-outline {
    max-width: 790px;

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


/* ==========================================================
   PRICING
   ========================================================== */

.pricing-v2-hero {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 390px) !important;

    gap: 64px !important;

    align-items: start !important;
}


/*
 * 4 mažos kortelės eilėje = per daug suspausta.
 */

.pricing-factor-grid {
    display: grid !important;

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

    gap: 20px !important;
}

.pricing-factor-grid article {
    min-height: 180px;

    padding: 30px !important;

    border-radius: 18px !important;
}


/*
 * FAQ 3 kolonos taip pat per daug suspausta.
 */

.faq-grid {
    display: grid !important;

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

    gap: 20px !important;
}

.faq-grid article {
    padding: 30px !important;

    border-radius: 18px !important;
}


/* ==========================================================
   ENTITY / PRICE LINKS
   ========================================================== */

.entity-grid {
    display: grid !important;

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

    gap: 20px !important;
}

.entity-grid a {
    min-height: 210px;

    padding: 34px !important;

    border-radius: 18px !important;
}


/* ==========================================================
   BASIC PROSE
   ========================================================== */

.prose {
    max-width: 820px !important;

    font-size: 17px !important;
    line-height: 1.78 !important;
}

.prose h2 {
    margin-top: 58px !important;

    font-size: 35px !important;
}


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

@media(max-width: 980px) {

    .container {
        width: min(
            100% - 40px,
            var(--container)
        ) !important;
    }

    .section-intro.split,
    .directory-intro,
    .process-grid,
    .editorial-layout,
    .pricing-v2-hero {
        grid-template-columns: 1fr !important;
    }

    .section-intro.split,
    .directory-intro {
        gap: 20px !important;
    }

    .process-grid {
        gap: 48px !important;
    }

    .editorial-layout {
        gap: 52px !important;
    }

    .editorial-aside {
        position: static !important;

        max-width: 720px;
    }

}


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

@media(max-width: 680px) {

    .container {
        width: min(
            100% - 28px,
            var(--container)
        ) !important;
    }

    .section {
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .content-section,
    .directory-section {
        padding-top: 54px !important;
        padding-bottom: 76px !important;
    }

    .page-hero {
        padding-top: 48px !important;
        padding-bottom: 44px !important;
    }

    .service-showcase-grid,
    .directory-grid,
    .pricing-factor-grid,
    .faq-grid,
    .entity-grid {
        grid-template-columns: 1fr !important;
    }

    .service-showcase,
    .directory-card {
        min-height: 0 !important;
    }

    .service-showcase {
        padding: 26px !important;
    }

    .directory-card {
        padding: 27px !important;
    }

    .editorial-body h2 {
        margin-top: 50px !important;
    }

    .content-index {
        grid-template-columns: 1fr !important;
    }

}