/* ============================================================
   KDLN – Home Hero Slider
   [kdln_home_hero]
   Base: 1920px — Foto grande: 750×960px — Foto piccola: 500×690px
   Animazioni: gestite via JS inline styles
   ============================================================ */

/* ── Wrapper ── */
.kdln-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fff;
    user-select: none;
}

/* ── Track ── */
.kdln-hero__track {
    position: relative;
    width: 100%;
    min-height: 0;
}

/* ── Slide ── */
.kdln-hero__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

.kdln-hero__slide.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.kdln-hero__slide.is-entering {
    position: absolute;
    z-index: 2;
}

/* ============================================================
   NOME PRODOTTO — absolute, sovrapposto tra col-left e col-center
   ============================================================ */
.kdln-hero__product-name {
    --hero-name-lh: clamp(40px, 6.77vw, 130px);
	position: absolute;
    left: 40px;
    top: 50%;
    width: 65%;
    z-index: 3;
    text-align: center;
    font-family: 'Neue Haas Unica W1G Medium', sans-serif;
	/* margin-top: -130px; */
	/* margin-top: -120px; */
    /* font-size: 180px; 
	font-size: 150px; */
    /* line-height: 130px; 
	line-height: 120px; */
	
	font-size: clamp(48px, 9.375vw, 180px); /* 9.375 = 180/1920 * 100 */
	line-height: clamp(40px, 6.77vw, 130px);
    margin-top: calc(var(--hero-name-lh) * -1);
	
	font-weight: bold;
    letter-spacing: -3.6px;
    color: #A0A0A0;
    mix-blend-mode: difference;
    text-decoration: none;
    display: block;
    pointer-events: auto;
}

.kdln-hero__product-name:hover {
    color: #A0A0A0;
}

/* ── Colonna sinistra: foto grande ── */
.kdln-hero__col-left {
    position: relative;
    flex: 0 0 39%;
    width: 39%;
    overflow: hidden;
    z-index: 2;
}

.kdln-hero__img-large-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.kdln-hero__img-large-wrap a {
    display: block;
    width: 100%;
    height: 100%;
}

.kdln-hero__img-large-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Colonna centrale: designer in alto, testo in basso ── */
.kdln-hero__col-center {
    flex: 1 1 35%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
    z-index: 1;
    width: 35%;
}

.kdln-hero__designer-name {
    text-align: right;
    /* font: normal normal bold 36px/40px 'Neue Haas Unica W1G Medium', sans-serif; */
	font-family: 'Neue Haas Unica W1G Medium', sans-serif;
	font-weight: bold;
	font-size: clamp(30px, 2.083vw, 40px); /* 9.375 = 180/1920 * 100 */
	line-height: clamp(30px, 2.083vw, 40px);
    letter-spacing: 0px;
    color: #000000;
    text-decoration: none;
    display: inline-block;
    align-self: flex-end;
    transition: opacity 0.3s ease;
    margin-top: 24%;
}

.kdln-hero__designer-name:hover {
    opacity: 1;
    color: #000000;
}

.kdln-hero__text {
    font-family: 'Neue Haas Unica W1G Medium', sans-serif;
    /* font-size: 28px;
	line-height: 28px; */
	font-size: clamp(24px, 1.458vw, 28px); /* 9.375 = 180/1920 * 100 */
	line-height: clamp(24px, 1.458vw, 28px);
    font-weight: 500;
    letter-spacing: 0px;
    color: #000;
    text-align: left;
    margin: 0;
    align-self: flex-start;
    padding: 40px;
}

/* ── Colonna destra: frecce + foto piccola ── */
.kdln-hero__col-right {
    flex: 0 0 26%;
    width: 26%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 0;
    z-index: 2;
}

/* ── Frecce ── */
.kdln-hero__arrows {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding: 0 80px 40px 0;
    width: 100%;
}

.kdln-hero__arrow {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    transition: opacity 0.2s ease;
    position: relative;
}

.kdln-hero__arrow:hover,
.kdln-hero__arrow:active,
.kdln-hero__arrow:focus{
    opacity: 1;
	background: #fff;
}

.kdln-hero__arrow img {
    width: 48px;
    height: auto;
    display: block;
}

/* Frecce: fade-in automatico via CSS quando la slide è attiva */
	.kdln-hero__slide .kdln-hero__arrows {
		opacity: 0;
		transition: none;
	}

	.kdln-hero__slide.is-active .kdln-hero__arrows {
		opacity: 1;
		transition: opacity 0.6s ease 0.4s;
	}

/* ── Tooltip ── */
.kdln-hero__tooltip {
    display: block;
    background: #fff;
    color: #000;
    font-family: 'Neue Haas Unica W1G Medium', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    padding: 0 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    position: absolute;
    right: 64px;
    top: 50%;
    transform: translateY(-50%);
}

.kdln-hero__arrow:hover .kdln-hero__tooltip {
    opacity: 1;
}

/* ── Foto piccola ── */
.kdln-hero__img-small-wrap {
    width: 100%;
    /* height: 690px; */
    overflow: hidden;
    flex-shrink: 0;
}

.kdln-hero__img-small-wrap a {
    display: block;
    width: 100%;
    height: 100%;
}

.kdln-hero__img-small-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* HOME BLOCKS ------------------------------------------------- */

	.home-title h2{
		font-size: clamp(70px, 5.989vw, 115px) !important;
		/* 9.375 = 180/1920 * 100 */
		line-height: clamp(70px, 4.947vw, 95px) !important;
	}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (min-width: 1025px) {
	.mobile-version{
		display: none;
	}
}

@media (max-width: 1024px) {
	
	
	.about-block{
		background-color: #EDECE7;
	}
	
    .kdln-hero__track {
        min-height: auto;
    }

    .kdln-hero__slide {
        flex-wrap: wrap;
        min-height: auto;
    }

    .kdln-hero__product-name {
        font-size: 80px;
        line-height: 70px;
        /*top: 200px;
        left: 10px;
        width: 90%; */
        letter-spacing: -1px;
        position: relative;
        margin: 0;
        left: 0;
        top: 0;
        mix-blend-mode: unset;
        color: #000;
        text-align: left;
        padding-bottom: 50px;
    }

    .kdln-hero__col-left {
        flex: 0 0 50%;
        width: 50%;
        height: auto;
        aspect-ratio: 750 / 960;
    }

    .kdln-hero__col-center {
        flex: 0 0 50%;
        padding: 32px 24px 40px 32px;
    }

    .kdln-hero__col-right {
        flex: 0 0 50%;
        width: 50%;
        height: auto;
    }

    .kdln-hero__img-small-wrap {
        height: auto;
        aspect-ratio: 500 / 690;
    }

    .kdln-hero__text {
        font-size: 24px;
        line-height: 30px;
    }
	
	.desktop-version{
		display: none;
	}
}

@media (max-width: 767px) {

	
	.home-title h2{
		font-size: 54px !important;
		/* 9.375 = 180/1920 * 100 */
		line-height: 54px !important;
	}
	
    .kdln-hero__slide {
        flex-direction: column;
    }

	.kdln-hero__product-name {
        font-size: 48px;
        line-height: 44px;
        width: 100%;
        letter-spacing: -1px;
        position: relative;
        margin: 0;
        left: 0;
        top: 0;
        mix-blend-mode: unset;
        color: #000;
        text-align: left;
        padding-bottom: 50px;
    }

    .kdln-hero__col-left {
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: 750 / 960;
    }

    .kdln-hero__col-center {
        flex: none;
        padding: 24px 16px 32px;
		width: 100%;
    }
	
	.kdln-hero__designer-name {
		font-size: 21px !important;
		line-height: 24px !important;
		margin-top: 0;
	}
	
	.kdln-hero__text {
		padding: 0;
	}
	
	.kdln-hero__slide .kdln-hero__arrows {
		display: none;
	}

    .kdln-hero__col-right {
        flex: none;
        width: 100%;
    }

    .kdln-hero__img-small-wrap {
        height: auto;
        /* aspect-ratio: 500 / 690; */
		aspect-ratio: 650 / 580;
		padding: 0 70px;
    }

    .kdln-hero__text {
        font-size: 20px;
        line-height: 26px;
        padding-bottom: 24px;
    }

    .kdln-hero__tooltip {
        display: none;
    }
}