/* phc-program.css
 * Component styles for /programs/<slug>/ detail pages.
 * Contract: docs/superpowers/specs/2026-04-20-program-page-genomics-diagnostics-design.md
 */

/* ─── Hero ──────────────────────────────────────────────────── */

.phc-program-hero {
  position: relative;
  isolation: isolate;
}

/* Figma 3-stop gradient, painted via Elementor's overlay ::before.
   opacity:1 override counters Elementor's default 0.5 on container overlays. */
.phc-program-hero::before {
  background: linear-gradient(to left,
    rgba(0,0,0,0.67)   0%,
    rgba(0,0,0,0.47) 150%,
    rgba(0,0,0,0.60) 200%) !important;
  opacity: 1 !important;
}

/* Inner content must paint above the overlay.
   .phc-program-hero is e-con-full, so its direct child is a plain .elementor-element
   (not .e-con-inner — targeting .e-con-inner will NOT match). */
.phc-program-hero > .elementor-element {
  position: relative;
  z-index: 2;
}

/* ── Peptides hero only (page 1007) — DESKTOP ONLY ───────────────
   The peptides hero photo is a PORTRAIT image (1707x2560) painted as
   background-size:cover. On a wide hero that means image-width ==
   container-width, so the horizontal crop is locked — the capsule
   subject can't be panned into view via Elementor's Position control
   (and editing it there cascades across breakpoints). So we reframe
   here instead (BACKGROUND ONLY — no child/cream-box changes). Per the
   client the capsule must sit BEHIND the heading text (left). A
   portrait cover image has zero horizontal play (position-X alone does
   nothing), so a zoom (background-size 127%) gives the needed room and
   `background-position:100% 41%` pans the hand+capsule up-left so the
   glowing pill lands behind the title. Scoped to >=1025px ONLY so the
   stacked tablet/mobile heroes are deliberately left untouched.
   Class phc-program-hero--peptides is on the hero container (2d5ccfe).
   To nudge: raise pill = increase the 41%; move pill right = lower the
   100% toward ~80%. */
@media (min-width: 1025px) {
  .phc-program-hero--peptides {
    background-size: 127% auto !important;
    background-position: 100% 41% !important;
  }
}

/* ─── Overview ───────────────────────────────────────────────
 * Figma refs:
 *   Desktop : node 156:33 — flex row, gap 64, p-80, items-center; text col
 *             520px fixed, image flex:1 self-stretch (matches text col height).
 *   Tablet  : node 161:62 — flex row, gap 48, px-48 py-64, items-center;
 *             text col flex:1 (no fixed width), image flex:1 self-stretch.
 *   Mobile  : node 161:778 — flex column, gap 32, px-16 py-48, items-start;
 *             order: eyebrow → H2 → image → body1 → body2, image 180px tall.
 *
 * Padding / gap / flex-direction / H2 responsive typography are set via
 * Elementor per-breakpoint widget settings (09-build-program.php) so they
 * remain editable in the Elementor UI. Rules here own layout that can't
 * be expressed via the UI: image sizing, mobile reorder, and scroll reveals.
 */

.phc-overview {
  /* Container is set via Elementor to flex row (desktop/tablet) → column (mobile).
     No rules needed here — Elementor's flex settings drive the axis. */
}

/* Desktop / tablet: image fills remaining width AND stretches to match the
   text column's intrinsic height. Trick: position the <img> absolutely so
   it contributes zero intrinsic height to the flex row — otherwise the
   img's natural aspect (lab photo ≈ 4:5 portrait) pushes the container
   taller than the text column, and `align-self: stretch` inflates the
   photo to ~500px tall. With the img absolute-positioned inside a
   relative wrapper with flex:1 self-stretch, the flex row's cross-size is
   driven entirely by the text column. Figma uses the same trick
   (absolute inset-0 on the img). */
@media (min-width: 768px) {
  .phc-overview__image.elementor-widget {
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
    position: relative;
    overflow: hidden;
  }
  /* This build of Elementor renders <img> as the direct child of the widget
     (no .elementor-widget-container wrapper), so absolute-positioning goes
     on the img itself. */
  .phc-overview__image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* Desktop: text col is fixed 520 (Elementor widget setting sets this). */
@media (min-width: 1025px) {
  .phc-overview__text.e-con {
    flex: 0 0 520px;
  }
}

/* Tablet (768-1024): text col grows to fill available space. */
@media (min-width: 768px) and (max-width: 1024px) {
  .phc-overview__text.e-con {
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0;
  }
}

/* Mobile/tablet: image stacks below text — Elementor's native _flex_order
   on the image widget pushes it to the end of the column. */
@media (max-width: 767px) {
  .phc-overview__image.elementor-widget {
    position: static;
    align-self: auto;
    overflow: visible;
  }
  .phc-overview__image > img {
    position: static;
    inset: auto;
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .phc-overview--list .phc-overview__image.elementor-widget {
    position: static;
    overflow: visible;
    flex: none;
    align-self: auto;
    width: 100%;
  }
  .phc-overview--list .phc-overview__image > img {
    position: static;
    inset: auto;
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
  }
}


/* ─── Your Journey ──────────────────────────────────────────── */

/* Width clamping handled by Elementor's content_width: boxed on the root
   container — do NOT add max-width/margin-inline here. */

/* Section header group — eyebrow/H2/subtitle.
   Figma places these at exact 16px gaps inside their own flex column.
   Zero inner element margins so browser defaults on <h2>/<p> don't add
   to the container's 16px flex gap. Keep text widgets editable in
   Elementor; these rules only scope to the header group. */
.phc-journey__header .elementor-widget .elementor-heading-title,
.phc-journey__header .elementor-widget p {
  margin: 0;
}

/* Step number badge — Figma: #2E3D63 navy square, white text, ~56×52, square corners */
.phc-journey__num .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  min-height: 52px;
  line-height: 1;
  background: #2E3D63;
  color: #FFFFFF;
  border-radius: 2px;
  letter-spacing: 0.5px;
  padding: 6px 0;
}

/* Step card — white bg + #9B8764 gold border + drop-shadow on hover, matching
   Figma 2015:26230. JS observer adds .phc-revealing then .phc-revealed (same
   pattern as .phc-methodology-card); hover gated on .phc-revealed so the
   treatment can't flash during the reveal animation. Transparent base border
   reserves space so hover doesn't shift layout. */
.phc-journey__step {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: 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-* custom properties so an Elementor UI edit emits an inline
   element style that beats this rule, keeping the per-card padding
   control client-editable. */
.phc-journey__step {
  --padding-block-start: 24px;
  --padding-block-end: 24px;
  --padding-inline-start: 24px;
  --padding-inline-end: 24px;
}
@media (min-width: 1025px) {
  .phc-journey__step {
    --padding-block-start: 32px;
    --padding-block-end: 32px;
    --padding-inline-start: 32px;
    --padding-inline-end: 32px;
  }
}

/* Hover only on desktop (>1024px). PHC breakpoints: tablet ≤1024, mobile ≤767.
   Figma shows cards transparent on tablet/mobile, and UX requests no hover
   treatment on those breakpoints either. */
@media (hover: hover) and (min-width: 1025px) {
  .phc-journey__step.phc-revealed:hover {
    background: #FFFFFF;
    border: 1px solid #9B8764;
    box-shadow: -4px 4px 8px rgba(27, 54, 93, 0.2);
  }
}

/* Arrow — Feather arrow-right SVG inside Elementor HTML widget.
   Color inherits via currentColor; rotate 90° on mobile for vertical stack. */
.phc-journey__arrow {
  color: #9B8764;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phc-journey__arrow svg {
  width: 24px;
  height: 24px;
  display: block;
}
@media (max-width: 767px) {
  .phc-journey__arrow svg {
    transform: rotate(90deg);
  }
}

/* ─── Who This Is For ───────────────────────────────────────── */

/* Width clamping handled by Elementor's content_width: boxed on the root
   container — do NOT add max-width/margin-inline here. Per-breakpoint
   background-color / padding / flex-gap / flex-direction / H2 typography
   live on Elementor widget settings (09-build-program.php) so they
   remain editable in the UI. Rules here own what widget settings can't
   express: checkmark icon, row layout, and scroll reveals. */

/* Header group: Figma places eyebrow + H2 at exact 16px gaps inside
   their own flex column. Zero inner-element margins so browser defaults
   on <h2>/<p> don't add to the container's 16px flex gap. */
.phc-who__header .elementor-widget .elementor-heading-title,
.phc-who__header .elementor-widget p {
  margin: 0;
}

.phc-who__row p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.phc-who__content {
  width: 100%;
}

.phc-who__media {
  width: 100%;
}

/* Single image fills its media box, cropped via object-fit:cover. Figma:
   rounded-[4px]. The Elementor image widget + its container must inherit
   the box height so the <img> can fill it (height:100% needs a sized
   ancestor chain). */
.phc-who__media .elementor-widget-image,
.phc-who__media .elementor-widget-image .elementor-widget-container {
  height: 100%;
  width: 100%;
}

.phc-who__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

/* Tablet + desktop: media is a fixed 364px-tall banner (Figma h-[364px]). */
@media (min-width: 768px) {
  .phc-who__media {
    height: 364px;
    border-radius: 4px;
    overflow: hidden;
  }
}

/* Tablet (768–1024): Figma stacks the two-column checklist ABOVE the
   full-width image. DOM order is media→grid, so column-reverse on the
   flex content puts the grid on top. Checklist stays Elementor's flex-row
   (two columns), tuned to Figma's 32px column gap / 16px row gap. */
@media (min-width: 768px) and (max-width: 1024px) {
  .phc-who__content {
    flex-direction: column-reverse !important;
  }
  .phc-who__grid {
    --gap: 32px;
    --row-gap: 32px;
    --column-gap: 32px;
    gap: 32px !important;
    justify-content: center;
  }
  .phc-who__grid > .e-con {
    --gap: 16px;
    --row-gap: 16px;
    --column-gap: 16px;
    gap: 16px !important;
  }
  /* Figma tablet uses an 8px check→text gap (desktop/mobile use 16px). */
  .phc-who__row p {
    gap: 8px;
  }
}

/* Desktop (≥1025): Figma is a single 48px-gap row — image left (grows to
   fill), single checklist column right (natural width), vertically
   centered. The two Elementor sub-columns are stacked into one visual
   column of 8 rows at an even 20px gap. */
@media (min-width: 1025px) {
  /* Figma desktop row is 1120px wide (1280 frame − 80px padding each side):
     image 758 + 48 gap + list 314. The site's boxed content caps at 1280,
     ~140px wider, which over-inflates the flex:1 image and pushes the list
     to the boxed edge. Cap the row at Figma's 1120 and centre it so the
     proportions and breathing room match the design. */
  .phc-who__content {
    flex-direction: row !important;
    align-items: center;
    gap: 48px !important;
    --gap: 48px;
    --column-gap: 48px;
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    --padding-inline-start: 0px;
    --padding-inline-end: 0px;
    padding-inline: 0 !important;
  }

  .phc-who__media {
    flex: 1 1 0;
    min-width: 0;
    /* Zero Elementor's default container padding so the image fills the box
       edge-to-edge (Figma image has no inset). */
    --padding-block-start: 0px;
    --padding-block-end: 0px;
    --padding-inline-start: 0px;
    --padding-inline-end: 0px;
    padding: 0 !important;
  }

  .phc-who__grid {
    flex: 0 0 auto;
    flex-direction: column !important;
    --gap: 20px;
    --row-gap: 20px;
    --column-gap: 20px;
    gap: 20px !important;
    width: max-content;
    justify-content: flex-start;
  }

  .phc-who__grid > .e-con {
    display: flex;
    flex-direction: column;
    --gap: 20px;
    --row-gap: 20px;
    --column-gap: 20px;
    gap: 20px !important;
    width: max-content;
    /* Zero Elementor's default 10px container padding so the gap between
       the two stacked sub-columns equals the 20px in-column row gap. */
    --padding-block-start: 0px;
    --padding-block-end: 0px;
    padding-block: 0 !important;
  }

  .phc-who__grid > .e-con > .elementor-widget {
    width: max-content;
  }
}

@media (max-width: 767px) {
  /* Single column of 8 rows: the grid stacks both Elementor sub-columns
     (flex_direction_mobile:column), so even out the gap between the two
     groups to match Figma's 20px within-group row gap. */
  .phc-who__grid {
    gap: 20px !important;
  }
  .phc-who__grid > .e-con {
    gap: 20px !important;
    /* Zero Elementor's default 10px padding so the two stacked groups gap
       evenly (20px) with the in-group rows. */
    --padding-block-start: 0px;
    --padding-block-end: 0px;
    padding-block: 0 !important;
  }

  /* Figma mobile (node 214:6274): single-column checklist ABOVE the image.
     DOM order is media→grid, so column-reverse puts the grid on top. */
  .phc-who__content {
    flex-direction: column-reverse !important;
  }

  /* Full-width image, near-square 343×317 banner (Figma), cropped via cover. */
  .phc-who__media {
    height: auto;
    aspect-ratio: 343 / 317;
    overflow: hidden;
    border-radius: 4px;
    --padding-block-start: 0px;
    --padding-block-end: 0px;
    --padding-inline-start: 0px;
    --padding-inline-end: 0px;
    padding: 0 !important;
  }
  .phc-who__media .elementor-widget-image,
  .phc-who__media .elementor-widget-image .elementor-widget-container {
    height: 100%;
  }

  .phc-who__cta-row {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .phc-who__cta-row .phc-cta .elementor-button,
  .phc-who__cta-row .phc-cta .elementor-button:hover,
  .phc-who__cta-row .phc-cta .elementor-button:focus-visible {
    width: 100%;
    max-width: 100%;
  }
}

/* Figma: solid #9B8764 fill, rounded-[14px] (squircle, not circle), 20×20,
   white ✓ inside at font-medium 14px. */
.phc-who__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background: #9B8764;
  color: #FFFFFF;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

.phc-who__footer-link {
  color: #787878;
  font-weight: 700;
  text-decoration: none;
  transition: color 180ms ease;
}

.phc-who__footer-link:hover {
  color: #9B8764;
}

.phc-who__cta-row .phc-cta--outline .elementor-button {
  color: #9B8764 !important;
}

.phc-who__cta-row .phc-cta--outline .elementor-button:hover,
.phc-who__cta-row .phc-cta--outline .elementor-button:focus-visible {
  color: #0E1B2B !important;
}

.phc-methodology-section .phc-methodology-cta-row .phc-cta--outline .elementor-button {
  color: #9B8764 !important;
}

.phc-methodology-section .phc-methodology-cta-row .phc-cta--outline .elementor-button:hover,
.phc-methodology-section .phc-methodology-cta-row .phc-cta--outline .elementor-button:focus-visible {
  color: #0E1B2B !important;
}

/* Who row reveal states — same stagger-on-scroll pattern as
   .phc-methodology-card / .phc-journey__step. The `PHC Methodology
   Reveal` WPCode snippet registers this section with
   container=`.phc-who__grid`, card=`.phc-who__row`. Desktop/tablet:
   150ms stagger. Mobile: per-row viewport entry. */
@media (prefers-reduced-motion: no-preference) {
  .phc-who__row {
    opacity: 0;
    transform: translateY(40px);
  }
  .phc-who__row.phc-revealing {
    animation: phcRevealCard 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
  .phc-who__row.phc-revealed {
    opacity: 1;
    transform: none;
  }
}

/* No-JS fallback: if the observer never marks the grid .phc-observed,
   keep rows visible. */
.phc-who__grid:not(.phc-observed) .phc-who__row {
  opacity: 1;
  transform: none;
}

/* ─── Journey card reveal states ─────────────────────────────
 * Stagger-on-scroll pattern (matches .phc-methodology-card):
 *   initial          → opacity 0, translateY(40px)
 *   .phc-revealing   → running phcRevealCard animation (600ms)
 *   .phc-revealed    → final state, hover enabled
 * JS lives in the `PHC Methodology Reveal` WPCode snippet; it adds the
 * classes once .phc-journey__steps enters the viewport. No-JS fallback
 * below keeps content visible if the observer never runs.
 */

@media (prefers-reduced-motion: no-preference) {
  .phc-journey__step {
    opacity: 0;
    transform: translateY(40px);
  }
  .phc-journey__step.phc-revealing {
    animation: phcRevealCard 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
  .phc-journey__step.phc-revealed {
    opacity: 1;
    transform: none;
  }
  @keyframes phcRevealCard {
    to { opacity: 1; transform: translateY(0); }
  }
}

/* No-JS fallback: if the observer never marks the row .phc-observed, keep
   cards visible. Mirrors methodology's fallback. */
.phc-journey__steps:not(.phc-observed) .phc-journey__step {
  opacity: 1;
  transform: none;
}

/* ─── Motion ─────────────────────────────────────────────────
 * Scroll-driven reveals + hero intro stagger. All animation-ranges
 * confined to the `entry` phase only (never `cover`) — lesson from
 * the footer scroll-reveal rebuild where `entry … cover` never
 * completed because the footer is the last page element.
 * Wrapped in prefers-reduced-motion: no-preference so reduced-motion
 * users see static content.
 */

@media (prefers-reduced-motion: no-preference) {

  @keyframes phcFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes phcFadeIn {
    from { opacity: 0; }
    to   { opacity: 0.6; }
  }

  /* Hero intro stagger on load: eyebrow → H1 → subtitle → CTAs */
  .phc-program-hero .elementor-widget-heading:nth-of-type(1) { animation: phcFadeUp 600ms ease both 100ms; }
  .phc-program-hero .elementor-widget-heading:nth-of-type(2) { animation: phcFadeUp 600ms ease both 200ms; }
  .phc-program-hero .elementor-widget-text-editor            { animation: phcFadeUp 600ms ease both 300ms; }
  .phc-program-hero .elementor-widget-button                 { animation: phcFadeUp 600ms ease both 450ms; }

  /* Scroll-driven reveals (browsers that support animation-timeline:view()) */
  @supports (animation-timeline: view()) {

    /* Who section header (eyebrow + H2 group) — fade-up as the header
       enters the viewport. Rows stagger separately via the observer
       (see `.phc-who__row.phc-revealing` above). */
    .phc-who__header {
      animation: phcFadeUp 1ms linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

/* Overview reveal is driven by the `PHC Text Reveal JS` WPCode snippet:
   each .phc-overview__text child + the .phc-overview__image widget carries
   .phc-reveal (initial opacity:0 + translateY(40px)), and the parent
   .phc-overview__text carries .phc-reveal-cascade (snippet assigns a
   100ms-step CSS var for staggered fade-up). Image uses no cascade on
   purpose — it fades alongside the last paragraph on desktop, and on
   mobile it sits between H2 and body1 so it reveals mid-cascade. */

/* ─── Client / Partner ──────────────────────────────────────────
 * Figma refs:
 *   Desktop : node 156:399 — two halves, 50/50 row, content-height,
 *             px-48 py-60, gap-24 vertical inside each half, h2 48/56,
 *             button 240×48.
 *   Tablet  : node 161:715 — 50/50 row, h-500, px-32 py-48, gap-24,
 *             h2 40/48.
 *   Mobile  : node 161:1233 — column stack, each half h-500, full width,
 *             px-20 py-48, gap-32, h2 28/36 with letter-spacing -0.2.
 *
 * Per-breakpoint padding, gap, heading typography, and min-height live
 * on Elementor widget settings (09-build-program.php) so they remain
 * editable in the UI. Rules here own:
 *   - the overlay opacity override (Elementor's container ::before
 *     defaults to opacity:0.5, halving the rgba(...,0.8) emitted by
 *     the build → must force 1 to render the Figma overlay alphas);
 *   - section-scoped navy button color (Figma uses #2E3D63 here, not
 *     the global .phc-cta--navy #0E1B2B);
 *   - stagger-on-scroll reveal of the two halves (same pattern as
 *     .phc-methodology-card, registered in `PHC Methodology Reveal`)
 *     plus an internal stagger of heading → body → button inside each
 *     half once it lands on .phc-revealed.
 */

/* Overlay opacity — Elementor renders container background_overlay_color
   on a ::before with default opacity:0.5. The build emits rgba(...,0.8)
   matching Figma; force opacity:1 here so the alpha lands at 0.8. */
.phc-client-partner .phc-client-partner__half > .elementor-background-overlay,
.phc-client-partner .phc-client-partner__half::before {
  opacity: 1 !important;
}

/* Section-scoped navy override — Figma uses #2E3D63 on the
   "Become a Partner" button inside this section, lighter than the
   global .phc-cta--navy (#0E1B2B). Border matches background. */
.phc-client-partner .phc-cta--navy .elementor-button {
  background-color: #2E3D63;
  border-color: #2E3D63;
}

@media (prefers-reduced-motion: no-preference) {
  /* Halves: scroll-stagger pattern (matches .phc-methodology-card).
     Initial state hidden, .phc-revealing animates to visible,
     .phc-revealed pins the final state. JS in `PHC Methodology Reveal`. */
  .phc-client-partner__half {
    opacity: 0;
    transform: translateY(40px);
  }
  .phc-client-partner__half.phc-revealing {
    animation: phcRevealCard 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
  .phc-client-partner__half.phc-revealed {
    opacity: 1;
    transform: none;
  }
  /* Inner content is intentionally NOT staggered — only the half container
     reveals. Previously the children (heading → body → button) faded up on
     150/300/450 ms delays; that compounded with the container stagger and
     read as a double-cascade. Keep content static so the container reveal
     lands cleanly on both the homepage and the program page. */
}

/* No-JS fallback — if the observer never marks the section .phc-observed,
   keep the halves visible. */
.phc-client-partner:not(.phc-observed) .phc-client-partner__half {
  opacity: 1;
  transform: none;
}

/* Genomics "What's Included" mobile card width guard.
   The section's Elementor custom CSS defines tablet max-width for cards;
   at <=767px we must explicitly reset max-width so cards can span full width. */
@media (max-width: 767px) {
  .phc-methodology-section .phc-methodology-card {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── Program-card CTA reveal (global; matches inline rules on posts 43/197 so
      genomics-diagnostics (105) & flagship (255) work without per-page CSS).
      Learn More is now a link, so the slot only needs to open ~32px (link
      line-box). `!important` overrides the legacy 78px in section-level
      xpro_custom_css on pages 43 / 197 — those rules are selector-prefixed
      (one extra class), so equal-source specificity isn't enough. ── */
.phc-program-pair__cta-slot {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(.22, .61, .36, 1);
}
.phc-program-pair__cta-slot .elementor-widget-button {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.35s cubic-bezier(.22, .61, .36, 1),
    transform 0.35s cubic-bezier(.22, .61, .36, 1);
}
@media (hover: hover) {
  .phc-program-pair.phc-revealed:hover .phc-program-pair__cta-slot {
    max-height: 32px !important;
  }
  .phc-program-pair.phc-revealed:hover .phc-program-pair__cta-slot .elementor-widget-button {
    opacity: 1;
    transform: none;
  }
}
/* Touch devices AND mobile widths — Learn More is visible from the start,
   no card-hover needed. Combined media list catches phones (hover:none) and
   small viewports on hover-capable hardware (≤767px window on a desktop).
   `!important` is required: the section's xpro_custom_css sets the button to
   `opacity:0; transform:translateY(8px)` with `.elementor-element-{id} .phc-program-pair__cta-slot
   .elementor-widget-button` (0,3,0) — higher specificity than this class-only
   selector (0,2,0), so without !important the button stays invisible at
   narrow widths on hover-capable hardware (Chrome devtools mobile preview). */
@media (hover: none), (max-width: 767px) {
  .phc-program-pair__cta-slot {
    max-height: 32px !important;
  }
  .phc-program-pair__cta-slot .elementor-widget-button {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── Women's Health (900) section layout ─────────────────
 * Figma: desktop node 2087-7641 (1280) | tablet 2087-7535 (768) | mobile 2087-7536 (375).
 *   Overview  desktop 2-col (text 520 + image)  | tablet+mobile STACKED (heading->image->text->list)
 *   Who       desktop + tablet 2-col (photo left + list right) | mobile list-above/photo-below
 *   Outcome   desktop + tablet 2-col (text + image) | mobile STACKED (text->image)
 * Layout that can't be expressed via Elementor UI lives here; backgrounds,
 * column widths and the image widgets themselves are set in _elementor_data
 * so they stay client-editable.
 */

.phc-ov--900-main,
.phc-ov--900-outcome {
  background-color: #F8F8F8;
}

.phc-overview__image-col {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  padding: 0 !important;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}

/* Desktop (>=1025): Overview + Outcome 2-col, 64px gap; inline image hidden. */
@media (min-width: 1025px) {
  .phc-ov--900-main > .e-con-inner,
  .phc-ov--900-outcome > .e-con-inner {
    gap: 64px !important;
    --gap: 64px;
    --column-gap: 64px;
  }
  .phc-ov--900-main .phc-overview__text .elementor-widget-image {
    display: none !important;
  }
}

/* Tablet + mobile (<=1024): Overview STACKED. */
@media (max-width: 1024px) {
  .phc-ov--900-main > .e-con-inner {
    flex-direction: column !important;
    --flex-direction: column;
    gap: 24px !important;
    --gap: 24px;
    --row-gap: 24px;
  }
  .phc-ov--900-main .phc-overview__text {
    width: 100% !important;
    flex: none !important;
    --width: 100% !important;
  }
  .phc-ov--900-main .phc-overview__image-col {
    display: none !important;
  }
  .phc-ov--900-main .phc-overview__text .elementor-widget-image {
    display: block !important;
  }
  .phc-ov--900-main .phc-overview__text .elementor-widget-image img {
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* Tablet (768-1024): Overview image height; Outcome + Who stay 2-col. */
@media (min-width: 768px) and (max-width: 1024px) {
  .phc-ov--900-main .phc-overview__text .elementor-widget-image img {
    height: 280px !important;
  }

  .phc-ov--900-outcome > .e-con-inner {
    gap: 48px !important;
    --gap: 48px;
    --column-gap: 48px;
  }
  .phc-ov--900-outcome .phc-overview__image-col {
    flex: 1 1 0 !important;
    width: auto !important;
    align-self: stretch !important;
  }
  .phc-ov--900-outcome .phc-overview__image-col .phc-overview__image.elementor-widget {
    position: relative !important;
    flex: 1 1 0 !important;
    align-self: stretch !important;
    overflow: hidden !important;
    width: auto !important;
  }
  .phc-ov--900-outcome .phc-overview__image-col .phc-overview__image > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .phc-ov--900-outcome .phc-overview__text {
    width: auto !important;
    flex: 1 1 0 !important;
    --width: auto;
    min-width: 0;
  }

  .phc-who__content {
    flex-direction: row !important;
    align-items: center !important;
    gap: 48px !important;
    --gap: 48px;
    --column-gap: 48px;
  }
  .phc-who__media {
    flex: 1 1 0 !important;
    align-self: stretch !important;
    height: auto !important;
  }
  .phc-who__grid {
    flex: 1 1 0 !important;
    flex-direction: column !important;
    gap: 20px !important;
    --gap: 20px;
    width: auto !important;
    max-width: none !important;
    justify-content: flex-start !important;
  }
  .phc-who__grid > .e-con {
    flex-direction: column !important;
    gap: 20px !important;
    --gap: 20px;
  }
}

/* Mobile (<=767): Overview image height; Outcome STACKED (text -> image). */
@media (max-width: 767px) {
  .phc-ov--900-main .phc-overview__text .elementor-widget-image img {
    height: 180px !important;
  }

  /* WHO mobile: image on TOP (header -> intro -> image -> checklist).
     The global .phc-who__content rule sets column-reverse (image bottom);
     scope to page 900 with higher specificity to flip to natural column so
     the media (DOM-first) sits above the checklist grid. Figma 2087-7370. */
  .page-id-900 .phc-who__content {
    flex-direction: column !important;
    --flex-direction: column;
  }
  .page-id-900 .phc-who__media {
    aspect-ratio: 343 / 200;
    height: auto !important;
    width: 100% !important;
    overflow: hidden;
    border-radius: 4px;
  }

  .phc-ov--900-outcome > .e-con-inner {
    flex-direction: column !important;
    --flex-direction: column;
    gap: 24px !important;
    --gap: 24px;
  }
  .phc-ov--900-outcome .phc-overview__text {
    width: 100% !important;
    flex: none !important;
    --width: 100% !important;
    order: -99999 !important;
  }
  .phc-ov--900-outcome .phc-overview__image-col {
    display: block !important;
    order: 0 !important;
    flex: none !important;
    width: 100% !important;
    height: 240px !important;
    overflow: hidden !important;
    align-self: auto !important;
    padding: 0 !important;
  }
  .phc-ov--900-outcome .phc-overview__image-col .phc-overview__image.elementor-widget {
    position: static !important;
    flex: none !important;
    width: 100% !important;
    overflow: visible !important;
    align-self: auto !important;
  }
  .phc-ov--900-outcome .phc-overview__image-col .phc-overview__image > img {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: 240px !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* No-JS reveal fallback: keep .phc-reveal children visible if the observer never runs. */
.phc-ov--900-main .phc-overview__text:not(.phc-observed) .phc-reveal,
.phc-ov--900-outcome .phc-overview__text:not(.phc-observed) .phc-reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.phc-who__header {
  text-align: center;
  align-items: center;
  width: 100%;
}

.phc-who {
  gap: 49px;
  --gap: 49px;
  --row-gap: 49px;
}

.phc-who__content {
  --width: 100% !important;
  width: 100% !important;
}

/* IV Drip cards (page 1007) — hover gold outline matching .phc-journey__step.
   Cards already carry white bg + shadow + 8px radius natively (no CSS); hover
   only adds the gold border. 1px transparent base border reserves space so
   hover doesn't shift layout. */
.phc-ivd-card { border: 1px solid transparent; transition: border-color 250ms ease; }
.phc-ivd-card:hover { border-color: #9B8764; }

/* ─── Specialist Programmes cards (page 255, Figma 2165:5006) ──────────
 * Same card chrome as the "Our Programmes" cards (image-left + gold #9B8764
 * panel-right, diagonal corner notch, bg-cover image), but the panel holds a
 * bullet list (icon-list) instead of a paragraph + Learn-More CTA.
 *
 * The original chrome was authored as ID-scoped Xpro CSS (`#other-programs …`)
 * which only one section can match, so a second programmes section rendered as
 * plain rectangles. This class-scoped copy lives in the mu-plugin (version
 * controlled; the client edits content + images in the Elementor UI and leaves
 * this alone). Section carries the `phc-specialist-programmes` CSS class.
 *
 * The section's DOM/settings are identical to the "Our Programmes" section, so
 * the tablet/mobile rules below mirror that card exactly — only the selectors
 * change from `#other-programs` (structural nth-child chains) to the semantic
 * `.phc-program-*` classes. The corner notch and the bg-cover image fill are
 * the only parts that can't be expressed with Elementor-native settings.
 * ------------------------------------------------------------------- */

/* Image column + gold panel both clip the rotated corner chip. */
.phc-specialist-programmes .phc-program-img,
.phc-specialist-programmes .phc-program-text {
  position: relative;
  overflow: hidden;
}

/* bg-cover photo fills the image column. The img-inner container carries the
   Elementor-native background image (client-editable); it is absolutely
   placed so the column height is driven by the panel's content. */
.phc-specialist-programmes .phc-program-img-inner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform 0.35s ease-out;
}

/* Diagonal white corner notch — 147px square rotated 45°, parked off the
   bottom-right so only a triangle shows. Matches the Our Programmes cards
   (section background is #FFFFFF). */
.phc-specialist-programmes .phc-program-img::after,
.phc-specialist-programmes .phc-program-text::after {
  content: '';
  position: absolute;
  width: 90px;
  height: 90px;
  background: #F8F8F8;
  transform: rotate(45deg);
  bottom: -45px;
  right: -45px;
  z-index: 2;
  pointer-events: none;
}

/* Reveal-on-scroll + hover lift (same pattern as .phc-program-pair elsewhere;
   phcRevealCard keyframes are defined earlier in this file). */
.phc-specialist-programmes .phc-program-pair {
  opacity: 0;
  transform: translateY(40px);
}
.phc-specialist-programmes .phc-program-pair.phc-revealing {
  animation: phcRevealCard 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.phc-specialist-programmes .phc-program-pair.phc-revealed {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.35s ease-out;
}
/* No-JS / not-yet-observed fallback: keep cards visible. */
.phc-specialist-programmes .phc-programs-grid:not(.phc-observed) .phc-program-pair {
  opacity: 1;
  transform: none;
}
@media (hover: hover) {
  .phc-specialist-programmes .phc-program-pair.phc-revealed:hover {
    transform: translateY(-6px);
  }
  .phc-specialist-programmes .phc-program-pair.phc-revealed:hover .phc-program-img-inner {
    transform: scale(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  .phc-specialist-programmes .phc-program-pair {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
  .phc-specialist-programmes .phc-program-img-inner {
    transition: none;
  }
}

/* Tablet (768–1024): image + panel each grow to fill half the row
   (mirrors the existing program card). */
@media (min-width: 768px) and (max-width: 1024px) {
  .phc-specialist-programmes .phc-program-img,
  .phc-specialist-programmes .phc-program-text {
    width: auto !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }
}

/* Mobile (≤767): stack image-on-top, panel-below, flush (zero gap). */
@media (max-width: 767px) {
  .phc-specialist-programmes .phc-program-pair {
    flex-direction: column !important;
    --flex-direction: column !important;
    gap: 0 !important;
    --gap: 0 !important;
    --row-gap: 0 !important;
    --column-gap: 0 !important;
  }
  .phc-specialist-programmes .phc-program-img,
  .phc-specialist-programmes .phc-program-text {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-width: 0 !important;
  }
  /* Image: fixed 160px banner on top. */
  .phc-specialist-programmes .phc-program-img {
    flex: 0 0 160px !important;
    min-height: 160px !important;
    height: 160px !important;
  }
  /* Panel: natural height. */
  .phc-specialist-programmes .phc-program-text {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }
  /* Background-position helpers for the 160px crop (default centres the face). */
  .phc-specialist-programmes .phc-program-img-inner {
    background-position: center center !important;
  }
  .phc-specialist-programmes .phc-program-img-inner.top-position {
    background-position: center top !important;
  }
  /* Smaller notch on the panel only; drop it on the image at this width. */
  .phc-specialist-programmes .phc-program-text::after {
    width: 64px;
    height: 64px;
    bottom: -32px;
    right: -32px;
  }
  .phc-specialist-programmes .phc-program-img::after {
    content: none !important;
  }
  .phc-specialist-programmes .phc-program-subtitle {
    max-width: 100%;
  }
}

/* === Static dual-currency pricing (2026-06-10, replaces flip cards) === */
.phc-price{display:flex;align-items:center;justify-content:center;min-width:80px;height:40px;margin:0;padding:0 12px;background:#F5EDDA;border:1px solid #9B8764;border-radius:8px}
.phc-price .elementor-heading-title{margin:0;color:#9B8764;font-family:"Inter",sans-serif;font-weight:700;font-size:16px;line-height:1;white-space:nowrap}
.phc-pricing__table .phc-price{min-width:80px}
.phc-price-pair{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto;width:auto}
body.translatepress-nl_NL .phc-price--eur{order:1}
body.translatepress-nl_NL .phc-price--gbp{order:2}
.phc-pricing__table .phc-price-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid #F5EDDA}
.phc-pricing__table .phc-price-row__name{flex:1 1 auto;min-width:0}
.phc-pricing__table .phc-price-row__name .elementor-heading-title{margin:0;color:#5E6778;font-family:"Inter",sans-serif;font-weight:300;font-size:16px;line-height:26px}
.phc-pricing__table .phc-price-cat{padding:28px 0 6px;border-bottom:1.5px solid #9B8764;margin-bottom:6px}
.phc-pricing__table .phc-price-cat .elementor-heading-title{margin:0;color:#1E1E1E;font-family:"Cormorant Garamond",serif;font-weight:700;font-size:26px;line-height:32px;text-transform:uppercase;letter-spacing:.02em}
.phc-pricing__table .phc-price-group{padding:16px 0 2px}
.phc-pricing__table .phc-price-group .elementor-heading-title{margin:0;color:#1E1E1E;font-family:"Cormorant Garamond",serif;font-weight:700;font-size:20px;line-height:28px}
.phc-pricing__table .phc-price-group__desc .elementor-heading-title,
.phc-pricing__table .phc-price-group__desc{margin:0 0 6px;color:#5E6778;font-family:"Inter",sans-serif;font-weight:300;font-style:italic;font-size:13px;line-height:20px}
.phc-prog-price__actions{display:flex!important;flex-direction:row;align-items:center;justify-content:center;gap:12px;margin-top:6px}
.phc-prog-price__actions .phc-price{min-width:120px;height:44px}
.phc-prog-price__actions .phc-price .elementor-heading-title{font-size:18px}
.phc-ivd-card{position:relative}
.phc-ivd-card__actions{position:absolute;top:20px;right:20px;left:auto;width:max-content;max-width:calc(100% - 40px);z-index:4;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:8px}
.phc-ivd-card__actions .phc-price{min-width:62px;height:36px}
.phc-ivd-card__actions .phc-price .elementor-heading-title{font-size:15px}
/* reserve right space so title row never runs under the pinned price pair (all breakpoints) */
.phc-ivd-card > .e-con:first-child{--padding-right:160px}

@media (max-width:1024px){
  .phc-pricing__table .phc-price-row{gap:10px}
  .phc-price{min-width:64px;height:36px;padding:0 8px}
  .phc-pricing__table .phc-price{min-width:64px}
  .phc-price .elementor-heading-title{font-size:15px}
  .phc-pricing__table .phc-price-cat .elementor-heading-title{font-size:22px}
}
@media (max-width:767px){
  .phc-pricing__table .phc-price-row{flex-wrap:wrap}
  .phc-pricing__table .phc-price-row__name{flex:1 1 100%}
  .phc-price-pair{justify-content:flex-start;margin-top:6px}
}


/* ── What We Assess (Hormone Optimisation) Men's/Women's cards — match the standard phc-program
   card chrome that the Discover/Other-Programmes cards get from the #other-programs section's
   xpro_custom_css: a diagonal white "cut" corner (a 45° white diamond half-clipped by the column's
   overflow:hidden), full-cover image with a hover zoom, a card hover-lift, and the Learn More CTA
   revealing on hover. These two cards live OUTSIDE .phc-programs-grid, so the section CSS never
   reaches them — we re-apply the identical rules here, scoped by class. Whole-box click navigation
   is handled by mu-plugin phc-program-card-link.php. ── */
.phc-why-we-exist .phc-program-pair { position: relative; cursor: pointer; transition: transform 0.35s ease-out; }
.phc-why-we-exist .phc-program-pair .phc-program-img,
.phc-why-we-exist .phc-program-pair .phc-program-text { position: relative; overflow: hidden; }
/* image fills the column and zooms on hover (matches .phc-program-img-inner elsewhere) */
.phc-why-we-exist .phc-program-pair .phc-program-img-inner {
  position: absolute; inset: 0;
  background-size: cover; background-position: center center; background-repeat: no-repeat;
  transition: transform 0.35s ease-out;
}
.phc-why-we-exist .phc-program-pair .phc-program-img-inner.top-position { background-position: center top; }
/* the cut: a white diamond pinned past the bottom-right corner; the column's overflow:hidden
   slices it into a clean diagonal corner (same 147px geometry as the Discover cards) */
.phc-why-we-exist .phc-program-pair .phc-program-img::after,
.phc-why-we-exist .phc-program-pair .phc-program-text::after {
  content: ""; position: absolute; width: 147px; height: 147px; background: #FFFFFF;
  transform: rotate(45deg); bottom: -73.5px; right: -73.5px; z-index: 2; pointer-events: none;
}
/* heading is a native link (no-JS fallback + a11y) but keeps the panel text colour */
.phc-why-we-exist .phc-program-pair .elementor-widget-heading a { color: inherit; text-decoration: none; }
@media (hover: hover) {
  .phc-why-we-exist .phc-program-pair:hover { transform: translateY(-6px); }
  .phc-why-we-exist .phc-program-pair:hover .phc-program-img-inner { transform: scale(1.05); }
  .phc-why-we-exist .phc-program-pair:hover .phc-program-pair__cta-slot { max-height: 32px !important; }
  .phc-why-we-exist .phc-program-pair:hover .phc-program-pair__cta-slot .elementor-widget-button { opacity: 1 !important; transform: none !important; }
}
/* mobile: stack image-on-top, panel-below (flush), keep the cut on the panel only */
@media (max-width: 767px) {
  .phc-why-we-exist .phc-program-pair { flex-direction: column !important; --flex-direction: column !important; gap: 0 !important; --gap: 0 !important; --row-gap: 0 !important; --column-gap: 0 !important; }
  .phc-why-we-exist .phc-program-pair .phc-program-img,
  .phc-why-we-exist .phc-program-pair .phc-program-text { width: 100% !important; }
  .phc-why-we-exist .phc-program-pair .phc-program-img { min-height: 240px; }
  .phc-why-we-exist .phc-program-pair .phc-program-img::after { content: none !important; }
  .phc-why-we-exist .phc-program-pair .phc-program-text::after { width: 64px; height: 64px; bottom: -32px; right: -32px; }
}