/**
 * SAP Child Theme - Staff Panel Overrides
 * ============================================================================
 * Overrides parent theme's CSS Grid staff-panel with v1's float-based layout.
 * Load AFTER parent's styles.css (ssa-main)
 *
 * Why floats instead of grid?
 * - SAP v1 theme used floats, and this restores that exact behavior
 * - Parent's CSS Grid not rendering correctly for SAP
 * - Float-based layout is simpler and matches LIVE site
 * ============================================================================
 */

/* ==========================================================================
   1. Override Parent's Grid Layout with Floats
   ========================================================================== */

/* Reset parent's grid layout - use block (floats) instead */
.staff-panel .content {
    display: block;
}

/* Clearfix via pseudo-element (template lacks clearfix class) */
.staff-panel .content::after {
    content: "";
    display: table;
    clear: both;
}

/* ==========================================================================
   2. Main Heading Color
   ========================================================================== */

/* SAP: Main "Meet the Team" heading needs black for contrast on cream background.
   Turquoise (#1AE2C8) has poor readability on cream. Uses semantic token. */
.staff-panel > .content > h3 {
    color: var(--heading-on-light);
}

/* ==========================================================================
   3. Float-Based Two-Column Layout (v1 style)
   ========================================================================== */

/* Left column: team images (70% width) */
.staff-panel .image-team {
    float: left;
    width: 70%;
}

.staff-panel .image-team::after {
    content: "";
    display: table;
    clear: both;
}

/* Individual team person boxes */
.staff-panel .image-team .team-person {
    float: left;
    width: 40%;
    margin-right: 10%;
    margin-bottom: 30px;
    align-items: flex-start;  /* Override parent's center alignment */
}

/* Right column: second and third team (25% width) */
.staff-panel .second-team,
.staff-panel .third-team {
    float: left;
    width: 25%;
    margin-left: 5%;
}

/* Clearfix for team containers */
.staff-panel .second-team-container::after,
.staff-panel .third-team-container::after {
    content: "";
    display: table;
    clear: both;
}

/* ==========================================================================
   4. Team Person Image Sizing
   ========================================================================== */

/* SAP: Explicit image sizing from v1 theme.
   Without this, images may collapse or expand unpredictably. */
.staff-panel .image-team .team-person img {
    width: 150px;
    max-width: 150px;
    flex-shrink: 0;
}

/* ==========================================================================
   5. Responsive Overrides (v1 breakpoints)
   ========================================================================== */

/* Tablet: 950px - SAP uses v1 breakpoint instead of parent's 768px */
@media only screen and (max-width: 950px) {
    .staff-panel .image-team {
        float: none;
        width: 100%;
    }
    .staff-panel .second-team,
    .staff-panel .third-team {
        float: left;
        margin-left: 0;
        margin-right: 10%;
        width: 45%;
    }
    .staff-panel .third-team {
        margin-right: 0;
    }
}

/* Mobile: 720px */
@media only screen and (max-width: 720px) {
    .staff-panel .image-team .team-person {
        float: none;
        margin-right: 0;
        width: 100%;
    }
}

/* Small Mobile: 535px */
@media only screen and (max-width: 535px) {
    .staff-panel .second-team,
    .staff-panel .third-team {
        float: none;
        margin-bottom: 30px;
        margin-right: 0;
        width: 100%;
    }
}