/*
 * phc-footer.css — PHC Footer minimal stylesheet.
 *
 * Scope strictly limited to things Elementor widget settings can't express:
 *   - Logo fill (the image widget is set to width:100% so it fills the brand
 *     column — exactly like Figma's `w-full`). Native asset is 253x201, so we
 *     cap max-width at 253px to avoid upscaling, and force height:auto so the
 *     aspect ratio is preserved instead of the widget's 159px squish.
 *   - Scroll-driven reveal via animation-timeline: view() (bio-atelier style).
 *
 * Typography, padding, gap, and per-breakpoint font-size sit on the widgets
 * themselves (typography_font_size_mobile, padding_tablet, etc.) so they
 * remain editable in the Elementor UI.
 */

/* Logo fills the brand column (matches Figma `w-full`); native 253x201 caps
   the width so it never upscales, height:auto keeps the aspect ratio. */
.phc-footer__logo img {
    width: 100% !important;
    max-width: 253px !important;
    height: auto !important;
    object-fit: contain;
}

/*
 * Footer link hover — gold color + animated half-width underline.
 * Originally lived in container 73bb6e5's xpro_custom_css (scoped to that
 * column cluster only). Lifted here so the Privacy Policy / Terms links
 * beside the copyright (different branch of the tree) get the same effect.
 * Scope is .phc-footer__link, which is on every footer heading-link widget.
 */
.phc-footer__link .elementor-heading-title { display: inline-block; }

.phc-footer__link .elementor-heading-title a {
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
    text-decoration: none;
    color: inherit;
    transition: color .35s cubic-bezier(.4, 0, .2, 1);
}

.phc-footer__link .elementor-heading-title a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #B79D62;
    transition: width .45s cubic-bezier(.22, .61, .36, 1);
}

.phc-footer__link .elementor-heading-title a:hover { color: #B79D62; }
.phc-footer__link .elementor-heading-title a:hover::after { width: 50%; }

/* === Responsive layout ======================================================
 *
 * Three breakpoints, all driven by `.phc-footer__brand` (logo column) and
 * `.phc-footer__links` (4-column cluster: Navigation / Social / Contact / Legal).
 *
 *   Desktop (≥1025px): logo at the left rail, cluster at the right rail,
 *     all 4 columns in one row, 80px column-gap. Parent uses
 *     `justify-content: space-between`; both children shrink to content
 *     width so the dead zone falls between them instead of beside the logo.
 *
 *   Tablet (768–1024px): viewport can't fit logo+cluster side-by-side and
 *     keep the 4 columns horizontal at any reasonable gap. Stack: logo
 *     centered on top, cluster full-width below, columns arranged 2-per-row.
 *     Parent's flex_direction_tablet=column (set in Elementor data) handles
 *     the stack; the rule below sizes the cluster + columns.
 *
 *   Mobile (≤767px): same shape as tablet but with a 24px column-gap so
 *     two columns fit comfortably even on a 360px phone.
 *
 * Elementor v4 hardcodes `--container-widget-flex-grow: 1` for row-direction
 * inner containers, ignoring the data-level `_flex_grow` setting — that's
 * why everything below uses `flex` / `width` !important.
 */
@media (min-width: 1025px) {
    .phc-footer__brand,
    .phc-footer__links {
        flex: 0 0 auto !important;
        width: auto !important;
    }
    .phc-footer__col {
        flex: 0 0 auto !important;
        width: auto !important;
    }
}

/* Tablet + mobile: cluster goes full-width below the centered logo. */
@media (max-width: 1024px) {
    .phc-footer__links {
        flex: 0 0 100% !important;
        width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
    }
}

/* Tablet (768–1024): brand centered on top (logo 151px + copyright), then the
   3 columns spread edge-to-edge in one row — matches Figma node 318:7452. */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Brand block: logo + copyright centered. */
    .phc-footer__logo { text-align: center; }
    .phc-footer__logo img {
        max-width: 151px !important;   /* Figma tablet logo = 151px wide */
        margin-left: auto;
        margin-right: auto;
    }
    .phc-footer__copy .elementor-heading-title { text-align: center; }

    /* Columns spread across the full width (Figma justify-between), one row. */
    .phc-footer__links {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
    }
    .phc-footer__col {
        flex: 0 0 auto !important;
        width: auto !important;
    }
}

/* Mobile (≤767): 2 columns per row. Cluster column-gap is 24px (Elementor
   data), so each column = (100% - one gap) / 2 = calc(50% - 12px). */
@media (max-width: 767px) {
    .phc-footer__col {
        flex: 0 0 calc(50% - 12px) !important;
        width: calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
    }
}

/* === Scroll-driven reveal ====================================================
 * All ranges are constrained to the `entry` phase. The footer is the last
 * element on the page, so the scroll can never reach the `cover` phase — if
 * ranges extended into `cover`, elements would be stuck mid-animation at the
 * user's final scroll position.
 */
@supports (animation-timeline: view()) {
    .phc-footer__logo,
    .phc-footer__copy,
    .phc-footer__col {
        opacity: 0;
        transform: translateY(24px);
        animation: phc-footer-rise linear both;
        animation-timeline: view();
    }
    .phc-footer__logo       { animation-range: entry 0%  entry 40%; }
    .phc-footer__copy       { animation-range: entry 20% entry 60%; }
    .phc-footer__col--1     { animation-range: entry 30% entry 70%; }
    .phc-footer__col--2     { animation-range: entry 40% entry 80%; }
    .phc-footer__col--3     { animation-range: entry 50% entry 90%; }
    .phc-footer__col--4     { animation-range: entry 60% entry 95%; }
}

@keyframes phc-footer-rise {
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .phc-footer__logo,
    .phc-footer__copy,
    .phc-footer__col {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}