/* ==========================================================================
   Samsung promocija — Galaxy Z Fold8 — responsive overrides

   - Illustration + banner: shown full-bleed at a FIXED pixel size per
     breakpoint and centered, so they never scale as the window narrows — the
     outer edges are simply clipped and they step down only when a breakpoint is
     crossed. Mobile (<=767) swaps to dedicated mobile images at 100% width so
     the whole graphic stays visible.
   - Product rows: every image is native-px * --k. Desktop --k = 1 (real px);
     --k drops on smaller devices so the composition shrinks. On mobile the row
     stacks vertically (title -> device -> offer box).
   ========================================================================== */

/* Large tablet / small desktop — illustration + banner step down (rows stay 1:1). */
@media (min-width: 992px) and (max-width: 1199px) {
    .promo-illustration {
        height: 476px;             /* 1200 / (1600/634) */
        background-size: 1200px auto;
    }
    .promo-banner {
        height: 220px;             /* 1200 / (1600/293) */
        background-size: 1200px auto;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .promo-illustration {
        height: 393px;             /* 992 / (1600/634) */
        margin-top: 76px;          /* clear the fixed header */
        background-size: 992px auto;
    }
    .promo-banner {
        height: 182px;             /* 992 / (1600/293) */
        background-size: 992px auto;
    }
    /* product rows inherit the 0.8× base --k (fits within the 768px container) */
}

/* Mobile */
@media (max-width: 767px) {
    .promo-illustration {
        height: 95.13vw;           /* mobile image 800×761 shown at 100% width */
        margin-top: 61.05px;       /* clear the fixed header */
        background-image: url("/custom/samsung-promo-zfold8/assets/images/zfold8/illustration-mobile.jpg");
        background-size: 100%;
    }
    .promo-banner {
        height: 47.13vw;           /* mobile image 800×377 shown at 100% width */
        background-image: url("/custom/samsung-promo-zfold8/assets/images/zfold8/banner-top-mobile.jpg");
        background-size: 100%;
    }
    .promo-rows {
        --k: 0.62;
        max-width: 480px;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    /* stack vertically: product-name title -> device -> offer box */
    .promo-row,
    .promo-row--reverse {
        flex-direction: column;
        gap: 16px;
        margin: 0 auto 60px;
    }
    .promo-row__info {
        display: contents;         /* dissolve so title/device/offer stack + reorder */
    }
    .promo-row__title  { order: 1; }
    .promo-row__device { order: 2; }
    .promo-row__offer  { order: 3; }

    .promo-bottom {
        padding: 50px 20px 60px;
    }
    .promo-bottom__title {
        font-size: 24px;
        margin-bottom: 30px;
    }
    .promo-bottom__note {
        font-size: 13px;
    }
    /* stack the two order buttons on phones */
    .promo-bottom__order {
        flex-direction: column;
        align-items: center;
        gap: 14px;
    }
    .promo-btn {
        font-size: 14px;
        padding: 13px 26px;
    }
}

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

@media (max-width: 400px) {
    .promo-rows { --k: 0.46; }
    .promo-bottom__note { font-size: 12px; }
}

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