/* ==========================================
   RESPONSIVE.CSS — Move IT Education v4.0
   
   ОЧИЩЕНО від responsive-new.css:
   - Об'єднано 6 розрізнених @media (max-width: 768px)
     в один блок
   - Об'єднано 4 розрізнених @media (max-width: 480px)
     в один блок
   - Видалено надлишкові !important де вони дублюють
     значення з base.css
   ========================================== */


/* ==========================================
   TABLET (max-width: 1024px)
   ========================================== */

@media (max-width: 1024px) {
    .nav-container {
        max-width: 900px;
        padding: 10px 20px;
    }
}


/* ==========================================
   DESKTOP OVERRIDE
   ========================================== */

@media (min-width: 769px) {
    .nav-container {
        max-width: 1100px;
        padding: 10px 25px;
    }

    .main-nav {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* ==========================================
   MOBILE (max-width: 768px)
   Всі стилі для мобільних в одному блоці
   ========================================== */

@media (max-width: 768px) {

    /* ===== GLOBAL ===== */
    body {
        padding-top: 80px !important;
        font-size: 1.0625rem !important;
    }

    p,
    .island-description,
    .island-detail-item,
    .course-description,
    .lesson-description,
    .about-text,
    .mission-text,
    .timeline-description,
    .contact-text {
        font-size: 1.0625rem !important;
    }

    .container { padding: 0 10px !important; }

    /* ===== NAVIGATION ===== */
    .nav-menu { display: none; }
    .menu-toggle { display: flex; }

    .nav-container {
        max-width: calc(100% - 30px) !important;
        margin: 0 15px !important;
        padding: 8px 12px !important;
        border-radius: 18px !important;
    }

    .brand-icon { width: 110px !important; height: auto; }

    .menu-toggle { padding: 4px !important; margin-right: 0 !important; gap: 4px !important; }
    .hamburger { width: 22px !important; height: 2.5px !important; }

    .mobile-menu-overlay { padding-top: 80px !important; }
    .mobile-menu { padding: 0 20px !important; }
    .mobile-nav-item { margin-bottom: 6px !important; }
    .mobile-nav-link { padding: 14px 20px !important; font-size: 16px !important; border-radius: 15px !important; }
    .mobile-link-icon { font-size: 20px !important; }

    /* ===== TYPOGRAPHY ===== */
    .title { font-size: 3.8rem; }
    .title-cursive { font-size: 3.5rem; }
    .section-title { font-size: 1.2rem; padding: 15px 35px; }
    h2 { font-size: 12px; }
    .emoji { width: 80px; }

    /* ===== HIDE DECORATIONS ===== */
    .breadcrumb-nav,
    .section-dots { display: none !important; }

    .search-decoration, .deco-circle, .organic-bubble,
    .right-decoration, .right-circle,
    .exp-organic-bubble, .exp-right-decoration, .exp-right-circle,
    .decoration-2, .decoration-3, .decoration-4,
    .gallery-organic-bubble, .gallery-right-decoration, .gallery-right-circle,
    .island-deco, .island-bubble,
    .courses-bubble, .courses-decoration,
    .bubble-left-1, .bubble-left-2, .bubble-circle { display: none; }

    /* ===== HEADER CARD ===== */
    .block-card, .header-card { padding: 25px 18px 90px !important; }
    .card-content { grid-template-columns: 1fr; gap: 25px; }

    .decoration-1 { width: 120px !important; height: 120px !important; top: -30px !important; right: 10px !important; }
    .decoration-1 img { width: 100% !important; height: 100% !important; object-fit: contain !important; }

    .info-card { padding: 20px !important; margin-top: 15px !important; }
    .info-card h2 { margin-bottom: 12px !important; font-size: 16px !important; }
    .info-card p  { line-height: 1.6 !important; }

    /* ===== EXPLANATION ===== */
    .explanation-section { margin-top: 35px; }
    .exp-text-box { max-width: 100%; margin: 0 0 25px 0 !important; padding: 4px; }
    .exp-text-left p, .exp-text-right p { padding: 10px 14px !important; font-size: 1.05rem !important; line-height: 1.65 !important; }
    .exp-text-box h3, .exp-text-box h4 { font-size: 1.1rem; margin-bottom: 8px !important; text-align: center !important; padding: 0 8px; }
    .scroll-btn { padding: 18px 40px; font-size: 12px; }

    /* ===== GALLERY ===== */
    .gallery-section { margin-top: 35px; }
    .gallery-card { padding: 30px 20px; }
    .gallery-content { grid-template-columns: 1fr; gap: 30px; }
    .gallery-left { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .gallery-text h4 { font-size: 13px; }
    .gallery-text p  { font-size: 11px; }
    .gallery-text-large h4 { font-size: 16px; }
    .gallery-text-large p  { font-size: 12px; }
    .gallery-btn { width: 45px; height: 45px; }
    .gallery-btn svg { width: 22px; height: 22px; }
    .gallery-btn-add { width: 60px; height: 60px; }
    .gallery-btn-add svg { width: 30px; height: 30px; }

    /* ===== ISLANDS ===== */
    .about-section, .explanation-section, .gallery-section,
    .courses-creative-section, .timeline-section, .contacts-section { margin-top: 40px !important; }

    .about-main-card, .gallery-card, .courses-creative-card,
    .islands-main-card, .contacts-main-card { padding: 35px 20px !important; border-radius: 30px !important; }

    .islands-main-card { padding: 40px 20px; border-radius: 35px; }
    .islands-grid { gap: 25px !important; }

    .island-item { min-height: auto; border-radius: 30px; grid-template-columns: 1fr; grid-template-rows: 250px auto; }
    .island-bg    { order: 1 !important; }
    .island-content { order: 2 !important; padding: 20px 18px !important; gap: 8px !important; }
    .island-overlay { background: linear-gradient(180deg, transparent 0%, rgba(45,70,40,0.3) 70%, rgba(45,70,40,0.7) 100%) !important; }
    .island-icon    { font-size: 3rem; margin: 0 auto; }
    .island-age     { font-size: 1.6rem; }
    .island-subtitle { font-size: 1.1rem; }
    .island-description { font-size: 0.95rem; margin-bottom: 12px; }
    .island-details { padding: 12px 15px !important; border-radius: 20px; margin-bottom: 12px !important; }
    .island-detail-item { font-size: 0.9rem; margin-bottom: 8px !important; }
    .island-btn { padding: 12px 30px; font-size: 0.95rem; border-radius: 30px; }

    /* ===== ABOUT ===== */
    .formats-grid { grid-template-columns: 1fr !important; gap: 25px !important; }
    .formats-section { margin-bottom: 30px !important; }
    .formats-title { margin-bottom: 30px !important; }
    .format-card { padding: 28px 22px !important; border: 2px solid rgba(255,165,112,0.3); }
    .format-icon { font-size: 2.5rem !important; margin-bottom: 15px !important; }
    .format-name { font-size: 1.05rem !important; margin-bottom: 15px !important; }
    .format-features li { font-size: 1.0625rem !important; line-height: 1.65 !important; padding: 8px 0 !important; padding-left: 30px !important; }
    .format-features li::before { font-size: 1.1rem !important; }
    .common-features { padding: 25px 20px !important; }

    .intro-block { margin-bottom: 35px !important; }
    .intro-title { margin-bottom: 18px !important; }
    .intro-subtitle { margin-bottom: 15px !important; }
    .mission-block { padding: 30px !important; margin-bottom: 35px !important; }
    .mission-title { margin-bottom: 15px !important; }

    /* ===== COURSES ===== */
    .courses-creative-card { padding: 40px 25px; border-radius: 35px; }
    .courses-creative-grid { grid-template-columns: 1fr; gap: 25px; }
    .course-creative-content { padding: 18px 22px 22px !important; }
    .course-creative-title { font-size: 1.3rem; }
    .course-creative-desc  { font-size: 0.9rem; margin-bottom: 15px !important; }
    .course-hover-icon { font-size: 2.5rem; top: 15px; right: 15px; }

    /* ===== CAROUSEL ===== */
    .carousel-card-title       { font-size: 0.9rem !important; }
    .carousel-card-description { font-size: 0.7rem !important; line-height: 1.4 !important; }

    /* ===== TIMELINE ===== */
    .timeline-item { margin-bottom: 30px !important; }
    .timeline-text { padding: 20px !important; }
    .timeline-description { margin-bottom: 12px !important; }

    /* ===== CONTACTS ===== */
    .contacts-main-card { padding: 35px 20px !important; border-radius: 30px !important; }
    .contacts-subtitle  { font-size: 1.5rem !important; margin-bottom: 25px !important; }
    .contacts-bubble    { display: none !important; }
    .social-media-block { margin-bottom: 35px !important; }
    .social-links-grid  { gap: 12px !important; padding: 0 10px !important; }
    .social-link        { width: 65px !important; height: 65px !important; }
    .social-icon svg    { width: 28px !important; height: 28px !important; }

    .contact-info-block   { margin-bottom: 35px !important; }
    .contact-items        { grid-template-columns: 1fr !important; gap: 18px !important; padding: 0 !important; }
    .contact-item         { padding: 18px 15px !important; border-radius: 20px !important; gap: 15px !important; }
    .contact-icon         { width: 45px !important; height: 45px !important; min-width: 45px !important; border-radius: 12px !important; }
    .contact-icon svg     { width: 24px !important; height: 24px !important; }
    .contact-label        { font-size: 0.8rem !important; }
    .contact-value        { font-size: 0.95rem !important; }

    .locations-grid       { grid-template-columns: 1fr !important; gap: 25px !important; }
    .location-card        { padding: 25px 20px !important; border-radius: 25px !important; }
    .location-title       { font-size: 1.2rem !important; margin-bottom: 15px !important; }
    .location-content     { grid-template-columns: 1fr !important; gap: 12px !important; margin-bottom: 15px !important; }
    .location-image, .location-map { aspect-ratio: 16/9 !important; border-radius: 15px !important; }
    .location-badge       { padding: 6px 12px !important; font-size: 0.75rem !important; top: 8px !important; right: 8px !important; }
    .location-address     { padding: 15px !important; border-radius: 15px !important; gap: 12px !important; margin-bottom: 15px !important; }
    .address-icon         { width: 35px !important; height: 35px !important; min-width: 35px !important; border-radius: 10px !important; }
    .address-icon svg     { width: 20px !important; height: 20px !important; }
    .location-address p   { font-size: 0.95rem !important; line-height: 1.5 !important; }
    .location-btn         { padding: 12px 24px !important; font-size: 0.95rem !important; border-radius: 20px !important; }
    .location-btn svg     { width: 18px !important; height: 18px !important; }
    .location-map iframe  { width: 100% !important; height: 100% !important; }

    .main-nav { width: 100% !important; left: 0 !important; right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }

    /* ===== FORMAT FEATURES GLOBAL ===== */
    .format-features li { font-size: 1.0625rem !important; }
    .common-text { font-size: 1.0625rem !important; line-height: 1.65 !important; }
}


/* ==========================================
   600px breakpoint
   ========================================== */

@media (max-width: 600px) {
    .nav-container { max-width: calc(100% - 40px) !important; margin: 0 20px !important; padding: 7px 10px !important; border-radius: 16px !important; }
    .brand-icon { width: 100px !important; }
    .hamburger { width: 20px !important; }
    body { padding-top: 75px !important; }

    .decoration-1 { width: 110px !important; height: 110px !important; top: -25px !important; right: 8px !important; }
    .block-card, .header-card { padding: 20px 15px 80px !important; }

    .contacts-main-card  { padding: 30px 18px !important; border-radius: 25px !important; }
    .contacts-subtitle   { font-size: 1.4rem !important; margin-bottom: 20px !important; }
    .social-links-grid   { gap: 10px !important; }
    .social-link         { width: 58px !important; height: 58px !important; }
    .social-icon svg     { width: 26px !important; height: 26px !important; }
    .contact-items       { gap: 15px !important; }
    .contact-item        { padding: 15px 12px !important; }
    .contact-icon        { width: 40px !important; height: 40px !important; min-width: 40px !important; }
    .contact-icon svg    { width: 22px !important; height: 22px !important; }
    .locations-grid      { gap: 20px !important; }
    .location-card       { padding: 20px 15px !important; }
    .location-title      { font-size: 1.15rem !important; }
    .location-content    { gap: 10px !important; }
    .location-address    { padding: 12px !important; }
    .location-btn        { padding: 10px 20px !important; font-size: 0.9rem !important; }
}


/* ==========================================
   SMALL MOBILE (max-width: 480px)
   ========================================== */

@media (max-width: 480px) {

    /* ===== GLOBAL ===== */
    body { padding-top: 70px !important; font-size: 1.0625rem !important; }

    p,
    .island-description, .island-detail-item,
    .course-description, .lesson-description,
    .about-text, .mission-text, .timeline-description, .contact-text {
        font-size: 1.0625rem !important;
    }

    .container { padding: 0 8px !important; }

    /* ===== NAVIGATION ===== */
    .nav-container { max-width: calc(100% - 24px) !important; margin: 0 12px !important; padding: 6px 10px !important; border-radius: 15px !important; }
    .brand-icon { width: 90px !important; }
    .hamburger  { width: 18px !important; height: 2px !important; }
    .menu-toggle { gap: 3px !important; }
    .mobile-menu-overlay { padding-top: 70px !important; }
    .mobile-nav-link { padding: 12px 18px !important; font-size: 15px !important; }

    /* ===== TYPOGRAPHY ===== */
    .section-title { font-size: 1.5rem; padding: 12px 30px; }

    /* ===== LAYOUT ===== */
    .block-card, .header-card { padding: 18px 12px 70px !important; }
    .about-main-card, .gallery-card, .courses-creative-card,
    .islands-main-card, .contacts-main-card { padding: 25px 15px !important; border-radius: 25px !important; }
    .info-card { padding: 15px !important; }
    .exp-text-left p, .exp-text-right p { padding: 8px 12px !important; }
    .exp-text-box { padding: 3px; }
    .exp-text-box h3, .exp-text-box h4 { font-size: 1rem; margin-bottom: 10px; padding: 0 8px; }

    /* ===== DECORATIONS ===== */
    .decoration-1 { width: 100px !important; height: 100px !important; top: -20px !important; right: 5px !important; }

    /* ===== ABOUT ===== */
    .format-card    { padding: 22px 18px !important; }
    .format-name    { font-size: 1rem !important; margin-bottom: 12px !important; }
    .format-icon    { margin-bottom: 12px !important; }
    .format-features li { padding: 6px 0 !important; padding-left: 28px !important; }
    .mission-block  { padding: 25px !important; margin-bottom: 30px !important; }
    .common-features { padding: 20px !important; }

    /* ===== SECTIONS ===== */
    .about-section, .explanation-section, .gallery-section,
    .courses-creative-section, .timeline-section, .contacts-section { margin-top: 30px !important; }

    /* ===== ISLANDS ===== */
    .islands-main-card { padding: 30px 15px; border-radius: 30px; }
    .island-item { border-radius: 25px; grid-template-rows: 220px auto; }
    .island-content { padding: 18px 15px !important; gap: 6px !important; }
    .island-icon    { font-size: 2.5rem; }
    .island-age     { font-size: 1.4rem; }
    .island-subtitle { font-size: 1rem; }
    .island-description { font-size: 0.9rem; }
    .island-details { padding: 10px 12px !important; }
    .island-detail-item { font-size: 0.85rem; }
    .island-btn { padding: 10px 25px; font-size: 0.9rem; }

    /* ===== COURSES ===== */
    .courses-creative-card { padding: 30px 20px; border-radius: 30px; }
    .course-creative-inner { border-radius: 25px; }
    .course-creative-content { padding: 15px 18px 18px !important; }
    .course-creative-title { font-size: 1.2rem; }
    .course-creative-desc  { font-size: 0.85rem; margin-bottom: 18px; }
    .course-creative-btn   { padding: 10px 24px; font-size: 0.9rem; }

    /* ===== CAROUSEL ===== */
    .carousel-card-title       { font-size: 0.85rem !important; }
    .carousel-card-description { font-size: 0.65rem !important; }

    /* ===== TIMELINE ===== */
    .timeline-text { padding: 18px !important; }

    /* ===== CONTACTS ===== */
    .contacts-main-card { padding: 25px 15px !important; border-radius: 20px !important; }
    .contacts-subtitle  { font-size: 1.3rem !important; margin-bottom: 18px !important; }
    .social-links-grid  { gap: 8px !important; padding: 0 5px !important; }
    .social-link        { width: 52px !important; height: 52px !important; }
    .social-icon svg    { width: 24px !important; height: 24px !important; }
    .social-name        { font-size: 0.7rem !important; padding: 4px 8px !important; }
    .contact-items      { gap: 12px !important; }
    .contact-item       { padding: 12px 10px !important; border-radius: 15px !important; gap: 12px !important; }
    .contact-icon       { width: 38px !important; height: 38px !important; min-width: 38px !important; }
    .contact-icon svg   { width: 20px !important; height: 20px !important; }
    .contact-label      { font-size: 0.75rem !important; }
    .contact-value      { font-size: 0.9rem !important; }
    .location-card      { padding: 18px 12px !important; border-radius: 20px !important; }
    .location-title     { font-size: 1.1rem !important; margin-bottom: 12px !important; }
    .location-content   { gap: 8px !important; margin-bottom: 12px !important; }
    .location-image, .location-map { border-radius: 12px !important; }
    .location-badge     { padding: 5px 10px !important; font-size: 0.7rem !important; border-radius: 15px !important; }
    .location-address   { padding: 10px !important; border-radius: 12px !important; gap: 10px !important; margin-bottom: 12px !important; }
    .address-icon       { width: 32px !important; height: 32px !important; min-width: 32px !important; }
    .address-icon svg   { width: 18px !important; height: 18px !important; }
    .location-address p { font-size: 0.9rem !important; }
    .location-btn       { padding: 10px 18px !important; font-size: 0.85rem !important; border-radius: 18px !important; }
    .location-btn svg   { width: 16px !important; height: 16px !important; }
}


/* ==========================================
   VERY SMALL (max-width: 390px)
   ========================================== */

@media (max-width: 390px) {
    .nav-container { max-width: calc(100% - 20px) !important; margin: 0 10px !important; padding: 6px 8px !important; }
    .brand-icon { width: 85px !important; }

    .contacts-main-card { padding: 20px 12px !important; }
    .social-link { width: 48px !important; height: 48px !important; }
    .social-icon svg { width: 22px !important; height: 22px !important; }
    .contact-item { padding: 10px 8px !important; }
    .location-card { padding: 15px 10px !important; }
}


/* ==========================================
   GLOBAL OVERRIDES (not breakpoint-specific)
   ========================================== */

.format-features li {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

.common-text {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.95) !important;
}