/* ── 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);
}

/* ── Farm Life Gallery ────────────────────────────────────── */
.farm-gallery {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : var(--space-sm);
}

.farm-gallery__item {
    position     : relative;
    overflow     : hidden;
    border-radius: var(--radius-md);
    background   : var(--green-light);
    aspect-ratio : 4/3;
}

.farm-gallery__item img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    display   : block;
    transition: transform 0.5s ease;
}

.farm-gallery__item:hover img {
    transform: scale(1.05);
}

.farm-gallery__overlay {
    position  : absolute;
    inset     : 0;
    background: linear-gradient(to top, rgba(27,92,40,0.78) 0%, transparent 55%);
    display   : flex;
    align-items: flex-end;
    padding   : var(--space-md);
    opacity   : 0;
    transition: opacity 0.3s ease;
}

.farm-gallery__item:hover .farm-gallery__overlay {
    opacity: 1;
}

.farm-gallery__overlay span {
    font-family   : var(--font-body);
    font-size     : var(--text-sm);
    font-weight   : 700;
    color         : var(--white);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Load More Button */
.gallery-load-more {
    text-align : center;
    margin-top : var(--space-xl);
}

.gallery-load-more .btn {
    display        : inline-flex;
    flex-direction : column;
    align-items    : center;
    gap            : 0.3rem;
}

.gallery-count {
    font-size  : var(--text-xs);
    font-weight: 400;
    color      : var(--text-muted);
    letter-spacing: 0;
}

/* Empty state */
.gallery-empty {
    text-align : center;
    padding    : var(--space-3xl) 0;
    color      : var(--text-muted);
}
.gallery-empty span { font-size: 3rem; display: block; margin-bottom: 1rem; }
.gallery-empty p    { font-size: var(--text-md); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .farm-gallery { grid-template-columns: repeat(2, 1fr); }
}

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

/* ── 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;
    }
}