/**
 * EN: INexpress slideshow styles.
 * IT: Stili della slideshow INexpress.
 */


/* =========================================================
   BASE SLIDESHOW
   ========================================================= */

.pkinex-slideshow {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 30px auto;
    overflow: hidden;

    background: #111827;

    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
}

.pkinex-slideshow__viewport {
    position: relative;
    width: 100%;
    min-height: 620px;
}


/* =========================================================
   SINGLE SLIDE
   ========================================================= */

.pkinex-property-slide {
    position: absolute;
    inset: 0;

    display: grid;
    grid-template-columns:
        minmax(0, 1.5fr) minmax(320px, 0.8fr);

    width: 100%;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.5s ease,
        visibility 0.5s ease;
}

.pkinex-property-slide.is-active {
    position: relative;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   PROPERTY IMAGE
   ========================================================= */

.pkinex-property-slide__image {
    position: relative;
    min-width: 0;
    min-height: 620px;

    overflow: hidden;

    background: #1f2937;
}

.pkinex-property-slide__image img {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 620px;

    object-fit: contain;
    object-position: center;
}

.pkinex-property-slide__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
    min-height: 620px;

    background:
        radial-gradient(circle at top left,
            #334155,
            transparent 45%),
        linear-gradient(135deg,
            #111827,
            #1e293b);

    color: #ffffff;

    font-size: clamp(36px, 7vw, 86px);
    font-weight: 700;
    letter-spacing: -0.04em;
}


/* =========================================================
   PROPERTY CONTENT
   ========================================================= */

.pkinex-property-slide__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
    padding: 54px;

    color: #ffffff;
    background: #515151;
}

.pkinex-property-slide__location {
    margin-bottom: 12px;

    color: #93c5fd;

    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pkinex-property-slide__title {
    margin: 0 0 24px;

    color: #ffffff;

    font-size: clamp(34px, 4vw, 60px);
    line-height: 1.05;

    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;

    text-wrap: balance;
}

.pkinex-property-slide__features {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 24px;
}

.pkinex-property-slide__features span {
    padding: 8px 12px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.07);

    font-size: 14px;
}

.pkinex-property-slide__description {
    margin: 0 0 32px;

    color: #f0f0f0;

    font-size: 18px;
    line-height: 1.6;

    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.pkinex-property-slide__price {
    color: #ffffff;

    font-size: clamp(32px, 4vw, 54px);
    font-weight: 800;
}


/* =========================================================
   EMPTY SLIDESHOW
   ========================================================= */

.pkinex-slideshow__empty {
    padding: 70px 30px;

    color: #ffffff;
    text-align: center;
}


/* =========================================================
   RESPONSIVE STANDARD PAGE
   ========================================================= */

@media (max-width: 850px) {

    .pkinex-slideshow {
        margin: 0;
        border-radius: 0;
    }

    .pkinex-slideshow__viewport {
        min-height: auto;
    }

    .pkinex-property-slide {
        grid-template-columns: 1fr;
    }

    .pkinex-property-slide__image,
    .pkinex-property-slide__image img,
    .pkinex-property-slide__placeholder {
        min-height: 340px;
    }

    .pkinex-property-slide__content {
        padding: 35px 25px 50px;
    }

    .pkinex-property-slide__title {
        font-size: clamp(30px, 8vw, 48px);
    }

    .pkinex-property-slide__description {
        font-size: 16px;
    }
}


/* =========================================================
   FULLSCREEN PAGE
   ========================================================= */

html {
    width: 100%;
    height: 100%;
    margin: 0;
}

body.pkinex-slide-fullscreen-page .pkinex-property-slide__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 100%;
    height: 100%;
    min-width: 0;

    box-sizing: border-box;
    container-type: inline-size;

    padding:
        clamp(40px, 4vh, 70px) clamp(28px, 2.6vw, 60px) clamp(40px, 4vh, 70px);

    overflow: hidden;

    background: #515151;
}

body.pkinex-slide-fullscreen-page .pkinex-slideshow {
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;

    overflow: hidden;

    border-radius: 0;
    box-shadow: none;
}

body.pkinex-slide-fullscreen-page .pkinex-slideshow__viewport {
    width: 100%;
    height: 100%;
    min-height: 0;
}

body.pkinex-slide-fullscreen-page .pkinex-property-slide {
    width: 100%;
    height: 100%;
    min-height: 0;

    grid-template-columns:
        minmax(0, 68fr) minmax(0, 32fr);
}

body.pkinex-slide-fullscreen-page .pkinex-property-slide.is-active {
    position: absolute;
}


/* =========================================================
   FULLSCREEN IMAGE
   ========================================================= */

body.pkinex-slide-fullscreen-page .pkinex-property-slide__image {
    width: 100%;
    height: 100%;
    min-height: 0;
}

body.pkinex-slide-fullscreen-page .pkinex-property-slide__image img {
    width: 100%;
    height: 100%;
    min-height: 0;

    object-fit: cover;
    object-position: center;
}

body.pkinex-slide-fullscreen-page .pkinex-property-slide__placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;

    font-size: clamp(48px, 7vw, 150px);
}


/* =========================================================
   FULLSCREEN CONTENT
   ========================================================= */

body.pkinex-slide-fullscreen-page .pkinex-property-slide__content {
    width: 100%;
    height: 100%;
    min-width: 0;

    box-sizing: border-box;
    container-type: inline-size;

    /*
     * EN: Reduced padding to leave more room for the description.
     * IT: Padding ridotto per lasciare più spazio alla descrizione.
     */
    padding:
        clamp(22px, 3vh, 55px) clamp(22px, 2.5vw, 60px);

    overflow: hidden;

    background: #515151;
}

body.pkinex-slide-fullscreen-page .pkinex-property-slide__location {
    margin-bottom: clamp(16px, 2vh, 30px);

    font-size: clamp(18px, 1.45vw, 34px);

    font-weight: 700;
    letter-spacing: 0.06em;
}

body.pkinex-slide-fullscreen-page .pkinex-property-slide__title {
    width: 100%;
    max-width: 100%;

    /*
     * EN: Smaller lower margin to leave more vertical room.
     * IT: Margine inferiore ridotto per guadagnare spazio verticale.
     */
    margin: 0 0 clamp(18px, 2vh, 36px);

    font-size: clamp(34px, 9.6cqw, 72px);

    /*
     * EN: Wrap only between complete words.
     * IT: Va a capo soltanto tra parole intere.
     */
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;

    /*
     * EN: Balance title lines when supported by the browser.
     * IT: Rende più equilibrate le righe del titolo.
     */
    text-wrap: balance;
}

body.pkinex-slide-fullscreen-page .pkinex-property-slide__features {
    gap: clamp(8px, 0.7vw, 18px);

    /*
     * EN: Reduced margin to leave more room for the description.
     * IT: Margine ridotto per lasciare più spazio alla descrizione.
     */
    margin-bottom: clamp(34px, 4vh, 60px);
}

body.pkinex-slide-fullscreen-page .pkinex-property-slide__features span {
    padding:
        clamp(7px, 0.8vh, 16px) clamp(10px, 0.9vw, 24px);

    font-size: clamp(14px, 1.05vw, 27px);
}

body.pkinex-slide-fullscreen-page .pkinex-property-slide__description {

    width: 100%;
    max-width: 100%;

    margin: 0 0 clamp(42px, 5vh, 70px);

    color: #f0f0f0;

    font-size: clamp(18px, 1.3vw, 32px);

    line-height: 1.45;

    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

body.pkinex-slide-fullscreen-page .pkinex-property-slide__price {
    font-size: clamp(38px, 4vw, 100px);
}


/* =========================================================
   FULLSCREEN PORTRAIT OR NARROW SCREENS
   ========================================================= */

@media (max-aspect-ratio: 4 / 3) {

    body.pkinex-slide-fullscreen-page .pkinex-property-slide {
        grid-template-columns: 1fr;
        grid-template-rows: 58vh 42vh;
    }

    body.pkinex-slide-fullscreen-page .pkinex-property-slide__content {
        justify-content: center;

        padding:
            clamp(18px, 2.5vh, 38px) clamp(24px, 5vw, 60px);
    }

    body.pkinex-slide-fullscreen-page .pkinex-property-slide__title {
        font-size: clamp(30px, 6vw, 60px);

        text-wrap: balance;
    }

    body.pkinex-slide-fullscreen-page .pkinex-property-slide__description {
        margin-bottom: clamp(10px, 1.5vh, 20px);

        font-size: clamp(15px, 2.3vw, 22px);
        line-height: 1.38;
    }

    body.pkinex-slide-fullscreen-page .pkinex-property-slide__price {
        font-size: clamp(32px, 6vw, 70px);
    }
}


/* =========================================================
   SAFE TEXT WRAPPING
   ========================================================= */

.pkinex-property-slide__title,
.pkinex-property-slide__location,
.pkinex-property-slide__description,
.pkinex-property-slide__price {
    max-width: 100%;

    box-sizing: border-box;

    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}