/* =========================================
   ABOUT.CSS - За нас (Стабилен и Премиум)
   ========================================= */

/* --- ХИРО БАНЕР --- */
.about-hero {
    position: relative; padding: 250px 0 350px 0; background-color: #222;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    border-radius: 0 0 35px 35px; box-shadow: 0 15px 40px rgba(0,0,0,0.15); overflow: hidden;
}
.about-hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(0, 139, 139, 0.075) 0%, rgba(148, 112, 219, 0.103) 100%); z-index: 1;
}
.relative-z { position: relative; z-index: 2; }
.about-main-title { color: rgba(0, 152, 163, 0.486); font-size: 3.8rem; font-family: var(--font-heading); margin-bottom: 15px; text-shadow: 0 4px 15px rgba(0, 0, 0, 0.199);}
.about-sub-title { color: rgba(125, 0, 163, 0.486); font-size: 1.15rem; opacity: 0.95; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.13); font-weight: 600;}

/* --- ЦИТАТ / МОТО --- */
.quote-section { margin: -60px auto 60px auto; position: relative; z-index: 10; max-width: 950px; padding: 0 20px; transition: transform 0.6s ease; }
.quote-section:hover { transform: translateY(-6px); }
.quote-box {
    background: white; padding: 50px; border-radius: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.08); 
    text-align: center; position: relative; border-bottom: 5px solid var(--color-accent);
}
.quote-icon { font-size: 3rem; color: rgba(139, 56, 0, 0.15); position: absolute; top: 30px; left: 50%; transform: translateX(-50%); }
.quote-box blockquote {
    font-family: var(--font-heading); font-size: 1.5rem; color: #444; line-height: 1.8; 
    font-style: italic; position: relative; z-index: 2; margin: 0; padding-top: 30px;
}
.quote-author { margin-top: 20px; font-weight: 700; color: var(--color-accent); letter-spacing: 1px; text-transform: uppercase; font-size: 0.9rem;}

/* --- РАЗДЕЛИТЕЛИ НА ЧАСТИТЕ --- */
.about-part { padding: 60px 0 80px 0; }
.bg-light { background: linear-gradient(to bottom, #fff, #fbf9ff); border-top: 2px dashed #e0e0e0; }

.section-divider {
    display: flex; align-items: center; justify-content: center; gap: 20px;
    margin-bottom: 60px; text-align: center;
}
.divider-line {
    height: 1px; width: 100px; background: #ddd;
    position: relative;
}
.divider-line::after {
    content: '✦'; position: absolute; top: -10px; color: var(--color-primary); font-size: 0.8rem;
}
.section-divider h2 {
    font-family: var(--font-heading); font-size: 2.2rem; color: var(--color-primary); margin: 0;
}

/* --- ОБЩИ РЕДОВЕ И СНИМКИ (СТАБИЛНИ) --- */
.about-row { display: flex; align-items: center; gap: 70px; margin-bottom: 90px; }
.about-row.reverse { flex-direction: row-reverse; }

.about-image-wrap {
    flex:1; min-width:53%; height:66%; background:#D2691E; border-radius:30px; display:flex; align-items:center; justify-content:center; overflow:hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.about-image-wrap img { width: 50%; height: 50%; object-fit: cover; transition: transform 0.6s ease; display: block; align-items:center; justify-content:center;}
.about-row:hover .about-image-wrap { transform: translateY(-8px); box-shadow: 0 25px 45px rgba(0,0,0,0.12); }
.about-row:hover .about-image-wrap img { transform: scale(1.05); }

.about-text-wrap { flex: 1; }

.badge {
    display: inline-block; padding: 8px 20px; background: rgba(0, 139, 139, 0.1); 
    color: var(--color-primary); border-radius: 30px; font-size: 0.85rem; 
    font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px;
}
.badge-purple { background: rgba(147, 112, 219, 0.1); color: var(--color-secondary); }
.badge-orange { background: rgba(210, 105, 30, 0.1); color: var(--color-accent); }

.about-text-wrap h3 { font-family: var(--font-heading); font-size: 2.4rem; margin-bottom: 25px; color: #222; line-height: 1.3;}
.about-text-wrap p { font-size: 1.1rem; color: #555; line-height: 1.8; margin-bottom: 20px;}

/* --- СПЕЦИАЛНИ ЕЛЕМЕНТИ --- */

/* 1. Сертификат и Легитимност */
.cert-wrap {
    flex:1; min-width:13%; height:16%; overflow: visible !important; background: transparent; box-shadow: none; padding: 15px; border-radius: 15px; position: relative;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.cert-image  { width: 100%; height: auto; object-fit:cover; transition: transform 0.6s ease; display: block; align-items:center; justify-content:center; border-radius: 8px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.1);}
.about-row:hover .cert-image-wrap { transform: translateY(-8px); box-shadow: 0 25px 45px rgba(0,0,0,0.12); }
.about-row:hover .cert-image-wrap img { transform: scale(1.05); }

.cert-seal {
    position: absolute; bottom: -15px; right: -15px; width: 70px; height: 70px;
    background: var(--color-accent); color: white; border-radius: 50%; transition: transform 0.6s ease;
    display: flex; align-items: center; justify-content: center; font-size: 2rem;
    box-shadow: 0 10px 20px rgba(210, 105, 30, 0.3); border: 4px solid white; z-index: 5;
}
.cert-seal:hover { transform: rotateX(-15px); box-shadow: 0 25px 45px rgba(0,0,0,0.12); }

.legal-card {
    display: flex; gap: 20px; background: #fdfbf7; padding: 25px; transition: transform 0.6s ease;
    border-radius: 20px; border-left: 4px solid var(--color-accent); margin-top: 30px;
}
.legal-card:hover { transform: translateX(4px); box-shadow: 0 25px 45px rgba(0,0,0,0.12); }
.legal-card i { font-size: 2rem; color: var(--color-accent); }
.legal-card h4 { font-family: var(--font-heading); font-size: 1.2rem; color: #333; margin-bottom: 8px;}
.legal-card p { font-size: 0.95rem; color: #666; line-height: 1.5; margin: 0;}

/* 2. Статистики за Макраме */
.craft-stats { display: flex; gap: 20px; margin-top: 30px; }
.c-stat { 
    flex: 1; text-align: center; background: white; padding: 20px 10px; transition: transform 0.6s ease;
    border-radius: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); border: 1px solid #f9f9f9;
}
.c-stat:hover { transform: translateY(-4px); box-shadow: 0 25px 45px rgba(0,0,0,0.12); }
.c-stat i { display: block; font-size: 1.8rem; color: var(--color-primary); margin-bottom: 10px;}
.c-stat strong { display: block; font-size: 1.8rem; font-family: var(--font-heading); color: #333; line-height: 1;}
.c-stat span { font-size: 0.9rem; color: #777; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; margin-top: 5px; display: block;}

/* 3. Съставки (Кристали и Билки) */
.ingredients-grid { display: flex; flex-direction: column; gap: 20px; margin-top: 30px; }
.ing-card {
    display: flex; align-items: flex-start; gap: 20px; background: white; transition: transform 0.6s ease;
    padding: 20px; border-radius: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.04); border-left: 5px solid var(--color-secondary);
}
.ing-card:hover { transform: translateX(+6px); box-shadow: 0 25px 45px rgba(0,0,0,0.12); }

.ing-card1 {
    display: flex; align-items: flex-start; gap: 20px; background: white; transition: transform 0.6s ease;
    padding: 20px; border-radius: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.04); border-left: 5px solid var(--color-accent);
}
.ing-card1:hover { transform: translateX(+6px); box-shadow: 0 25px 45px rgba(0,0,0,0.12); }

.ing-icon { 
    width: 60px; height: 60px; border-radius: 15px; display: flex; transition: transform 0.6s ease;
    align-items: center; justify-content: center; font-size: 1.8rem; flex-shrink: 0; 
}
.ing-icon:hover { transform: translateY(-4px); box-shadow: 0 25px 45px rgba(0,0,0,0.12); }
.ing-card h4, .ing-card1 h4 { font-family: var(--font-heading); font-size: 1.3rem; color: #333; margin-bottom: 8px;}
.ing-card p, .ing-card1 p { font-size: 0.95rem; color: #666; line-height: 1.5; margin: 0;}

/* --- РЕДОВЕ ЗА МАТЕРИАЛИТЕ --- */
.materials-about-row { display: flex; align-items: center; gap: 70px; margin-bottom: 90px; }
.materials-about-row.reverse { flex-direction: row-reverse; }

.materials-about-image-wrap {
    flex: 1; border-radius: 30px; overflow: hidden; aspect-ratio: 4 / 3;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08); background: #f0f0f0;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.materials-about-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; display: block;}
.materials-about-row:hover .materials-about-image-wrap { transform: translateY(-8px); box-shadow: 0 25px 45px rgba(0,0,0,0.12); }
.materials-about-row:hover .materials-about-image-wrap img { transform: scale(1.05); }

/* --- CALL TO ACTION --- */
.cta-section { padding: 100px 0; background: #fff; border-top: 1px solid #eee; border-bottom: 2px solid #eee; border-radius: 35px; margin-top: 0; }
.cta-section h2 { font-family: var(--font-heading); font-size: 2.8rem; color: var(--color-secondary); margin-bottom: 20px;}
.cta-section p { font-size: 1.2rem; color: #666; max-width: 600px; margin: 0 auto 30px auto;}

/* =========================================
   МОБИЛНА ВЕРСИЯ - ПОПРАВЕНА
   ========================================= */
@media (max-width: 900px) {
    .about-hero { padding: 80px 0 60px 0; border-radius: 0 0 30px 30px; }
    .about-main-title { font-size: 2.5rem; }
    .quote-box { padding: 30px 20px; }
    .quote-box blockquote { font-size: 1.2rem; }
    
    /* Обръщаме всички редове в колони (без да чупим .about-part) */
    .about-row, .about-row.reverse,
    .materials-about-row, .materials-about-row.reverse { 
        flex-direction: column; 
        gap: 40px; 
        margin-bottom: 60px;
    }
    
    /* Оправяме снимките с цветен фон да не се сплескват */
    .about-image-wrap { 
        width: 100%; 
        min-width: 100%; 
        height: auto; 
    }
    
    .cert-wrap {
        width: 100%;
        min-width: 100%;
        height: auto;
    }

    /* Оправяме нормалните снимки */
    .materials-about-image-wrap { 
        width: 100%; 
        height: auto;
        aspect-ratio: 4 / 3; 
    }
    
    /* Малко уголемяваме вътрешните снимки на телефон, за да не са съвсем миниатюрни */
    .about-image-wrap img { width: 65%; height: 65%; }

    .about-text-wrap h3 { font-size: 2rem; text-align: center;}
    .about-text-wrap p { text-align: center; }
    .badge { display: block; width: fit-content; margin: 0 auto 15px auto; }
    
    .legal-card { flex-direction: column; text-align: center; align-items: center; }
    
    
    /* ДОБАВЕН .ing-card1 да се подравнява като .ing-card */
    .ing-card, .ing-card1 { 
        flex-direction: column; 
        text-align: center; 
        align-items: center; 
    }
    
    .section-divider h2 { font-size: 1.8rem; }
    .divider-line { width: 50px; }
}
@media (max-width: 600px) {
.craft-stats { flex-direction: column; }
}