/* ── Mission & Vision ─────────────────────────────────────── */
.mv-grid {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : var(--space-lg);
}

.mv-card {
    background   : var(--white);
    border       : 1px solid var(--border);
    border-radius: var(--radius-md);
    padding      : var(--space-xl);
    text-align   : center;
}

.mv-card--gold {
    background  : var(--gold-light);
    border-color: var(--gold);
}

.mv-card__icon {
    font-size    : 2.5rem;
    margin-bottom: var(--space-md);
}

.mv-card h3 {
    color        : var(--green-dark);
    margin-bottom: var(--space-sm);
}

.mv-card p {
    color      : var(--text-muted);
    line-height: 1.8;
}

/* ── Values (RICCET) ──────────────────────────────────────── */
.values-grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : var(--space-md);
}

.value-card {
    background   : var(--white);
    border       : 1px solid var(--border);
    border-radius: var(--radius-md);
    padding      : var(--space-lg) var(--space-md);
    text-align   : center;
    transition   : var(--transition);
}

.value-card:hover {
    border-color: var(--gold);
    box-shadow  : var(--shadow-md);
    transform   : translateY(-4px);
}

.value-card__letter {
    width          : 52px;
    height         : 52px;
    border-radius  : 50%;
    background     : var(--green-dark);
    color          : var(--gold);
    font-family    : var(--font-display);
    font-size      : var(--text-2xl);
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin         : 0 auto var(--space-md);
}

.value-card h4 {
    color        : var(--green-dark);
    margin-bottom: var(--space-xs);
    font-family  : var(--font-body);
    font-weight  : 700;
}

.value-card p {
    font-size  : var(--text-sm);
    color      : var(--text-muted);
    line-height: 1.7;
}

/* ── Team Grid ────────────────────────────────────────────── */
.team-grid {
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
    gap                  : var(--space-lg);
}

/* Desktop only: centre first card when total count is odd */
@media (min-width: 769px) {
    .team-card:first-child:nth-last-child(odd) {
        grid-column: 1 / -1;
        max-width  : calc(50% - var(--space-lg) / 2);
        margin     : 0 auto;
    }
}

.team-card {
    background   : var(--white);
    border       : 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow     : hidden;
    transition   : var(--transition);
}

.team-card:hover {
    box-shadow: var(--shadow-md);
    transform : translateY(-4px);
}

.team-card__photo {
    aspect-ratio: 1/1;
    overflow    : hidden;
    background  : var(--green-light);
}

.team-card__photo img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
}

.team-card__photo-placeholder {
    width          : 100%;
    height         : 100%;
    min-height     : 240px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 4rem;
    background     : linear-gradient(135deg, var(--green-light), var(--border));
}

.team-card__info {
    padding: var(--space-lg);
}

.team-card__info h4 {
    color        : var(--green-dark);
    margin-bottom: 0.25rem;
    font-family  : var(--font-body);
    font-weight  : 700;
}

.team-card__role {
    font-size    : var(--text-sm);
    font-weight  : 600;
    color        : var(--gold-dark);
    display      : block;
    margin-bottom: var(--space-sm);
}

.team-card__info p {
    font-size  : var(--text-sm);
    color      : var(--text-muted);
    line-height: 1.7;
}

/* Team on dark background */
.section--dark .team-card {
    background  : rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
}

.section--dark .team-card__info h4 {
    color: var(--white);
}

.section--dark .team-card__role {
    color: var(--gold);
}

.section--dark .team-card__info p {
    color: rgba(255, 255, 255, 0.68);
}

.section--dark .team-card__photo-placeholder {
    background: rgba(255, 255, 255, 0.05);
}

.section--dark h2 {
    color: var(--white);
}

/* ── Memberships ──────────────────────────────────────────── */
.memberships-grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : var(--space-lg);
}

.membership-card {
    background   : var(--white);
    border       : 1px solid var(--border);
    border-radius: var(--radius-md);
    padding      : var(--space-xl);
    text-align   : center;
    transition   : var(--transition);
}

.membership-card:hover {
    border-color: var(--gold);
    box-shadow  : var(--shadow-md);
}

.membership-card__icon {
    font-size    : 2rem;
    margin-bottom: var(--space-sm);
}

.membership-card h4 {
    color        : var(--green-dark);
    font-family  : var(--font-body);
    font-weight  : 700;
    font-size    : var(--text-base);
    margin-bottom: 0.4rem;
}

.membership-card p {
    font-size: var(--text-sm);
    color    : var(--text-muted);
}

/* ── SDG Grid ─────────────────────────────────────────────── */
/* ── SDG Grid ─────────────────────────────────────────────── */
.sdg-grid {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    gap                  : var(--space-md);
    margin-bottom        : var(--space-lg);
}

.sdg-item {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : var(--space-sm);
    text-align    : center;
}

.sdg-item a {
    display      : block;
    border-radius: var(--radius-sm);
    overflow     : hidden;
    transition   : var(--transition);
    width        : 100%;
}

.sdg-item a:hover {
    transform : translateY(-4px);
    box-shadow: var(--shadow-md);
}

.sdg-item img {
    width     : 100%;
    height    : auto;
    display   : block;
}

.sdg-item span {
    font-size  : var(--text-xs);
    font-weight: 600;
    color      : var(--text-muted);
    line-height: 1.4;
}

.sdg-attribution {
    text-align : center;
    font-size  : var(--text-xs);
    color      : var(--text-muted);
    margin-top : var(--space-lg);
    line-height: 1.7;
}

.sdg-attribution a {
    color      : var(--green-dark);
    font-weight: 600;
}

.sdg-attribution a:hover {
    color: var(--gold-dark);
}

/* ── Video ──────────────────────────────────────────── */
.video-section {
    grid-template-columns: 1fr;
}

/* ── Video Section ────────────────────────────────────────── */
.video-section {
    display              : grid;
    grid-template-columns: 1fr 1.4fr;
    gap                  : var(--space-3xl);
    align-items          : center;
}

.video-section__player {
    position     : relative;
    border-radius: var(--radius-md);
    overflow     : hidden;
    aspect-ratio : 16/9;
    background   : var(--text-dark);
    box-shadow   : var(--shadow-lg);
}

.video-section__player iframe {
    position: absolute;
    inset   : 0;
    width   : 100%;
    height  : 100%;
    border  : none;
}

.video-placeholder {
    width          : 100%;
    height         : 100%;
    position       : absolute;
    inset          : 0;
    background     : linear-gradient(135deg, #0f3d1a, var(--green-dark));
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.video-placeholder__inner {
    text-align: center;
    color     : rgba(255, 255, 255, 0.7);
}

.video-play-btn {
    width          : 72px;
    height         : 72px;
    border-radius  : 50%;
    background     : rgba(201, 168, 76, 0.9);
    color          : var(--text-dark);
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 1.5rem;
    margin         : 0 auto var(--space-md);
    padding-left   : 4px;
}

.video-placeholder__inner p {
    font-weight  : 600;
    color        : var(--white);
    margin-bottom: 0.25rem;
}

.video-placeholder__inner small {
    font-size: var(--text-xs);
    opacity  : 0.6;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .values-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .sdg-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .mv-grid {
        grid-template-columns: 1fr;
    }

    .memberships-grid {
        grid-template-columns: 1fr;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sdg-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    .team-card:first-child:nth-last-child(odd) {
        grid-column: auto;
        max-width  : 100%;
        margin     : 0;
    }

    .video-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .values-grid {
        grid-template-columns: 1fr;
    }

    .sdg-grid {
        grid-template-columns: 1fr;
    }
}