/* =========================================
   Kalika Edu - Responsive & Animations
   ========================================= */

/* --- Animations --- */
@keyframes scroll-ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Specific enhancement for image reveals */
.about-image.slide-in-right,
.success-image.slide-in-right {
    transform: translateX(50px) scale(0.98);
}

.visible {
    opacity: 1;
    transform: translate(0) scale(1) !important;
}

@media (prefers-reduced-motion: reduce) {

    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* --- Responsive Media Queries --- */

/* Mobile Navigation Breakpoint (1200px) */
@media (max-width: 1199px) {
    .nav-links {
        display: none;
    }

    /* Hide CTA on tablet and mobile */
    .header-actions .btn {
        display: none;
    }

    /* Mobile Menu Overlay */
    .nav-links.mobile-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 80px; /* Header height */
        left: 0;
        right: 0; /* Attach to right edge as well */
        width: 100%;
        max-width: 100vw; /* Hard limit */
        height: calc(100vh - 80px);
        background-color: white;
        z-index: 1000;
        padding: 2rem;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box; /* Crucial for padding inclusion */
        gap: 1.5rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .nav-links.mobile-open a {
        font-size: 1.25rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Guarantee icon ignores desktop hover on mobile */
    .dropdown-icon {
        transform: none !important;
    }

    .nav-dropdown.open .dropdown-icon {
        transform: rotate(180deg) !important;
    }

    .nav-dropdown {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .dropdown-menu {
        position: static !important;
        box-shadow: none !important;
        padding: 0;
        padding-left: 1rem;
        margin-left: 0;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
        max-height: 0;
        overflow: hidden;
        /* Force visibility so max-height controls the reveal, ignoring desktop hover opacities */
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    }

    .nav-dropdown.open .dropdown-menu {
        max-height: 500px; 
        padding: 0.5rem 0 0.5rem 1rem; /* Maintain indentation when open */
    }

    .mobile-menu-toggle {
        display: block;
    }
}

@media (max-width: 1024px) {

    .hero-container,
    .about-container,
    .success-container {
        grid-template-columns: 1fr;
    }

    .mv-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    /* Mobile header CTA hide */
    .header-actions .btn {
        display: none;
    }




    .section-padding {
        padding: 3rem 0;
    }

    #hero {
        padding: 7rem 0 3rem;
        text-align: center;
    }

    .hero-container {
        display: flex;
        flex-direction: column-reverse;
        /* 1. Reorder: Image top, Text bottom */
        gap: 2.5rem;
        /* 6. Spacing */
    }

    .hero-content h1 {
        font-size: clamp(2rem, 8vw, 2.5rem);
        /* 4. Reduce title 10-15% */
        margin-bottom: 1rem;
    }

    .hero-content .sub-heading {
        font-size: 1rem;
        /* 4. Reduce description 5-10% */
        margin-bottom: 2rem;
    }

    .hero-ctas {
        justify-content: center;
        flex-direction: column;
        /* 5. Stack CTA buttons vertically */
        gap: 1rem;
    }

    .hero-ctas .btn {
        width: 100%;
        /* 5. Full width for comfortable tapping */
    }

    /* 3. Floating Cards Refinements */
    .floating-badge {
        padding: 0.5rem 0.8rem;
        font-size: 0.75rem;
        /* Reduce font size by 10% */
        gap: 0.35rem;
    }

    .floating-badge .material-symbols-outlined {
        font-size: 1.1rem;
        /* Reduce icon size proportionally */
    }

    /* Reposition safely within bounds to avoid overlaps */
    .badge-1 {
        top: 10px;
        right: 10px;
    }

    .badge-2 {
        bottom: 15%;
        left: 10px;
    }

    .badge-3 {
        bottom: 10px;
        right: 10px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    /* Learning Process Mobile Connector */
    .process-steps {
        position: relative;
        z-index: 1;
    }

    .process-steps::before {
        content: '';
        position: absolute;
        top: 3.5rem;
        /* Start near first circle */
        bottom: 3.5rem;
        /* End near last circle */
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        background-color: transparent;
        border-radius: 2px;
        z-index: -1;
    }

    .process-steps::after {
        content: '';
        position: absolute;
        top: 3.5rem;
        bottom: 3.5rem;
        left: 50%;
        transform: translateX(-50%) scaleY(var(--scroll-progress, 0));
        transform-origin: top center;
        width: 2px;
        background-color: var(--color-magenta);
        border-radius: 2px;
        z-index: -1;
        /* Smooth, non-bouncy transition for the line growth */
        transition: transform 0.1s linear;
    }

    @media (prefers-reduced-motion: reduce) {
        .process-steps::after {
            transform: translateX(-50%) scaleY(1) !important;
            transition: none !important;
        }
    }
}
/* --- Dedicated Tablet Optimizations (768px to 1024px) --- */
@media (min-width: 768px) and (max-width: 1024px) {
    .section-padding {
        padding: 4rem 0;
    }

    #hero {
        padding: 8rem 0 4rem;
        text-align: center;
    }

    /* Hero layout: balanced stacked view for tablet */
    .hero-container {
        display: flex;
        flex-direction: column-reverse;
        gap: 3rem;
        align-items: center;
    }

    .hero-content {
        max-width: 80%;
        margin: 0 auto;
        text-align: center;
    }

    .hero-ctas {
        justify-content: center;
    }

    .hero-content h1 {
        font-size: clamp(2.5rem, 5vw, 3.5rem);
    }
    
    .hero-image-wrapper {
        max-width: 80%;
        margin: 0 auto;
    }
    
    .floating-badge {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
    
    .badge-1 { top: 5%; right: -5%; }
    .badge-2 { bottom: 10%; left: -5%; }
    .badge-3 { bottom: 5%; right: -5%; }

    /* About Section layout for tablet */
    .about-container {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        align-items: center;
    }

    .about-content {
        max-width: 85%;
        margin: 0 auto;
        text-align: center;
    }
    
    .about-image {
        max-width: 90%;
        margin: 0 auto;
    }

    /* Success Section layout for tablet */
    .success-container {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        align-items: center;
    }

    .success-content {
        max-width: 85%;
        margin: 0 auto;
        text-align: center;
    }
    
    .success-list {
        display: inline-block;
        text-align: left;
    }

    .success-image {
        max-width: 90%;
        margin: 0 auto;
    }

    /* Maintain 2-column layout for MV Grid on Tablet */
    .mv-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem;
    }

    /* Maintain 2-column layout for Footer Grid on Tablet */
    .footer-grid {
        grid-template-columns: 1.5fr 1fr !important;
        gap: 3rem 2rem !important;
    }

    .footer-grid > div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
}