/* =============================================================================
   FloreData — Team member profile (/team/{name-surname}/)
   Reuses the blog-hub floral hero + post-card grid; adds avatar, role, a
   highlighted personal quote, a LinkedIn link, a bio column, and a "rest of the
   team" strip. Each page is themed to the member's brand accent via the inline
   `--fd-accent` custom property (matches the Team-section cards + Geetha's
   "About Cards" — dark ink on a pale accent-tinted chip).
   ============================================================================= */

.fd-page-team { background: var(--wp--preset--color--background); }

/* ---- Hero ---------------------------------------------------------------- */
.fd-teamhero__inner { max-width: 760px; }

/* Deepen the hero tint on team pages so the Light name + role clear WCAG AA
   over the brightest floral centre (this hero is our composition — no .ai spec). */
.fd-teamhero .fd-bloghub-hero__overlay {
    background: radial-gradient(120% 92% at 50% 42%,
        rgba(40, 40, 57, 0.48), rgba(40, 40, 57, 0.62) 70%);
}

/* Avatar — circular portrait with an accent ring + soft accent glow */
.fd-teamhero__avatar {
    display: block;
    width: clamp(112px, 8vw, 148px);
    height: clamp(112px, 8vw, 148px);
    margin: 0 auto 22px;
    border-radius: 50%;
    padding: 4px;
    background: var(--fd-accent, #4C4CC8);
    box-shadow: 0 0 0 1px rgba(249, 248, 247, 0.3),
                0 14px 34px color-mix(in srgb, var(--fd-accent, #4C4CC8) 42%, transparent);
}
.fd-teamhero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    border: 3px solid rgba(249, 248, 247, 0.9);
}

.fd-teamhero__name {
    font-size: clamp(2.4rem, 1rem + 4.6vw, 4.4rem);
    font-weight: 300;            /* Light headings per the brand standard */
    letter-spacing: -0.03em;     /* tighten the display name */
}

.fd-teamhero__role {
    font-weight: 600;
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.3rem);
    letter-spacing: 0.01em;
    color: var(--wp--preset--color--background);
    opacity: 1;
    text-shadow: 0 1px 14px rgba(40, 40, 57, 0.6);
    margin: 12px 0 0;
}

/* Personal quote — dark ink on a pale accent-tinted chip (echoes the About Cards) */
.fd-teamhero__quote {
    margin: 24px 0 0;
    line-height: 1.7;
    text-shadow: none;
}
.fd-teamhero__quote-mark {
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.05rem, 0.92rem + 0.6vw, 1.45rem);
    color: #282839;
    background: #FBF8EC;                                                       /* fallback chip */
    background: color-mix(in srgb, var(--fd-accent, #4C4CC8) 22%, #FBF8EC);    /* faint per-member tint */
    box-shadow: 0.35em 0 0 #FBF8EC, -0.35em 0 0 #FBF8EC;
    box-shadow: 0.35em 0 0 color-mix(in srgb, var(--fd-accent, #4C4CC8) 22%, #FBF8EC),
               -0.35em 0 0 color-mix(in srgb, var(--fd-accent, #4C4CC8) 22%, #FBF8EC);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0.12em 0;
    border-radius: 2px;
}

/* LinkedIn link — accent pill */
.fd-teamhero__linkedin {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 28px auto 0;
    padding: 11px 22px 11px 18px;
    border-radius: 999px;
    background: rgba(249, 248, 247, 0.95);
    color: #282839;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    text-shadow: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.fd-teamhero__linkedin:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(40, 40, 57, 0.28);
    color: #282839;
}
.fd-teamhero__linkedin-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    color: var(--fd-accent, #4C4CC8);
}
.fd-teamhero__linkedin-icon svg { width: 100%; height: 100%; fill: currentColor; }
.fd-teamhero__linkedin:focus-visible {
    outline: 2px solid var(--fd-accent, #4C4CC8);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(249, 248, 247, 0.92);   /* cream backing so the ring stays visible over the dark hero */
}

/* ---- Bio ----------------------------------------------------------------- */
.fd-teambio {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(40px, 5vw, 68px) 24px clamp(8px, 2vw, 20px);
}
.fd-teambio__inner {
    font-size: clamp(1.05rem, 0.96rem + 0.4vw, 1.22rem);
    line-height: 1.65;
    color: var(--wp--preset--color--text);
}
.fd-teambio__inner p { margin: 0 0 1.1em; text-wrap: pretty; }
.fd-teambio__inner p:last-child { margin-bottom: 0; }

/* ---- Member's articles --------------------------------------------------- */
.fd-teamposts {
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(44px, 5vw, 72px) 0 clamp(8px, 2vw, 16px);
}
.fd-teamposts__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 20px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px clamp(20px, 2.4vw, 30px);
    border-bottom: 1px solid var(--wp--preset--color--line);
}
.fd-teamposts__title {
    font-weight: 300;
    font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
}
.fd-teamposts__count {
    font-weight: 600;
    color: #565663;                 /* AA on cream (6.8:1) — the muted token is too light (4.0:1) */
    margin: 0;
}
.fd-teamposts .fd-bloghub-grid { margin-top: clamp(24px, 3vw, 34px); }

/* ---- Meet the rest of the team ------------------------------------------- */
.fd-teammore {
    max-width: 860px;               /* tighter so the trio reads as a deliberate cluster, not floating chips */
    margin: 0 auto;
    padding: clamp(48px, 5vw, 76px) 24px 0;
    text-align: center;
}
.fd-teammore__title {
    font-weight: 300;
    font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem);
    letter-spacing: -0.01em;
    margin: 0 0 clamp(26px, 3vw, 40px);
}
.fd-teammore__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(16px, 2vw, 28px);
}
.fd-teammore__item { --fd-accent: #4C4CC8; flex: 0 1 220px; }
.fd-teammore__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 22px 18px;
    border-radius: 20px;
    border: 1px solid var(--wp--preset--color--line);
    background: #ffffff;
    text-decoration: none;
    color: var(--wp--preset--color--text);
    height: 100%;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.fd-teammore__link:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(40, 40, 57, 0.1);
    border-color: var(--fd-accent);
    color: var(--wp--preset--color--text);
}
.fd-teammore__link:focus-visible {
    outline: 2px solid var(--fd-accent);
    outline-offset: 3px;
}
.fd-teammore__avatar {
    display: block;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    padding: 3px;
    margin-bottom: 8px;
    background: var(--fd-accent);
}
.fd-teammore__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    border: 2px solid #fff;
}
.fd-teammore__name { font-weight: 600; font-size: 1.05rem; }
.fd-teammore__role {
    font-size: 0.85rem;
    color: #565663;                 /* AA on white/cream (6.8:1) — not the too-light muted token */
    line-height: 1.35;
}
/* name + role share one text column (audit 2026-06-29: stops names wrapping mid-name) */
.fd-teammore__text { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }

/* ---- CTA — tighten on team pages so it settles near the footer (no void) -- */
.fd-page-team .fd-post-cta {
    margin-top: clamp(48px, 6vw, 80px);
    margin-bottom: clamp(40px, 5vw, 72px);
}

@media (max-width: 600px) {
    .fd-teamposts__head { padding-bottom: 18px; }

    /* meet-the-rest → 3 clean full-width rows (avatar + name/role), no 2+1 orphan */
    .fd-teammore__grid { gap: 12px; }
    .fd-teammore__item { flex: 1 1 100%; max-width: 340px; }
    .fd-teammore__link { flex-direction: row; align-items: center; gap: 14px; padding: 12px 16px; }
    .fd-teammore__avatar { width: 56px; height: 56px; margin-bottom: 0; flex: none; }
    .fd-teammore__text { align-items: flex-start; flex: 1; }   /* name+role stack left of the row, fill remaining width */
    .fd-teammore__name { white-space: nowrap; }                /* "Riccardo Scott" stays on one line */
    .fd-teammore__role { text-align: left; }

    /* CTA pair → equal width + centered (buttons-same-size feedback) */
    .fd-page-team .fd-post-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
    .fd-page-team .fd-post-cta a { width: 100%; max-width: 280px; box-sizing: border-box; }
}