/* ============================================
   Park.dog — Home Page CSS
   Owns: home-page-only styling. Add rules here for
   changes that should only affect the home page.
   Shared rules belong in style.css.
   ============================================ */

/* ---- Hero image — rounded top corners and a bottom cream fade so the
   image dissolves into the cream hero background. */
.parkdog-hero-image-wrap {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 40px 40px 0 0 !important;
    display: block;
    min-height: 360px;
}
.parkdog-hero-image-wrap img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 40px 40px 0 0 !important;
}
/* Bottom fade: cream → transparent so the image dissolves into the cream
   hero background. */
.parkdog-hero-image-wrap::after {
    content: '' !important;
    position: absolute;
    bottom: -2px; left: -2px; right: -2px;
    height: 60px;
    background: linear-gradient(to top, var(--cream), transparent);
    pointer-events: none;
    z-index: 2;
}

/* ---- Hero decorative blob — soft blush-light circle anchored top-right of
   the hero section (matches HTML's `.hero-blob`). The base `::before` rule in
   style.css gets overridden by Elementor's `.e-con::before` (used for
   background-overlay), so we re-declare here with `.e-con` specificity and
   `!important` to win.

   Stacking: `isolation: isolate` creates a stacking context on the section so
   `z-index: 0` on the blob keeps it behind every direct child (which default
   to auto/0 and come later in DOM order) without escaping above the page. */
.parkdog-hero-section.e-con {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}
.parkdog-hero-section.e-con::before {
    content: '' !important;
    position: absolute !important;
    top: -120px !important;
    right: -120px !important;
    left: auto !important;
    width: 400px !important;
    height: 400px !important;
    border-radius: 50% !important;
    background: var(--blush-light) !important;
    opacity: 0.4 !important;
    pointer-events: none;
    z-index: 0;
}
.parkdog-hero-section.e-con > .e-con,
.parkdog-hero-section.e-con > .elementor-element {
    position: relative;
    z-index: 1;
}

/* ---- Lead Magnet (Planning Guide) decorative blob — small blush-light
   circle top-right inside the cream card. Same Elementor `.e-con::before`
   override pattern as the hero blob (style.css's base rule loses to
   Elementor's overlay default). */
.parkdog-lead-magnet.e-con {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}
.parkdog-lead-magnet.e-con::before {
    content: '' !important;
    position: absolute !important;
    top: -60px !important;
    right: -60px !important;
    left: auto !important;
    width: 200px !important;
    height: 200px !important;
    border-radius: 50% !important;
    background: var(--blush-light) !important;
    opacity: 0.3 !important;
    pointer-events: none;
    z-index: 0;
}
.parkdog-lead-magnet.e-con > .e-con,
.parkdog-lead-magnet.e-con > .elementor-element {
    position: relative;
    z-index: 1;
}

/* ---- Opportunity / Evidence card LABELS — give the eyebrow titles room to
   breathe before the paragraph. Elementor's `space_after_widget` shows in the
   editor but the bottom margin gets reset on `.elementor-widget`, so we
   target the widget directly. */
.parkdog-layer-label.elementor-widget-heading {
    margin-bottom: 16px !important;
}

/* ---- Three Ways Dogs Thrive — restore the decorative corner circle.
   Elementor's `.e-con::before` rule sets content:var(--background-overlay)
   (which resolves to `none`) and overrides width/height to 100%; we need
   both higher specificity and !important to bring the circle back.
   The transform shifts the circle 30% past the panel's edge, so we also
   clip the panel itself with overflow:hidden — otherwise the overflow
   shows up as 45px of body scrollWidth on narrow screens. */
.parkdog-pillar-panel.e-con { overflow: hidden !important; }
.parkdog-pillar-panel.e-con::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 150px !important;
    height: 150px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    transform: translate(30%, -30%) !important;
    pointer-events: none;
}

/* ============================================================
   RESPONSIVE — tablet (≤1024) and mobile (≤767).
   Global rules in style.css already collapse grid-3/4 columns;
   this section trims hero, decorations, headings, padding, and
   forces stacking that Elementor's containers won't do alone.
   ============================================================ */

/* ---- Tablet (≤1024px) ---- */
@media (max-width: 1024px) {
    /* Hero: stack content over image to reclaim width */
    .parkdog-hero-section.e-con { flex-direction: column !important; }
    .parkdog-hero-section .elementor-widget-heading h1 { font-size: 36px !important; }
    .parkdog-hero-image-wrap { min-height: 280px; }
    .parkdog-hero-section.e-con::before {
        width: 280px !important; height: 280px !important;
        top: -80px !important; right: 0 !important;
    }
    /* Section titles a touch tighter on tablet */
    .page-id-37 .elementor-widget-heading h2 { font-size: 30px !important; }
    /* Lead-magnet blob: pull inside the container at tablet so the
       overflow:hidden clip doesn't leave a scroll edge */
    .parkdog-lead-magnet.e-con::before { right: 0 !important; }

    /* Three Ways Dogs Thrive — at tablet the 3 pillar panels stay packed
       into one row because Elementor sets `--flex-wrap: nowrap` on the
       parent. Force wrap and let panels go full-width so each pillar gets
       proper breathing room; matches how the rest of the page collapses. */
    .page-id-37 .parkdog-grid-3-equal { flex-wrap: wrap !important; }
    .page-id-37 .parkdog-grid-3-equal > .parkdog-pillar-panel {
        width: 100% !important;
        flex: 0 0 100% !important;
        min-height: 0 !important;
    }
}

/* ---- Mobile (≤767px) ---- */
@media (max-width: 767px) {
    /* Hero text scale + spacing */
    .parkdog-hero-section .elementor-widget-heading h1 { font-size: 28px !important; line-height: 1.15 !important; }
    .parkdog-hero-section .elementor-widget-text-editor { font-size: 15px !important; }
    .parkdog-hero-image-wrap { min-height: 200px; }
    /* Shrink the hero blob so it doesn't dominate the small viewport */
    .parkdog-hero-section.e-con::before {
        width: 220px !important; height: 220px !important;
        top: -60px !important; right: 0 !important;
    }
    /* Hero buttons stack full-width */
    .parkdog-hero-section .elementor-widget-button .elementor-button-wrapper { width: 100%; }
    .parkdog-hero-section .elementor-widget-button .elementor-button {
        width: 100%; justify-content: center;
    }
    /* Section/CTA headings */
    .page-id-37 .elementor-widget-heading h2 { font-size: 24px !important; line-height: 1.2 !important; }
    .page-id-37 .elementor-widget-heading h3 { font-size: 22px !important; }

    /* Lead-magnet form row stacks on mobile (email above, button below) */
    .parkdog-lead-magnet .parkdog-cf7-row,
    .parkdog-lead-magnet form .wpcf7-form-control-wrap,
    .parkdog-lead-magnet .elementor-widget-form .elementor-field-group {
        width: 100% !important;
    }
    .parkdog-lead-magnet.e-con > .e-con { flex-direction: column !important; }
    .parkdog-lead-magnet.e-con::before {
        width: 140px !important; height: 140px !important;
        top: -40px !important; right: 0 !important;
    }

    /* Lead magnet image placeholder + decorative blob smaller */
    .parkdog-pillar-panel { min-height: 0 !important; }

    /* Three Pillar panels: tighter padding + smaller corner circle */
    .parkdog-pillar-panel.e-con { padding: 28px !important; }
    .parkdog-pillar-panel.e-con::before {
        width: 100px !important; height: 100px !important;
    }
    /* Reduce trust-bar dot row padding */
    .parkdog-trust-item { font-size: 12px !important; }
}