/**
 * phc-partner-homepage.css — /for-partners/ page styles.
 *
 * Owns:
 *   - Hero "no video" modifier (marker only; injector JS reads the class)
 *   - Our Network layout
 *   - Real Impact layout + gold-bordered quote block
 *   - Reveal base state + no-JS fallback for the 3 new sections
 *
 * Does NOT own:
 *   - The hero gradient (phc-hero-video.css)
 *   - The CTA button visuals (phc-cta.css)
 *   - The FAQ accordion (phc-faq.css)
 *   - The Locations cards (phc-locations.css)
 *   - The scroll-reveal observer JS (WPCode: PHC Methodology Reveal)
 *   - The count-up JS (WPCode: PHC Count-Up)
 */

/* ============================================================
   §03 — Our Network
   ============================================================ */

.phc-network-section {
    /* bg stays white (Elementor default); 50/50 split handled by
       container flex settings emitted from the builder */
}

/* ============================================================
   §07 — Real Impact
   ============================================================ */

.phc-impact-image {
    position: relative;
    overflow: hidden;
    min-height: 382px;
}

.phc-impact-image > .elementor-widget-image,
.phc-impact-image > .elementor-widget-image .elementor-widget-container,
.phc-impact-image > .elementor-widget-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.phc-impact-quote {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.phc-impact-quote__border {
    width: 3px;
    min-height: 60px;
    background: #9B8764;
    flex-shrink: 0;
}

.phc-impact-quote__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 400px;
}

.phc-impact-quote__body {
    font-family: "Inter", Arial, sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    color: #4D4D4D;
    margin: 0;
}

.phc-impact-quote__author {
    font-family: "Inter", Arial, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #9B8764;
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .phc-impact-image { min-height: 320px; }
}

@media (max-width: 767px) {
    .phc-impact-image { min-height: 250px; }
}

/* Zero paragraph margins inside reveal-item content columns so the
   container's flex_gap is the only spacing between eyebrow and H2.
   Without this, the browser's default <p> margin-bottom (1em ≈ 16px)
   stacks on top of the 20px flex_gap → ~36px visible gap. */
.phc-network-content .elementor-widget-text-editor p,
.phc-collab-content  .elementor-widget-text-editor p,
.phc-impact-content  .elementor-widget-text-editor p {
    margin: 0;
}

/* ============================================================
   Reveal base state — §03 §05 §07
   ============================================================ */

.phc-network-reveal-item,
.phc-collab-reveal-item,
.phc-impact-reveal-item {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.6s ease, transform 0.35s ease-out;
}

.phc-network-reveal-item.phc-revealing,
.phc-collab-reveal-item.phc-revealing,
.phc-impact-reveal-item.phc-revealing,
.phc-network-reveal-item.phc-revealed,
.phc-collab-reveal-item.phc-revealed,
.phc-impact-reveal-item.phc-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* No-JS fallback: if the reveal observer never tagged the container
   with .phc-observed, show children so the page stays readable. */
.phc-network-content:not(.phc-observed) .phc-network-reveal-item,
.phc-collab-content:not(.phc-observed) .phc-collab-reveal-item,
.phc-impact-content:not(.phc-observed) .phc-impact-reveal-item {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .phc-network-reveal-item,
    .phc-collab-reveal-item,
    .phc-impact-reveal-item {
        transition: none;
    }
}

/* The "What Partners Can Deliver" checklist rows were copied from the /programs/
   .phc-who__row checklist, which reveals via the `phcRevealCard` keyframe ANIMATION
   in phc-program.css (enqueued site-wide, so it applies here too — both that file
   and this block hide .phc-who__row at opacity:0 until the observer tags it). The
   real gap was the reveal DRIVER: the `PHC Methodology Reveal` snippet's impact-
   section config only targeted .phc-impact-reveal-item, so the copied .phc-who__row
   bullets were never tagged with .phc-revealing/.phc-revealed and stayed invisible.
   Fixed by adding a second impact-section config that targets .phc-who__row. These
   rules animate the staggered reveal with a local keyframe (immune to Elementor's
   .e-con transition-property override; explicit from/to avoids any no-op). Gated on
   no-preference so reduced-motion users keep the instant path, matching genomics and
   the .phc-impact-reveal-item reduce block above. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes phcImpactRowReveal {
        from { opacity: 0; transform: translateY(24px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .phc-impact-content .phc-who__row {
        opacity: 0;
    }
    .phc-impact-content .phc-who__row.phc-revealing {
        animation: phcImpactRowReveal 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }
    .phc-impact-content .phc-who__row.phc-revealed {
        opacity: 1;
        transform: none;
    }
    /* No-JS fallback: if the observer never tagged .phc-impact-content with
       .phc-observed, keep the rows visible (mirrors the .phc-impact-reveal-item
       fallback above). The genomics .phc-who__grid:not(.phc-observed) fallback
       in phc-program.css doesn't match here — for-partners has no .phc-who__grid
       wrapper, so the rows need their own fallback scoped to .phc-impact-content. */
    .phc-impact-content:not(.phc-observed) .phc-who__row {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   §"Why Partner With Us" + §"How We Deliver Our Services" +
   §"Partner Licensing" + §"Our Value Proposition" + §"The Process"
   Card reveal + hover treatments. Lives here (not in xpro_custom_css)
   because Xpro's inline <style> loads before Elementor's .e-con
   transition default; mu-plugin CSS files load after and win the
   cascade at simple specificity (0,1,0).

   Hover splits into two treatments:
     - .phc-hd-card / .phc-pl-card → lift -6px + soft shadow
       (How We Deliver, Partner Licensing — unchanged)
     - .phc-wp-card / .phc-process-card / .phc-feat-card → Figma
       "highlighted" treatment (white bg + Lion-gold border + offset
       shadow, no lift). Source: Figma UwgJDA9ANXSfD7CAq5k5Xz node
       2015:26230 ("Test" card hovered).
   ============================================================ */

.phc-wp-card,
.phc-hd-card,
.phc-pl-card,
.phc-process-card,
.phc-feat-card {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.6s ease, transform 0.35s ease-out, box-shadow 0.35s ease-out;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

/* Transparent base border + 4px radius so the gold hover border doesn't
   shift layout and matches Figma's 4px corner radius for these three
   card types. Background-color/border-color/box-shadow transitions are
   added so the highlighted-card hover crossfades smoothly. */
.phc-wp-card,
.phc-process-card,
.phc-feat-card {
    border: 1px solid transparent;
    border-radius: 4px;
    transition: opacity 0.6s ease,
                transform 0.35s ease-out,
                background-color 0.25s ease-out,
                border-color 0.25s ease-out,
                box-shadow 0.25s ease-out;
}

/* 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-wp-card,
.phc-process-card,
.phc-feat-card {
    --padding-block-start: 24px;
    --padding-block-end: 24px;
    --padding-inline-start: 24px;
    --padding-inline-end: 24px;
}
@media (min-width: 1025px) {
    .phc-wp-card,
    .phc-process-card,
    .phc-feat-card {
        --padding-block-start: 32px;
        --padding-block-end: 32px;
        --padding-inline-start: 32px;
        --padding-inline-end: 32px;
    }
}

.phc-wp-card.phc-revealing,
.phc-wp-card.phc-revealed,
.phc-hd-card.phc-revealing,
.phc-hd-card.phc-revealed,
.phc-pl-card.phc-revealing,
.phc-pl-card.phc-revealed,
.phc-process-card.phc-revealing,
.phc-process-card.phc-revealed,
.phc-feat-card.phc-revealing,
.phc-feat-card.phc-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (hover: hover) {
    /* Parent .phc-XX-cards prefix bumps specificity to 0,0,4,1 so the hover
       box-shadow beats the inline xpro base box-shadow on .phc-hd-card
       (0,0,4,0) and .phc-pl-card (0,0,4,0). Loads later than Elementor's
       inline CSS so cascade order also favors us at equal specificity. */
    .phc-hd-cards .phc-hd-card.phc-revealed:hover,
    .phc-pl-cards .phc-pl-card.phc-revealed:hover {
        transform: translate3d(0, -6px, 0);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    }
    /* Premium pricing card (navy bg) — darker hover shadow that reads on the dark surface */
    .phc-pl-cards .phc-pl-card.phc-pl-card--premium.phc-revealed:hover {
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    }
    /* Why-Partner + Value-Proposition + Process cards use the Figma
       "highlighted card" hover (Figma UwgJDA9ANXSfD7CAq5k5Xz node
       2015:26230): white surface with gold border and an offset shadow-1.
       No vertical lift — the border + shadow alone signal interactivity,
       matching the spec. Parent .phc-XX-cards prefix retained for the
       .phc-wp-card / .phc-feat-card / .phc-process-card selectors to beat
       any inline xpro base box-shadow at equal specificity. */
    .phc-wp-cards .phc-wp-card.phc-revealed:hover,
    .phc-process-cards .phc-process-card.phc-revealed:hover,
    .phc-feat-cards .phc-feat-card.phc-revealed:hover {
        background: #FFFFFF;
        border-color: #9B8764;
        box-shadow: -4px 4px 8px rgba(27, 54, 93, 0.2);
    }
}

/* No-JS / observer-never-ran fallback */
.phc-wp-cards:not(.phc-observed) .phc-wp-card,
.phc-hd-cards:not(.phc-observed) .phc-hd-card,
.phc-pl-cards:not(.phc-observed) .phc-pl-card,
.phc-process-cards:not(.phc-observed) .phc-process-card,
.phc-feat-cards:not(.phc-observed) .phc-feat-card {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .phc-wp-card,
    .phc-hd-card,
    .phc-pl-card,
    .phc-process-card,
    .phc-feat-card {
        transition: none;
    }
    /* Process + feat cards no longer lift on hover, so they don't need a
       transform: none override here — their hover is bg/border/shadow only. */
    .phc-wp-card.phc-revealed:hover,
    .phc-hd-card.phc-revealed:hover,
    .phc-pl-card.phc-revealed:hover {
        transform: none;
    }
}

/* Elementor editor + preview: never hide (project rule: editability first) */
body.elementor-editor-active .phc-wp-card,
body.elementor-editor-preview .phc-wp-card,
body.elementor-editor-active .phc-hd-card,
body.elementor-editor-preview .phc-hd-card,
body.elementor-editor-active .phc-pl-card,
body.elementor-editor-preview .phc-pl-card,
body.elementor-editor-active .phc-process-card,
body.elementor-editor-preview .phc-process-card,
body.elementor-editor-active .phc-feat-card,
body.elementor-editor-preview .phc-feat-card {
    opacity: 1 !important;
    transform: none !important;
}

/* ============================================================
   §"How Partners Benefit" — layout backup
   The primary layout lives in the section's xpro_custom_css.
   This mu-plugin copy is a defensive fallback: Elementor inlines
   xpro CSS into the page HTML which GoDaddy CDN caches as HTML;
   a stale HTML cache serves the old version without these rules
   and the flex containers revert to their row defaults, making
   all four benefit cards overflow horizontally.
   This stylesheet is served as a versioned <link> (bypasses the
   HTML cache), so it always wins when the inlined rules are absent.
   ============================================================ */

.phc-hd-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.phc-hd-row {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.phc-hd-cards {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 1024px) {
    .phc-hd-row { flex-direction: column; }
    .phc-hd-image { order: -1; }
}

@media (max-width: 767px) {
    .phc-hd-cards { flex: 0 0 auto; width: 100%; }
}

/* ============================================================
   Mobile overrides — Figma node 2011:5 (375px canvas)
   ============================================================ */

/* Hero CTA full-width on mobile.
   Elementor's _element_width_mobile:full widens the widget wrapper
   but leaves the <a> button intrinsic-width. Force 100% on all three
   layers so the gold button fills the viewport rail on 375px. */
@media (max-width: 767px) {
    .phc-partner-hero .elementor-widget-button,
    .phc-partner-hero .elementor-widget-button .elementor-button-wrapper,
    .phc-partner-hero .elementor-widget-button .elementor-button {
        width: 100% !important;
    }
}

/* ============================================================
   §"Working With Select Clinics Worldwide" — image dimensions
   The .phc-overview--list modifier identifies this variant.
   phc-program.css uses display:contents + order at mobile to
   interleave the image inside text — that pattern doesn't fit
   this section's 5-child structure. Override it to keep the
   text column intact (normal column order) with the image below.
   Width breakout and height are CSS-only; Elementor has no
   native image-height control and no "break out of section
   padding" control.
   ============================================================ */

/* Mobile: keep text column as a normal flex column so DOM order
   is preserved and the image (phc-overview__image, order reset)
   stays at the bottom after all text and sub-sections. */
/* Scoped to post-205 (For Partners page) only — program pages share
   .phc-overview--list but need the phc-program.css display:contents
   + order behaviour, not these overrides. */
@media (max-width: 767px) {
    .page-id-205 .phc-overview--list .phc-overview__text.e-con {
        display: flex !important;
        flex-direction: column !important;
    }
    .page-id-205 .phc-overview--list .phc-overview__image.elementor-widget {
        order: 0;
        position: static !important;
        overflow: visible !important;
        align-self: auto !important;
    }
    .page-id-205 .phc-overview--list .phc-overview__image > img {
        position: static !important;
        width: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
}

@media (max-width: 1024px) {
    .page-id-205 .phc-overview--list .phc-overview__image.elementor-widget {
        flex: none !important;
        position: static !important;
        overflow: visible !important;
        align-self: stretch !important;
        margin-left: -48px !important;
        margin-right: -48px !important;
        width: calc(100% + 96px) !important;
        max-width: calc(100% + 96px) !important;
    }
    .page-id-205 .phc-overview--list .phc-overview__image > img {
        position: static !important;
        width: 100% !important;
        height: 280px !important;
        object-fit: cover !important;
        display: block !important;
    }
}

@media (max-width: 767px) {
    .page-id-205 .phc-overview--list .phc-overview__image.elementor-widget {
        margin-left: -16px !important;
        margin-right: -16px !important;
        width: calc(100% + 32px) !important;
        max-width: calc(100% + 32px) !important;
    }
}