/* ==========================================================================
   Motorola promocija — responsive overrides

   - Hero illustration: shown full-bleed at a FIXED pixel size per breakpoint
     and centered, so it never scales as the window narrows — the outer edges
     are simply clipped and it steps down only when a breakpoint is crossed.
   - Product slides: gradient bands scale freely (cover); the device PNG and
     typography shrink together via --k.
   - Mobile (<=767) swaps to a dedicated mobile illustration at 100% width so
     the whole graphic stays visible; device PNGs get their own width formula
     so the phones visually match the ones in the illustration.
   ========================================================================== */

/* Large tablet / small desktop — hero steps down (slides stay 1:1) */
@media (min-width: 992px) and (max-width: 1199px) {
    .promo-illustration {
        height: 615px;             /* 1200 / (1600/820) */
        background-size: 1200px auto;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .promo-illustration {
        height: 508px;             /* 992 / (1600/820) */
        margin-top: 76px;          /* clear the fixed header */
        background-size: 992px auto;
    }
    .promo-section { --k: 0.8; }
}

/* Mobile */
@media (max-width: 767px) {
    .promo-illustration {
        height: 110.43vw;          /* mobile image 920×1016 shown at 100% width */
        margin-top: 61.05px;       /* clear the fixed header */
        background-image: url("/custom/motorola-promocija/assets/images/illustration-mobile.jpg");
        background-size: 100%;
        background-position: center top;
    }
    .promo-section { --k: 0.52; }

    /* Device PNGs sized off the old hero-match formula (height-match factor
       0.88 × hero k), tuned per design feedback to a final factor of
       1.178 × hero k = (58.9vw - 17.67px) / 575; width = native px × that
       (text/paddings keep --k = 0.52). */
    .promo-section--edge .promo-section__device { width: calc(71.5vw - 21.4px); /* 698px */ }
    .promo-section--g77  .promo-section__device { width: calc(73.1vw - 22px);   /* 713px */ }
}

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