/*
 * phc-our-team.css
 *
 * Cross-cutting reveal-base styles for /our-team — only the bits that
 * cannot live inline in xpro_custom_css (because they couple to the
 * `.phc-observed` no-JS-fallback selector and `prefers-reduced-motion`,
 * which match the site-wide pattern in phc-client-homepage.css).
 *
 * Layout (gap, grid, padding, font sizes) lives inline on each section's
 * Elementor xpro_custom_css per CLAUDE.md. This file owns reveal only.
 */

/* ── Reveal base state ─────────────────────────────────────────────── */

.phc-leadership-card,
.phc-our-team-values-card {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.6s ease, transform 0.35s ease-out;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

/* Reserve hover border + radius up front so the Figma hover treatment
   (node 2015:26230) doesn't shift layout when border-color goes from
   transparent → #9B8764. Extends the base transition with the three
   properties hover animates. */
.phc-our-team-values-card {
    border: 1px solid transparent;
    border-radius: 4px;
    transition: opacity 0.6s ease,
                transform 0.35s ease-out,
                background-color 250ms ease,
                border-color 250ms ease,
                box-shadow 250ms ease;
}

/* Card padding — Figma 2015:26230: 32px desktop, 24px tablet + mobile.
   PHC breakpoints: tablet ≤1024, mobile ≤767. 24px is the default; the
   desktop ≥1025 media query bumps to 32px. Set via Elementor v4
   --padding-* vars so an Elementor UI override (inline style) still
   wins — keeps per-card padding client-editable. */
.phc-our-team-values-card {
    --padding-block-start: 24px;
    --padding-block-end: 24px;
    --padding-inline-start: 24px;
    --padding-inline-end: 24px;
}
@media (min-width: 1025px) {
    .phc-our-team-values-card {
        --padding-block-start: 32px;
        --padding-block-end: 32px;
        --padding-inline-start: 32px;
        --padding-inline-end: 32px;
    }
}

.phc-leadership-card.phc-revealing,
.phc-leadership-card.phc-revealed,
.phc-our-team-values-card.phc-revealing,
.phc-our-team-values-card.phc-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ── No-JS fallback: show immediately if the observer never runs ──── */

.phc-leadership-cards:not(.phc-observed) .phc-leadership-card,
.phc-our-team-values-cards:not(.phc-observed) .phc-our-team-values-card {
    opacity: 1;
    transform: none;
}

/* ── Hover: Leadership cards (matches home .phc-team-card pattern) ──
   Lift -6px on the card. Gated on .phc-revealed so the lift can't
   fight the entry animation, and on (hover: hover) so touch devices
   don't get stuck. */

@media (hover: hover) {
    .phc-leadership-card.phc-revealed:hover {
        transform: translate3d(0, -6px, 0);
    }
}

/* ── Hover: "What We Believe" cards on /our-story (Figma
   UwgJDA9ANXSfD7CAq5k5Xz node 2015:26230 — "Test" card hovered).
   Distinguishes the active card with a white fill, PHC Lion gold
   border, and an off-axis drop shadow (shadow-1) instead of a lift,
   so neighbouring cards stay grounded and the highlighted card reads
   as "selected" rather than "floating". */

@media (hover: hover) {
    .phc-our-team-values-card.phc-revealed:hover {
        background: #FFFFFF;
        border-color: #9B8764;
        box-shadow: -4px 4px 8px rgba(27, 54, 93, 0.2);
    }
}

/* ── Respect reduced-motion preference ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .phc-leadership-card,
    .phc-our-team-values-card {
        transition: none;
        opacity: 1;
        transform: none;
    }
    /* Leadership lifts via transform — zero it so the card stays put. */
    .phc-leadership-card.phc-revealed:hover {
        transform: none;
        box-shadow: none;
    }
    /* Values card's hover is colour/border/shadow only; killing the
       transition snaps the highlight in instantly without fading, which
       respects the user's "no animation" preference while keeping the
       selected-state signal that the design depends on. */
    .phc-our-team-values-card.phc-revealed:hover {
        transition: none;
    }
}