/* =============================================
   RESPONSIVE REFINEMENTS
   Loaded after builder.css. Breakpoints:
   1024 (tablet landscape) / 900 / 768 (tablet portrait)
   / 640 (phone) / 480 / 360 (small phone)
   ============================================= */

/* ---------------------------------------------
   1. TOUCH DEVICES (any width)
   Hover-only affordances must not hide content.
   --------------------------------------------- */
@media (hover: none), (pointer: coarse) {
    body { cursor: auto; }
    .pb-cursor { display: none !important; }

    /* Team socials are hover-revealed on desktop; always show them here */
    .team-card__overlay { opacity: 1; background: rgba(8, 30, 75, 0.55); }

    /* Comfortable tap targets */
    .pb-site-header__nav a,
    .pb-archive__filter,
    .pb-projects__filter,
    .pb-button,
    .team-card__social a,
    .pb-testimonials__btn,
    .pb-project-lightbox__close,
    .pb-newsletter-popup__close {
        min-height: 44px;
        min-width: 44px;
    }

    .pb-site-header__toggle { padding: 12px; }
}

/* iOS Safari: prevent auto-zoom when focusing inputs */
@media (max-width: 1024px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    .pb-form__input,
    .pb-form__input:focus,
    .pb-archive__search input,
    .pb-projects__search-input,
    .pb-site-footer__newsletter-input,
    .pb-newsletter-popup__form input {
        font-size: 16px;
    }

    /* Tablet portrait has no desktop nav — enable the drawer */
    .pb-site-header__toggle { display: inline-flex; }
    .pb-site-header__nav {
        display: none;
        order: 10;
        flex-basis: 100%;
        flex-direction: column;
        gap: .75rem;
        padding: .5rem 0 1rem;
        text-align: left;
    }
    .pb-site-header__nav.is-open { display: flex; }
    .pb-site-header__cta { display: none; }

    /* Viewport units that respect mobile browser chrome */
    .pb-hero--screen { min-height: 100svh; }
    .pb-loader { min-height: 100svh; }
}

/* ---------------------------------------------
   2. TABLET LANDSCAPE & BELOW (<= 1024px)
   --------------------------------------------- */
@media (max-width: 1024px) {
    :root { --pb-header-h: 76px; }

    /* Module column vars arrive as INLINE styles from builder settings,
       so breakpoints must use !important to win the cascade. */
    .pb-process__timeline { --pb-process-cols: 2 !important; }
    .pb-stats__grid { --pb-stats-cols: 2 !important; }
    .pb-features__grid { --pb-features-cols: 2 !important; }
    .pb-module__grid,
    .team__grid { --pb-module-cols: 2 !important; }
    .pb-gallery { --pb-gallery-cols: 2 !important; }

    .pb-site-header__inner { padding-top: 1rem; padding-bottom: 1rem; }

    /* Footer: two columns before collapsing fully */
    .pb-site-footer__grid { grid-template-columns: repeat(2, 1fr); }

    /* Single post/project layouts stack earlier */
    .pb-single__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .pb-single .pb-module__grid { grid-template-columns: repeat(2, 1fr); }

    /* Lightbox thumbs become a horizontal strip */
    .pb-project-lightbox__thumbs {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .pb-project-lightbox__thumbs::-webkit-scrollbar { display: none; }
    .pb-project-lightbox__thumb { flex: 0 0 72px; height: 54px; }

    .pb-hero__scroll { display: none; }
}

/* ---------------------------------------------
   3. <= 900px
   --------------------------------------------- */
@media (max-width: 900px) {
    .pb-section--py-lg { padding-top: 64px; padding-bottom: 64px; }
    .pb-section--py-xl { padding-top: 72px; padding-bottom: 72px; }
    .pb-section--py-md { padding-top: 56px; padding-bottom: 56px; }

    .pb-single__hero { min-height: 52svh; }
    .pb-single__hero-content { padding: 3.5rem 0; }

    .pb-contact__map { min-height: 320px; }

    .pb-cta__content { padding: 4.5rem 0; }
}

/* ---------------------------------------------
   4. TABLET PORTRAIT / LARGE PHONES (<= 768px)
   --------------------------------------------- */
@media (max-width: 768px) {
    /* Header: compact drawer styling */
    .pb-site-header__nav.is-open {
        margin-top: .75rem;
        padding: 1rem clamp(20px, 4vw, 40px) 1.25rem;
        background: rgba(8, 30, 75, 0.98);
        border: 1px solid var(--pb-border);
        border-radius: 8px;
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
    }
    .pb-site-header__nav.is-open a { padding: .65rem 0; font-size: .85rem; }

    /* Hero */
    .pb-hero__content { padding: 5rem 0 3.5rem; }
    .pb-hero__actions { margin-top: 28px; gap: .75rem; }
    .pb-hero__actions .pb-button { flex: 1 1 auto; justify-content: center; text-align: center; }

    /* Buttons full-ish and comfortable */
    .pb-button--lg { padding: .95rem 1.75rem; }

    /* Archive toolbar stacks; filters scroll horizontally */
    .pb-archive__toolbar,
    .pb-projects__toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .pb-archive__search,
    .pb-projects__search { width: 100%; }
    .pb-archive__filters,
    .pb-projects__filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .pb-archive__filters::-webkit-scrollbar,
    .pb-projects__filters::-webkit-scrollbar { display: none; }
    .pb-archive__filter,
    .pb-projects__filter { white-space: nowrap; flex: 0 0 auto; }

    .pb-archive__results { order: -1; }

    .pb-archive__pagination { gap: .5rem; }
    .pb-archive__pagination-wrap { justify-content: center; }

    /* Cookie banner becomes a bottom sheet */
    .pb-cookie-banner { padding: 1.25rem; }
    .pb-cookie-banner__content {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 1rem;
    }
    .pb-cookie-banner__actions { flex-direction: column; width: 100%; }
    .pb-cookie-banner__actions .pb-button { width: 100%; justify-content: center; }

    /* Toast fits small screens */
    .pb-toast { max-width: calc(100vw - 32px); }

    /* Before/After labels smaller */
    .pb-beforeafter__label { font-size: .65rem; padding: .35rem .6rem; }

    /* Testimonials nav tighter */
    .pb-testimonials__nav { gap: 1rem; }
    .pb-testimonials__btn { width: 42px; height: 42px; }

    /* Footer newsletter keeps input+button on one row but roomier */
    .pb-site-footer__newsletter { gap: .5rem; }
    .pb-site-footer__bottom-links { flex-wrap: wrap; justify-content: center; row-gap: .5rem; }

    /* Gallery lightbox */
    .pb-gallery__lightbox img { max-height: 78dvh; }
}

/* ---------------------------------------------
   5. PHONES (<= 640px)
   --------------------------------------------- */
@media (max-width: 640px) {
    :root { --pb-header-h: 68px; }

    /* Single-column module layouts (override inline builder settings) */
    .pb-process__timeline { --pb-process-cols: 1 !important; }
    .pb-features__grid { --pb-features-cols: 1 !important; }
    .pb-module__grid { --pb-module-cols: 1 !important; }
    .pb-gallery { --pb-gallery-cols: 1 !important; }
    .team__grid { grid-template-columns: 1fr !important; }

    /* Typography tightens further */
    .pb-hero__title { font-size: clamp(2.4rem, 11vw, 3.25rem); }
    .pb-section-title { font-size: clamp(2rem, 9vw, 2.6rem); }
    .pb-archive__title { font-size: clamp(2rem, 9vw, 2.75rem); }
    .pb-single__title { font-size: clamp(1.9rem, 8.5vw, 2.5rem); }
    .pb-cta__title { font-size: clamp(1.8rem, 8vw, 2.5rem); }
    .pb-heading { font-size: clamp(1.5rem, 7vw, 2.25rem); }

    .pb-hero__subtitle { font-size: 1rem; }
    .pb-section-desc { font-size: .95rem; }

    /* Grid gaps tighten */
    .pb-module__grid,
    .pb-gallery,
    .pb-stats__grid,
    .pb-features__grid { gap: 1.25rem; }

    /* Team: single column on narrow phones */
    .team__grid { grid-template-columns: 1fr; gap: 2.25rem; }
    .team-card__image img,
    .team-card__placeholder { height: 320px; }

    /* Project cards */
    .pb-project__media { height: 300px; }

    /* Single pages */
    .pb-single__meta-row { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .pb-single__feature-list { grid-template-columns: 1fr; }
    .pb-single .pb-module__grid { grid-template-columns: 1fr; }
    .pb-single__figure--wide img { aspect-ratio: 16 / 10; }

    /* Lightbox adapts to portrait screens */
    .pb-project-lightbox__panel { grid-template-columns: 1fr; overflow-y: auto; }
    .pb-project-lightbox__main { position: relative; height: 46dvh; }
    .pb-project-lightbox__nav { top: auto; bottom: 12px; transform: none; }
    .pb-project-lightbox__close { top: 8px; right: 8px; }

    /* Stats stay readable */
    .pb-stats__number { font-size: clamp(2rem, 10vw, 2.6rem); }

    /* Process steps already centered; tighten spacing */
    .pb-process__step { gap: .75rem; }

    /* Loader scales down */
    .pb-loader__logo-text { font-size: 1.6rem; letter-spacing: .3em; }
    .pb-loader__percent { font-size: 2rem; }

    /* Popup modal fills most of the screen */
    .pb-newsletter-popup__modal { width: min(92vw, 420px); max-height: 90dvh; overflow-y: auto; }
    .pb-newsletter-popup__body { padding: 1.5rem 1.25rem; }
}

/* ---------------------------------------------
   6. SMALL PHONES (<= 480px)
   --------------------------------------------- */
@media (max-width: 480px) {
    .pb-container,
    .pb-section { padding-left: 18px; padding-right: 18px; }

    .pb-button--lg { width: 100%; justify-content: center; }
    .pb-hero__actions .pb-button { width: 100%; }

    .pb-site-footer__brand { text-align: center; }
    .pb-site-footer__grid { grid-template-columns: 1fr; }

    .pb-archive__page-link { width: 38px; height: 38px; }

    .pb-testimonial-card { padding: 1.5rem 1.25rem; }

    .pb-faq__question,
    .pb-accordion__title { font-size: 1.05rem; }
}

/* ---------------------------------------------
   7. VERY SMALL PHONES (<= 360px)
   --------------------------------------------- */
@media (max-width: 360px) {
    .pb-hero__title { font-size: 2.1rem; }
    .pb-section-title { font-size: 1.85rem; }

    .pb-site-header__brand { font-size: 1rem; letter-spacing: .18em; }

    .pb-cookie-banner { padding: 1rem 14px; }
}

/* ---------------------------------------------
   8. SHORT VIEWPORTS (landscape phones)
   --------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
    .pb-hero--screen,
    .pb-hero--tall { min-height: 130svh; }

    .pb-loader__inner { transform: scale(.85); }
}