/* =========================================================
   ANASCRIPTS
   UNIVERSAL HOME CAROUSEL
========================================================= */


/* =========================================================
   SERVICE PREVIEW SECTION
========================================================= */

.service-preview-section {
    position: relative;

    width: 100%;

    padding: 30px 30px 36px;

    text-align: center;
}


/* Divider between services */

.service-preview-section+.service-preview-section {
    border-top: 1px solid var(--line-color);
}


/* =========================================================
   SERVICE TITLE
========================================================= */

.service-preview-header {
    width: 100%;

    margin-bottom: 0;
}

.service-preview-header h2 {
    margin: 0;

    font-size: 34px;
    font-weight: 400;
    line-height: 1.2;

    color: var(--text-color);
}


/* =========================================================
   CAROUSEL
========================================================= */

.home-carousel {
    position: relative;

    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    display: flex;

    align-items: center;
    justify-content: center;
}


/* =========================================================
   STAGE
========================================================= */

.carousel-stage {
    position: relative;

    width: 100%;
    height: 540px;

    overflow: hidden;

    touch-action: pan-y;
    user-select: none;
}


/* =========================================================
   PHOTO CARD
========================================================= */

.carousel-card {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 380px;
    height: 500px;

    margin: 0;
    padding: 0;

    border: 1px solid rgba(184, 164, 136, 0.22);

    border-radius: 12px;

    background: var(--page-bg);

    overflow: hidden;

    cursor: pointer;

    transform-origin: center;

    transition:
        transform 0.45s ease,
        opacity 0.45s ease,
        filter 0.45s ease,
        box-shadow 0.45s ease;

    box-shadow:
        0 14px 34px rgba(70, 50, 34, 0.11);
}


.carousel-card img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    pointer-events: none;

    background: var(--page-bg);
}


/* =========================================================
   CENTER
========================================================= */

.carousel-card.center {
    z-index: 5;

    transform:
        translate(-50%, -50%) scale(1);

    opacity: 1;
}


/* =========================================================
   LEFT
========================================================= */

.carousel-card.left {
    z-index: 4;

    transform:
        translate(-98%, -50%) scale(0.88) rotate(-3deg);

    opacity: 0.92;
}


/* =========================================================
   RIGHT
========================================================= */

.carousel-card.right {
    z-index: 4;

    transform:
        translate(-2%, -50%) scale(0.88) rotate(3deg);

    opacity: 0.92;
}


/* =========================================================
   FAR LEFT
========================================================= */

.carousel-card.far-left {
    z-index: 3;

    transform:
        translate(-142%, -50%) scale(0.72) rotate(-6deg);

    opacity: 0.35;
}


/* =========================================================
   FAR RIGHT
========================================================= */

.carousel-card.far-right {
    z-index: 3;

    transform:
        translate(42%, -50%) scale(0.72) rotate(6deg);

    opacity: 0.35;
}


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

.carousel-card.center:hover {
    transform:
        translate(-50%, -50%) scale(1.025);
}


.carousel-card.left:hover,
.carousel-card.right:hover {
    opacity: 1;
}


/* =========================================================
   ARROWS
========================================================= */

.carousel-arrow {
    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    z-index: 20;

    width: 46px;
    height: 58px;

    padding: 0;

    border: none;
    border-radius: 10px;

    background:
        rgba(250, 246, 239, 0.94);

    color: var(--text-color);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 40px;
    line-height: 1;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        opacity 0.2s ease;

    box-shadow:
        0 6px 18px rgba(60, 45, 35, 0.08);
}


.carousel-arrow:hover {
    background: #faf6ef;
}


.carousel-arrow-left {
    left: 12px;
}


.carousel-arrow-right {
    right: 12px;
}


/* =========================================================
   SHORT DESCRIPTION
========================================================= */

.service-preview-description {
    width: min(720px, 90%);

    margin: 4px auto 0;
}


.service-preview-description p {
    margin: 0;

    color: var(--muted-text);

    font-size: 15px;
    line-height: 1.7;
}

/* =========================
   VIEW GALLERY HINT
========================= */

.carousel-gallery-hint {
    position: absolute;

    top: 12px;
    right: 12px;
    bottom: auto;

    display: flex;
    align-items: center;

    gap: 6px;

    padding: 7px 10px;

    border:
        1px solid rgba(74, 53, 41, 0.14);

    border-radius: 7px;

    background:
        rgba(247, 241, 232, 0.92);

    color:
        var(--text-color);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 12px;
    line-height: 1;

    white-space: nowrap;

    box-shadow:
        0 4px 12px rgba(60, 45, 35, 0.08);

    pointer-events: none;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.carousel-card.center:hover .carousel-gallery-hint {
    transform:
        translateY(-2px);

    background:
        rgba(247, 241, 232, 1);
}


.carousel-gallery-hint span {
    font-size: 13px;
}

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

@media (max-width: 1000px) {

    .carousel-stage {
        height: 430px;
    }


    .carousel-card {
        width: 290px;
        height: 390px;
    }


    .carousel-card.far-left,
    .carousel-card.far-right {
        opacity: 0.25;
    }

}


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

@media (max-width: 800px) {

    .carousel-gallery-hint {
        top: 8px;
        right: 8px;

        padding: 5px 7px;

        gap: 4px;

        font-size: 10px;

        border-radius: 6px;
    }


    .carousel-gallery-hint span {
        font-size: 11px;
    }

    .service-preview-section {
        padding: 24px 14px 28px;
    }


    .service-preview-header h2 {
        font-size: 28px;
    }


    .carousel-stage {
        height: 360px;
    }


    .carousel-card {
        width: min(58vw, 250px);
        height: min(78vw, 330px);
    }


    .carousel-card.left {
        transform:
            translate(-108%, -50%) scale(0.82) rotate(-3deg);
    }


    .carousel-card.right {
        transform:
            translate(8%, -50%) scale(0.82) rotate(3deg);
    }


    .carousel-card.far-left,
    .carousel-card.far-right {
        display: none;
    }


    .carousel-arrow {
        width: 40px;
        height: 52px;

        font-size: 34px;
    }


    .carousel-arrow-left {
        left: 4px;
    }


    .carousel-arrow-right {
        right: 4px;
    }


    .service-preview-description {
        width: min(600px, 92%);

        margin-top: 2px;
    }


    .service-preview-description p {
        font-size: 14px;
        line-height: 1.6;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 480px) {

    .service-preview-section {
        padding:
            22px 10px 26px;
    }


    .service-preview-header h2 {
        font-size: 26px;
    }


    .carousel-stage {
        height: 330px;
    }


    .carousel-card {
        width: min(60vw, 220px);
        height: min(82vw, 300px);
    }


    .carousel-card.left {
        transform:
            translate(-104%, -50%) scale(0.78);
    }


    .carousel-card.right {
        transform:
            translate(4%, -50%) scale(0.78);
    }

}

/* =========================================================
   LARGE DESKTOP CAROUSEL
   Larger photos only — text stays unchanged
========================================================= */

@media (min-width: 1200px) {

    .carousel-stage {
        height: 680px;
    }


    .carousel-card {
        width: 435px;
        height: 570px;
    }

}