/* =========================================================
   WIU CAMERATA WOODWIND QUINTET 
   ========================================================= */


/* =========================================================
   1. BASE CONTAINERS
   ========================================================= */

#container_one,
#container_two,
#container_three,
#container_four,
#container_five {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 8px;
    padding: 0;
    background: #fff;
    color: #222;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 1.3rem;
    line-height: 1.7;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

#container_one *,
#container_two *,
#container_three *,
#container_four *,
#container_five * {
    box-sizing: border-box;
}


/* Images inside the Camerata content containers */
#container_one img,
#container_two img,
#container_three img,
#container_four img,
#container_five img {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   2. PAGE WRAPPERS
   ========================================================= */

#container_one .studies-page,
#container_two .studies-page,
#container_three .studies-page,
#container_four .studies-page,
#container_five .studies-page {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 20px;
}


/* =========================================================
   3. SECTION WRAPPERS
   ========================================================= */

#container_one .studies-section,
#container_two .studies-section,
#container_three .studies-section,
#container_four .studies-section,
#container_five .studies-section {
    width: 100%;
    margin: 0;
    padding: 0;
}


/* =========================================================
   4. MAIN SECTION TITLES
   ========================================================= */

#container_one .section-title,
#container_two .section-title,
#container_three .section-title,
#container_four .section-title,
#container_five .section-title {
    display: block;
    width: 100%;
    margin: 0 0 16px;
    padding: 0 0 8px;
    color: #000;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.4;
    text-align: left;
    border-bottom: 2px solid #B8860B;
}


/* =========================================================
   5. SUBHEADINGS
   ========================================================= */

#container_one .section-heading,
#container_two .section-heading,
#container_three .section-heading,
#container_four .section-heading,
#container_five .section-heading {
    margin: 0 0 12px;
    padding: 0 0 7px;
    color: #663399;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.4;
    border-bottom: 1px solid #e5e5e5;
}


/* =========================================================
   6. PARAGRAPHS
   ========================================================= */

#container_one p,
#container_two p,
#container_three p,
#container_four p,
#container_five p {
    margin: 0 0 12px;
    padding: 0;
    color: #333;
    font-size: 16px;
    line-height: 1.75;
}

#container_one strong,
#container_two strong,
#container_three strong,
#container_four strong,
#container_five strong {
    color: #222;
    font-weight: 700;
}


/* =========================================================
   7. LINKS
   ========================================================= */

#container_one a:not(.camerata-button),
#container_two a:not(.camerata-button),
#container_three a:not(.camerata-button),
#container_four a:not(.camerata-button),
#container_five a:not(.camerata-button) {
    color: #663399;
    text-decoration: underline;
    text-decoration-color: #B8860B;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

#container_one a:not(.camerata-button):hover,
#container_two a:not(.camerata-button):hover,
#container_three a:not(.camerata-button):hover,
#container_four a:not(.camerata-button):hover,
#container_five a:not(.camerata-button):hover {
    color: #4B2375;
}


/* =========================================================
   8. ABOUT SECTION
   ========================================================= */

#container_one .about-content {
    width: 100%;
    margin: 0 auto;
}

#container_one .about-content::after {
    display: table;
    clear: both;
    content: "";
}

#container_one .about-image {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    margin: 0 0 18px;
    object-fit: contain;
    filter: none;
    opacity: 1;
    transform: none;
}
 

#container_one .about-content img {
    width: 100%;
    max-width: 360px;
    height: auto;
}


/* Optional about grid */

#container_one .about-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

#container_one .about-copy {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}


/* =========================================================
   9. MISSION STATEMENT AND HISTORY BUTTON
   ========================================================= */

#container_one .mission-section {
    clear: both;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

#container_one .mission-section .section-heading {
    margin-bottom: 12px;
}

#container_one .history-button-wrap {
    margin: 18px 0 8px;
}


/* Purple and gold history button */

#container_one .camerata-button,
#container_two .camerata-button,
#container_three .camerata-button,
#container_four .camerata-button,
#container_five .camerata-button {
    display: inline-block;
    margin: 6px 8px 6px 0;
    padding: 11px 24px;
    color: #fff;
    background: #663399;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    border: 2px solid #663399;
    border-radius: 5px;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

#container_one .camerata-button:hover,
#container_two .camerata-button:hover,
#container_three .camerata-button:hover,
#container_four .camerata-button:hover,
#container_five .camerata-button:hover {
    color: #663399;
    background: #fff;
    border-color: #B8860B;
    text-decoration: none;
}

#container_one .camerata-button:focus-visible,
#container_two .camerata-button:focus-visible,
#container_three .camerata-button:focus-visible,
#container_four .camerata-button:focus-visible,
#container_five .camerata-button:focus-visible {
    outline: 3px solid #B8860B;
    outline-offset: 4px;
}

.camerata-button span {
    display: inline-block;
    margin-left: 7px;
}


/* =========================================================
   10. OUTREACH SECTION
   ========================================================= */

#container_two .outreach-content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

#container_two .outreach-content .section-heading {
    margin-bottom: 14px;
}

#container_two .outreach-content p {
    text-align: left;
}


/* =========================================================
   11. YOUTUBE SECTION
   ========================================================= */

#container_three .youtube-content {
    width: 100%;
    margin: 0 auto;
}

#container_three .youtube-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

#container_three .youtube-item {
    width: 100%;
    min-width: 0;
    margin: 0;
}

#container_three .youtube-title {
    margin: 0 0 12px;
    color: #222;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}

#container_three .youtube-divider {
    margin: 28px 0 20px;
    border: 0;
    border-top: 1px solid #e0e0e0;
}

#container_three .discography-section {
    width: 100%;
    margin: 0;
    padding: 0;
}

#container_three .discography-section p {
    margin-bottom: 12px;
}

#container_three .youtube-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f2f2f2;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

#container_three .youtube-video iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

#container_three .youtube-item iframe {
    max-width: 100%;
}


/* =========================================================
   12. FACULTY SECTION
   ========================================================= */

#container_four .faculty-content {
    width: 100%;
    margin: 0 auto;
}

#container_four .faculty-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

#container_four .faculty-card {
    width: 100%;
    min-width: 0;
    padding: 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

#container_four .faculty-image {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto 14px;
    object-fit: cover;
    border-radius: 4px;
}

#container_four .faculty-name {
    margin: 0 0 8px;
    color: #222;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.4;
}

#container_four .faculty-title {
    margin: 0 0 10px;
    color: #555;
    font-size: 15px;
    font-weight: 600;
}

#container_four .faculty-bio {
    margin: 0;
    color: #333;
    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   13. OPTIONAL CONTAINER FIVE
   Additional content and history gallery
   ========================================================= */

#container_five .others-content {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

#container_five .others-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}

#container_five .others-item {
    width: 100%;
    min-width: 0;
    margin: 0 0 18px;
}

#container_five .others-heading {
    margin: 0 0 10px;
    color: #222;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.4;
}

#container_five .others-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto 12px;
    border-radius: 4px;
}


/* =========================================================
   14. HISTORY GALLERY
   Use these styles on the history page or container five
   ========================================================= */

#container_five .history-content {
    width: 100%;
    margin: 0 auto;
}

#container_five .history-section {
    width: 100%;
    margin: 0 0 24px;
}

#container_five .history-heading {
    margin: 0 0 14px;
    padding: 0 0 7px;
    color: #222;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
    border-bottom: 1px solid #e0e0e0;
}

#container_five .history-gallery {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
    margin: 24px 0;
}

#container_five .history-gallery-five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

#container_five .history-gallery-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#container_five .history-gallery-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#container_five .history-gallery figure {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e5dfd4;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgb(35 29 20 / 7%);
    transition: box-shadow 180ms ease, transform 180ms ease;
}

#container_five .history-gallery figure:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgb(35 29 20 / 12%);
}

#container_five .history-gallery figure > a {
    display: block;
    overflow: hidden;
    background: #f8f6f2;
}

#container_five .history-gallery img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #f8f6f2;
    transition: transform 220ms ease;
}

#container_five .history-gallery figure:hover img {
    transform: scale(1.025);
}

#container_five .history-gallery figcaption {
    padding: 12px 14px 15px;
    color: #6c675e;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    text-align: left;
}

#container_five .history-gallery figcaption strong {
    display: block;
    margin-bottom: 4px;
    color: #292721;
    font-size: 14px;
    font-weight: 600;
}


/* =========================================================
   15. TABLETS AND SMALL LAPTOPS
   ========================================================= */

@media (max-width: 1100px) {

    #container_one .studies-page,
    #container_two .studies-page,
    #container_three .studies-page,
    #container_four .studies-page,
    #container_five .studies-page {
        padding: 10px 18px;
    }

    #container_four .faculty-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #container_five .history-gallery-five {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* =========================================================
   16. TABLETS
   ========================================================= */

@media (max-width: 800px) {

    #container_one .studies-page,
    #container_two .studies-page,
    #container_three .studies-page,
    #container_four .studies-page,
    #container_five .studies-page {
        padding: 8px 16px;
    }

    #container_one .section-title,
    #container_two .section-title,
    #container_three .section-title,
    #container_four .section-title,
    #container_five .section-title {
        margin-bottom: 12px;
        font-size: 22px;
    }

    #container_one .section-heading,
    #container_two .section-heading,
    #container_three .section-heading,
    #container_four .section-heading,
    #container_five .section-heading {
        font-size: 19px;
    }

    #container_one .about-grid,
    #container_three .youtube-grid,
    #container_five .others-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #container_five .history-gallery,
    #container_five .history-gallery-five,
    #container_five .history-gallery-three,
    #container_five .history-gallery-two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   17. MOBILE
   ========================================================= */

@media (max-width: 600px) {

    #container_one,
    #container_two,
    #container_three,
    #container_four,
    #container_five {
        margin-bottom: 6px;
        font-size: 15px;
    }

    #container_one .studies-page,
    #container_two .studies-page,
    #container_three .studies-page,
    #container_four .studies-page,
    #container_five .studies-page {
        padding: 6px 12px;
    }

    #container_one .section-title,
    #container_two .section-title,
    #container_three .section-title,
    #container_four .section-title,
    #container_five .section-title {
        margin-bottom: 12px;
        padding-bottom: 7px;
        font-size: 21px;
        border-bottom-width: 1px;
    }

    #container_one .section-heading,
    #container_two .section-heading,
    #container_three .section-heading,
    #container_four .section-heading,
    #container_five .section-heading,
    #container_five .history-heading {
        font-size: 18px;
    }

    #container_one p,
    #container_two p,
    #container_three p,
    #container_four p,
    #container_five p {
        font-size: 15px;
        line-height: 1.7;
    }

    #container_one .about-image {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 auto 18px;
    }

    #container_one .about-grid,
    #container_three .youtube-grid,
    #container_four .faculty-grid,
    #container_five .others-grid,
    #container_five .history-gallery,
    #container_five .history-gallery-five,
    #container_five .history-gallery-three,
    #container_five .history-gallery-two {
        grid-template-columns: 1fr;
    }

    #container_one .mission-section {
        clear: both;
        margin-top: 14px;
        padding-top: 12px;
    }

    #container_one .camerata-button {
        padding: 10px 20px;
        font-size: 15px;
    }

    #container_four .faculty-card {
        padding: 14px;
    }

    #container_five .history-section {
        margin-bottom: 18px;
    }

    #container_five .history-gallery {
        gap: 18px;
        margin: 20px 0;
    }

    #container_five .history-gallery figcaption {
        padding: 11px 13px 14px;
        font-size: 13px;
    }

    #container_three .youtube-grid {
        gap: 24px;
    }

    #container_three .youtube-title {
        font-size: 17px;
    }
}


/* =========================================================
   18. SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    #container_one .studies-page,
    #container_two .studies-page,
    #container_three .studies-page,
    #container_four .studies-page,
    #container_five .studies-page {
        padding: 5px 10px;
    }

    #container_one .section-title,
    #container_two .section-title,
    #container_three .section-title,
    #container_four .section-title,
    #container_five .section-title {
        font-size: 1.2rem;
    }

    #container_one .section-heading,
    #container_two .section-heading,
    #container_three .section-heading,
    #container_four .section-heading,
    #container_five .section-heading {
        font-size: 17px;
    }

    #container_three .youtube-title,
    #container_four .faculty-name,
    #container_five .others-heading {
        font-size: 17px;
    }
}


/* =========================================================
   19. VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 360px) {

    #container_one .studies-page,
    #container_two .studies-page,
    #container_three .studies-page,
    #container_four .studies-page,
    #container_five .studies-page {
        padding: 4px 8px;
    }

    #container_one .section-title,
    #container_two .section-title,
    #container_three .section-title,
    #container_four .section-title,
    #container_five .section-title {
        font-size: 19px;
    }

    #container_one p,
    #container_two p,
    #container_three p,
    #container_four p,
    #container_five p {
        font-size: 14px;
    }

    #container_one .camerata-button {
        padding: 9px 14px;
        font-size: 14px;
    }
}


/* =========================================================
   20. ACCESSIBILITY: REDUCED MOTION
   ========================================================= */

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

    #container_one *,
    #container_two *,
    #container_three *,
    #container_four *,
    #container_five * {
        scroll-behavior: auto;
        transition: none !important;
    }

    #container_five .history-gallery figure:hover,
    #container_five .history-gallery figure:hover img {
        transform: none;
    }
}


/* About Us group photo: float right on desktop */
#container_one .about-image {
    display: block;
    float: right;
    width: 360px;
    max-width: 45%;
    height: auto;
    margin: 0 0 18px 24px;
    object-fit: contain;
}

/* Stack image above text on mobile */
@media (max-width: 600px) {
    #container_one .about-image {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 auto 18px;
    }
}

/* =========================================================
   FACULTY SECTION — FIVE MEMBERS IN ONE ROW
   Add this block at the VERY END of your existing CSS
   ========================================================= */

/* Five faculty cards across on desktop */
#container_four .faculty-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
    width: 100%;
}

/* Compact faculty cards */
#container_four .faculty-card {
    width: 100%;
    min-width: 0;
    padding: 8px;
    margin: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow-wrap: anywhere;
}

/* Smaller faculty photos */
#container_four .faculty-image {
    display: block;
    width: 100%;
    max-width: 180px;
    height: auto;
    margin: 0 auto 10px;
    object-fit: cover;
    border-radius: 4px;
}

/* Smaller faculty names */
#container_four .faculty-name {
    margin: 0 0 6px;
    color: #222;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* Compact faculty titles */
#container_four .faculty-title {
    margin: 0 0 8px;
    color: #555;
    font-size: 13px;
    line-height: 1.5;
}

/* Compact faculty biographies */
#container_four .faculty-bio {
    margin: 0;
    color: #333;
    font-size: 13px;
    line-height: 1.6;
}

/* Smaller laptop screens: three columns */
@media (max-width: 1100px) {
    #container_four .faculty-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }
}

/* Tablets: two columns */
@media (max-width: 800px) {
    #container_four .faculty-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    #container_four .faculty-card {
        padding: 10px;
    }
}

/* Mobile phones: one column */
@media (max-width: 600px) {
    #container_four .faculty-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #container_four .faculty-card {
        padding: 12px;
    }

    #container_four .faculty-image {
        max-width: 240px;
    }
}



/* =========================================
   FIX: EQUAL FACULTY CARD AND IMAGE HEIGHTS
   ========================================= */

#container_four .faculty-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

#container_four .faculty-card {
    width: 100%;
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 12px;
}

/* Make all faculty photos the same height */
#container_four .faculty-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: center top;
    margin: 0 auto 12px;
    border-radius: 4px;
}

/* Keep faculty names consistent */
#container_four .faculty-name {
    margin: 0 0 8px;
    font-size: 1.05rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* Keep titles aligned */
#container_four .faculty-title {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.4;
}

/* Responsive layout */
@media (max-width: 900px) {
    #container_four .faculty-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    #container_four .faculty-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    #container_four .faculty-image {
        height: 160px;
    }
}

@media (max-width: 400px) {
    #container_four .faculty-grid {
        grid-template-columns: 1fr;
    }

    #container_four .faculty-image {
        height: 220px;
    }
}