/*
 * Buhalterija.com
 * Straipsnių UI V2
 *
 * Liečia tik:
 * - homepage .articles-section
 * - /straipsniai/ katalogą
 *
 * Kontaktų / paslaugų / kainų / hero kitur neliečia.
 */


/* ==========================================================
   HOMEPAGE — ARTICLES
   ========================================================== */

.articles-section {
    padding: 82px 0 88px !important;
    background: #f1e9e2 !important;
}

.articles-section .section-intro {
    margin-bottom: 38px !important;
}

.articles-section .section-intro.split {
    grid-template-columns:
        minmax(0, 1fr)
        auto !important;

    gap: 40px !important;
}


/*
 * Normalus editorial layout.
 * Nėra milžiniškos tuščios featured zonos.
 */

.home-reading {
    display: grid !important;

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

    column-gap: 52px !important;

    border-top: 1px solid rgba(33,25,27,.14) !important;
}


/* ==========================================================
   PIRMAS STRAIPSNIS
   ========================================================== */

.home-reading-item.is-featured {
    grid-row: span 2 !important;

    display: flex !important;
    flex-direction: column !important;

    min-width: 0 !important;

    padding: 30px 0 32px !important;

    border: 0 !important;
}

.home-reading-item.is-featured img {
    display: block !important;

    width: 100% !important;

    aspect-ratio: 16 / 8.7 !important;

    object-fit: cover !important;

    margin: 0 0 24px !important;

    border-radius: 7px !important;
}


/*
 * Jei nėra image — layout vis tiek atrodo baigtas.
 */

.home-reading-item.is-featured:not(:has(img)) {
    justify-content: center !important;

    padding-right: 38px !important;
}

.home-reading-item.is-featured small {
    display: block !important;

    margin-bottom: 16px !important;

    color: var(--wine) !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .11em !important;
    text-transform: uppercase !important;
}

.home-reading-item.is-featured h3 {
    max-width: 680px !important;

    margin: 0 0 18px !important;

    font-size: clamp(34px, 3.5vw, 50px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.045em !important;
}

.home-reading-item.is-featured p {
    max-width: 640px !important;

    margin: 0 0 22px !important;

    color: var(--text) !important;

    font-size: 16px !important;
    line-height: 1.65 !important;
}

.home-reading-item.is-featured span {
    margin-top: auto !important;

    color: var(--wine) !important;

    font-size: 13px !important;
    font-weight: 750 !important;
}


/* ==========================================================
   2 MAŽESNI STRAIPSNIAI
   ========================================================== */

.home-reading-item:not(.is-featured) {
    display: grid !important;

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

    gap: 20px !important;

    align-items: start !important;

    padding: 27px 0 !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(33,25,27,.14) !important;
}


/*
 * Kai nėra image — jokių neegzistuojančių 118px.
 */

.home-reading-item:not(.is-featured):not(:has(img)) {
    grid-template-columns: 1fr !important;
}

.home-reading-item:not(.is-featured) img {
    width: 118px !important;
    height: 86px !important;

    margin: 0 !important;

    object-fit: cover !important;

    border-radius: 5px !important;
}

.home-reading-item:not(.is-featured) small {
    display: block !important;

    margin-bottom: 9px !important;

    color: var(--wine) !important;

    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

.home-reading-item:not(.is-featured) h3 {
    max-width: 390px !important;

    margin: 0 0 9px !important;

    font-size: 22px !important;
    line-height: 1.13 !important;
    letter-spacing: -.03em !important;
}

.home-reading-item:not(.is-featured) p {
    display: -webkit-box !important;

    overflow: hidden !important;

    margin: 0 0 10px !important;

    color: var(--text) !important;

    font-size: 13px !important;
    line-height: 1.5 !important;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.home-reading-item:not(.is-featured) span {
    color: var(--wine) !important;

    font-size: 11px !important;
    font-weight: 750 !important;
}


/*
 * Jokio kortelių skraidymo.
 */

.home-reading-item {
    transform: none !important;
    box-shadow: none !important;
}

.home-reading-item h3 {
    transition: color .15s ease !important;
}

.home-reading-item:hover h3 {
    color: var(--wine) !important;
}


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

body:has(.article-filters) .page-hero--index {
    padding: 64px 0 58px !important;
}

body:has(.article-filters) .page-hero--index .index-heading {
    max-width: 860px !important;
}

body:has(.article-filters) .page-hero--index h1 {
    margin-bottom: 18px !important;
}

body:has(.article-filters) .page-hero--index .page-lead {
    margin-bottom: 0 !important;
}


/* ==========================================================
   DIRECTORY SECTION
   ========================================================== */

body:has(.article-filters) .directory-section {
    padding: 58px 0 92px !important;
}


/* ==========================================================
   FILTERS
   ========================================================== */

.article-filters {
    display: flex !important;

    align-items: end !important;
    flex-wrap: wrap !important;

    gap: 12px !important;

    margin: 0 0 34px !important;

    padding: 0 0 24px !important;

    background: transparent !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(33,25,27,.12) !important;

    border-radius: 0 !important;
}

.article-filters label {
    display: flex !important;

    flex-direction: column !important;

    gap: 6px !important;

    color: var(--muted) !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
}

.article-filters select {
    width: 190px !important;
    height: 44px !important;

    padding: 0 36px 0 12px !important;

    color: var(--ink) !important;

    background: #fff !important;

    border: 1px solid rgba(33,25,27,.13) !important;
    border-radius: 6px !important;

    font-size: 13px !important;
}

.article-filters .btn {
    min-width: 100px !important;

    min-height: 44px !important;
    height: 44px !important;

    padding: 0 18px !important;

    border-radius: 6px !important;
}

.article-filters > a {
    display: inline-flex !important;

    align-items: center !important;

    height: 44px !important;

    padding: 0 4px !important;

    color: var(--wine) !important;

    font-size: 12px !important;
    font-weight: 700 !important;
}


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

.article-feature {
    display: grid !important;

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

    min-height: 340px !important;

    margin: 0 0 42px !important;

    overflow: hidden !important;

    background: #eadfd7 !important;

    border: 0 !important;
    border-radius: 8px !important;
}


/*
 * Jei nėra nuotraukos — featured tampa plačiu editorial intro.
 * Jokio milžiniško tuščio bloko.
 */

.article-feature:not(:has(img)) {
    display: block !important;

    min-height: 0 !important;

    background: transparent !important;

    border-top: 1px solid rgba(33,25,27,.14) !important;
    border-bottom: 1px solid rgba(33,25,27,.14) !important;

    border-radius: 0 !important;
}

.article-feature-copy {
    align-self: center !important;

    padding: 44px 48px !important;
}

.article-feature:not(:has(img)) .article-feature-copy {
    max-width: 850px !important;

    padding: 38px 0 40px !important;
}

.article-feature small {
    display: block !important;

    margin-bottom: 15px !important;

    color: var(--wine) !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

.article-feature h2 {
    max-width: 720px !important;

    margin: 0 0 16px !important;

    font-size: clamp(34px, 3.7vw, 50px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.045em !important;
}

.article-feature p {
    max-width: 680px !important;

    margin: 0 0 21px !important;

    color: var(--text) !important;

    font-size: 15px !important;
    line-height: 1.65 !important;
}

.article-feature span {
    color: var(--wine) !important;

    font-size: 12px !important;
    font-weight: 750 !important;
}

.article-feature img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 340px !important;

    object-fit: cover !important;
}


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

.article-list {
    border-top: 1px solid rgba(33,25,27,.14) !important;
}

.article-list > a {
    display: grid !important;

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

    gap: 28px !important;

    align-items: center !important;

    min-height: 150px !important;

    padding: 24px 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(33,25,27,.14) !important;

    border-radius: 0 !important;

    transform: none !important;
    box-shadow: none !important;
}


/*
 * Be image tekstui skiriam visą plotį.
 */

.article-list > a:not(:has(img)) {
    grid-template-columns:
        minmax(0,1fr)
        28px !important;
}

.article-list > a:hover {
    padding-left: 0 !important;

    background: transparent !important;

    transform: none !important;
    box-shadow: none !important;
}

.article-list img {
    width: 180px !important;
    height: 112px !important;

    object-fit: cover !important;

    border-radius: 5px !important;
}

.article-list small {
    display: block !important;

    margin-bottom: 7px !important;

    color: var(--wine) !important;

    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

.article-list h2 {
    max-width: 750px !important;

    margin: 0 0 8px !important;

    font-size: 25px !important;
    line-height: 1.12 !important;
    letter-spacing: -.03em !important;

    transition: color .15s ease !important;
}

.article-list p {
    max-width: 780px !important;

    margin: 0 !important;

    color: var(--text) !important;

    font-size: 13px !important;
    line-height: 1.55 !important;
}

.article-list i {
    justify-self: end !important;

    color: var(--wine) !important;

    font-size: 20px !important;
    font-style: normal !important;
}

.article-list > a:hover h2 {
    color: var(--wine) !important;
}


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

@media(max-width:900px) {

    .home-reading {
        grid-template-columns: 1fr !important;
    }

    .home-reading-item.is-featured {
        grid-row: auto !important;

        padding-right: 0 !important;

        border-bottom: 1px solid rgba(33,25,27,.14) !important;
    }

    .article-feature {
        grid-template-columns: 1fr !important;
    }

    .article-feature img {
        min-height: 0 !important;
        max-height: 340px !important;
    }

    .article-list > a {
        grid-template-columns:
            145px
            minmax(0,1fr)
            24px !important;

        gap: 20px !important;
    }

    .article-list > a:not(:has(img)) {
        grid-template-columns:
            minmax(0,1fr)
            24px !important;
    }

    .article-list img {
        width: 145px !important;
        height: 98px !important;
    }
}


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

@media(max-width:620px) {

    .articles-section {
        padding: 64px 0 70px !important;
    }

    .articles-section .section-intro {
        margin-bottom: 25px !important;
    }

    .home-reading-item.is-featured {
        padding: 25px 0 28px !important;
    }

    .home-reading-item.is-featured h3 {
        font-size: 30px !important;
    }

    .home-reading-item:not(.is-featured) {
        grid-template-columns:
            92px
            minmax(0,1fr) !important;

        gap: 14px !important;

        padding: 21px 0 !important;
    }

    .home-reading-item:not(.is-featured):not(:has(img)) {
        grid-template-columns: 1fr !important;
    }

    .home-reading-item:not(.is-featured) img {
        width: 92px !important;
        height: 70px !important;
    }

    .home-reading-item:not(.is-featured) h3 {
        font-size: 18px !important;
    }

    .home-reading-item:not(.is-featured) p {
        display: none !important;
    }


    body:has(.article-filters) .page-hero--index {
        padding: 48px 0 42px !important;
    }

    body:has(.article-filters) .directory-section {
        padding: 42px 0 70px !important;
    }

    .article-filters {
        flex-direction: column !important;

        align-items: stretch !important;

        margin-bottom: 26px !important;
    }

    .article-filters select,
    .article-filters .btn {
        width: 100% !important;
    }

    .article-feature {
        margin-bottom: 30px !important;
    }

    .article-feature-copy {
        padding: 27px 22px 30px !important;
    }

    .article-feature:not(:has(img)) .article-feature-copy {
        padding: 27px 0 29px !important;
    }

    .article-feature h2 {
        font-size: 30px !important;
    }

    .article-list > a,
    .article-list > a:not(:has(img)) {
        grid-template-columns:
            minmax(0,1fr)
            22px !important;

        gap: 12px !important;

        min-height: 0 !important;

        padding: 20px 0 !important;
    }

    .article-list > a:has(img) {
        grid-template-columns:
            92px
            minmax(0,1fr) !important;
    }

    .article-list img {
        width: 92px !important;
        height: 72px !important;
    }

    .article-list h2 {
        font-size: 19px !important;
    }

    .article-list p {
        display: none !important;
    }

    .article-list i {
        display: none !important;
    }
}


/* ==========================================================
   ARTICLE FILTER SYSTEM
   ========================================================== */

.article-filter-shell {
    margin-bottom: 42px;
}


/* pagrindinė paieškos eilė */

.article-filters {
    display: grid !important;

    grid-template-columns:
        minmax(260px, 1fr)
        180px
        auto
        auto !important;

    gap: 12px !important;

    align-items: end !important;

    margin: 0 !important;

    padding: 0 0 19px !important;

    border-bottom: 1px solid rgba(33,25,27,.12) !important;
}

.article-filters label {
    display: flex !important;

    flex-direction: column !important;

    gap: 6px !important;
}

.article-filters label > span {
    color: var(--muted);

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

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


/* search */

.article-search input {
    width: 100%;

    height: 46px;

    padding: 0 14px;

    color: var(--ink);

    background: #fff;

    border: 1px solid rgba(33,25,27,.13);
    border-radius: 7px;

    outline: 0;
}

.article-search input:focus {
    border-color: rgba(104,21,54,.55);

    box-shadow:
        0 0 0 3px rgba(104,21,54,.05);
}


/* year */

.article-filters select {
    width: 100% !important;
    height: 46px !important;

    padding: 0 12px !important;

    background: #fff !important;

    border: 1px solid rgba(33,25,27,.13) !important;
    border-radius: 7px !important;
}


/* button */

.article-filters .btn {
    min-width: 108px !important;

    height: 46px !important;
    min-height: 46px !important;

    padding: 0 18px !important;

    border-radius: 7px !important;
}


/* reset */

.article-filter-reset {
    display: inline-flex;

    align-items: center;

    height: 46px;

    color: var(--wine);

    font-size: 12px;
    font-weight: 700;
}


/* ==========================================================
   TOPICS
   ========================================================== */

.article-topic-filter {
    display: flex;

    flex-wrap: wrap;

    gap: 6px 20px;

    padding: 17px 0 0;
}

.article-topic-filter a {
    position: relative;

    display: inline-flex;

    align-items: center;

    min-height: 30px;

    color: var(--muted);

    font-size: 13px;
    font-weight: 650;

    transition: color .15s ease;
}

.article-topic-filter a:hover {
    color: var(--wine);
}

.article-topic-filter a.is-active {
    color: var(--ink);
    font-weight: 750;
}

.article-topic-filter a.is-active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background: var(--wine);
}


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

@media(max-width:760px) {

    .article-filters {
        grid-template-columns: 1fr !important;
    }

    .article-filters .btn,
    .article-filter-reset {
        width: 100% !important;
    }

    .article-filter-reset {
        justify-content: center;
    }

    .article-topic-filter {
        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 5px;

        scrollbar-width: none;
    }

    .article-topic-filter::-webkit-scrollbar {
        display: none;
    }

    .article-topic-filter a {
        flex: 0 0 auto;

        white-space: nowrap;
    }
}