/* ============================================
   Park.dog — Why Purpose-Built Page CSS
   Owns: why-page-only styling. Add rules here for
   changes that should only affect the why page.
   page-id: 39
   ============================================ */

/* ---- "Why Every Dimension Counts" detail boxes — the four h4s here
   come from text-editor widgets without inline styles, so they render
   with the browser default (mixed-case, big top/bottom margin). Match
   the design language used elsewhere on the page: uppercase, no top
   margin, 6px bottom. Scoped to the section's grid container (pd4c4)
   so other icon-box h4s on the page are unaffected. */
.elementor-element-pd4c4 .parkdog-icon-box h4 {
    text-transform: uppercase;
    margin: 0 0 6px 0;
}

/* ============================================
   Responsive: tablet (≤1024px)
   Page CSS only — global grid stacking already
   handled in style.css.
   ============================================ */
@media (max-width: 1024px) {
    /* Hero heading tightens slightly so it fits cleanly on tablet */
    .page-id-39 .parkdog-page-header h2 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    /* Icon-box padding eases off (was 36px from desktop) */
    .page-id-39 .parkdog-icon-box {
        padding: 28px !important;
    }

    /* CTA banner heading slightly smaller (was 36px) */
    .page-id-39 .elementor-element-pd4c7 h2 {
        font-size: 30px !important;
        line-height: 1.2 !important;
    }
}

/* ============================================
   Responsive: mobile (≤767px)
   ============================================ */
@media (max-width: 767px) {
    /* Hero heading must fit narrow viewport without overflow */
    .page-id-39 .parkdog-page-header h2 {
        font-size: 26px !important;
        line-height: 1.25 !important;
    }

    /* Hero decorative blob circle shrinks so it doesn't dominate */
    .page-id-39 .parkdog-page-header.e-con::before {
        width: 260px !important;
        height: 260px !important;
        top: -40px !important;
    }

    /* In-body section h2s ("The Standard We Build To", "Why Every Dimension Counts") */
    .page-id-39 main h2,
    .page-id-39 .elementor h2 {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }
    /* Re-assert hero size (would otherwise be overridden by the rule above
       depending on cascade — selectors here have equal specificity to the
       hero rule, but this is the last declaration to win). */
    .page-id-39 .parkdog-page-header h2 {
        font-size: 26px !important;
    }

    /* CTA banner heading — re-asserted with element-id specificity */
    .page-id-39 .elementor-element-pd4c7 h2 {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }

    /* Icon-box: tighter padding & gap on narrow screens */
    .page-id-39 .parkdog-icon-box {
        padding: 22px !important;
        gap: 12px !important;
    }

    /* Icon-box h4 size — slightly smaller so longer titles like
       "Proprietary Materials That Outlast the Budget Cycle" don't crowd */
    .page-id-39 .parkdog-icon-box h4 {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    /* Icon-box body text */
    .page-id-39 .parkdog-icon-box p {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    /* CTA banner: tighten internal padding so the orange band isn't huge,
       and stack buttons full-width */
    .page-id-39 .elementor-element-pd4c7 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .page-id-39 .parkdog-cta-buttons-row {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
        width: 100%;
    }
    .page-id-39 .parkdog-cta-buttons-row .elementor-widget-button {
        width: 100% !important;
    }
    .page-id-39 .parkdog-cta-buttons-row .elementor-widget-button .elementor-button {
        width: 100% !important;
        min-width: 0 !important;
    }
}