/* =========================================================
   FINAL RESPONSIVE SYSTEM — whole homepage
   Loaded last so it safely overrides legacy breakpoints.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
body { min-width: 0 !important; }

img, video, canvas, svg, iframe { max-width: 100%; }
button, input, select, textarea { max-width: 100%; font: inherit; }

/* Keep all main content inside the viewport. */
.container,
.portfolio-container,
.order-process__container,
.reviews-container {
    min-width: 0 !important;
}

/* -----------------------------
   REVIEWS — compact and centered
   ----------------------------- */
.reviews-section {
    padding: 76px 0 !important;
}
.reviews-section .reviews-container {
    width: min(100% - 40px, 820px) !important;
    max-width: 820px !important;
}
.reviews-section .reviews-header {
    grid-template-columns: minmax(0, 1fr) 220px !important;
    gap: 28px !important;
    padding-bottom: 26px !important;
}
.reviews-section .reviews-header__main { max-width: 560px !important; }
.reviews-section .reviews-header h2 {
    font-size: clamp(34px, 4.2vw, 50px) !important;
    line-height: 1 !important;
}
.reviews-section .reviews-header__description {
    font-size: 13px !important;
    line-height: 1.65 !important;
}
.reviews-section .reviews-layout {
    grid-template-columns: 190px minmax(0, 1fr) !important;
    gap: 18px !important;
    padding-top: 24px !important;
}
.reviews-section .reviews-overview {
    width: 190px !important;
    max-width: 190px !important;
    padding: 15px !important;
    border-radius: 12px !important;
}
.reviews-section .reviews-overview__label { font-size: 10px !important; }
.reviews-section .reviews-overview__rating { font-size: 36px !important; }
.reviews-section .reviews-overview__stars {
    margin-top: 12px !important;
    font-size: 15px !important;
    letter-spacing: 1px !important;
}
.reviews-section .reviews-overview__text {
    margin-top: 14px !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
}
.reviews-section .reviews-overview__line { margin: 16px 0 !important; }
.reviews-section .reviews-overview__stats { gap: 10px !important; }
.reviews-section .reviews-overview__stats strong { font-size: 15px !important; }
.reviews-section .reviews-overview__stats span { font-size: 8px !important; }
.reviews-section .reviews-list {
    max-width: 610px !important;
    gap: 9px !important;
}
.reviews-section .home-review {
    width: 100% !important;
    max-width: 610px !important;
    padding: 13px 15px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.16) !important;
}
.reviews-section .home-review__head img,
.reviews-section .review-avatar-fallback {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px !important;
}
.reviews-section .home-review__head strong { font-size: 13px !important; }
.reviews-section .home-review__head small { font-size: 10px !important; margin-top: 3px !important; }
.reviews-section .home-review__stars {
    margin-top: 6px !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
}
.reviews-section .home-review p {
    margin-top: 10px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}
.reviews-section .home-review__reactions { margin-top: 10px !important; gap: 5px !important; }
.reviews-section .home-review__reactions span { padding: 5px 8px !important; font-size: 10px !important; }
.reviews-section .home-review__footer { margin-top: 11px !important; padding-top: 10px !important; }
.reviews-section .home-review__footer small { font-size: 9px !important; }
.reviews-section .review-add-box {
    grid-template-columns: 220px minmax(0, 1fr) !important;
    gap: 28px !important;
    max-width: 820px !important;
    margin-top: 26px !important;
    padding-top: 24px !important;
}
.reviews-section .review-add-box h3 { font-size: 21px !important; }
.reviews-section .review-add-box__content p { font-size: 12px !important; line-height: 1.6 !important; }
.reviews-section .home-review-form {
    grid-template-columns: 100px minmax(0, 1fr) 120px !important;
    gap: 9px !important;
}
.reviews-section .review-field { font-size: 11px !important; gap: 6px !important; }
.reviews-section .review-field select { height: 42px !important; font-size: 12px !important; }
.reviews-section .review-field textarea { min-height: 80px !important; font-size: 12px !important; }
.reviews-section .review-submit { min-height: 42px !important; height: 42px !important; font-size: 11px !important; }

/* -----------------------------
   General sections
   ----------------------------- */
@media (max-width: 1050px) {
    .container,
    .portfolio-container,
    .order-process__container { width: calc(100% - 32px) !important; max-width: 100% !important; }

    .hero-grid,
    .about-info,
    .rp-grid,
    .order-process__timeline { min-width: 0 !important; }

    .hero-card,
    .hero-catalog,
    .preview-shell,
    .catalog-window,
    .offer-catalog,
    .portfolio-section,
    .order-process,
    .cta { min-width: 0 !important; max-width: 100% !important; }

    .portfolio-grid,
    .offer-catalog .portfolio-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

    .offer-catalog .portfolio-card__image,
    .offer-catalog .offer-service-cover { height: 190px !important; min-height: 190px !important; flex-basis: 190px !important; }
}

@media (max-width: 760px) {
    :root { --mobile-gutter: 14px; }

    body { font-size: 14px !important; }

    .container,
    .portfolio-container,
    .order-process__container,
    .reviews-container {
        width: calc(100% - (var(--mobile-gutter) * 2)) !important;
        max-width: none !important;
        margin-inline: auto !important;
    }

    .hero,
    .section,
    .portfolio-section,
    .preview-section,
    .order-process,
    .cta,
    .reviews-section {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }
    .hero { padding-top: 92px !important; }

    .hero-grid,
    .section-head,
    .portfolio-heading__grid,
    .reviews-header,
    .cta,
    .review-add-box { grid-template-columns: 1fr !important; }

    .hero-grid { gap: 22px !important; }
    .hero h1,
    .about-title,
    .section-head h2,
    .portfolio-heading h2,
    .order-process__heading h2,
    .cta h2 {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
    }

    .hero h1 { font-size: clamp(34px, 11vw, 52px) !important; }
    .lead { font-size: 15px !important; }

    .hero-actions,
    .cta-actions { width: 100% !important; display: grid !important; grid-template-columns: 1fr !important; }
    .hero-actions .btn,
    .cta-actions .btn,
    .portfolio-cta__button,
    .order-process__button { width: 100% !important; justify-content: center !important; }

    .catalog-window { border-radius: 14px !important; }
    .catalog-window__top,
    .catalog-window__footer { flex-wrap: wrap !important; }
    .catalog-categories { grid-template-columns: 1fr !important; }
    .catalog-category { grid-template-columns: 40px minmax(0,1fr) auto !important; }

    .preview-shell { width: 100% !important; }
    .preview-nav { overflow-x: auto !important; max-width: 100% !important; scrollbar-width: none; }
    .preview-tab { flex: 0 0 auto !important; }
    .stage-body { padding: 12px !important; }

    .portfolio-toolbar { display: block !important; }
    .portfolio-filters { width: 100% !important; overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none; padding-bottom: 4px !important; }
    .portfolio-filter { flex: 0 0 auto !important; }

    .portfolio-grid,
    .offer-catalog .portfolio-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .offer-catalog .portfolio-card__image,
    .offer-catalog .offer-service-cover { height: 170px !important; min-height: 170px !important; flex-basis: 170px !important; }
    .offer-catalog .offer-service-cover__copy strong { font-size: 21px !important; }
    .offer-catalog .portfolio-card h3 { font-size: 19px !important; }
    .offer-catalog .portfolio-card > p { font-size: 13px !important; }
    .offer-catalog .portfolio-card__top,
    .offer-catalog .portfolio-card h3,
    .offer-catalog .portfolio-card > p,
    .offer-catalog .portfolio-tags,
    .offer-catalog .offer-details { margin-left: 14px !important; margin-right: 14px !important; }
    .offer-catalog .portfolio-card__footer { margin-left: 14px !important; margin-right: 14px !important; padding: 13px 0 15px !important; flex-wrap: wrap !important; }
    .offer-catalog .portfolio-status { max-width: 100% !important; }
    .offer-catalog .portfolio-link { width: 100% !important; justify-content: center !important; }
    .offer-catalog .portfolio-cta { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; padding: 17px !important; }

    /* Reviews: deliberately compact, never viewport-wide on desktop and fully fluid on mobile. */
    .reviews-section { padding: 54px 0 !important; }
    .reviews-section .reviews-container { width: calc(100% - 24px) !important; }
    .reviews-section .reviews-header { display: block !important; padding-bottom: 20px !important; }
    .reviews-section .reviews-header h2 { font-size: clamp(28px, 8.8vw, 38px) !important; }
    .reviews-section .reviews-header__description { margin-top: 12px !important; font-size: 12px !important; }
    .reviews-section .reviews-layout { display: flex !important; flex-direction: column !important; gap: 10px !important; padding-top: 18px !important; }
    .reviews-section .reviews-overview,
    .reviews-section .reviews-list,
    .reviews-section .home-review,
    .reviews-section .review-add-box { width: 100% !important; max-width: 100% !important; }
    .reviews-section .reviews-overview { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 8px 12px !important; padding: 12px 13px !important; }
    .reviews-section .reviews-overview__rating { font-size: 32px !important; }
    .reviews-section .reviews-overview__stars { font-size: 14px !important; }
    .reviews-section .reviews-overview__text,
    .reviews-section .reviews-overview__line { display: none !important; }
    .reviews-section .reviews-overview__stats { grid-column: 1 / -1 !important; padding-top: 10px !important; gap: 8px !important; }
    .reviews-section .home-review { grid-template-columns: 34px minmax(0,1fr) !important; padding: 12px !important; }
    .reviews-section .home-review__head img,
    .reviews-section .review-avatar-fallback { width: 34px !important; height: 34px !important; }
    .reviews-section .home-review__head strong { font-size: 12px !important; }
    .reviews-section .home-review__head small { font-size: 9px !important; }
    .reviews-section .home-review__stars { font-size: 12px !important; margin-top: 3px !important; }
    .reviews-section .home-review p { grid-column: 1 / -1 !important; font-size: 12px !important; line-height: 1.52 !important; margin-top: 8px !important; }
    .reviews-section .review-add-box { margin-top: 16px !important; padding-top: 18px !important; }
    .reviews-section .review-add-box h3 { font-size: 19px !important; }
    .reviews-section .home-review-form { grid-template-columns: 1fr !important; gap: 9px !important; }
    .reviews-section .review-submit { width: 100% !important; }

    .order-process__timeline { grid-template-columns: 1fr !important; }
    .order-step { min-width: 0 !important; }
    .cta { padding: 20px !important; }

    .bottom-footer__nav,
    .bottom-footer__actions { width: 100% !important; }
}

@media (max-width: 420px) {
    .container,
    .portfolio-container,
    .order-process__container { width: calc(100% - 20px) !important; }
    .reviews-section .reviews-container { width: calc(100% - 20px) !important; }

    .hero h1 { font-size: 32px !important; }
    .hero-meta { grid-template-columns: 1fr !important; }
    .catalog-category { grid-template-columns: 36px minmax(0,1fr) !important; }
    .catalog-category__meta { grid-column: 2; justify-self: start; margin-top: 2px; }

    .offer-catalog .portfolio-card__image,
    .offer-catalog .offer-service-cover { height: 155px !important; min-height: 155px !important; flex-basis: 155px !important; }
    .offer-catalog .portfolio-card h3 { font-size: 18px !important; }
    .offer-catalog .portfolio-tags span { font-size: 10px !important; }
    .offer-catalog .offer-details { grid-template-columns: 1fr !important; }

    .reviews-section .home-review { padding: 11px !important; }
    .reviews-section .reviews-overview { padding: 11px 12px !important; }
    .reviews-section .reviews-header h2 { font-size: 28px !important; }
}

@media (max-width: 340px) {
    .container,
    .portfolio-container,
    .order-process__container,
    .reviews-section .reviews-container { width: calc(100% - 16px) !important; }
    .hero h1 { font-size: 29px !important; }
    .offer-catalog .portfolio-card__footer { display: grid !important; grid-template-columns: 1fr !important; }
    .reviews-section .home-review { grid-template-columns: 30px minmax(0,1fr) !important; }
    .reviews-section .home-review__head img,
    .reviews-section .review-avatar-fallback { width: 30px !important; height: 30px !important; }
}