/* ════════════════════════════════════════════════════════
   MOBILE  (≤ 767px)
   Strategy: override :root variables first — every component
   that uses var() scales automatically. Then patch hardcoded
   px values that don't respond to variables.
════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── 1. Design-system scale-down ─────────────────── */
    :root {
        --font-size-body:            17px;
        --font-size-section-title:   26px;
        --line-height-base:          1.5;

        --space-xs:   3px;
        --space-sm:   7px;
        --space-md:   12px;
        --space-lg:   18px;
        --space-xl:   24px;
        --space-2xl:  32px;
        --space-3xl:  42px;

        --button-height:             48px;
        --radius-default:            12px;
        --radius-container:           0px;
        --icon-numbered:             48px;
        --section-column-gap:        12px;
        --section-inner-padding-h:   22px;
        --section-inner-padding-top: 35px;
        --footer-gap-above:          8px;
    }

    /* ── 2. Page & body ───────────────────────────────── */
    body {
        background: #fff;
        font-size: var(--font-size-body);
        padding-bottom: 0; /* gap is absorbed by footer padding-bottom instead */
    }

    /* ── 3. Layout ────────────────────────────────────── */

    /* Remove page-wrapper side padding — on mobile there's no grey page
       background to offset from, so the white content fills edge-to-edge.
       The 22px side margin comes solely from .main-content's own padding. */
    .page-wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    /* Hide left column sidebar — shown only as slide-in drawer */
    .left-column {
        display: none;
    }
    .left-column.is-open {
        display: block;
    }

    .main-content {
        background: transparent;
        border-radius: 0;
        padding: var(--section-inner-padding-top)
                 var(--section-inner-padding-h)
                 var(--space-2xl);
    }

    .main-content--product {
        padding-top: 23px;
    }

    .content-grid { padding-top: 0; }

    .home-two-col {
        margin-top: 0;
        margin-bottom: 0;
    }

    .home-section-row { margin-top: 32px; }

    /* ── 4. Hero slider ───────────────────────────────── */
    .hero-slider {
        margin-bottom: 23px;
        border-radius: var(--radius-default);
    }

    .hero-slider__slide img {
        width: 100%;
        height: auto;
    }

    /* ── 5. Top Printed Products ──────────────────────── */
    .top-products .section-title { display: none; }
    .top-products__grid { gap: 20px; }

    .product-card {
        height: 180px;
    }

    .product-card__title {
        font-size: 17px;
        padding: 5px 8px 10px;
    }

    .top-products__footer { padding-top: 18px; }

    .btn-outline-pill {
        font-size: 17px;
        padding: 0 30px;
    }

    /* ── Shared: all home-section buttons full-width & centred ── */
    .top-products__footer,
    .artwork__footer,
    .webdesign__footer,
    .portfolio__footer,
    .articles__footer {
        justify-content: center;
    }

    .top-products__footer .btn-outline-pill,
    .artwork__footer .btn-filled-pill,
    .startup-consulting__left .btn-filled-pill,
    .webdesign__footer .btn-filled-pill,
    .portfolio__footer .btn-filled-pill,
    .articles__footer .btn-filled-pill {
        width: 100%;
    }

    /* ── 6. Artwork (Do you need artwork?) ────────────── */
    .artwork .section-title { font-size: 24px; margin-bottom: 0; }

    .artwork__item {
        padding: 15px 0;
    }

    .artwork__item + .artwork__item::before {
        left: 10px;
        right: 20px;
    }

    .artwork__subtitle { font-size: 21px; }

    /* ── Body text standard: 17px / 1.5 (all sections & pages) ── */
    .startup-consulting__body,
    .webdesign__body,
    .about-us__body,
    .testimonial-card__text {
        line-height: 1.5;
    }

    .artwork__footer {
        padding-top: 20px;
    }

    .btn-filled-pill {
        font-size: 17px;
        padding: 0 30px;
    }

    /* ── 7. Startup Consulting ────────────────────────── */
    .startup-consulting { padding-left: 22px; padding-right: 22px; }
    .startup-consulting__title  { font-size: 22px; padding-right: 0; }
    .startup-consulting__view-offer { display: none; }

    /* ── 8. Website Design ────────────────────────────── */
    .webdesign .section-title { font-size: 22px; }
    .webdesign__image { height: 150px; }

    /* ── 9. Portfolio ─────────────────────────────────── */
    .portfolio .section-title { font-size: 22px; }

    /* ── 10. About Us ─────────────────────────────────── */
    .about-us__heading  { font-size: 26px; }
    .about-us__label    { font-size: 22px; }
    .about-us__buttons  { flex-direction: row; }
    .about-us__buttons .btn-filled-pill { flex: 1; }

    /* ── 11. Articles ─────────────────────────────────── */
    .articles .section-title { font-size: 22px; }
    .article-card__title { font-size: 21px; line-height: 1.25; }

    /* ── 12. Testimonials ─────────────────────────────── */
    .testimonials__title { font-size: 22px; }
    .testimonial-card {
        padding: 42px var(--space-lg) var(--space-lg) 30px;
    }

    .testimonial-card__icon   { height: 56px; }
    .testimonial-card__text   { margin-bottom: 14px; }
    .testimonial-card__company { font-size: 15px; }

    /* ── 13. Buttons shared (btn-primary) ─────────────── */
    .btn-primary {
        font-size: 17px;
        padding: 0 30px;
    }

    /* ── 15. Footer ───────────────────────────────────── */
    .site-footer__col-title  { font-size: 22px; margin-bottom: 10px; }
    .site-footer__link       { font-size: 17px; }
    .site-footer__copyright  { font-size: 16px; margin-bottom: 12px; }
    .site-footer__payments   { width: 100%; height: auto; }
    .site-footer__flag img   { height: 33px; }
    .site-footer__social-icon img { width: 40px; height: 40px; }
    .site-footer__mobile-social .site-footer__social-icon img {
        width: 40px;
        height: 40px;
    }
}


/* ════════════════════════════════════════════════════════
   TABLET  (768 – 1023 px)
════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
    .site-header__search { flex: 0 0 200px; }
    .site-header__nav    { gap: var(--space-sm); }
    .site-header__nav-link { font-size: 0.875rem; }

    .site-footer__columns {
        grid-template-columns: 1fr 1fr 1fr;
        gap: var(--space-lg);
    }

    .site-footer__col--social {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-start;
        padding-top: 0;
    }
}


/* ════════════════════════════════════════════════════════
   NARROW DESKTOP  (1024 – 1199 px)
════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1199px) {
    .site-header__search { flex: 0 0 220px; }
    .site-header__nav    { gap: var(--space-sm); }
}