/* Enhanced About Page Styles */

/* --- Base & Layout Overrides --- */
body {
    padding-top: 80px;
    color: #1f2937;
    margin: 0;
}

/* Ensure Text Visibility Globally */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #722f37 !important;
    /* Brand Wine Color for all Headings to ensure visibility */
}

p,
.lead,
.leader-bio,
.member-org,
.director-expertise,
.representative-focus,
li {
    color: #1f2937 !important;
    /* Dark Grey for body text */
}

/* --- Page Header (Exception: Needs White Text) --- */
.page-header {
    height: 50vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
    overflow: hidden;
    margin-bottom: 0;
}

.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(114, 47, 55, 0.6) 100%);
    z-index: 1;
}

.page-header h1,
.page-header h2,
.page-header p {
    color: #ffffff !important;
    text-align: center !important;
}

.page-header-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 2rem;
    animation: fadeInDown 1s ease-out;
}

.page-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    margin-bottom: 1rem;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.page-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 300;
    opacity: 0.95;
    max-width: 700px;
    margin: 0 auto;
}

/* --- Section Alternating Colors --- */
section {
    padding: 5rem 0;
}

.history-purpose {
    background: #fff;
}

.mission-vision {
    background: #f8fafc;
}

.founder-message {
    padding: 0;
}

.leadership {
    background: #fff;
}

.board-trustees {
    background: #f8fafc;
}

.advisory-council {
    background: #fff;
}

.regional-directors-section {
    background: #f0f4f8;
}

.country-representatives-section {
    background: #fff;
}

/* --- History Section --- */
.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.content-text h2 {
    color: #722f37 !important;
}

.content-text .lead {
    font-size: 1.25rem;
    color: #444 !important;
    font-weight: 500;
    margin-bottom: 1.5rem;
    text-align: justify !important;
}

.history-image {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    transform: rotate(2deg);
    transition: transform 0.3s ease;
}

.history-image:hover {
    transform: rotate(0);
}

/* --- Mission Cards --- */
.mvv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.mvv-card {
    background: white;
    padding: 3rem 2rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.mvv-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.mvv-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: var(--primary-wine);
    background: rgba(114, 47, 55, 0.1);
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.mvv-card h3 {
    color: var(--text-primary);
}

.mvv-card p {
    color: var(--text-secondary);
    text-align: center !important;
    /* Keep mission text centered for balance */
}

.mvv-card ul li {
    text-align: left !important;
}

/* --- Founder Section --- */
.founder-message {
    background: linear-gradient(135deg, var(--primary-wine) 0%, #4a1d24 100%);
    color: white;
}

.founder-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    align-items: center;
    padding: 6rem 0;
}

.founder-text h2,
.founder-text h3 {
    color: white !important;
}

.founder-text p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Justify Founder Message */
.founder-quote {
    text-align: justify !important;
    font-style: italic;
    line-height: 1.8;
}

.founder-photo {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* =========================================================================
   UNIQUE STYLES FOR TEAMS 
   ========================================================================= */

/* GLOBAL LEFT ALIGNMENT FOR ALL TEAM CARDS */
.leader-info,
.member-info,
.advisor-info,
.director-info,
.representative-info {
    text-align: left !important;
    padding: 1.5rem !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start !important;
    /* Forces items to left */
}

/* --- 1. Leadership Team --- */
.leadership-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.leader-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease;
}

.leader-card:hover {
    transform: translateY(-10px);
}

.leader-card p,
.leader-card h4 {
    text-align: left !important;
}

.leader-image {
    height: 300px;
    overflow: hidden;
}

.leader-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.leader-bio,
.leader-social {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s ease;
    text-align: justify !important;
    /* Bio justified looks better left aligned usually, but if requested justify */
}

.leader-card:hover .leader-bio,
.leader-card:hover .leader-social {
    max-height: 200px;
    opacity: 1;
    margin-top: 10px;
}

/* --- 2. Board of Trustees --- */
.board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.board-member {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
    border: 1px solid #eee;
    transition: all 0.3s ease;
}

.board-member:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}

.board-member p,
.board-member h4 {
    text-align: left !important;
}

.member-image {
    height: 220px;
    overflow: hidden;
}

.member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.member-org {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    text-align: left !important;
}

.board-member:hover .member-org {
    max-height: 60px;
    opacity: 1;
}

/* --- 3. Advisory Board --- */
.advisory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem;
    margin-top: 4rem;
}

.advisor {
    background: white;
    border-radius: 20px;
    padding: 2.5rem 1.5rem;
    text-align: left !important;
    /* FORCE LEFT */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease;
    position: relative;
    border: 1px solid transparent;
}

.advisor:hover {
    transform: translateY(-8px);
    border-color: var(--primary-gold);
}

.advisor p,
.advisor h4,
.director-card p,
.director-card h4 {
    text-align: left !important;
}

.advisor-image-container {
    width: 140px;
    /* Slightly smaller for balance */
    height: 140px;
    margin: 0 auto 1.5rem 0;
    /* Align left: top right bottom left -> margin-right 0, margin-left 0? No, let's keep image centered or left? 
                               User said "Make Advisory Board Text left align". 
                               Usually with left text, left image looks best, OR center image + left text.
                               Let's try CENTER IMAGE, LEFT TEXT as it's safe for profile cards. */
    margin: 0 auto 1.5rem;
    position: relative;
    border-radius: 50%;
    padding: 5px;
    background: linear-gradient(135deg, var(--primary-wine), var(--primary-gold));
}

.advisor-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid white;
}

.advisor-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.advisor-info {
    text-align: left !important;
    padding: 0 !important;
    align-items: center !important;
    /* Keep centered relative to card if we want, but text inside is left. */
    /* Wait, user wants text left. If image is center, text left looks weird if card is wide. 
       Let's align everything left for Advisory to match user request explicitly. */
    align-items: flex-start !important;
}

/* If we align everything left, the image should probably be left too, or centered. 
   Let's keep image centered for "Profile" look, but text left. */
.advisor-image-container {
    margin: 0 auto 1.5rem;
}


.advisor-org {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.4s ease;
}

.advisor:hover .advisor-org {
    max-height: 50px;
    opacity: 1;
}

/* --- 4. Regional Directors --- */
.directors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.director-card {
    position: relative;
    height: 400px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    background: #000;
}

.director-image-container {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.director-image,
.director-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.director-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(114, 47, 55, 0.8) 100%);
    color: white;
    padding: 1.5rem;
    transform: translateY(60px);
    transition: transform 0.4s ease;
    z-index: 2;
    text-align: left !important;
}

.director-card:hover .director-info {
    transform: translateY(0);
}

.director-info h4 {
    color: var(--primary-gold) !important;
    font-size: 1.25rem;
    margin-bottom: 5px;
}

.director-position {
    color: white !important;
    font-size: 0.9rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.director-expertise {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 10px;
    opacity: 0;
    transition: opacity 0.4s ease 0.1s;
    text-align: left !important;
}

.director-card:hover .director-expertise {
    opacity: 1;
}


/* --- 5. Country Representatives (Clean & Simple) --- */
/* --- 5. Country Representatives (Enhanced Frame Style) --- */
.representatives-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.representative-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    height: 100%;
}

.representative-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
    border-color: var(--primary-gold);
}

.representative-image-container {
    padding: 1rem 1rem 0 1rem;
    /* Creates the "frame" matting effect on top/sides */
    background: white;
}

.representative-image {
    height: 220px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
}

.representative-image::after {
    /* Optional: subtle gold overlay on hover could be nice, or just keep clean */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 70%, rgba(0, 0, 0, 0.3));
    opacity: 0.6;
}

.representative-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.5s ease;
}

.representative-card:hover .representative-image img {
    transform: scale(1.05);
}

.representative-info {
    padding: 1.5rem !important;
    text-align: left !important;
    display: flex;
    flex-direction: column;
}

/* Stack Flag + Country vertically */
.representative-header {
    display: block;
    /* Removed flex to allow stacking if that's what user wants, or keep flex row? 
                       User example: "United States (newline) Amb..." 
                       If they want Flag then formatted country name, let's keep it simple.
                       But wait, user said "United States", then "Amb...". 
                       If I remove flex, the flag (span) and p will block stack.
                       Let's strictly follow "Make ... left alignment".
                       If the badge and country are on the same line, flex row is fine IF aligned left.
                       It IS aligned left (justify-content start is default).
                       Maybe the user wants the content to be:
                       Flag
                       Country
                       Name
                       
                       Or maybe just:
                       Country
                       Name
                       
                       I will stick to Left Alignment of everything. The previous flex row WAS left aligned.
                       Maybe the text-align: left wasn't taking?
                       I'll enforce alignItems: flex-start on the container.
                    */
    display: flex;
    flex-direction: column;
    /* Stack them vertical? The example "United States" implies the header is the country. */
    align-items: flex-start;
    /* Force left */
    gap: 5px;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f0f0f0;
}

.representative-badge {
    font-size: 1.5rem;
    line-height: 1;
}

.representative-country {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary-wine) !important;
    /* Changed to Wine for better contrast */
    letter-spacing: 0.5px;
    margin: 0;
}

.representative-info h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

/* Always visible focus now for better info density, or keep hover? 
   User said "redesign cards". Let's show the focus to fill the frame nicely. */
.representative-focus {
    font-size: 0.9rem;
    color: #64748b !important;
    margin-top: 0;
    line-height: 1.5;
    max-height: none;
    /* Make visible by default for a fuller card */
    opacity: 1;
    overflow: visible;
}

/* --- Responsive Fixes --- */
@media (max-width: 992px) {
    body {
        padding-top: 70px;
    }

    .content-grid,
    .founder-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .page-title {
        font-size: 3rem;
    }

    .leadership-grid,
    .board-grid,
    .advisory-grid,
    .directors-grid,
    .representatives-grid {
        grid-template-columns: 1fr;
    }

    .stat-row {
        flex-direction: column;
        gap: 2rem;
    }
}

@media (max-width: 480px) {
    body {
        padding-top: 56px !important;
    }

    .page-title {
        font-size: 2.5rem;
    }

    section {
        padding: 3rem 0;
    }

    /* iPhone SE and small mobile specifically */
    @media (max-width: 400px) {
        body {
            padding-top: 45px !important;
        }

        .brand-text {
            font-size: 0.9rem;
        }

        .page-title {
            font-size: 2rem;
        }

        section {
            padding: 2.5rem 0;
        }

        .content-text,
        .founder-text {
            padding: 0 1.5rem;
            text-align: justify;
        }

        .content-text p,
        .founder-text p,
        .founder-quote {
            text-align: justify;
        }

        .history-image {
            width: 85% !important;
            margin: 0 auto 1.5rem auto;
            display: block;
            transform: none !important;
        }

        .director-card {
            height: 320px;
            /* Reduced from 400px */
            width: 90%;
            margin: 0 auto;
        }
    }
}