/* ==========================================================================
   Samsung promocija 07-2026 — responsive overrides

   - Illustration: shown full-bleed at a FIXED pixel size per breakpoint and
     centered, so it never scales as the window narrows — the sides are simply
     clipped and it steps down only when a breakpoint is crossed. Desktop/tablet
     also crop it to a shorter band (height); mobile switches to 100% width and
     41.75vw height so the WHOLE illustration is visible.
   - Product rows: every image is native-px * --k. Desktop --k = 1 (real
     pixels); --k drops on smaller devices so the composition shrinks.
   ========================================================================== */

/* Illustration height: 668px (default) -> 460px (992–1199) -> 330px (768–991) ->
   41.75vw (<=767). Its fixed background-size width steps down alongside so it
   stays full-bleed within each band. Tablet/mobile get a top margin to clear
   the fixed header. */
@media (min-width: 992px) and (max-width: 1199px) {
    .promo-illustration {
        height: 500px;
        background-size: 1200px auto; /* fixed; clips sides down to 992px */
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .promo-illustration {
        height: 415px;
        margin-top: 76px;
        background-size: 992px auto; /* fixed; clips sides down to 768px */
    }
    .promo-rows {
        --k: 0.8;
    }
    .promo-row {
        margin: 44px auto;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .samsung-promo {
        padding-bottom: 50px; /* 50px less than desktop's 100px */
    }
    .promo-illustration {
        height: 53.44vw; /* mobile image aspect (668/1250) -> whole illustration shows */
        margin-top: 61.05px;
        background-image: url("/custom/samsung-promo-07-2026/assets/images/illustration-mobile.jpg");
        background-size: 100%; /* whole image visible on mobile */
    }
    .promo-rows {
        --k: 0.58;
        padding-left: 8px;
        padding-right: 8px;
    }
    .promo-row {
        margin: 34px auto;
    }
    /* on mobile the extra bottom gaps are 100px smaller (140->40, 185->85) */
    .promo-row:not(:nth-last-child(2)) {
        margin-bottom: 40px;
    }
    .promo-row:nth-child(2),
    .promo-row:nth-child(3) {
        margin-bottom: 85px;
    }
    /* last row pulled up 30% less than desktop (-55px -> -38px) */
    .promo-row:last-child {
        margin-top: -38px;
    }
    /* lift the 3rd & 4th device images (S25 Ultra, Z Flip7) up on mobile */
    .promo-row--ultra .promo-row__device,
    .promo-row--flip  .promo-row__device {
        top: -25px;
    }
    .promo-intro {
        padding-top: 18px;
        margin-top: 25px; /* 50px less than desktop's 75px */
    }
    .promo-intro p {
        font-size: 20px;
    }
    .promo-intro p + p {
        font-size: 17px;
    }
    .promo-btn {
        font-size: 16px;
        padding: 11px 24px;
    }
}

@media (max-width: 480px) {
    .promo-rows {
        --k: 0.46;
    }
}

@media (max-width: 400px) {
    .promo-rows {
        --k: 0.42;
    }
    .promo-intro p {
        font-size: 18px;
    }
}

@media (max-width: 360px) {
    .promo-rows {
        --k: 0.38;
    }
}