/* components/action-box.css */
/**
 * Action Box Component Styles
 * Action boxes and containers - BASE STYLES ONLY
 *
 * @package AutoNaKluc
 */

/* ==========================================================================
   ACTION BOXES CONTAINER
   ========================================================================== */

.action-boxes-container {
    display:flex;
    justify-content:space-between;
    flex-wrap: wrap;
}

.action-boxes-container .action-box {
    width:calc(33.333% - 24px);
    margin-bottom:2em
}

/* ==========================================================================
   ACTION BOX
   ========================================================================== */

.action-box {
    background:#fff;
    border-radius:30px;
    box-shadow:7px 39px 80px rgba(38,38,38,.1);
    padding:40px;
    display:flex;
    flex-direction:column
}

.action-box .action-title {
    font-size:30px;
    color:#262626;
    margin-bottom:20px;
    font-weight:900
}

.action-box p {
    font-weight:700;
    margin-bottom:35px
}

.action-box .actions {
    margin-top:auto
}

.action-box .button {
    width:100%
}

/* ==========================================================================
   ACTION BOX VARIANTS
   ========================================================================== */

.action-box.type-2 {
    width:calc(24.333% - 24px);
    margin-bottom:2em
}

/* components/article-box.css */
/**
 * article-box.css
 * Extracted from index.html
 */

.article-boxes-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.article-boxes-container .article-box {
    width: calc(50% - 18px)
}

.article-boxes-container .article-box:nth-child(n+3) {
    margin-top: 40px
}

.article-boxes-container .article-box:nth-child(n+2) {
    margin-top: 40px
}

.article-box {
    border-radius: 10px;
    box-shadow: 7px 39px 80px rgba(38, 38, 38, .1);
    display: flex;
    flex-direction: column
}

.article-box .fit-image {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    overflow: hidden;
    width: 100%;
    opacity: 1
}

.article-box .fit-image:before {
    padding-bottom: 62.715%
}

.article-box .text {
    flex-grow: 1;
    background: #fff;
    padding: 30px 35px 50px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    display: flex;
    flex-direction: column
}

.article-box .actions {
    margin-top: auto
}

.article-box .actions .button {
    width: 100%
}

.article-box .article-title {
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 30px
}

.article-box .article-title:last-child {
    margin-bottom: 0
}

.article-box .article-title a {
    color: #262626
}

.article-box .article-title a:hover {
    color: #3dcb98
}

.article-box .article-title {
    font-size: 24px
}
/* components/faqs.css */
.faq-boxes-container .faq-box:last-child .question {
    border-bottom:0
}
.faq-box {
    padding:0 40px;
    border-radius:30px;
    box-shadow:7px 39px 80px rgba(38,38,38,0);
    margin-bottom:0;
    transition:.3s all
}
.faq-box.active {
    margin-bottom:35px;
    background:#fff
}
.faq-box.active .question {
    border-bottom:0;
    padding-top:30px
}
.faq-box .question {
    padding:20px 20px 20px 0;
    position:relative;
    border-bottom:1px solid #edeff4;
    display:block;
    color:#262626;
    font-size:20px;
    font-weight:700
}
.faq-box .question:hover {
    color:#3dcb98
}
.faq-box .question:after {
    color:#3dcb98;
    --fa: "\f078";
    content: var(--fa);
    font-family:"Font Awesome 7 Pro";
    font-weight:400;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    display:inline-block;
    font-style:normal;
    font-variant:normal;
    text-rendering:auto;
    position:absolute;
    font-size:18px;
    line-height:1;
    right:0;
    top:calc(50% - 9px)
}
.faq-box .answer {
    display:none;
    transition:.3s height;
    overflow:hidden
}
.faq-box .answer .inner {
    padding:0 35px 50px 0
}
.faq-box .answer.active {
    display:block
}
/* components/product-box.css */
/**
 * product-box.css
 * Extracted from index.html
 */

.product-box {
    flex-grow: 1
}

.product-boxes-container {
    display: flex;
    flex-wrap: wrap
}

.product-boxes-container .product-box {
    width: calc(33.333% - 24px);
    margin-right: 36px
}

.product-boxes-container .product-box:nth-child(3n+3) {
    margin-right: 0
}

.product-boxes-container .product-box:nth-child(n+4) {
    margin-top: 40px
}

.product-boxes-container {
    justify-content: space-between
}

.product-boxes-container .product-box {
    width: calc(50% - 18px);
    margin-right: 0
}

.product-boxes-container .product-box:nth-child(n+3) {
    margin-top: 40px
}

.product-boxes-container .product-box {
    width: 100%
}

.product-boxes-container .product-box:nth-child(n+2) {
    margin-top: 40px
}

.product-box {
    border-radius: 30px;
    box-shadow: 7px 39px 80px rgba(38, 38, 38, .1);
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.product-box .text {
    flex-grow: 1;
    display: flex;
    flex-direction: column
}

.product-box .actions {
    margin-top: auto
}

.product-box .preview {
    position: relative
}

.product-box .preview.sold img {
    filter: grayscale(100%)
}

.product-box .preview .price {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(130deg, #1fefa5 0, #3dcb98 100%);
    padding: 5px 35px;
    border-top-left-radius: 10px;
    pointer-events: none;
    text-align: center;
    line-height: 1.2;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.product-box .preview .price .dph {
    display: block;
    font-size: 14px
}

.product-box .fit-image {
    opacity: .8;
    width: 100%;
}

.product-box .fit-image:hover {
    opacity: 1;
}

.product-box .fit-image:before {
    padding-bottom: 97.2%
}

.product-box .product-title {
    font-size: 30px;
    margin-bottom: 20px;
    @media(max-width: 991px) {
        font-size: 24px;
    }
}

.product-box .product-title a {
    color: #262626
}

.product-box .product-title a:hover {
    color: #3dcb98
}

.product-box .product-title:last-child {
    margin-bottom: 0
}

.product-box .info-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
    font-size: 15px
}

.product-box .info-list:last-child {
    margin-bottom: 0
}

.product-box .info-list li {
    width: 48%;
    font-weight: 700
}

.product-box .info-list li:nth-child(n+3) {
    margin-top: 10px
}

.product-box .info-list li i {
    width: 20px;
    text-align: center;
    font-size: 18px;
    margin-right: 5px
}

.product-box .button {
    width: 100%
}

.product-box .text {
    padding: 40px
}

.product-box .text {
    padding: 40px 30px
}

.product-box .text {
    padding: 40px 25px
}

.product-box .preview.sold img {
    filter: grayscale(0%) !important
}

.products-slider-box {
    padding-left: 50px;
    overflow: hidden;
    margin-left: -50px;
    width: calc(100% + 50px)
}

.products-slider-box .glide__slides {
    padding-bottom: 100px
}

section:has(.products-slider-box) > article {
    padding-top: 50px
}

.products-slider-box .glide__track {
    overflow: visible
}

.products-slider-box .glide__slide {
    opacity: 0;
    transition: .3s all;
    display: flex;
    height: auto;
    flex-direction: column
}

.products-slider-box .product-box {
    flex-grow: 1
}

.products-slider-box .glide__slide--active + .glide__slide + .glide__slide + .glide__slide {
    opacity: .3
}

.products-slider-box .glide__slide--active,
.products-slider-box .glide__slide--active + .glide__slide,
.products-slider-box .glide__slide--active + .glide__slide + .glide__slide {
    opacity: 1
}

.products-slider-box .glide__arrow {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #fff;
    box-shadow: 7px 39px 40px rgba(38, 38, 38, .1);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    bottom: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #a5acbf;
    transition: .3s all
}

.products-slider-box .glide__arrow:hover {
    background-color: #3dcb98;
    color: #fff
}

.products-slider-box .glide__arrow.glide__arrow--left {
    left: calc(50% - 65px)
}

.products-slider-box .glide__arrow.glide__arrow--right {
    right: calc(50% - 65px)
}

.products-slider-box {
    position: relative
}

.products-slider-box .glide__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.products-slider-box .glide__arrow.glide__arrow--left {
    left: 10px
}

.products-slider-box .glide__arrow.glide__arrow--right {
    right: 5% !important
}

@media (max-width: 991px) {
    .products-slider-box {
        width: initial;
        padding: 0;
        margin: 0;
        overflow: visible
    }


}
/* components/review-box.css */
/**
 * review-box.css
 * Extracted from index.html
 */

.reviews-slider-box {
    margin: 0 auto 35px
}

.reviews-slider-box:last-child {
    margin-bottom: 0
}

.reviews-slider-box .glide__arrow {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #fff;
    box-shadow: 7px 39px 40px rgba(38, 38, 38, 0);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 30px;
    top: calc(50% - 50px);
    color: #a5acbf;
    transition: .3s all
}

.reviews-slider-box .glide__arrow:hover {
    box-shadow: 7px 39px 40px rgba(38, 38, 38, .1)
}

.reviews-slider-box .glide__arrow.glide__arrow--left {
    left: 0;
    top: calc(50% - 50px);

    @media (max-width: 768px) {
        top: calc(50% - 100px);
    }
}

.reviews-slider-box .glide__arrow.glide__arrow--right {
    top: calc(50% - 50px);
    right: 0;
    @media (max-width: 768px) {
        top: calc(50% - 100px);
    }
}

.reviews-slider-box .author-box {
    text-align: center;
    margin-bottom: 35px
}

.reviews-slider-box .author-box:last-child {
    margin-bottom: 0
}

.reviews-slider-box .author-box p {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 10px
}

.reviews-slider-box .author-box p:last-child {
    margin-bottom: 0
}

.reviews-slider-box .author-box .stars {
    color: #fec107;
    display: flex;
    justify-content: center;
    font-size: 18px
}

.reviews-slider-box .author-box .stars .empty {
    color: #edeff4
}

.reviews-slider-box .author-box .stars i + i {
    margin-left: 5px
}

.reviews-slider-box .author-image {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #fff;
    margin: 0 auto 25px;
    border: 15px solid #edeff4;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 7px 39px 40px rgba(38, 38, 38, .1)
}

.reviews-slider-box .author-name {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px
}

.reviews-slider-box blockquote {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    font-weight: 900;
    color: #262626;
    font-size: 24px;
    position: relative;
    padding-bottom: 35px;
    @media (max-width: 768px) {
        font-size: 20px;
    }
}

.reviews-slider-box blockquote:before,
.reviews-slider-box blockquote:after {
    content: '';
    font-size: 350px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('https://autoznemecka.sk/wp-content/themes/autonakluc/assets/images/quote.png');
    width: 131px;
    height: 100px;
    z-index: -1
}

.reviews-slider-box blockquote:before {
    left: -10px;
    top: -55px
}

.reviews-slider-box blockquote:after {
    bottom: 0;
    right: -10px;
    transform: rotate(180deg)
}

.reviews-slider-box blockquote:before,
.reviews-slider-box blockquote:after {
    width: 100px
}

.reviews-slider-box blockquote:before {
    left: 0;
    top: -35px
}

.reviews-slider-box blockquote:after {
    right: 0
}

.reviews-slider-box .glide__arrow {
    width: 35px;
    height: 35px;
    font-size: 20px;
    top: 50px
}
/* -------- Šípky slideru recenzií na mobile pod text

   Šípky sú absolútne pozicované po stranách a na úzkych displejoch ležali priamo
   v texte recenzie, čo bránilo čitateľnosti. Na mobile ich vyberáme z textu do
   statického riadku pod recenziou. [#64247]

   Pravidlá musia byť v tomto súbore (deferred bundle), nie v media-queries.css
   (critical) — deferred sa načítava neskôr a pri rovnakej špecificite by ho prebil.
   -------- */
@media (max-width: 768px) {
    .reviews-slider-box .glide__arrows {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 25px;
    }

    .reviews-slider-box .glide__arrow,
    .reviews-slider-box .glide__arrow.glide__arrow--left,
    .reviews-slider-box .glide__arrow.glide__arrow--right {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
    }
}

/* components/tables.css */
/**
 * tables.css
 * Extracted from index.html
 */

.prices-table {
    width:100%;
    text-align:center;
    border-collapse:collapse;
    min-width:1050px
}

.prices-table th {
    color:#3dcb98;
    font-size:18px;
    line-height:1.4;
    padding:10px 30px 25px
}

.prices-table th:first-child {
    border-right:2px solid #edeff4
}

.prices-table td {
    font-weight:700;
    width:175px;
    color:#262626;
    padding:10px 30px
}

.prices-table td:first-child {
    color:#a5acbf;
    border-right:2px solid #edeff4
}

.prices-table tr:hover:not(:last-child) td {
    background:#edeff4
}

.custom-table td {
    background:inherit!important;
    border-color:inherit!important;
    border:1px solid grey
}

.custom-table tr td:first-child {
    border-bottom:none!important;
    border-top:none!important;
    background:white!important;
    text-align:center
}

.custom-table tr:first-child td {
    border-top:1px solid grey!important
}

.custom-table tr:last-child td {
    border-bottom:1px solid grey!important
}

/* Pôvodne tu bolo ~225 riadkov nescopovaných pravidiel `table`, `table th`, `table td`
   (zlá extrakcia z index.html — odpadli rodičovské triedy). Zasahovali KAŽDÚ tabuľku
   na webe, vrátane `.vd2-details-table`, ktorej tak pridávali border-right/bottom na th.
   Každá reálna tabuľka má vlastnú triedu (`.importing-table`, `.vd2-details-table`),
   takže globálne pravidlá nemal čo používať. Zmazané. */

/* components/text-image-box.css */
/**
 * text-image-box.css
 * Extracted from index.html
 */

.text-image-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 55px
}

.text-image-box p {
    margin-bottom: 25px
}

.text-image-box p:last-child {
    margin-bottom: 0
}

.text-image-box:last-child {
    margin-bottom: 0
}

.text-image-box .image {
    margin-left: calc((100vw - 1200px) / -2);
    margin-right: 36px
}

.text-image-box .image img {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    display: block;
    box-shadow: 7px 39px 80px rgba(38, 38, 38, .1);
    max-width: 100%;
    height: auto
}

.text-image-box .text {
    width: 51.5%
}

.text-image-box.reverse {
    flex-direction: row-reverse
}

.text-image-box.reverse .image {
    margin-left: 36px;
    margin-right: calc((100vw - 1200px) / -2);
    max-width: 70%;
}

.text-image-box.reverse .image img {
    border-radius: 30px 0 0 30px
}


@media (max-width: 767px) {
    .text-image-box {
        flex-direction: column
    }

    .text-image-box .text {
        width: 100%
    }

    .text-image-box .image img,
    .text-image-box.reverse .image img {
        max-width: 100%;
        height: auto;
        @media (max-width: 789px) {
            height: 100%;
        }
    }

    .text-image-box.reverse {

        flex-direction: column
    }

    .text-image-box.reverse .image {
        margin-right: -30px;
        @media (max-width: 789px) {
            align-self: end;
        }
    }

    .text-image-box.reverse .image {
        margin-left: 0;
        margin-right: -15px
    }


    .text-image-box .image {
        max-width: 55%
    }


    .text-image-box .image {
        margin-left: -30px
    }

    .text-image-box .image {
        max-width: calc(100% + 15px);
        margin-bottom: 35px;
        margin-left: -15px;
        margin-right: 0
    }
}

/* Feature items repeater */
.ti-features-list {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ti-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.ti-feature-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(61, 203, 152, 0.10);
}

.ti-feature-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.ti-feature-content {
    flex: 1;
}

.ti-feature-title {
    display: block;
    font-size: 16px;
    font-weight: 900;
    color: #262626;
    margin-bottom: 4px;
}

.ti-feature-content p {
    font-size: 16px;
    color: #a5acbf;
    margin: 0;
    font-weight: 400;
}

/* Bento image layout */
.image--bento {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 1fr 2fr;
    gap: 8px;
    height: 440px;
}

.image--bento .bento-main {
    grid-column: 1;
    grid-row: 1 / 3;
    overflow: hidden;
}

.image--bento .bento-small--1 {
    grid-column: 2;
    grid-row: 1;
    overflow: hidden;
}

.image--bento .bento-small--2 {
    grid-column: 2;
    grid-row: 2;
    overflow: hidden;
}

.image--bento .bento-main img,
.image--bento .bento-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    box-shadow: none;
}

/* Normal layout (image-left) — outer corners on the right side */
.text-image-box .image--bento .bento-small--1 img {
    border-top-right-radius: 20px;
}

.text-image-box .image--bento .bento-small--2 img {
    border-bottom-right-radius: 20px;
}

/* Reversed layout (image-right) — bento-main on right column, smalls on left */
.text-image-box.reverse .image--bento {
    grid-template-columns: 2fr 3fr;
}

.text-image-box.reverse .image--bento .bento-main {
    grid-column: 2;
    grid-row: 1 / 3;
}

.text-image-box.reverse .image--bento .bento-small--1 {
    grid-column: 1;
    grid-row: 1;
    max-width: 150px;
    justify-self: flex-end;
}

.text-image-box.reverse .image--bento .bento-small--2 {
    grid-column: 1;
    grid-row: 2;
}

/* Reversed — outer corners on the left side */
.text-image-box.reverse .image--bento .bento-small--1 img {
    border-top-right-radius: 0;
    border-top-left-radius: 20px;
}

.text-image-box.reverse .image--bento .bento-small--2 img {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 20px;
}

@media (max-width: 767px) {
    .image--bento {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
        gap: 6px;
    }

    .image--bento .bento-main {
        grid-column: 1;
        grid-row: 1;
        aspect-ratio: 16 / 9;
    }

    .image--bento .bento-small--1 {
        grid-column: 1;
        grid-row: 2;
        aspect-ratio: 16 / 9;

        @media (max-width: 789px) {
            display: none;
        }
    }

    .image--bento .bento-small--2 {
        grid-column: 1;
        grid-row: 3;
        aspect-ratio: 16 / 9;
        @media (max-width: 789px) {
            display: none;
        }
    }

    .text-image-box.reverse .image--bento {
        grid-template-columns: 1fr;
    }

    .text-image-box.reverse .image--bento .bento-main {
        grid-column: 1;
        grid-row: 1;
    }

    .text-image-box.reverse .image--bento .bento-small--1 {
        grid-column: 1;
        grid-row: 2;
    }

    .text-image-box.reverse .image--bento .bento-small--2 {
        grid-column: 1;
        grid-row: 3;
    }

    .text-image-box .image--bento .bento-small--1 img,
    .text-image-box .image--bento .bento-small--2 img,
    .text-image-box.reverse .image--bento .bento-small--1 img,
    .text-image-box.reverse .image--bento .bento-small--2 img {
        border-radius: 0;
    }
}
/* sections/404.css */
/**
 * 404.css
 * Not found page
 */

.error-404 {
    padding: 60px 0 60px;
    text-align: center;
    background: var(--color-light-gray);
}

.error-404__inner {
    max-width: 640px;
    margin: 0 auto;
}

.error-404__eyebrow {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray);
    margin-bottom: var(--spacing-sm);
}

.error-404__code {
    font-size: 160px;
    line-height: 1;
    margin-bottom: var(--spacing-lg);
}

.error-404__title {
    margin-bottom: var(--spacing-lg);
}

.error-404__text {
    color: var(--color-gray);
    margin-bottom: var(--spacing-xl);
}

.error-404__search {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-white);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-input);
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.error-404__search i {
    color: var(--color-gray);
}

.error-404__search input[type="text"] {
    border: 0;
    box-shadow: none;
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-medium);
}

.error-404__search .button {
    flex-shrink: 0;
}

.error-404__actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .error-404__code {
        font-size: 90px;
    }

    .error-404__search {
        flex-wrap: wrap;
        border-radius: var(--radius-medium);
    }

    .error-404__search input[type="text"] {
        order: 1;
        width: 100%;
    }

    .error-404__search .button {
        order: 2;
        width: 100%;
    }
}

/* sections/article-detail.css */
/**
 * article-detail.css
 */

section.article-detail {
    padding: 120px 0 85px
}

section.article-detail .content-wrap {
    max-width: 1050px
}

section.article-detail .article-detail-title {
    font-size: 50px;
    font-weight: 900;
    margin-bottom: 20px
}

section.article-detail .article-info {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 0
}

section.article-detail .article-info .reading-time {
    background: #edeff4;
    color: #262626;
    padding: 3px 20px 4px;
    border-radius: 35px;
    font-weight: 700;
    margin-right: 25px
}

section.article-detail .article-info .date {
    font-weight: 700
}

.article-feature-image {
    margin: 50px 0 0;
    border-radius: 20px;
    overflow: hidden;
    width: 100%
}

.article-feature-image img {
    display: block;
    width: 100%;
    height: auto
}

section.article-detail article {
    margin-top: 60px
}

/* sections/calculation.css */
/* Calculation / Leasing Calculator Section */

section.calculation {
    padding: 65px 0;
}

section.calculation .container {
    display: flex;
    gap: 64px;
    align-items: flex-start;
}

section.calculation .text {
    flex: 1;
}

.leasing-calculator {
    background: #fff;
    padding: 30px 45px;
    border-radius: 30px;
    box-shadow: 7px 39px 80px rgba(38, 38, 38, .1);
    max-width: 580px;
    width: 48%;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.leasing-calculator .form-row label {
    padding: 0;
}

.leasing-calculator .field-container {
    flex-direction: row;
    flex-wrap: wrap;
}

.field-container.has-padding {
    padding: 10px;
}

.field-container.transparent {
    background: transparent;
}

.currency-label {
    font-size: 18px;
    display: flex;
    align-self: center;
    flex: 0.1;
}

.radio-pill {
    display: inline-block;
    font-size: 20px;
    padding: 8px 16px;
    width: 100%;
    cursor: pointer;
    border: 5px solid #e6e8ed;
    border-radius: 5px;
    text-align: center;
}

.radio-pill input[type="radio"] {
    display: none;
}

.radio-pill:hover {
    background-color: #f0f0f0;
}

.radio-pill.checked {
    background-color: #3dcb98;
    color: #fff;
    border: 5px solid #3dcb98;
}

.recap {
    display: flex;
    flex-direction: column;
}

.recap-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.recap-row span:nth-child(2) {
    font-weight: bold;
}

@media (max-width: 1220px) {
    section.calculation .field-container {
        flex-direction: row;
    }

    /* Pills sa lámu na 2 stĺpce; cena + mena si držia desktopové delenie (flex), preto bez width. */
    section.calculation .field-container.transparent * {
        flex: auto;
        width: 46%;
    }
}

@media (max-width: 991px) {
    section.calculation .container {
        flex-direction: column;
    }

    section.calculation h4 {
        font-size: 18px;
    }

    .leasing-calculator {
        width: 100%;
        max-width: 100%;
        padding: 20px;
    }

    .recap-row,
    .leasing-calculator .form-row label {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .recap-row {
        width: 100%;
    }

    .leasing-calculator .form-row label {
        width: 100%;
    }

    /* Musí prebiť `.leasing-calculator .form-row label` (0-2-1) vyššie — pills sú tiež <label>. */
    section.calculation .leasing-calculator .field-container.transparent * {
        width: 30%;
    }

    #calculator .field-container.has-padding {
        flex-wrap: nowrap;
        flex-direction: row;
    }

    #calculator .field-container.transparent,
    section.calculation .field-container {
        flex-direction: row;
    }
}

/* sections/insurance-compare.css */
/* Insurance Compare — 3-column card comparison (PZP / KASKO / GAP) */

.insurance-compare {
    background-color: #EEF0F4;
    padding: 64px 24px;
}

.insurance-compare__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 auto;
}

.insurance-compare__card {
    /*padding: 28px 24px;*/
    display: flex;
    flex-direction: column;
    gap: 12px;

    .insurance-compare__card-inner {
        background: #fff;
        padding: 28px 24px;
        border-radius: 12px;
        min-height: 218px;
    }
}

.insurance-compare__card--featured {
    .insurance-compare__card-inner {
        border: 2px solid #3DBD8A;
    }
}

.insurance-compare__stars {
    display: flex;
    gap: 4px;
    background: rgba(61, 203, 152, 0.10);
    max-width: max-content;
    padding: 5px;
    border-radius: 8px;
}

.insurance-compare__star {
    flex-shrink: 0;
}

.insurance-compare__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1A1A2E;
    margin: 0;
}

.insurance-compare__description {
    font-size: 0.9rem;
    color: #6B7280;
    margin: 0;
    line-height: 1.55;
}

.insurance-compare__divider {
    border: none;
    border-top: 1px solid #EAECF0;
    margin: 4px 0;
}

.insurance-compare__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.insurance-compare__feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    color: #374151;
    padding: 10px 0px;
    line-height: 1.5;
    border-bottom: 1px solid rgba(63, 64, 77, 0.1);
}

.insurance-compare__check {
    flex-shrink: 0;
    margin-top: 2px;
}

@media (max-width: 900px) {
    .insurance-compare__grid {
        grid-template-columns: 1fr;
    }
}

/* sections/leasing-info.css */
/* Leasing Info Block */

.leasing-info {
    padding: 56px 24px;
    background-color: #F8F9FB;
}

.leasing-info__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.leasing-info__text {
    flex: 1;
}

.leasing-info__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1A1A2E;
    margin: 0 0 16px;
}

.leasing-info__content {
    font-size: 1rem;
    color: #4B5563;
    line-height: 1.7;
}

.leasing-info__content p {
    margin: 0 0 12px;
}

.leasing-info__content p:last-child {
    margin-bottom: 0;
}

.leasing-info__rate-wrap {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 2px solid #3DBD8A;
    border-radius: 16px;
    padding: 28px 36px;
    text-align: center;
    gap: 8px;
    min-width: 200px;
}

.leasing-info__rate-label {
    font-size: 0.8rem;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

.leasing-info__rate-value {
    font-size: 2.6rem;
    font-weight: 800;
    color: #3DBD8A;
    line-height: 1;
}

.leasing-info__rate-pa {
    font-size: 1.1rem;
    font-weight: 600;
    margin-left: 2px;
}

/* Background image variant */
.calculation.has-bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.calculation.has-bg-image::before {
    content: '';
    position: absolute;
    background: white;
    bottom: 0;
    inset: 0;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: -130px;
}

.calculation.has-bg-image .content-wrap {
    position: relative;
    z-index: 1;
}

.calculation.has-bg-image .text,
.calculation.has-bg-image .text h2,
.calculation.has-bg-image .text strong,
.calculation.has-bg-image .text p {
    color: #fff;
}

@media (max-width: 768px) {
    .leasing-info__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .leasing-info__rate-wrap {
        width: 100%;
        min-width: unset;
    }
}

/* sections/map-contact.css */
/**
 * Map Contact Block
 * Mapa vľavo (pretiahnutá do kraja okna) + kontaktné boxy vpravo.
 */

.map-contact-box {
    display: flex;
    justify-content: space-between;
}

/* Mapa siaha od ľavého okraja okna po 60 % obsahu. `.content-wrap` má max-width
   1260 px a k tomu 30 px vnútorný padding, takže vytiahnutie doľava musí počítať
   aj s ním — bez toho je mapa o 30 px užšia a proporčne vyššia než na autonakluc.sk
   (merané: 810 px vs 840 px pri okne 1440 px). */
.map-contact-box .map-box {
    width: calc(60% + ((100vw - var(--container-max-width)) / 2) + 30px);
    margin-left: calc(((100vw - var(--container-max-width)) / 2 + 30px) * -1);
    background: var(--color-light-gray);
    border-top-right-radius: var(--radius-large);
    border-bottom-right-radius: var(--radius-large);
    box-shadow: var(--shadow-light);
    overflow: hidden;
    position: relative;
}

/* Leaflet spraví kontajner priamo z .map-box — výšku mu dáva flex stretch (desktop),
   pod 991 px spacer `.map-box:before` z media-queries.css (aspect 65 %). */
.map-contact-box .map-box.leaflet-container {
    background: var(--color-light-gray);
    font: inherit;
}

.map-contact-box .contact-boxes-container {
    width: 30%;
    max-width: 375px;
    padding: 75px 0;
}

.map-contact-box .contact-box {
    margin-bottom: 75px;
}

.map-contact-box .contact-box:last-child {
    margin-bottom: 0;
}

.map-contact-box .contact-title {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-black);
    margin-bottom: 30px;
}

.map-contact-box .address-box {
    margin-bottom: var(--spacing-xl);
}

.map-contact-box .address-box:last-child {
    margin-bottom: 0;
}

.map-contact-box .address-title {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    margin-bottom: 0;
}

.map-contact-box .address-box address {
    font-style: normal;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
}

.map-contact-box .address-box address:last-child {
    margin-bottom: 0;
}

/* Globálne pravidlá pre <table> majú min-width 550px/1050px (cenníky) — v úzkom
   kontaktnom stĺpci by pretiekli, preto ich tu prebíjame. */
.map-contact-box table {
    width: 100%;
    min-width: 0;
    padding: 0;
    text-align: left;
    margin-bottom: var(--spacing-xl);
}

/* tables.css má pre holé <table> globálne rámiky, biele pozadie a centrovanie
   prvej bunky (aj s !important) — v kontaktnom stĺpci chceme čisté riadky.
   Selektory musia mať vyššiu špecificitu než `table tr:first-child td`. */
.map-contact-box table td,
.map-contact-box table tr td:first-child,
.map-contact-box table tr:first-child td,
.map-contact-box table tr:last-child td {
    border: 0 !important;
    background: transparent !important;
}

.map-contact-box table tr td {
    width: auto;
    padding: 8px 0;
    text-align: left;
}

.map-contact-box table tr td:last-child {
    text-align: right;
}


.map-contact-box table:last-child {
    margin-bottom: 0;
}

.map-contact-box table td:first-child {
    padding-right: var(--spacing-sm);
}

/* Oddeľovač vkladaný do obsahu boxu (starý web ho posielal ako <hr> v nadpise) */
.map-contact-box hr {
    border: 0;
    height: 2px;
    background: var(--color-gray);
    margin: var(--spacing-lg) 0;
}

/* ============================================================
   RESPONZÍVNE SPRÁVANIE

   Tieto pravidlá boli pôvodne v responsive/media-queries.css, ktorý je
   v critical bundli, kým tento súbor je v deferred. Deferred sa načítava
   až po critical, takže `width: 30%` vyššie prebíjalo media query s rovnakou
   špecificitou a kontaktné boxy zostávali 30 % široké aj na mobile. [#64247]
   Preto responzívne pravidlá žijú v tom istom súbore ako základné.
   ============================================================ */

/* Mapa sa zmenšuje skôr, než sa layout zalomí. */
@media (max-width: 1260px) {
    .map-contact-box .map-box {
        width: 65%;
        margin-left: -30px;
    }
}

/* Pod 991 px ide mapa nad boxy, boxy sú dvojstĺpcové. */
@media (max-width: 991px) {
    .map-contact-box {
        flex-direction: column;
    }

    .map-contact-box .map-box {
        width: calc(100% + 30px);
        margin-bottom: 75px;
    }

    /* Mapa v stĺpcovom layoute nemá výšku z flex stretch — drží ju tento spacer. */
    .map-contact-box .map-box:before {
        content: '';
        display: block;
        padding-bottom: 65%;
    }

    .map-contact-box .contact-boxes-container {
        width: 100%;
        max-width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0;
    }

    .map-contact-box .contact-boxes-container .contact-box {
        width: 48%;
    }
}

@media (max-width: 767px) {
    .map-contact-box .map-box {
        margin-left: -15px;
        width: calc(100% + 15px);
    }
}

/* Na mobile jeden stĺpec. */
@media (max-width: 650px) {
    .map-contact-box .contact-boxes-container .contact-box {
        width: 100%;
        margin-bottom: 35px;
    }
}

/* sections/partners.css */
/**
 * Partners Block
 * Riadok log partnerov, zalamuje sa podľa počtu.
 */

.partners-wrapper-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.partners-wrapper-box .partner-box {
    width: calc(100% / 7 - 24px);
    padding: 1em;
    margin: 10px;
    text-align: center;
}

.partners-wrapper-box .partner-box img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 991px) {
    .partners-wrapper-box .partner-box {
        width: calc(100% / 3 - 24px);
    }
}

/* sections/prices-table.css */
/* Prices Table Section (#cennik) */

#cennik {
    background: #f5f7fb;
    padding: 80px 0 60px;
}

#cennik .section-header {
    margin-bottom: 40px;
}

#cennik .section-header h2,
#cennik .section-title {
    text-align: center;
    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px;
}

#cennik .section-description {
    text-align: center;
    font-size: 15px;
    color: #4b5563;
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto;
}

/* table wrapper */
.table-box {
    max-width: 1050px;
    margin: 0 auto 32px;
}

.table-box table {
    width: 100%;
    background: #ffffff;
    border-radius: 32px;
    overflow: hidden;
    max-width: 1050px;
    margin: 0 auto 32px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.02);

    tr:first-child td{
        border:none!important;
        border-bottom: 1px solid #edf0f4!important;
        border-left: none!important;
    }

    tr td{
        border:none!important;
        border-left: none!important;
        border-bottom: 1px solid #edf0f4!important;
    }

}

.table-box table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

.table-box table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

/* table */
.importing-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 15px;
    color: #111827;
}

.importing-table thead {
    background: linear-gradient(130deg, #1fefa5 0, #3dcb98 100%);
}

.importing-table thead th {
    padding: 20px 32px;
    text-align: left;
    font-weight: 600;
    color: #ffffff;
    font-size: 15px;
    border:none!important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.importing-table thead th:first-child  { width: 24%; }
.importing-table thead th:nth-child(2) { width: 38%; }
.importing-table thead th:nth-child(3),
.importing-table thead th:nth-child(4) { width: 19%; white-space: nowrap; }

.importing-table tbody tr { background: #ffffff; }
.importing-table tbody tr:last-child td { border-bottom: none; }

.importing-table tbody td {
    padding: 20px 32px!important;
    vertical-align: middle;
    border-bottom: 1px solid #edf0f4;
    font-weight: 400;
    line-height: 1.5;
    text-align: left!important;
}

.importing-table tbody td:first-child { font-weight: 600; }

.importing-table tbody td:first-child strong {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.importing-table tbody td:nth-child(3),
.importing-table tbody td:nth-child(4) {
    font-weight: 600;
    white-space: nowrap;
}

/* note + description below table */
.table-footer {
    max-width: 1050px;
    margin: 0 auto;
}

.table-box small {
    display: block;
    margin: 18px 0 4px;
    font-size: 12px;
    color: #9ca3af;
}

.table-box p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #4b5563;
}

/* CTA button */
#cennik .actions .button.style-3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    border-radius: 999px;
    background: linear-gradient(90deg, #18e38b 0%, #00c08a 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 16px 40px rgba(16, 185, 129, 0.35);
    border: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

#cennik .actions .button.style-3:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 48px rgba(16, 185, 129, 0.4);
}

@media (max-width: 768px) {
    .table-box {
        overflow-x: auto;
    }

    .table-box table {
        display: block;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        min-width: 350px;
        border-radius: 20px;
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15);
    }

    .importing-table thead th,
    .importing-table tbody td {
        padding: 16px 20px;
        font-size: 14px;
        min-width: 150px;
    }

    #cennik .section-title {
        font-size: 22px;
        line-height: 1.3;
        padding: 0 10px;
    }
}



/* sections/reviews-grid.css */
/**
 * reviews-grid.css
 * Reviews Grid block — dark-bg sekcia s 3-stĺpcovým gridom recenzií
 */

.reviews-grid-block {
    overflow: visible;
    position: relative;
}

/* ---- Tmavé pozadie ---- */
.reviews-grid-bg {
    background-color: var(--color-dark);
    background-size: cover;
    background-position: center;
    padding: 80px 0 200px;
    text-align: center;
    /* Nad sivé pozadie sekcie (`.reviews-grid-block::before`), aby ho neprekrylo. */
    position: relative;
}

.reviews-grid-title {
    color: var(--color-white);
    margin-bottom: 20px;
}

.reviews-grid-desc {
    color: var(--color-gray);
    max-width: 700px;
    margin: 0 auto;
}

.reviews-grid-desc p {
    color: white;
    font-weight: 700;
}

/* ---- Outer wrapper — negatívny margin ---- */
.reviews-grid-outer {
    margin-top: -140px;
    position: relative;
}

/* Karty sú biele a sekcia nemá pozadie, takže na bielom pozadí stránky splývajú —
   viditeľný ostane len ich mäkký tieň a pôsobí to, akoby biela plocha karty
   presahovala cez container (tlačidlo "Zobraziť viac" potom vyzerá ako na bielom
   bloku). Sivá to odlíši, ale nesmie prekryť tmavé hero, cez ktoré karty prečnievajú
   vďaka zápornému `margin-top`. Sivá preto ide pod celý blok a tmavé hero
   (`.reviews-grid-bg`, ktoré je `position: relative`) ju hore samo prekryje —
   netreba teda dopočítavať, kde hero končí. Je na `-block`, nie na `-outer`,
   aby siahala až po koniec sekcie, teda aj pod tlačidlo. */
.reviews-grid-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #fff 40%, #f4f5f7);
    z-index: -1;
}

/* ---- 3 stĺpce, dlaždicovo ----
   Nie CSS `grid`: tam sa riadok zarovná na najvyššiu kartu a pod kratšími
   recenziami vznikajú diery. Chceme, aby ďalšia recenzia začala tam, kde predošlá
   skončila (rovnako to má Carvago).

   Nie ani CSS `columns`: WebKit ich balancuje inak než Chromium — pri 25 recenziách
   skončili stĺpce na 2032/1829/1556px, teda 476px rozdiel, a pod najkratším stĺpcom
   zívala prázdna plocha až po tlačidlo. Preto sú stĺpce `flex` a karty do nich
   rozdeľuje `buildReviewColumns()` v `main.js` podľa nameraných výšok (greedy —
   karta ide vždy do momentálne najkratšieho stĺpca). Rozdiel klesol na ~43px.
   Počet stĺpcov drží `--cols`, aby ho JS vedel prečítať a nemusel duplikovať
   breakpointy. */
.reviews-grid {
    --cols: 3;
    display: flex;
    align-items: flex-start;
    gap: 30px;
    /* `padding`, nie `margin` — tieň kariet nezaberá miesto v box modeli, takže bez
       tohto by sa spodok tieňa poslednej karty orezal o koniec sivej plochy. */
    padding-bottom: 50px;
}

.reviews-grid__col {
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* Bez `min-width: 0` by flex položka nešla pod šírku svojho obsahu. */
    flex: 1;
    min-width: 0;
}

/* ---- Karta recenzie ---- */
.review-card {
    background: var(--color-white);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-light);
    padding: 35px 30px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 999;
    position: relative;
}

.review-cart-footer {
    display: flex;
    flex-direction: row;
    justify-content: normal;
    gap: 20px;
    align-items: center;

}

.review-card__author-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #a5acbf;
}

.review-card__author-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.review-card__name {
    color: #A5ACBF;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    margin: 0;
}

/* Prelink na pôvod recenzie — vpravo dole vo footeri karty. */
.review-card__source {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
    color: #A5ACBF !important; /* ponytail: prebíja neznámy externý štýl, zrušiť keď sa nájde zdroj */
    text-decoration: underline;
}

.review-card__source:hover,
.review-card__source:focus-visible {
    color: var(--color-dark);
}

.review-card-inner .review-cart-footer .stars {
    display: inline-flex;
    color: #fec107;
    margin-right: 5px;
    font-size: 14px;
}

.review-card blockquote {
    text-align: left;
    color: var(--color-gray);
    font-weight: 300;
    margin: 0 0 25px;
    line-height: 1.4;
}

/* ---- Časť s autom ---- */
.review-card__car {
    border-top: 1px solid var(--color-border);
    padding-top: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
    margin: 20px 0;
}

.review-card__car-photo {
    width: 100%;
    height: 200px;
    border-radius: var(--radius-small);
    overflow: hidden;
    margin: 20px 0;
    flex-shrink: 0;
}

.review-card__car-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.review-card__car-desc {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    line-height: 1.4;
}

/* ---- Skryté recenzie + "Zobraziť viac" ----
   display:none (nie visibility), aby karta vypadla z column-flow a stĺpce sa
   prebalancovali len cez viditeľné karty. */
.review-card--hidden {
    display: none;
}

.reviews-grid-more {
    text-align: center;
    /* box-shadow kariet nezaberá miesto v box modeli, takže bez tohto marginu
       tieň poslednej karty zasahuje do tlačidla. */
    margin-top: 30px;
    /* Odsadenie pod tlačidlom je `padding` sekcie, nie `margin` tlačidla — margin
       by vypadol von z bloku a sivé pozadie (`::before`) by ho nepokrylo, takže
       by pod tlačidlom ostal biely pruh. */
    padding-bottom: 50px;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .reviews-grid {
        --cols: 2;
    }

    .reviews-grid-bg {
        padding-bottom: 170px;
    }

    .reviews-grid-outer {
        margin-top: -110px;
    }
}

@media (max-width: 650px) {
    .reviews-grid {
        --cols: 1;
    }

    .reviews-grid-bg {
        padding: 60px 0 130px;
    }

    .reviews-grid-outer {
        margin-top: -70px;
    }

    .review-card {
        padding: 30px 25px 25px;
    }
}

/* sections/services-grid.css */
/**
 * services-grid.css
 * Services Grid block — dark-bg sekcia s 3×2 mriežkou dlaždíc so službami
 */

/* ---- Sekcia ---- */
.services-grid-section {
    background:linear-gradient(90deg, #1FEFA5 0%, #3DCB98 100%);
    padding: 80px 0;
}

/* ---- Nadpis sekcie ---- */
.services-grid-title {
    color: var(--color-white);
    text-align: center;
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 50px;
    line-height: 1.2;
}

/* ---- Grid ---- */
/* 4 stĺpce — 1. dlaždica (2fr) a 6. dlaždica (2fr) dostanú span 2 */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* Riadok 1: 2fr | 1fr | 1fr */
.service-tile:nth-child(1) { grid-column: span 2; }

/* Riadok 2: 1fr | 1fr | 2fr */
.service-tile:nth-child(6) { grid-column: span 2; }

/* ---- Dlaždica ---- */
.service-tile {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    min-height: 280px;
    background-color: #3a3a3a;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    transition: transform 0.3s ease;
}

/* ---- Tmavý overlay ---- */
.service-tile__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

/* ---- Obsah dlaždice ---- */
.service-tile__content {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 8px;
}

/* ---- Názov služby ---- */
.service-tile__title {
    color: var(--color-white);
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.service-tile__text {
    margin-bottom: 0;
}

.service-tile__content .button.style-3{
    padding: 11px 20px;
}
.service-tile__content .button.style-3:hover{
    background: white;
    border-color: white;
}
/* ---- Responsive: tablet (768px – 1024px) ---- */
@media (max-width: 1024px) {
    .services-grid-section {
        padding: 60px 0;
    }

    .services-grid-title {
        font-size: 30px;
        margin-bottom: 40px;
    }

    .service-tile {
        min-height: 250px;
    }

    .service-tile__title {
        font-size: 20px;
    }
}

/* ---- Responsive: mobil (do 767px) ---- */
@media (max-width: 767px) {
    .services-grid-section {
        padding: 50px 0;
    }

    .services-grid-title {
        font-size: 26px;
        margin-bottom: 30px;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .service-tile {
        min-height: 220px;
    }

    .service-tile__title {
        font-size: 20px;
    }

    .service-tile__content {
        padding: 25px 20px;
        gap: 14px;
    }
}

/* sections/steps-grid.css */
/* Steps Grid Section */
.steps-grid-section {
    background: #fff;
    padding: 80px 0;
}

.steps-grid-section .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.steps-grid-section .section-title {
    font-size: 26px;
    font-weight: 900;
    color: #262626;
    line-height: 1.2;
   text-align: left;
}

.steps-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
    max-width: 1400px;
    margin: 0 auto;
}

.step-grid-item {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px 28px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    box-shadow: 0 106px 30px 0 rgba(0, 0, 0, 0.00), 0 68px 27px 0 rgba(0, 0, 0, 0.00), 0 38px 23px 0 rgba(0, 0, 0, 0.02), 0 17px 17px 0 rgba(0, 0, 0, 0.03), 0 4px 9px 0 rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-grid-item:hover {
    transform: translateY(-4px);
}

.step-number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(61, 203, 152, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-number span {
    font-size: 20px;
    font-weight: 900;
    color: #3dcb98;
}

.step-content {
    flex: 1;
}

.step-content .step-title {
    font-size: 20px;
    font-weight: 900;
    color: #262626;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.step-content .step-description p {
    font-size: 16px;
    color: #a5acbf;
    line-height: 1.6;
    font-weight: 400;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .steps-grid-container {
        gap: 30px 20px;
    }

    .steps-grid-section .section-title {
        font-size: 36px;
    }
}

@media (max-width: 991px) {
    .steps-grid-section {
        padding: 60px 0;
    }

    .steps-grid-section .section-header {
        margin-bottom: 40px;
    }

    .steps-grid-section .section-title {
        font-size: 32px;
    }

    .steps-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .step-grid-item {
        padding: 28px 24px;
    }

    .step-content .step-title {
        font-size: 18px;
    }

    .step-content .step-description {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .steps-grid-section {
        padding: 50px 0;
    }

    .steps-grid-section .section-title {
        font-size: 28px;
        padding: 0 20px;
        text-align: center;
    }

    .steps-grid-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .step-grid-item {
        padding: 24px 20px;
        gap: 16px;
    }

    .step-number {
        width: 42px;
        height: 42px;
    }

    .step-number span {
        font-size: 20px;
    }

    .step-content .step-title {
        font-size: 17px;
        margin-bottom: 10px;
    }

    .step-content .step-description {
        font-size: 14px;
    }
}