/* ============================================
   EDUCATION SECTION - NEW TEXT LAYOUT
   ============================================ */

.education-section {
    margin-bottom: var(--section-spacing-desktop);
    padding: 30mm 0;
    position: relative;
    overflow: hidden;
    background-color: var(--bg-color);
}

.education-section .section-title {
    margin-bottom: 1cm;
    /* 1cm from text */
    text-align: center;
}

.education-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1cm;
    /* 1cm side margins */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2cm;
    /* Space between left and right blocks */
}

/* Text Blocks */
.edu-text-block {
    position: relative;
    width: 100%;
}

.left-block {
    text-align: left;
}

.right-block {
    text-align: right;
}

/* Line Wrappers for Reveal Effect */
.edu-line-wrapper {
    overflow: hidden;
    position: relative;
    display: block;
    /* Each line on its own row */
    margin-bottom: 8px;
}

/* Text Styling */
.edu-text {
    display: inline-block;
    /* Allow highlight to wrap text */
    font-size: 3rem;
    /* 20% bigger (was 2.5rem) */
    font-weight: 700;
    color: var(--text-color);
    /* Default white-ish */
    line-height: 1.2;
    position: relative;
    z-index: 1;

    /* Mobile Wrapping Support */
    max-width: 100%;
    white-space: normal;
    /* Allow wrapping */

    /* Initial State: Hidden (pushed down) */
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

/* Highlight Overlay - Rising from bottom with Dark Text */
.edu-text::before {
    content: attr(data-text);
    /* Duplicate text for overlay */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    /* Start at 0 height */

    /* Style */
    background-color: #CCA736;
    /* Yellowish accent */
    color: #232323;
    /* Dark text */

    /* Layout - MUST MATCH PARENT EXACTLY */
    overflow: hidden;
    white-space: normal;
    /* Allow wrapping to match parent */
    z-index: 2;
    /* On top of original text */

    /* Animation */
    transition: height 0.6s cubic-bezier(0.7, 0, 0.3, 1);
    /* Fast rise */
}

/* ============================================
   ANIMATION TRIGGERS
   ============================================ */

/* Reveal Text */
.education-section.animate-in .edu-text {
    transform: translateY(0);
    opacity: 1;
}

/* Reveal Highlight */
.education-section.animate-in .edu-text::before {
    height: 100%;
}

/* ============================================
   ANIMATION DELAYS
   ============================================ */

/* --- Left Block (Long -> Short) --- */
/* Line 1: Reveal 0s */
.left-block .edu-line-wrapper:nth-child(1) .edu-text {
    transition-delay: 0s;
}

/* Line 2: Reveal 0.2s */
.left-block .edu-line-wrapper:nth-child(2) .edu-text {
    transition-delay: 0.2s;
}

/* Highlight Delays - "When next line ends" */
/* Line 1 Highlight: Starts after Line 2 reveal (0.2s + 0.8s duration = 1.0s) */
.left-block .edu-line-wrapper:nth-child(1) .edu-text::before {
    transition-delay: 1.0s;
}

/* Line 2 Highlight: Starts after Line 1 highlight? Let's do 1.2s */
.left-block .edu-line-wrapper:nth-child(2) .edu-text::before {
    transition-delay: 1.2s;
}


/* --- Right Block (Short -> Long) --- */
/* Starts same time as Left Block (0s base) */

/* Line 1: Reveal 0s */
.right-block .edu-line-wrapper:nth-child(1) .edu-text {
    transition-delay: 0s;
}

/* Line 2: Reveal 0.2s */
.right-block .edu-line-wrapper:nth-child(2) .edu-text {
    transition-delay: 0.2s;
}

/* Line 3: Reveal 0.4s */
.right-block .edu-line-wrapper:nth-child(3) .edu-text {
    transition-delay: 0.4s;
}

/* Highlight Delays */
/* Line 1 Highlight: Starts after Line 2 reveal (0.2s + 0.8s = 1.0s) */
.right-block .edu-line-wrapper:nth-child(1) .edu-text::before {
    transition-delay: 1.0s;
}

/* Line 2 Highlight: Starts after Line 3 reveal (0.4s + 0.8s = 1.2s) */
.right-block .edu-line-wrapper:nth-child(2) .edu-text::before {
    transition-delay: 1.2s;
}

/* Line 3 Highlight: Starts after Line 2 highlight (1.4s) */
.right-block .edu-line-wrapper:nth-child(3) .edu-text::before {
    transition-delay: 1.4s;
}


/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .education-container {
        padding: 0 20px;
        gap: 1cm;
    }

    .edu-text {
        font-size: 1.4rem;
        /* Smaller on mobile to reduce wrapping */
    }

    .left-block,
    .right-block {
        text-align: left;
        /* Align left on mobile for readability */
    }

    .right-block {
        margin-top: 20px;
    }
}