/* ================================================
   Personal Wine Page — Responsive fixes
   ================================================ */

/* Prevent horizontal overflow on the whole page */
.imennoe,
#information-informationwc {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ------------------------------------------------
   Font size clamps — prevents microscopic text
   on very narrow viewports via vw-only sizing
   ------------------------------------------------ */
.slide-ht  { font-size: clamp(22px, 5.208vw, 100px); font-family: 'ProximaNova-Bold'; color: #fff; }
.slide-mt  { font-size: clamp(20px, 4.167vw, 80px);  font-family: 'ProximaNova-Bold'; color: #fff; }
.slide-m   { font-size: clamp(14px, 2.083vw, 40px);  font-family: 'ProximaNova-Bold'; color: #fff; }
.slide-tl  { font-size: clamp(13px, 1.25vw,  24px);  font-family: 'ProximaNova-Light'; color: #fff; }
.slide-tr  { font-size: clamp(13px, 1.146vw, 22px);  font-family: 'ProximaNova-Reg', sans-serif; color: #fff; }

/* ------------------------------------------------
   Tablet breakpoint (768 – 991px)
   Desktop vw values are too small for body text
   but the < 991px override (5vw) is too big here.
   ------------------------------------------------ */
@media (min-width: 768px) and (max-width: 991px) {
    .imennoe .swiper-container.swiper-container-h h6 {
        font-size: clamp(28px, 6.5vw, 56px) !important;
    }
    .imennoe .swiper-container.swiper-container-h .slide-m {
        font-size: clamp(18px, 4vw, 34px) !important;
    }
    .slide-tl,
    .slide-tr {
        font-size: clamp(14px, 2.2vw, 20px) !important;
    }
    #slide-2 .slide-mt {
        font-size: clamp(26px, 5.5vw, 50px) !important;
    }

    #first-slide-d {
        margin: 14vw 0 0 8vw;
    }
    #first-slide-d p {
        margin-left: 4vw;
    }

    #slide-3 .col-ss-5 {
        padding: 6vw 5vw 0 3vw;
    }
    #slide-3 h6 {
        margin-left: 0 !important;
    }

    #slide-5 #left-side {
        width: 48%;
        top: 8vw;
        left: 4vw;
    }
    #slide-5 #right-side {
        width: 36%;
        right: 2vw;
        top: 6vw;
        padding: 2.5vw;
    }

    #slide-6 .col-sss-4 {
        padding: 0 2vw 0 3vw;
    }

    #information-winerywc {
        padding: 5rem 4rem;
    }
}

/* ------------------------------------------------
   Mobile (≤ 991px) — fixes for the existing
   rules that were missing or incorrect
   ------------------------------------------------ */
@media (max-width: 991px) {

    /* === Slide containers === */
    .imennoe .swiper-container.swiper-container-h {
        overflow-x: hidden;
    }

    /* === Slide 3: float-based columns need clearing === */
    #slide-3 .col-ss-7 {
        float: none;
    }
    #slide-3 .col-ss-5 {
        float: none;
    }

    /* === Slide 4: float-based columns === */
    #slide-4 .col-ss-7,
    #slide-4 .col-ss-5 {
        float: none;
    }

    /* === Slide 5: ensure proper stacking === */
    #slide-5 {
        display: block;
        position: relative;
        padding-bottom: 8vw;
        min-height: auto;
    }
    #slide-5 > div {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        box-sizing: border-box;
    }
    #slide-5 #left-side {
        padding: 15vw 5.556vw 5vw;
    }
    #slide-5 #right-side {
        padding: 8vw 5.556vw 8vw;
        width: 100% !important;
        background: #18151e;
    }

    /* === Slide 6: columns === */
    #slide-6 {
        display: block !important;
    }
    #slide-6 .col-sss-4,
    #slide-6 .col-sss-8 {
        width: 100%;
        float: none;
        box-sizing: border-box;
    }
    #slide-6 .col-sss-4 {
        padding: 5vw 5.556vw 3vw;
    }

    /* === Winery detail modal — CRITICAL FIX ===
       Desktop has padding: 8rem which collapses content to ~119px
       on a 375px phone. Override to reasonable mobile padding. */
    #information-winerywc {
        position: relative;
        padding: 5rem 5vw 12vw;
        height: auto;
        min-height: 100vh;
        box-sizing: border-box;
        overflow-y: auto;
    }
    #information-winerywc .col-ss-6 {
        float: none !important;
        box-sizing: border-box;
    }
    #information-winerywc .col-ss-6 + .col-ss-6 {
        padding: 4vw 0 15vw;
        margin: 0;
    }
    /* Swiper images fill the container width */
    #information-winerywc .swiper-slide img {
        width: 100% !important;
        max-width: 100%;
        height: auto;
    }
    #information-winerywc h1 {
        font-size: clamp(24px, 7vw, 48px) !important;
        margin-bottom: 2vw;
    }

    /* === Modal form === */
    #modal_sviaz {
        box-sizing: border-box;
    }
    #modal_sviaz input,
    #modal_sviaz input[type=number],
    #modal_sviaz textarea {
        width: 100%;
        box-sizing: border-box;
        font-size: clamp(14px, 4.5vw, 20px) !important;
    }

    /* === Close button — fixed to top-right of winery modal === */
    #information-winerywc .close_click {
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        z-index: 200;
        margin: 0;
        padding: 0;
        display: block;
    }
    #information-winerywc .close_click img {
        display: block;
        width: 2.5rem !important;
        height: 2.5rem !important;
        max-width: 2.5rem !important;
        position: static !important;
        top: auto !important;
        right: auto !important;
    }

    /* === Swiper v container on mobile === */
    #slide-6 .swiper-container-v {
        width: 100%;
        margin-left: 0;
    }
    .swiper-container-v .swiper-slide {
        width: 85vw !important;
        box-sizing: border-box;
    }
}

/* ------------------------------------------------
   Small phones (≤ 480px)
   ------------------------------------------------ */
@media (max-width: 480px) {
    .imennoe .swiper-container.swiper-container-h h6 {
        font-size: clamp(26px, 9.5vw, 46px) !important;
    }
    .slide-tl,
    .slide-tr {
        font-size: clamp(14px, 4.2vw, 20px) !important;
    }
    #slide-2 .slide-mt {
        font-size: clamp(24px, 8vw, 40px) !important;
    }
    #first-slide-d {
        margin: 22vw 0 0 5vw;
    }
    #information-winerywc {
        padding: 4rem 4vw 12vw;
    }
    #modal_sviaz {
        padding: 8vw 5vw 5vh;
    }
    .swiper-container-v .swiper-slide {
        width: 90vw !important;
    }
}