/* ========================================= */
/* HOME UI STYLING (PAGE-SPECIFIC)       */
/* ========================================= */



/* --- 1. Container & Layout --- */
/*.header {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    background-color: #f2f2f2;
}*/

    .header .text h1 {
        font-weight: 100;
    }

/* --- 2. The Full-Width Background/Banner Image --- */
.banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/5_yoga banner-03.jpg');
    background-size: cover;
    background-position: center;
}

    /* --- 3. The Gradient Fade (Light Grey) --- */
    .banner::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /*background: linear-gradient(to right, rgba(242, 242, 242, 1) 0%,*/ /* Start light grey */
        /*rgba(242, 242, 242, 1) 40%, rgba(242, 242, 242, 0) 75%*/ /* Fade to transparent */
        /*);*/
    }

.profile-photo {
    width: 100%;
    max-width: 420px;
    height: auto;
    box-shadow: var(--soft-shadow);
    object-fit: cover;
    border-radius: 50px;
    border: 4px solid var(--color-yellow);
}

.content p.lede {
    font-size: 14px;
}

.content h3 {
    color: var(--color-teal);
}

.faq-content h4 {
    color: var(--color-green);
    font-size: 14px;
}

.faq-content .muted {
    font-size: 14px;
}

.faq-content h4.extra-info {
    color: var(--color-yellow);
    font-size: 14px;
}

.foot-icon {
    text-align: center;
}

    .foot-icon img {
        width: 98px;
    }



/* Mobile: Natural flow (Image -> Text -> Media) */
.page-intro .container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.image-wrap {
    text-align: center;
}

.profile-photo {
    width: 100%;
    height: auto;
    max-width: 300px;
}

.foot-icon {
    text-align: center;
    margin-top: 2rem;
}

    .foot-icon img {
        max-width: 150px;
        height: auto;
    }

.content
{
    padding-top: 15px;
}

/* Desktop: 2-Column Grid */
@media (min-width: 992px) {
    .page-intro .container {
        display: grid;
        /* Column 1: Flexible | Column 2: Fixed width for image/video */
        grid-template-columns: 380px 1fr;
        gap: 0 40px; /* Horizontal gap of 40px */
    }

    /* Flatten the about-main div so its children join the grid */
    .about-main {
        display: contents;
    }
    /* --- LEFT COLUMN --- */

    /* 1. Header (Kinesiology title) spans both columns */
    .meet-title {
        grid-column: 1 / span 2;
    }

    /* 2. Text Content */
    .content {
        grid-column: 2;
        grid-row: 2 / 5;
    }

    /* 3. Foot Icon - Centered at the bottom of the left column */
    .foot-icon {
        grid-column: 1;
        grid-row: 5;
        justify-self: center; /* Horizontally centered */
        align-self: end; /* Anchored to bottom */
    }

    /* --- RIGHT COLUMN --- */

    /* 1. Profile Photo */
    .image-wrap {
        grid-column: 1;
        grid-row: 2; /* Starts level with the text content */
        margin-bottom: 20px;
    }

    /* 2. Media/Video Section */
    .media-section {
        grid-column: 2;
        grid-row: 3; /* Sits directly below the image in col 2 */
        align-self: start; /* Prevents vertical stretching */
    }
}