/* phc-locations.css
 * Component styles for the homepage "Our Locations" section.
 * Contract: docs/superpowers/specs/2026-04-22-home-locations-section-design.md
 *
 * Mirrors the .phc-methodology-card scroll-reveal + hover pattern, gated on
 * (hover: hover) and prefers-reduced-motion. @keyframes phcRevealCard is
 * defined globally by phc-methodology's xpro_custom_css block — no re-def
 * needed here.
 */

.phc-locations-card {
  position: relative;
}

/* ── Initial hidden state ─────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .phc-locations-card {
    opacity: 0;
    transform: translateY(40px);
  }
  .phc-locations-card.phc-revealing {
    animation: phcRevealCard 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }
  .phc-locations-card.phc-revealed {
    opacity: 1;
    transform: translateY(0);
    transition: transform 350ms ease-out, box-shadow 350ms ease-out;
  }
}

/* ── Gold underline pseudo-element (fades in on hover) ────── */
.phc-locations-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #9B8764;
  opacity: 0;
  transition: opacity 350ms ease-out;
  z-index: 2;
}

/* ── Image zoom transition ────────────────────────────────── */
.phc-locations-card .elementor-widget-image img {
  transition: transform 350ms ease-out;
}

/* ── Hover — desktop only (hover-capable pointer) ─────────── */
@media (hover: hover) {
  .phc-locations-card.phc-revealed:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  }
  .phc-locations-card.phc-revealed:hover::after {
    opacity: 1;
  }
  .phc-locations-card.phc-revealed:hover .elementor-widget-image img {
    transform: scale(1.15);
  }
}

/* ── No-JS fallback — keep cards visible if the observer never fires ── */
.phc-locations-cards:not(.phc-observed) .phc-locations-card {
  opacity: 1;
  transform: none;
}