/* Responsive overrides for Chimney Professionals. Loaded after style.css. */

@media (max-width: 768px) {
    .section,
    .page-content { padding-block: var(--spacing-xl); }
}

@media (max-width: 480px) {
    :root { --container-pad: 16px; }
    .section,
    .page-content { padding-block: var(--spacing-lg); }
}

/* ==========================================================================
   SITE HEADER
   ========================================================================== */
@media (max-width: 1440px) {
    .site-header__inner,
    .header-menu { gap: 22px; }
    .header-menu a { font-size: 14px; }
}

@media (max-width: 1024px) {
    .site-header__inner,
    .header-menu { gap: 16px; }
    .site-header__logo-img { height: 40px; }
    .btn { padding: 10px 18px; font-size: 14px; }
}

@media (max-width: 768px) {
    /* The full inline menu does not fit a phone. A hamburger toggle with
       tap-to-open dropdowns needs a dedicated mobile (360px) design; until
       then the menu wraps to its own row and scrolls so nothing is clipped. */
    .site-header__inner { flex-wrap: wrap; gap: 12px; }
    .site-header__nav {
        order: 3;
        flex: 1 0 100%;
        justify-content: flex-start;
        overflow-x: auto;
    }
}

@media (max-width: 475px) {
    .site-header__logo-img { height: 34px; }
    .btn { padding: 9px 14px; }
}

/* ==========================================================================
   BLOCK-HERO
   ========================================================================== */
@media (max-width: 1440px) {
    .block-hero { padding-block: 80px; }
    .block-hero__title { font-size: 42px; }
}

@media (max-width: 1024px) {
    .block-hero { padding-block: 64px; }
    .block-hero__title { font-size: 36px; }
    .block-hero__description { font-size: 17px; }
    .block-hero__metric { padding-inline: 16px; }
    .block-hero__actions { padding-left: 16px; }
}

@media (max-width: 768px) {
    /* Card stacks: ratings row on top, buttons row below. */
    .block-hero__card { flex-direction: column; gap: var(--spacing-md); }
    .block-hero__actions { border-left: 0; padding-left: 0; }
}

@media (max-width: 475px) {
    .block-hero { padding-block: 48px; }
    .block-hero__title { font-size: 28px; }
    .block-hero__description { font-size: 16px; }
    /* Metrics stack, divider becomes a top border. */
    .block-hero__metrics { flex-direction: column; }
    .block-hero__metric { padding: 10px 4px; }
    .block-hero__metric + .block-hero__metric {
        border-left: 0;
        border-top: 1px solid var(--color-border);
    }
    /* Buttons go full width and stack. */
    .block-hero__actions { flex-direction: column; width: 100%; }
    .block-hero__actions .btn { width: 100%; }
}

/* ==========================================================================
   BLOCK-SAME-TEAM
   ========================================================================== */
@media (max-width: 1440px) {
    .block-same-team__grid { gap: var(--spacing-xl); }
}

@media (max-width: 1024px) {
    /* Feature strip wraps to 2x2. */
    .block-same-team__features-list {
        flex-wrap: wrap;
        justify-content: flex-start;
        column-gap: var(--spacing-xl);
        row-gap: var(--spacing-sm);
    }
    /* Body stacks: content first, image below. */
    .block-same-team__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        padding-block: var(--spacing-xl);
    }
    .block-same-team__title { font-size: 32px; }
    .block-same-team__media { height: auto; }
    .block-same-team__image { height: auto; }
}

@media (max-width: 475px) {
    /* Features stack in one column. */
    .block-same-team__features-list {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    .block-same-team__feature-text { font-size: 14px; }
    .block-same-team__grid { padding-block: var(--spacing-xl); }
    .block-same-team__title { font-size: 26px; }
    .block-same-team__badges { gap: var(--spacing-sm); }
    .block-same-team__badge-img { width: 60px; height: 60px; }
    /* Image overlay metrics shrink to fit 360. */
    .block-same-team__img-metric {
        bottom: var(--spacing-md);
        font-size: 15px;
    }
    .block-same-team__img-metric--left { left: var(--spacing-md); }
    .block-same-team__img-metric--right { right: var(--spacing-md); }
    .block-same-team__img-metric strong,
    .block-same-team__img-metric span { font-size: 30px; }
}

/* ==========================================================================
   BLOCK-WHO-WE-SERVE
   ========================================================================== */
@media (max-width: 1024px) {
    /* Cards 4 -> 2 columns. */
    .block-who-we-serve { padding-block: var(--spacing-xl); }
    .block-who-we-serve__cards { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); }
    .block-who-we-serve__title { font-size: 32px; }
}

@media (max-width: 475px) {
    /* Cards stack in one column. */
    .block-who-we-serve__cards { grid-template-columns: 1fr; }
    .block-who-we-serve__card { padding: 16px 18px; }
    .block-who-we-serve__title { font-size: 26px; }
}

/* ==========================================================================
   BLOCK-WHAT-WE-DO
   ========================================================================== */
@media (max-width: 1024px) {
    .block-what-we-do { padding-block: var(--spacing-xl); }
    .block-what-we-do__title { font-size: 32px; }
    .block-what-we-do__cards { gap: var(--spacing-md); }
    .block-what-we-do__media { height: 230px; }
    .block-what-we-do__card-title { font-size: 22px; }
}

@media (max-width: 768px) {
    /* Cards 2 -> 1 column. */
    .block-what-we-do__cards { grid-template-columns: 1fr; }
    .block-what-we-do__media { height: 250px; }
}

@media (max-width: 475px) {
    .block-what-we-do__title { font-size: 26px; }
    .block-what-we-do__media { height: 210px; }
    .block-what-we-do__media-overlay { padding: var(--spacing-md); }
    .block-what-we-do__card-title { font-size: 20px; }
    .block-what-we-do__body { padding: var(--spacing-md); }
    .block-what-we-do__pagination .page-numbers { min-width: 36px; height: 36px; }
}

/* ==========================================================================
   BLOCK-MAKES-DIFFERENT
   ========================================================================== */
@media (max-width: 1024px) {
    /* Cards stack; each card keeps room for its own number circle. */
    .block-makes-different { padding-block: var(--spacing-xl); }
    .block-makes-different__title { font-size: 32px; }
    .block-makes-different__cards {
        grid-template-columns: 1fr;
        gap: 48px;
        max-width: 520px;
        margin-inline: auto;
    }
}

@media (max-width: 475px) {
    .block-makes-different__title { font-size: 26px; }
    .block-makes-different__card { padding: 40px var(--spacing-md) var(--spacing-md); }
    .block-makes-different__number { width: 48px; height: 48px; top: -24px; font-size: 16px; }
}

/* ==========================================================================
   BLOCK-OUR-WORK
   ========================================================================== */
@media (max-width: 1024px) {
    .block-our-work { padding-block: var(--spacing-xl); }
    .block-our-work__title { font-size: 32px; }
    .block-our-work__cards { gap: var(--spacing-md); }
}

@media (max-width: 768px) {
    /* Cards 3 -> 1 column, capped so a lone column does not stretch. */
    .block-our-work__cards {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin-inline: auto;
    }
}

@media (max-width: 475px) {
    .block-our-work__title { font-size: 26px; }
    .block-our-work__media { padding: var(--spacing-md); }
    .block-our-work__card-body { padding: 0 var(--spacing-md) var(--spacing-md); }
    .block-our-work__card-title { font-size: 20px; }
}

/* ==========================================================================
   BLOCK-HOW-WE-WORK
   ========================================================================== */
@media (max-width: 1024px) {
    /* Steps 4 -> 2 columns. */
    .block-how-we-work { padding-block: var(--spacing-xl); }
    .block-how-we-work__title { font-size: 32px; }
    .block-how-we-work__points { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); }
}

@media (max-width: 475px) {
    /* Steps stack in one column. */
    .block-how-we-work__title { font-size: 26px; }
    .block-how-we-work__points { grid-template-columns: 1fr; }
    .block-how-we-work__number { width: 46px; height: 46px; font-size: 16px; }
    .block-how-we-work__point-title { margin-top: 11px; }
}