/*
 * phc-client-homepage.css
 *
 * Cross-cutting styles for /for-patients/ sections that live outside inline
 * xpro_custom_css — specifically reveal-state transitions for the two new
 * sections (Why Choose PHC, How It Works) and a no-JS fallback.
 *
 * Contract: this is one of four places that must stay aligned for the
 * For Patients page. See CLAUDE.md § "PHC For Patients page — single
 * source of truth".
 *   1. config/pages/client-homepage.php         (content)
 *   2. scripts/11-build-client-homepage.php     (builder)
 *   3. elementor-templates/client-homepage/*.json (re-import)
 *   4. scripts/fix-client-homepage.php          (live-DB drift repair)
 *
 * Per-section LAYOUT CSS (padding, flex-gap, card-shape sizing) lives
 * inline in each JSON's xpro_custom_css. This file only owns reveal
 * transitions + no-JS fallback + any cross-section scope guards.
 */

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

.phc-why-choose-card,
.phc-how-it-works-step {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    /* Transparent base bg + border so the Figma 2015:26230 hover treatment
       (white fill + #9B8764 border) swaps in without nudging neighbours. */
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: opacity 0.6s ease, transform 0.35s ease-out,
                background-color 0.25s ease, border-color 0.25s ease,
                box-shadow 0.25s ease;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

.phc-why-choose-card.phc-revealing,
.phc-how-it-works-step.phc-revealing,
.phc-why-choose-card.phc-revealed,
.phc-how-it-works-step.phc-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* 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-why-choose-card,
.phc-how-it-works-step {
    --padding-block-start: 24px;
    --padding-block-end: 24px;
    --padding-inline-start: 24px;
    --padding-inline-end: 24px;
}
@media (min-width: 1025px) {
    .phc-why-choose-card,
    .phc-how-it-works-step {
        --padding-block-start: 32px;
        --padding-block-end: 32px;
        --padding-inline-start: 32px;
        --padding-inline-end: 32px;
    }
}

/* ── Figma 2015:26230 — white bg + #9B8764 border + drop-shadow on hover;
       replaces the previous -6px lift. Gated on .phc-revealed so the swap
       can't fight the entrance animation, and scoped to hover-capable
       pointers so touch devices don't get stuck in a hover state. ────────*/

@media (hover: hover) {
    .phc-why-choose-card.phc-revealed:hover,
    .phc-how-it-works-step.phc-revealed:hover {
        background: #FFFFFF;
        border-color: #9B8764;
        box-shadow: -4px 4px 8px rgba(27, 54, 93, 0.2);
    }
}

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

.phc-why-choose-cards:not(.phc-observed) .phc-why-choose-card,
.phc-how-it-works-steps:not(.phc-observed) .phc-how-it-works-step {
    opacity: 1;
    transform: none;
}

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

@media (prefers-reduced-motion: reduce) {
    .phc-why-choose-card,
    .phc-how-it-works-step {
        transition: none;
    }
}