/**
 * Intro Block Styles
 * Блок "Про нас" - простий заголовок + текст
 * Базується на Tilda дизайні
 * 
 * @package MyFood
 * @since 1.0
 */

/* ==========================================================================
   BASE BLOCK STYLES
   ========================================================================== */

.block-intro {
    position: relative;
    width: 100%;
    min-height: 240px;
    background-color: #ffffff;
    padding: 65px 0 0; /* БЕЗ нижнього відступу для злиття з Mission Block */
    overflow: hidden;
}

/* Container */
.block-intro .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

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

.intro__content {
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

/* Заголовок */
.intro__title {
    color: #3a3d4e;
    font-size: 48px;
    font-family: 'Gilroy', Arial, sans-serif;
    line-height: 1.55;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
    margin: 0 0 0; /* Мінімальний відступ (як в Tilda) */
}

/* Опис (rich text) */
.intro__description {
    color: #000000;
    font-size: 16px;
    font-family: 'Gilroy', Arial, sans-serif;
    line-height: 2;
    font-weight: 400;
    text-align: center;
    margin: 0;
    margin-top: 0; /* Мінімальний відступ від заголовка */
}

/* Параграфи */
.intro__description p {
    margin: 0 0 16px;
}

.intro__description p:last-child {
    margin-bottom: 0;
}

/* Bold текст */
.intro__description strong,
.intro__description b {
    font-weight: 600;
    color: #3a3d4e;
}

/* Italic текст */
.intro__description em,
.intro__description i {
    font-style: italic;
}

/* Посилання */
.intro__description a {
    color: #ff8562;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.intro__description a:hover {
    opacity: 0.7;
    text-decoration: underline;
}

/* Списки */
.intro__description ul,
.intro__description ol {
    margin: 0 0 16px;
    padding-left: 30px;
    text-align: left;
    display: inline-block;
}

.intro__description li {
    margin-bottom: 8px;
}

.intro__description li:last-child {
    margin-bottom: 0;
}

/* Breaks */
.intro__description br {
    line-height: 0;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (як в Tilda)
   ========================================================================== */

/* Tablet Large: <= 1199px */
@media screen and (max-width: 1199px) {
    .block-intro {
        padding: 80px 0 0;
    }
}

/* Tablet: <= 959px */
@media screen and (max-width: 959px) {
    .block-intro {
        padding: 35px 0 0;
    }
    
    .intro__content {
        max-width: 620px;
    }
}

/* Mobile Large: <= 639px */
@media screen and (max-width: 639px) {
    .block-intro {
        padding: 35px 0 0;
    }
    
    .intro__title {
        font-size: 38px;
    }
    
    .intro__content {
        max-width: 370px;
    }
}

/* Mobile: <= 479px */
@media screen and (max-width: 479px) {
    .block-intro {
        min-height: 300px;
        padding: 40px 0 0;
    }
    
    .intro__title {
        font-size: 26px;
        margin-bottom: 0;
    }
    
    .intro__content {
        max-width: 300px;
    }
}

/* ==========================================================================
   PERFORMANCE OPTIMIZATIONS (Google PageSpeed)
   ========================================================================== */

/* CSS Containment для ізоляції (покращує rendering performance) */
.block-intro {
    contain: style;
    content-visibility: auto; /* Lazy rendering для off-screen блоків */
    contain-intrinsic-size: auto 240px; /* Резервний розмір для content-visibility */
}

/* Prevent layout shift (CLS optimization) */
.intro__content {
    contain: layout style paint; /* Ізолює layout розрахунки */
}

/* Оптимізація для rich text елементів */
.intro__description {
    contain: style; /* Ізолює стилі параграфів */
}

/* GPU acceleration для links hover */
.intro__description a {
    will-change: opacity; /* Підказка браузеру для оптимізації */
    backface-visibility: hidden;
}

/* Оптимізація transform для кращого performance */
.intro__description a:hover {
    transform: translateZ(0); /* GPU layer */
}