/* ===================================
   ABOUT SECTION - RESPONSIVE
   =================================== */
.about {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    /* Smart Padding: Consistent centering when zoomed out */
    padding: clamp(40px, 8vh, 80px) max(20px, calc((100% - var(--max-width)) / 2));
    background-color: var(--white);
    position: relative;
    overflow: hidden;
    gap: 40px;
    width: 100%;
    margin: 0;
}

.aboutleft {
    display: flex;
    flex-direction: column;
    flex: 2 1 400px;
    /* Increased flex grow and basis */
    min-width: 300px;
    max-width: 700px;
    /* Increased max-width significantly */
    z-index: 2;
}

.aboutltop h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: clamp(10px, 2vw, 20px);
}

/* Fade In Up Animation for Text */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.aboutlbot h1 {
    font-size: clamp(1.125rem, 2vw, 1.3rem);
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--text-color);
    line-height: 1.8;
    text-align: justify;
    max-width: 100%;
    /* Widened to full width of container */

    /* Animation Properties */
    opacity: 0;
    /* Start hidden */
    animation: fadeInUp 0.8s ease-out forwards;
    animation-play-state: paused;
    /* Paused until JS triggers it */
}

.aboutlbot h1.animate {
    animation-play-state: running;
}

.aboutright {
    display: flex;
    flex-direction: column;
    flex: 1 1 300px;
    min-width: 250px;
    max-width: 450px;
    align-items: center;
    position: relative;
}

@keyframes floatLogo {

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

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

@keyframes pulseShadow {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.4;
    }

    50% {
        transform: scale(0.8);
        opacity: 0.1;
    }
}

.logocontain {
    animation: floatLogo 4s ease-in-out infinite;
    z-index: 2;
}

.logocontain img {
    height: clamp(200px, 30vw, 350px);
    width: auto;
}

.aboutlogo {
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.2));
}

.aboutshadow {
    margin-top: 20px;
    width: clamp(180px, 25vw, 300px);
    height: 20px;
    animation: pulseShadow 4s ease-in-out infinite;
    filter: blur(10px);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 70%);
}

/* ===================================
   ABOUT CARDS GRID - RESPONSIVE
   =================================== */
.aboutbottom {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(20px, 3vw, 30px);
    /* 'Perfectly Contained' Logic with Full-Width BG */
    padding: clamp(40px, 6vh, 60px) max(20px, calc((100% - var(--max-width)) / 2));
    background-color: var(--bg-color);
    width: 100%;
    margin: 0;
}

.about1,
.about2,
.about3,
.about4 {
    background: var(--white);
    border-radius: 24px;
    padding: clamp(25px, 3vw, 40px) clamp(20px, 2.5vw, 30px);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.about1:hover,
.about2:hover,
.about3:hover,
.about4:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-md);
}

.abouticon1,
.abouticon2,
.abouticon3,
.abouticon4 {
    font-size: clamp(24px, 3vw, 32px);
    color: var(--accent-color);
    margin-bottom: clamp(15px, 2vw, 20px);
    padding: 0;
}

.abouttitle1,
.abouttitle2,
.abouttitle3,
.abouttitle4 {
    padding: 0;
    margin: 0 0 15px 0;
}

.abouttitle1 h1,
.abouttitle2 h1,
.abouttitle3 h1,
.abouttitle4 h1 {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--primary-color);
    margin: 0;
}

.abouttext1,
.abouttext2,
.abouttext3,
.abouttext4 {
    padding: 0;
    margin: 0;
}

.abouttext1 h1,
.abouttext2 h1,
.abouttext3 h1,
.abouttext4 h1 {
    font-size: clamp(0.875rem, 1.2vw, 0.9375rem);
    font-family: var(--font-body);
    color: #64748b;
    font-weight: 400;
}

/* ===================================
   ABOUT PHOTO - RESPONSIVE
   =================================== */
.aboutphoto {
    padding: clamp(40px, 8vh, 80px) 0;
    display: flex;
    justify-content: center;
    background: linear-gradient(to bottom, var(--bg-color), var(--white));
}

.aboutphoto img {
    border-radius: clamp(15px, 3vw, 30px);
    width: 90%;
    max-width: 1200px;
    height: auto;
    box-shadow: var(--shadow-md);
    box-shadow: var(--shadow-md);
    transition: transform 0.5s ease;
}

/* Mobile adjustments for Officer Cards */
@media screen and (max-width: 768px) {
    .aboutbottom {
        padding: 40px 5%;
        gap: 15px;
        grid-template-columns: 1fr;
        /* Single column on mobile/tablet */
    }

    .about1,
    .about2,
    .about3,
    .about4 {
        padding: 20px 15px;
        /* Reduced padding */
        width: 100%;
    }

    .abouttext1 h1,
    .abouttext2 h1,
    .abouttext3 h1,
    .abouttext4 h1 {
        font-size: 14px;
        line-height: 1.4;
    }
}

.aboutphoto img:hover {
    transform: scale(1.02);
}

/* ===================================
   OFFICERS SECTION - RESPONSIVE
   =================================== */
.officers {
    display: flex;
    flex-wrap: wrap;
    /* Smart Padding: Consistent centering when zoomed out */
    padding: clamp(40px, 8vh, 80px) max(20px, calc((100% - var(--max-width)) / 2));
    background-color: var(--white);
    gap: clamp(20px, 4vw, 40px);
    width: 100%;
    margin: 0;
}

.officersleft {
    flex: 1 1 280px;
    min-width: 250px;
    max-width: 350px;
    padding-top: 20px;
}

.oftitle h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.oftitle h2 {
    font-size: clamp(0.75rem, 1.2vw, 1rem);
    font-family: var(--font-body);
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.ofselection {
    display: flex;
    flex-direction: column;
    margin-top: clamp(20px, 4vw, 40px);
    gap: clamp(10px, 1.5vw, 15px);
    padding-left: 0;
    width: 100%;
}

.ofselect1,
.ofselect2,
.ofselect3,
.ofselect4,
.ofselect5,
.ofselect6 {
    display: flex;
    align-items: center;
    padding: clamp(12px, 2vw, 20px) clamp(15px, 2.5vw, 25px);
    background: var(--bg-color);
    border-radius: 16px;
    cursor: pointer;
    transition: all var(--transition-normal);
    border-left: 5px solid transparent;
}

.ofselect1:hover,
.ofselect2:hover,
.ofselect3:hover,
.ofselect4:hover,
.ofselect5:hover,
.ofselect6:hover {
    background: #e2e8f0;
    transform: translateX(10px);
}

[class^="ofselect"] h1 {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-family: var(--font-head);
    font-weight: 600;
    color: #94a3b8;
    margin: 0;
    width: clamp(35px, 4vw, 50px);
    padding-left: 0;
}

[class^="ofselect"] h2 {
    font-size: clamp(0.875rem, 1.5vw, 1.125rem);
    font-family: var(--font-head);
    font-weight: 500;
    color: var(--text-color);
    margin: 0;
    padding-left: 10px;
}

.officersright {
    flex: 2 1 500px;
    position: relative;
    min-height: 400px;
}

.ofrightcontain {
    background: var(--bg-color);
    border-radius: clamp(15px, 3vw, 30px);
    padding: clamp(20px, 4vw, 40px);
    width: 100%;
    height: auto;
    min-height: clamp(400px, 50vh, 600px);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.05);
    margin: 0;
}

.executive,
.mulpub,
.extres,
.comelect,
.otherof,
.yearrep {
    display: none;
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    gap: 20px;
}

.executive.open,
.mulpub.open,
.extres.open,
.comelect.open,
.otherof.open,
.yearrep.open {
    display: flex;
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.executiveleft,
.executiveright,
.mulpubleft,
.mulpubright,
.extresleft,
.extresright,
.comleft,
.comright,
.otherofleft,
.otherofright,
.yearrepleft,
.yearrepright {
    flex: 1 1 250px;
    min-width: 200px;
    padding: 0 clamp(10px, 2vw, 20px);
    display: flex;
    flex-direction: column;
    gap: clamp(15px, 2.5vw, 30px);
}

[class^="executive"],
[class^="mulpub"],
[class^="extres"],
[class^="com"],
[class^="otherof"],
[class^="yearrep"] div {
    margin-bottom: clamp(10px, 2vw, 20px);
}

.press h1,
.invp h1,
.exvp h1,
.sec h1,
.asec h1,
.tres h1,
.astres h1,
.aud h1,
.asaud h1,
.busman1 h1,
.busman2 h1,
.multimedia-chairman h1,
.multimedia-vice-chairman h1,
.multimedia-vice-chairman-2 h1,
.multimedia-secretary h1,
[class^="multimedia-committee"] h1,
.extension-chairman h1,
.extension-vice-chairman h1,
.legislative-officer h1,
.extension-secretary h1,
[class^="extension-committee"] h1,
.comelec-chairman h1,
.comelec-vice-chairman h1,
.comelec-secretary h1,
[class^="comelec-committee"] h1,
.public-information-officer h1,
.assistant-pio-1 h1,
.assistant-pio-2 h1,
.academic-coordinator h1,
.assistant-academic-coordinator h1,
[class^="assistant-sport-coordinator"] h1,
[class^="rep-"] h1 {
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--accent-color);
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.press h2,
.invp h2,
.exvp h2,
.sec h2,
.asec h2,
.tres h2,
.astres h2,
.aud h2,
.asaud h2,
.busman1 h2,
.busman2 h2,
.multimedia-chairman h2,
.multimedia-vice-chairman h2,
.multimedia-vice-chairman-2 h2,
.multimedia-secretary h2,
[class^="multimedia-committee"] h2,
.extension-chairman h2,
.extension-vice-chairman h2,
.legislative-officer h2,
.extension-secretary h2,
[class^="extension-committee"] h2,
.comelec-chairman h2,
.comelec-vice-chairman h2,
.comelec-secretary h2,
[class^="comelec-committee"] h2,
.public-information-officer h2,
.assistant-pio-1 h2,
.assistant-pio-2 h2,
.academic-coordinator h2,
.assistant-academic-coordinator h2,
[class^="assistant-sport-coordinator"] h2,
[class^="rep-"] h2 {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-family: var(--font-head);
    font-weight: 500;
    color: var(--text-color);
    margin: 0;
}

.empty,
.multimedia-committee-32,
.multimedia-committee-33,
.multimedia-committee-34,
.multimedia-committee-35,
.multimedia-committee-36,
.extension-committee-11,
.extension-committee-12,
.extension-committee-13,
.extension-committee-14,
.extension-committee-15,
.extension-committee-16,
.extension-committee-17,
.comelec-committee-22,
.comelec-committee-23,
.comelec-committee-24,
.comelec-committee-25,
.comelec-committee-26,
.comelec-committee-27,
.comelec-committee-28,
.rep-1st-year-11,
.rep-1st-year-12 {
    display: none;
}

.comright {
    padding-top: 0;
}

hr {
    border: 0;
    height: 1px;
    background: #e2e8f0;
    margin: clamp(20px, 4vw, 40px) 0;
}

/* ===================================
   RESPONSIVE BREAKPOINTS
   =================================== */
@media screen and (max-width: 1024px) {
    .officers {
        flex-direction: column;
    }

    .officersleft {
        max-width: 100%;
        width: 100%;
    }

    .officersright {
        width: 100%;
    }

    .ofselection {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .ofselect1,
    .ofselect2,
    .ofselect3,
    .ofselect4,
    .ofselect5,
    .ofselect6 {
        flex: 1 1 150px;
    }
}

@media screen and (max-width: 768px) {
    .about {
        flex-direction: column;
        text-align: center;
    }

    .aboutleft {
        align-items: center;
        max-width: 100%;
    }

    .aboutright {
        max-width: 100%;
    }

    .executiveleft,
    .executiveright,
    .mulpubleft,
    .mulpubright,
    .extresleft,
    .extresright,
    .comleft,
    .comright,
    .otherofleft,
    .otherofright,
    .yearrepleft,
    .yearrepright {
        flex: 1 1 100%;
    }
}