/* ==========================================================================
   EMBER BUILDER — responsive.css
   Load AFTER style.css and animations.css so these rules win.

   Breakpoints (match Bootstrap 5):
     xxl  ≤ 1399.98px
     xl   ≤ 1199.98px
     lg   ≤ 991.98px   (tablet landscape / small laptop)
     md   ≤ 767.98px   (tablet portrait)
     sm   ≤ 575.98px   (phones)
     xs   ≤ 389.98px   (small phones)

   NOTE: Written from the Blade class names. If a rule doesn't apply on your
   site, style.css probably has a more specific selector: add !important to
   that one declaration or tell me the selector.
   ========================================================================== */


/* ==========================================================================
   0. GLOBAL SAFETY NET
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }

img,
video,
iframe,
svg { max-width: 100%; }

img,
video { height: auto; }

/* Videos / backgrounds that must fill their box keep their own height */
.hero-video,
.about-home-video { height: 100%; }

/* Long words / emails never push the layout sideways */
h1, h2, h3, h4, h5, h6, p, a, li { overflow-wrap: anywhere; }

/* Comfortable tap targets on touch screens */
@media (hover: none) and (pointer: coarse) {
    .btn-ember,
    .hero-box__btn,
    .filter-btn,
    .nav-tabs .nav-link,
    .footer-link,
    .footer-social-icon { min-height: 44px; }
}


/* ==========================================================================
   1. ≤ 1399.98px — large laptops
   ========================================================================== */
@media (max-width: 1399.98px) {
    .project-info { padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
}


/* ==========================================================================
   2. ≤ 1199.98px — small laptops / large tablets
   ========================================================================== */
@media (max-width: 1199.98px) {

    /* ---- Header ---- */
    .ember-navbar .gap-5 { gap: 1.5rem !important; }
    .ember-nav-link { font-size: .78rem; }
    .navbar-cta .navbar-cta-phone-text { display: none; }   /* keep the phone icon, drop the text */
    .navbar-cta-btn { padding-left: 1rem; padding-right: 1rem; white-space: nowrap; }

    /* ---- Project cards (home) ---- */
    .project-info { padding: 2.5rem 2rem !important; }

    /* ---- Reviews ---- */
    .reviews-grid { gap: 1.25rem; }

    /* ---- Footer ---- */
    #footer .footer-heading { font-size: .85rem; letter-spacing: .12em; }
}


/* ==========================================================================
   3. ≤ 991.98px — tablets
   ========================================================================== */
@media (max-width: 991.98px) {

    /* ---- Section spacing ---- */
    #about,
    #partners,
    #projects,
    #process,
    #services,
    #gallery,
    #testimonial,
    .blog-section,
    .reviews-section,
    .video-showcase,
    .gallery-showcase,
    .project-tabs,
    .featured-project,
    .inner-process {
        padding-top: 4.5rem;
        padding-bottom: 4.5rem;
    }
    .py-100 { padding-top: 70px !important; padding-bottom: 70px !important; }

    h2 { font-size: clamp(1.8rem, 4.5vw, 2.4rem); line-height: 1.2; }
    h3 { font-size: clamp(1.4rem, 3.5vw, 1.8rem); }

    /* ---- Header ---- */
    .ember-navbar { padding-top: .75rem; padding-bottom: .75rem; }
    .ember-logo img { max-height: 48px; width: auto; }

    /* ---- Hero ---- */
    #hero {
        min-height: auto;
        min-height: auto;
        height: auto;
        padding: 120px 0px 40px;
    }
    #hero .container { padding-top: 7rem; padding-bottom: 5rem; }
    .hero-content { text-align: center; }
    .hero-content h1 { font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.15; }
    .banner-content { max-width: 36rem; margin-left: auto; margin-right: auto; }
    .scroll-indicator { display: none; }

    /* ---- About ---- */
    .about-img-wrap { max-width: 640px; margin: 0 auto; }
    .about-img-accent { display: none; }
    #about .ps-lg-4 { padding-left: 0 !important; }

    /* ---- Home project cards: stack image over text ---- */
    .project-card { margin-bottom: 2.5rem; }
    .project-card .project-img-wrap,
    .project-card .project-info { order: initial !important; }
    .project-card .project-img-wrap { order: 1 !important; }
    .project-card .project-info {
        order: 2 !important;
        padding: 1.75rem 0 0 !important;   /* beats the inline padding only if the inline style is removed — see notes */
    }
    .project-info-inner { padding: 1.75rem 0 0 !important; }

    /* ---- Process ---- */
    .process-divider .process-col { padding-left: 0 !important; padding-right: 1rem; }

    /* ---- Services ---- */
    .service-row {gap: 10px !important;padding: 25px;}

    /* ---- Gallery (home) ---- */
    .gallery-grid .gallery-item img { width: 100%; height: 100%; object-fit: cover; }

    /* ---- Blog ---- */
    .blog-card { flex: 0 0 calc(50% - 1rem); min-width: 0; }

    /* ---- Reviews ---- */
    .reviews-top { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
    .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    /* ---- Projects page: video grid ---- */
    .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem; }

    /* ---- Projects page: photo gallery masonry ---- */
    .gallery-masonry {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: 200px;
        gap: .75rem;
    }
    .gallery-masonry .g-item img { width: 100%; height: 100%; object-fit: cover; }

    /* ---- Projects page: featured + process steps ---- */
    .featured-info { margin-bottom: 2rem; }
    .process-steps .process-step { margin-bottom: 1.5rem; }

    /* ---- Footer ---- */
    #footer .row.g-5 { --bs-gutter-y: 2rem; --bs-gutter-x: 1.5rem; }

    /* ---- Quote slide-out panel ---- */
    .roof-quote-offcanvas { width: min(100%, 460px) !important; }

    #partners p {
        margin: 0;
        font-size: 16px;
        line-height: 28px;
    }

    h3 br {
        display: none;
    }

    section#projects .project-card {
        margin-bottom: 0 !important;
    }

    section#projects .project-location.mt-1.mb-4 {
        margin-bottom: 0 !important;
    }

    .service-desc p {
        width: 100%;
        margin: 0;
    }

    .mission-card {height: auto;margin: 10px 0px;}

    .blog-section h2 {
        font-size: 28px;
        margin: 0;
    }

    .blog-track {
        gap: 0;
    }

    .reviews-section h2{
        font-size: 28px;
        line-height: normal;
    }

    .reviews-section .section-label {
        margin-bottom: 6px;
    }

    .testimonial-quote p {
        font-size: 22px;
        line-height: 28px;
    }

    .section-label.mb-5 {
        margin: 0 !important;
    }

    section.gallery {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    #cta {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

}


/* ==========================================================================
   4. ≤ 767.98px — tablets portrait / large phones
   ========================================================================== */
@media (max-width: 767.98px) {

    #about,
    #partners,
    #projects,
    #process,
    #services,
    #gallery,
    #testimonial,
    .blog-section,
    .reviews-section,
    .video-showcase,
    .gallery-showcase,
    .project-tabs,
    .featured-project,
    .inner-process {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
    .py-100 { padding-top: 56px !important; padding-bottom: 56px !important; }

    .container { padding-left: 1.25rem; padding-right: 1.25rem; }

    /* ---- Hero ---- */
    #hero .container {padding-top: 0;padding-bottom: 0;}
    .hero-content .d-flex { flex-direction: column; align-items: stretch; }
    .hero-content .d-flex .btn-ember { width: 100%; text-align: center; justify-content: center; }
    .scroll-bottom { display: none; }

    /* ZIP check: stack input and button */
    .hero-zip-check { width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; }
    .zip-check-form {
        display: flex;
        flex-direction: column;
        gap: .6rem;
        height: auto;
        border-radius: 8px;
        padding: .75rem;
    }
    .zip-check-form input,
    #zipInput { width: 100%; text-align: center; }
    #checkZipBtn { width: 100%; padding: .8rem 1rem; }
    .zip-check-pin { display: none; }

    /* ---- About stats ---- */
    #about .stat-num { font-size: 1.75rem; }
    #about .stat-label { font-size: .7rem; }

    /* ---- Services ---- */
    .service-row { flex-wrap: wrap; align-items: flex-start !important; }
    .service-num {min-width: 2rem;line-height: 50px;font-size: 50px;margin: 0;}
    .service-arrow { display: none; }
    .service-name {font-size: 22px;}

    /* ---- Process ---- */
    .process-divider .process-col { border-left: 0 !important; border-bottom: 1px solid rgba(0,0,0,.08); }

    /* ---- Blog slider: one card at a time ---- */
    .blog-card { flex: 0 0 85%; }
    .blog-nav { justify-content: center; }

    /* ---- Reviews ---- */
    .reviews-grid { grid-template-columns: 1fr !important; }
    .google-badge { width: 100%; }

    /* ---- Testimonial ---- */
    .testimonial-quote { font-size: 1.1rem; line-height: 1.6; padding: 0 .5rem; }

    /* ---- Projects page: tabs scroll sideways instead of wrapping into a pile ---- */
    .project-tabs .nav-tabs,
    .gallery-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: .25rem;
    }
    .project-tabs .nav-tabs::-webkit-scrollbar,
    .gallery-filters::-webkit-scrollbar { display: none; }
    .project-tabs .nav-tabs .nav-link,
    .gallery-filters .filter-btn { white-space: nowrap; }

    /* ---- Video modal ---- */
    #videoModal .modal-dialog { margin: .5rem; }
    #videoModal .modal-title { font-size: 1rem; }

    /* ---- Footer: two columns on tablets, readable line lengths ---- */
    #footer { padding-top: 3rem !important; }
    #footer .footer-logo-mark img { max-width: 160px; }
    #footer .d-flex.flex-wrap.justify-content-between { flex-direction: column; align-items: flex-start !important; }
}


/* ==========================================================================
   5. ≤ 575.98px — phones
   ========================================================================== */
@media (max-width: 575.98px) {

    body { font-size: 15px; }
    h2 {font-size: 28px;}
    h3 { font-size: clamp(1.25rem, 5.5vw, 1.5rem); }

    .section-label {font-size: .68rem;letter-spacing: .14em;margin-bottom: 8px;}

    /* ---- Header ---- */
    .ember-logo img {max-height: 90px;width: auto;}
    .ember-toggler {padding: 9px 13px !important;background-color: #9b4324 !important;}

    /* ---- Hero ---- */
    .hero-content h1 { font-size: clamp(1.8rem, 8.5vw, 2.4rem); }
    .hero-eyebrow { font-size: .72rem; letter-spacing: .14em; }
    .banner-content { font-size: .95rem; }

    /* ---- Side tabs (Instant Roof Quote + Contact): smaller so they don't cover content ---- */
    .quick-quote-message,
    .quick-quote-callout { display: none !important; }       /* the "Need a Roof Quote?" bubble */
    #quick-quote-button {font-size: .68rem;letter-spacing: .08em;padding-left: 20px;padding-right: 20px;height: 35px;}
    .side-contact-btn {font-size: .62rem;padding: 10px 7px;letter-spacing: .08em;display: none;}

    /* ---- Home project cards ---- */
    section#projects .project-card { margin-bottom: 2rem; }

    /* ---- Videos: single column ---- */
    .video-grid { grid-template-columns: 1fr !important; }
    .video-project-title { font-size: 1.3rem; }
    .video-card-play { transform: scale(.9); }

    /* ---- Photo gallery masonry: single column, uniform height ---- */
    .gallery-masonry {
        grid-template-columns: 1fr !important;
        grid-auto-rows: 220px;
    }
    .gallery-masonry .g-item,
    .gallery-masonry .g-tall,
    .gallery-masonry .g-wide { grid-row: auto !important; grid-column: auto !important; }

    /* Home gallery grid: full width */
    .gallery-grid .col-lg-6 { width: 100%; }

    /* ---- Process steps ---- */
    .step-num { font-size: 1.6rem; }

    /* ---- Blog ---- */
    .blog-card {flex: 0 0 100%;}

    /* ---- Reviews ---- */
    .review-card { padding: 1.5rem; }

    /* ---- Quote slide-out panel: full width ---- */
    .roof-quote-offcanvas { width: 100% !important; }
    .roof-quote-body iframe { min-height: 760px; }

    /* ---- Footer ---- */
    #footer .col-lg-3,
    #footer .col-lg-2 { width: 100%; }                       /* one column on phones */
    #footer .col-6 { width: 100%; }
    .footer-heading { margin-bottom: .75rem !important; }
    .footer-info-group { margin-bottom: .9rem; }
    .footer-social-icon { width: 42px; height: 42px; }
    .footer-copy { font-size: .8rem; }
    .footer-social-btn { font-size: .75rem; }
}


/* ==========================================================================
   6. ≤ 389.98px — very small phones
   ========================================================================== */
@media (max-width: 389.98px) {
    .container { padding-left: 1rem; padding-right: 1rem; }
    .hero-content h1 { font-size: 1.65rem; }
    .btn-ember { padding-left: 1.25rem; padding-right: 1.25rem; }
    #about .stat-num { font-size: 1.5rem; }
    .gallery-masonry { grid-auto-rows: 190px; }
}


/* ==========================================================================
   7. LANDSCAPE PHONES (short viewports)
   ========================================================================== */
@media (max-height: 520px) and (orientation: landscape) {
    #hero { min-height: auto; }
    #hero .container { padding-top: 5.5rem; padding-bottom: 3rem; }
    .scroll-indicator,
    .scroll-bottom { display: none; }
    .quick-quote-message,
    .quick-quote-callout { display: none !important; }
}


/* ==========================================================================
   8. REDUCED MOTION (also helps with the client's "too much movement" note)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal,
    [class*="reveal-delay"] {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
}


/* ==========================================================================
   9. PRINT (quote pages / contact details)
   ========================================================================== */
@media print {
    #quick-quote-button-wrapper,
    .side-contact-btn,
    .ember-navbar,
    .hero-video,
    .scroll-indicator,
    .scroll-bottom { display: none !important; }
}