/* ----css/hero.css---- */

/* ==========================================================================
   ГЛАВНЫЙ ЭКРАН (HERO SECTION) — ИДЕАЛЬНЫЙ ЦЕНТР И КАЛЛИГРАФИЯ НА ПК
   ========================================================================== */

.hero-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    padding: 60px 20px; 
    text-align: center;
    background-color: #FDFDFD;
    background-image: url('../images/bg-block-1.webp') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: scroll !important;
    font-family: 'Inter', sans-serif !important;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* 1. НАДПИСЬ ВВЕРХУ ШАПКИ — ИСХОДНЫЙ СТРОГИЙ ВИД */
.hero-top-text {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.95rem; 
    letter-spacing: 7px; 
    color: #1A1A1A;
    margin-bottom: 60px; 
    font-weight: 300;
}

/* В покое (на компьютере) мобильный блок полностью скрыт */
.hero-mobile-layout {
    display: none !important;
}

.hero-pc-layout {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.polaroid-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 65px; 
    margin-bottom: 50px; 
    width: 100%;
    max-width: 1100px;
    z-index: 2;
}

.polaroid-card {
    background: #FFFFFF;
    padding: 20px 20px 24px 20px; 
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.05);
    border: 1px solid #EEEEEE;
    width: 280px; 
    transition: transform 0.4s ease;
}

.pic-left { transform: rotate(-8deg) translateY(10px); }
.pic-right { transform: rotate(6deg) translateY(-10px); }

.polaroid-card:hover { transform: rotate(0deg) scale(1.05); }

.polaroid-img {
    width: 100%;
    height: 280px; 
    background-size: cover;
    background-position: center;
}

/* 2. ПОДПИСИ ПОЛАРОИДОВ К ЛЕВОМУ КРАЮ */
.polaroid-text {
    font-family: 'Tiny5', sans-serif !important; 
    font-size: 1.4rem !important; 
    font-weight: 400 !important;
    color: #1A1A1A !important;
    margin-top: 15px !important;
    text-align: left !important; /* ➔ ИСПРАВЛЕНО: Выравнивание строго по левому краю */
    padding-left: 5px !important; /* Легкий защитный отступ от рамки */
    line-height: 1 !important;
    letter-spacing: 0px !important;
}

.hero-center-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    z-index: 2;
}

.date-digit {
    font-family: 'Cormorant', serif;
    font-size: 3.8rem; 
    font-weight: 300;
    line-height: 0.9;
    color: #1A1A1A !important;
}

.italic-digit { font-style: italic; padding-left: 5px; }

/* 3. БОЛЬШАЯ НАДПИСЬ — КОРРЕКТИРУЕМ РАЗМЕР И СМЕЩАЕМ НИЖЕ */
.hero-main-title {
    font-family: 'Great Vibes', cursive !important; 
    font-size: 5.2rem !important; /* ➔ ИСПРАВЛЕНО: Уменьшили размер */
    font-weight: 400 !important;
    text-transform: none !important; /* ➔ ИСПРАВЛЕНО: Отменили капс для регистра "Как в предложениях" */
    letter-spacing: 0px !important; 
    color: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin-top: 55px; /* ➔ ИСПРАВЛЕНО: Сместили имена ниже от полароидов */
    z-index: 2;
    line-height: 1 !important;
}

.title-plus { 
    font-family: 'Great Vibes', serif !important; 
    font-weight: 300 !important; 
    font-size: 5.5rem !important; 
    color: #999999; 
    position: relative; 
    top: 10px; 
}

/* ==========================================================================
   УЛЬТРА-СОВРЕМЕННАЯ МОБИЛЬНАЯ ВЕРСИЯ (ВКЛЮЧАЕТСЯ НА ЭКРАНАХ ДО 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Скрываем под корень ПК-разметку, активируем мобильную */
    .hero-pc-layout { 
        display: none !important; 
    }
    
    .hero-mobile-layout { 
        display: flex !important; 
        flex-direction: column !important; 
        align-items: center !important; 
        width: 100% !important;
        height: 82vh !important; 
        justify-content: space-between !important; 
        padding: 10px 0 !important;
        box-sizing: border-box !important;
    }
    
    .hero-section { 
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        padding: 50px 15px 50px 15px !important; /* Увеличили верхний отступ, чтобы опустить контент */
        box-sizing: border-box !important;
    }
    
    .hero-top-text { 
        font-family: 'Inter', sans-serif !important;
        font-size: 0.85rem !important;
        letter-spacing: 6px !important;
        margin-bottom: 0 !important; 
        width: 100% !important;
        text-align: center !important;
    }

    /* 1. ИСПРАВЛЕННЫЙ КОНТЕЙНЕР ПОЛАРОИДОВ (ОПУСТИЛИ НИЖЕ И СБАЛАНСИРОВАЛИ) */
    .polaroid-container-mob {
        display: flex !important;
        position: relative !important;
        width: 100% !important;
        height: 270px !important; /* Увеличили высоту, чтобы дать карточкам разойтись по вертикали */
        justify-content: center !important;
        margin: 20px 0 10px 0 !important;
    }

    .polaroid-container-mob .polaroid-card {
        background: #FFFFFF !important;
        width: 155px !important; /* ➔ МАСШТАБ: Увеличили размер на 15% */
        padding: 10px 10px 18px 10px !important; /* Пропорционально увеличили поля */
        position: absolute !important;
        box-shadow: 0 12px 30px rgba(0,0,0,0.06) !important;
        border: 1px solid #EEEEEE !important;
        box-sizing: border-box !important;
    }

    .pic-right-mob {
        top: 0px !important; 
        left: calc(50% - 150px) !important; /* ➔ РАЗВЕЛИ ШИРЕ: Сместили дальше влево */
        transform: rotate(-12deg) !important; 
        z-index: 2 !important;
    }

    .pic-left-mob {
        top: 140px !important; /* ➔ УВЕЛИ НА ПОЛОВИНУ ВЫСОТЫ ВНИЗ: Опустили глубоко по вертикали */
        right: calc(50% - 150px) !important; /* ➔ РАЗВЕЛИ ШИРЕ: Сместили дальше вправо наружу */
        transform: rotate(14deg) !important; 
        z-index: 3 !important; /* Мягко ложится поверх шлейфа верхней карточки */
    }

    .polaroid-container-mob .polaroid-img { 
        width: 100% !important;
        height: 145px !important; /* Пропорционально увеличили высоту самого снимка */
        background-size: cover !important;
        background-position: center !important;
    }

    .polaroid-container-mob .polaroid-text { 
        font-family: 'Tiny5', sans-serif !important;
        font-size: 1.3rem !important; /* Чуть увеличили шрифт под размер карточки */
        margin-top: 10px !important; 
        text-align: left !important;
        padding-left: 4px !important;
        color: #1A1A1A !important;
        line-height: 1 !important;
        letter-spacing: 0px !important;
        display: block !important;
        text-transform: none !important;
    }

    /* 2. БЛОК ИМЁН: СБАЛАНСИРОВАННЫЙ АМПЕРСАНД ПО ЦЕНТРУ */
    .hero-names-wrapper {
        position: relative !important;
        width: 280px !important; 
        display: flex !important;
        flex-direction: column !important;
        margin: 30px 0 !important;
    }

	.hero-name-left {
		font-family: 'Great Vibes', cursive !important;
		font-size: 3.4rem !important; /* Настроили сочный размер для курсива */
		font-weight: 400 !important;
		text-transform: none !important;
		letter-spacing: 0px !important;
		text-align: left !important;
		width: 100% !important;
		display: block !important;
		position: relative !important;
		z-index: 5 !important;
		color: #111111 !important;
		line-height: 1.2 !important;
	}

	.hero-name-right {
		font-family: 'Great Vibes', cursive !important;
		font-size: 3.4rem !important;
		font-weight: 400 !important;
		text-transform: none !important;
		letter-spacing: 0px !important;
		text-align: right !important;
		width: 100% !important;
		display: block !important;
		position: relative !important;
		z-index: 5 !important;
		color: #111111 !important;
		line-height: 1.2 !important;
	}

		/* ИЗЯЩНЫЙ И БОЛЕЕ ЯРКИЙ АМПЕРСАНД МЕНЬШЕГО РАЗМЕРА */
	.title-plus-bg {
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		font-family: 'Great Vibes', cursive !important; /* Тоже переключаем на красивый витиеватый амперсанд */
		font-size: 5.5rem !important;
		font-weight: 100 !important;
		color: rgba(167, 149, 135, 0.35) !important;
		z-index: 1 !important;
		pointer-events: none !important;
		line-height: 1 !important;
	}

    /* 3. ДАТА: ПЕРЕКЛЮЧАЕМ НА БЛАГОРОДНЫЙ И ТОНКИЙ CORMORANT */
    .hero-classic-date {
        font-family: 'Cormorant', Georgia, serif !important; /* Тот же шрифт, что и для имён */
        font-size: 1.8rem !important; /* Увеличили размер, так как шрифт сам по себе тоньше */
        font-weight: 300 !important; /* Изящное тонкое начертание без жирности */
        color: #1A1A1A !important;
        letter-spacing: 4px !important; /* Элегантный свадебный разряд букв */
        width: 100% !important;
        text-align: center !important;
        margin-top: 20px !important;
    }
}

/* ----css/hero.css (КОНЕЦ ФАЙЛА)---- */