/**
 * Zamseed Team Widget Styles
 *
 * @package Zamseed
 * @since 1.0.0
 */

/* ==========================================================================
   Team Base
   ========================================================================== */

.zs-team {
    position: relative;
}

.zs-team__inner {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

/* ==========================================================================
   Section Header
   ========================================================================== */

.zs-team__header {
    margin-bottom: 48px;
    max-width: 700px;
}

.zs-team__header[style*="center"] {
    margin-left: auto;
    margin-right: auto;
}

.zs-team__eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    /* Token fix: was --zs-secondary (#d35400, an orange outside the palette).
       Eyebrows across the theme sit on --zs-accent-text. */
    color: var(--zs-accent-text, #9a6c1f);
}

.zs-team__heading {
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 16px;
    color: var(--zs-text, #1c1c1c);
}

.zs-team__description {
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1.0625rem;
    line-height: 1.65;
    margin: 0;
    color: var(--zs-muted, #555555);
}

/* ==========================================================================
   Grid Layout
   ========================================================================== */

.zs-team__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* ==========================================================================
   Management group heading

   Only rendered when a group actually has members, so this styling never
   applies while every member is unassigned — the page then shows a single
   unlabelled grid exactly as before.
   ========================================================================== */

.zs-team__group-heading {
    margin: 0 0 24px;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--zs-primary, #2d5a27);
    text-align: var(--zs-header-text-align, center);
}

/* Space between one group's cards and the next group's heading. The first
   heading keeps its own top margin at 0 so grouping does not add a gap above
   the first row. */
.zs-team__grid + .zs-team__group-heading {
    margin-top: 56px;
}

@media (max-width: 767px) {
    .zs-team__group-heading {
        font-size: 26px;
        margin-bottom: 20px;
    }

    .zs-team__grid + .zs-team__group-heading {
        margin-top: 40px;
    }
}

/* ==========================================================================
   Team Card
   ========================================================================== */

.zs-team__card {
    background-color: var(--zs-card, #ffffff);
    border: 1px solid transparent;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--zs-shadow-sm, 0 10px 30px rgba(0, 0, 0, 0.04));
    transition: var(--zs-transition-card, transform 0.3s ease, box-shadow 0.3s ease);
    text-align: center;
}

.zs-team__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--zs-shadow, 0 18px 50px rgba(45, 90, 39, 0.12));
}

/* ==========================================================================
   Image
   ========================================================================== */

.zs-team__image {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--zs-warm, #fdfcf9);
}

.zs-team__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Per-member crop anchor. The card is wider than it is tall, so `cover`
       discards roughly 30% of a square portrait's height; centred, that takes
       the hairline off. Set per record via _zs_team_focal; unset behaves
       exactly as before. */
    object-position: var(--zs-team-focal, 50% 50%);
    transition: transform 560ms var(--zs-ease-standard, ease);
}

.zs-team__card:hover .zs-team__image img {
    transform: scale(1.025);
}

.zs-team__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--zs-muted, #555555);
    opacity: 0.3;
}

.zs-team__card--yic .zs-team__image--placeholder {
    background-color: #000000;
    color: #ffffff;
    opacity: 1;
}

/* ==========================================================================
   Content
   ========================================================================== */

.zs-team__content {
    padding: 24px;
}

/* ==========================================================================
   Name & Role
   ========================================================================== */

.zs-team__name {
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 4px;
    color: var(--zs-text, #1c1c1c);
}

.zs-team__role {
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--zs-primary, #2d5a27);
}

/* ==========================================================================
   Bio
   ========================================================================== */

.zs-team__bio {
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0 0 16px;
    color: var(--zs-muted, #555555);
}

/* ==========================================================================
   Social Links
   ========================================================================== */

.zs-team__social {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.zs-team__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--zs-muted, #555555);
    background-color: var(--zs-warm, #fdfcf9);
    border-radius: 50%;
    text-decoration: none;
    transition: background-color var(--zs-motion-fast, 220ms) var(--zs-ease-hover, ease), color var(--zs-motion-fast, 220ms) var(--zs-ease-hover, ease);
}

.zs-team__social-link:hover {
    color: #ffffff;
    background-color: var(--zs-primary, #2d5a27);
}

.zs-team__social-link:focus {
    outline: 2px solid var(--zs-primary, #2d5a27);
    outline-offset: 2px;
}

.zs-team__social-link svg {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   Empty State
   ========================================================================== */

/* Published, not just an editor notice: the Team content type is empty, so a
   Team CPT section renders this instead of collapsing to a blank band. */
.zs-team__empty {
    padding: 48px 24px;
    text-align: center;
    background-color: var(--zs-warm, #fdfcf9);
    border: 1px solid var(--zs-border, rgba(0, 0, 0, 0.08));
    border-radius: 16px;
}

.zs-team__empty p,
.zs-team__empty span {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.9375rem;
    color: var(--zs-muted, #555555);
}

.zs-team__empty p.zs-team__empty-message,
.zs-team__empty p.zs-team__empty-legacy,
.zs-team__empty p.zs-team__empty-description {
    font-size: 1.0625rem;
    color: var(--zs-text, #1c1c1c);
}

/* Element-qualified, like the message/legacy/description rules above it.
   `.zs-team__empty p, .zs-team__empty span` is two classes and an element and
   was outranking both of these, so the eyebrow lost its uppercase scale and the
   heading rendered at 15px against a 17px description — a heading smaller than
   the body it introduces. Observed on page 764 before its cutover. */
.zs-team__empty span.zs-team__empty-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 0.8125rem;
    color: var(--zs-accent-text, #9a6c1f);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.zs-team__empty p.zs-team__empty-heading {
    margin: 0 0 12px;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--zs-primary, #2d5a27);
}

.zs-team__empty-description {
    max-width: 620px;
    margin-right: auto;
    margin-left: auto;
}

.zs-team__empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    min-height: 44px;
    padding: 12px 22px;
    border: 1px solid var(--zs-primary, #2d5a27);
    border-radius: var(--zs-radius-pill, 999px);
    background-color: var(--zs-primary, #2d5a27);
    color: #ffffff;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

.zs-team__empty-cta:hover,
.zs-team__empty-cta:focus-visible {
    background-color: var(--zs-primary-dark, #244f22);
    border-color: var(--zs-primary-dark, #244f22);
    color: #ffffff;
}

.zs-team__empty-cta:focus-visible {
    outline: 2px solid var(--zs-accent, #c48c33);
    outline-offset: 3px;
}

/* Editor-only diagnostic. Element-qualified so it beats the `margin: 0` above. */
.zs-team__empty p.zs-team__empty-hint {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--zs-accent, #c48c33);
    font-size: 0.8125rem;
    color: var(--zs-accent-text, #9a6c1f);
}

/* ==========================================================================
   Responsive - Tablet
   ========================================================================== */

@media (max-width: 1080px) {
    .zs-team__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   Responsive - Mobile
   ========================================================================== */

@media (max-width: 760px) {
    .zs-team__header {
        margin-bottom: 32px;
    }

    .zs-team__heading {
        font-size: clamp(1.75rem, 6vw, 2rem);
    }

    .zs-team__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .zs-team__content {
        padding: 20px;
    }

    .zs-team__name {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .zs-team__card,
    .zs-team__image img,
    .zs-team__social-link {
        transition: none;
    }

    .zs-team__card:hover {
        transform: none;
    }

    .zs-team__card:hover .zs-team__image img {
        transform: none;
    }
}

/* ==========================================================================
   Our Team page preset — opt-in only. Matches Figma node 11133:10722 without
   writing all geometry into generated JSON.
   ========================================================================== */

.zs-team--preset-our-team-page {
    background-color: #f6f4ee;
    padding: 100px clamp(20px, 11.11vw, 160px);
}

.zs-team--preset-our-team-page .zs-team__inner {
    max-width: 1120px;
}

.zs-team--preset-our-team-page .zs-team__grid {
    --zs-team-gap: 28px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--zs-team-gap);
    align-items: start;
}

/* ==========================================================================
   Section lead — Sean above Group, Leah above Zambia Management
   --------------------------------------------------------------------------
   The head of each section takes a row of its own and is centred over the
   rest, so the hierarchy reads immediately rather than depending on the
   reader noticing who happens to sit in the first grid cell.

   It stays the same card: same background, border, radius, type and image
   height. Only its placement changes. `max-width` reproduces exactly one
   column of the grid it is spanning — (100% - 2 gaps) / 3 — so the lead is
   the same width as the cards beneath it and the row reads as deliberate
   rather than as a stretched card.
   ========================================================================== */

.zs-team--preset-our-team-page .zs-team__card--lead {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: calc((100% - 2 * var(--zs-team-gap)) / 3);
}

.zs-team--preset-our-team-page .zs-team__card {
    border-color: rgba(45, 90, 39, 0.14);
    border-radius: 16px;
    box-shadow: none;
    text-align: left;
}

.zs-team--preset-our-team-page .zs-team__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(45, 90, 39, 0.1);
}

.zs-team--preset-our-team-page .zs-team__image {
    aspect-ratio: auto;
    height: 250px;
    background-color: #e8e2d4;
}

.zs-team--preset-our-team-page .zs-team__content {
    padding: 24px;
}

.zs-team--preset-our-team-page .zs-team__name {
    margin-bottom: 8px;
    color: #2d5a27;
    font-size: 22px;
    line-height: 24px;
}

.zs-team--preset-our-team-page .zs-team__role {
    margin-bottom: 0;
    color: #c48c33;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 19.97px;
    letter-spacing: 0.998px;
    text-transform: uppercase;
}

.zs-team--preset-our-team-page .zs-team__empty {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
    padding: 56px 48px;
    background-color: #ffffff;
    border-color: rgba(45, 90, 39, 0.14);
    box-shadow: 0 18px 44px rgba(45, 90, 39, 0.08);
}

.zs-team--preset-our-team-page .zs-team__empty-description {
    color: #555555;
}

@media (max-width: 1200px) {
    .zs-team--preset-our-team-page {
        padding-right: clamp(24px, 6vw, 72px);
        padding-left: clamp(24px, 6vw, 72px);
    }
}

@media (max-width: 900px) {
    .zs-team--preset-our-team-page {
        padding-top: 76px;
        padding-bottom: 76px;
    }

    .zs-team--preset-our-team-page .zs-team__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .zs-team--preset-our-team-page .zs-team__card--lead {
        max-width: calc((100% - var(--zs-team-gap)) / 2);
    }
}

@media (max-width: 560px) {
    .zs-team--preset-our-team-page {
        padding: 56px 20px;
    }

    .zs-team--preset-our-team-page .zs-team__grid {
        --zs-team-gap: 22px;
        grid-template-columns: 1fr;
        gap: var(--zs-team-gap);
    }

    /* One column: centring is meaningless and a narrower lead would just look
       like a mistake, so it returns to a normal full-width first card. */
    .zs-team--preset-our-team-page .zs-team__card--lead {
        max-width: none;
    }

    .zs-team--preset-our-team-page .zs-team__image {
        height: 230px;
    }

    .zs-team--preset-our-team-page .zs-team__empty {
        padding: 40px 24px;
    }
}

/* ==========================================================================
   Our Team — Group vs Zambia Management
   --------------------------------------------------------------------------
   The two organisational levels used to share one treatment, so the only thing
   separating them was the heading text and the page read as one continuous
   employee grid.

   The distinction is structural rather than decorative: Group is a contained,
   institutional panel; Zambia Management sits open on the page ground with a
   slightly denser grid. Same typography, same card language, no divider rule,
   and neither is scaled up relative to the other — one is enclosed, the other
   is expansive.

   Scoped to the Our Team preset, which page 764 is the only live consumer of.
   ========================================================================== */

.zs-team--preset-our-team-page .zs-team__group + .zs-team__group {
    margin-top: 72px;
}

/* Group — the contained, corporate block. --zs-green-soft over the page's warm
   neutral: enough separation to read as a panel, not enough to read as a
   coloured box. White cards keep their contrast against it. */
.zs-team--preset-our-team-page .zs-team__group--group {
    padding: 48px;
    background-color: var(--zs-green-soft, #eef4df);
    border: 1px solid rgba(45, 90, 39, 0.12);
    border-radius: 20px;
}

/* Zambia Management — open on the page, no panel, and a tighter gutter so the
   operating team reads as the denser working group.

   The gap and column declarations in this block carry !important for the reason
   already documented in widget-page-hero.css: the widget's grid_gap and columns
   controls ship with non-empty defaults and `selectors`, so Elementor prints
   `.elementor-element-<id> .zs-team__grid` into the per-page stylesheet. That is
   the same specificity as these rules but loads after them, so it wins on order
   alone. Nothing else in this file needs it. */
.zs-team--preset-our-team-page .zs-team__group--zambia-management .zs-team__grid {
    gap: 24px !important;
}

/* Cards in a row match the tallest, so a two-line title — "Group Chief
   Financial Controller" is the current one — lengthens its whole row instead of
   leaving one card 20px taller than its neighbours. */
.zs-team--preset-our-team-page .zs-team__grid {
    align-items: stretch;
}

.zs-team--preset-our-team-page .zs-team__card {
    height: 100%;
}

/* The heading was spaced by `.zs-team__grid + .zs-team__group-heading`, which no
   longer matches now that each group is wrapped — the heading is a first child
   rather than the grid's sibling. Spacing moves to the wrapper above. */
.zs-team--preset-our-team-page .zs-team__group .zs-team__group-heading {
    margin-top: 0;
}

/* Tablet: 9 members in two columns leaves a lone card on a fifth row. Three
   columns divides exactly and the cards still hold ~300px here. Group has six
   and divides cleanly either way, so it is left alone. */
@media (min-width: 901px) and (max-width: 1080px) {
    .zs-team--preset-our-team-page .zs-team__group--zambia-management .zs-team__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    /* The two sections run different column counts in this window — Group
       falls to two, Zambia Management is held at three above — so the lead
       width has to follow its own section rather than one shared formula.
       Zambia Management keeps the three-column default. */
    .zs-team--preset-our-team-page .zs-team__group--group .zs-team__card--lead {
        max-width: calc((100% - var(--zs-team-gap)) / 2);
    }
}

@media (max-width: 900px) {
    .zs-team--preset-our-team-page .zs-team__group--group {
        padding: 36px;
    }

    .zs-team--preset-our-team-page .zs-team__group + .zs-team__group {
        margin-top: 56px;
    }
}

/* Mobile: both collapse to one column, so the panel is what keeps the two
   sections legible as separate blocks. Its padding drops to stay off the
   screen edges without squeezing the cards. */
@media (max-width: 560px) {
    .zs-team--preset-our-team-page .zs-team__group--group {
        padding: 24px 16px;
        border-radius: 16px;
    }

    .zs-team--preset-our-team-page .zs-team__group + .zs-team__group {
        margin-top: 44px;
    }

    .zs-team--preset-our-team-page .zs-team__group--zambia-management .zs-team__grid {
        gap: 18px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zs-team--preset-our-team-page .zs-team__card:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ==========================================================================
   Featured leadership row — 26 August instruction, "CEO & MD at the top,
   Sean left / Leah right".

   Two cards on their own row above the organisational sections. The people in
   it are lifted out of their own section rather than duplicated, so Group and
   Zambia Management stay separate and nobody is counted twice.
   ========================================================================== */

.zs-team--preset-our-team-page .zs-team__group--featured .zs-team__grid {
    /* Two across, centred on the same measure the sections below use, so the
       two leaders read as the head of the page rather than a wider band. */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 760px;
    margin-inline: auto;
}

.zs-team--preset-our-team-page .zs-team__group--featured {
    margin-bottom: 72px;
}

@media (max-width: 700px) {
    .zs-team--preset-our-team-page .zs-team__group--featured .zs-team__grid {
        grid-template-columns: 1fr !important;
        max-width: 100%;
    }
}