/* ==========================================================================
   Samsung promocija — Galaxy Z Fold8 ("Naruči prije svih") — landing page
   ========================================================================== */

.samsung-promo {
    max-width: 1598px;
    margin: 0 auto;
    padding-bottom: 0; /* the white .promo-bottom band runs to the page bottom */
    overflow: hidden;
    background: #f4f4f4;
    color: #231f20;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 400;
}

.samsung-promo img {
    max-width: 100%;
}

/* --- Top illustration (hero) + promo banner: full-bleed background bands ----
   Each image is shown at a FIXED pixel size per breakpoint and centered, so it
   does NOT scale as the window narrows — the outer (decorative) edges simply
   pass out of view (clipped by overflow:hidden on .samsung-promo). It only
   steps down to a smaller fixed size when a breakpoint is crossed
   (responsive.css). On mobile each band switches to a dedicated mobile image at
   100% width so the whole graphic stays visible. Same technique as the previous
   Samsung promo page. --- */
.promo-illustration,
.promo-banner {
    background-repeat: no-repeat;
    background-position: center center;
}

/* illustration image is 1600×634 */
.promo-illustration {
    height: 634px;
    background-color: #f4f4f4;
    background-image: url("/custom/samsung-promo-zfold8/assets/images/zfold8/illustration.jpg");
    background-size: 1600px auto;
}

/* banner image is 1600×293 */
.promo-banner {
    height: 293px;
    background-color: #ffffff;
    background-image: url("/custom/samsung-promo-zfold8/assets/images/zfold8/banner-top.jpg");
    background-size: 1600px auto;
}

/* --- Product rows --------------------------------------------------------
   Each row pairs a device render with an info column (product-name title
   stacked above the offer box). Every image is sized from its native pixel
   width × --k; --k = 1 on desktop, lower on smaller breakpoints (responsive.css)
   so the whole composition shrinks proportionally. */
.promo-rows {
    /* products render at 0.8× native px: the design artboard is 2000px wide with
       the hero filling it, but illustration.jpg ships at 1600px, so artboard→page
       scale is 1600/2000 = 0.8. --k drops further on smaller breakpoints. */
    --k: 0.8;
    max-width: 1140px;
    margin: 0 auto;
    padding: 90px 20px 90px;
}

.promo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 calc(65px * var(--k));
    margin: 0 auto 120px;
    color: inherit;
    text-decoration: none;
}

.promo-row:last-child {
    margin-bottom: 0;
}

/* Row 2 (Fold8): info on the left, device on the right */
.promo-row--reverse {
    flex-direction: row-reverse;
}

.promo-row__device,
.promo-row__title,
.promo-row__offer {
    flex: 0 0 auto;
    display: block;
    height: auto;
}

/* info column: product-name title stacked above the offer box, centered */
.promo-row__info {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(18px * var(--k));
}

/* offer box is identical for all three products */
.promo-row__offer { width: calc(250px * var(--k)); }

/* per-row native pixel widths */
.promo-row--ultra .promo-row__device { width: calc(409px * var(--k)); }
.promo-row--fold  .promo-row__device { width: calc(546px * var(--k)); }
.promo-row--flip  .promo-row__device { width: calc(502px * var(--k)); }

.promo-row--ultra .promo-row__title { width: calc(282px * var(--k)); }
.promo-row--fold  .promo-row__title { width: calc(208px * var(--k)); }
.promo-row--flip  .promo-row__title { width: calc(195px * var(--k)); }

/* --- Bottom "Posebna ponuda" section -----------------------------------
   Near-white band (CSS side-vignette gradient) carrying the heading, the offer
   banner image, the period note and the action buttons. */
.promo-bottom {
    text-align: center;
    padding: 90px 20px 100px; /* generous bottom breathing room below the buttons */
    /* subtle side vignette (light grey edges -> white centre), pure CSS so it
       always covers the full section height regardless of content */
    background: linear-gradient(to right,
        #eef0f2 0%,
        #ffffff 20%,
        #ffffff 80%,
        #eef0f2 100%);
}

.promo-bottom__title {
    max-width: 380px; /* wraps to "Posebna ponuda ako" / "naručiš prije svih" */
    margin: 0 auto 40px;
    font-family: inherit;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
    color: #231f20;
}

.promo-bottom__banner {
    display: block;
    width: 468px;
    max-width: 100%;
    height: auto;
    margin: 0 auto 28px;
}

.promo-bottom__note {
    margin: 0 auto 32px;
    font-size: 14px;
    font-weight: 400;
    color: #231f20;
}

.promo-bottom__note sup {
    font-size: .7em;
    vertical-align: super;
}

.promo-bottom__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

/* the two "Naruči prije svih" buttons (privatni / poslovni) sit side by side */
.promo-bottom__order {
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* pill action buttons */
.promo-btn {
    display: inline-block;
    width: 300px;
    max-width: 100%;
    padding: 13px 30px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: .6px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: #fff;
}

.promo-btn:hover {
    color: #fff;
    text-decoration: none;
    opacity: .9;
}

/* two-line label: CTA on top, audience underneath */
.promo-btn__main {
    display: block;
}

.promo-btn__sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .3px;
    text-transform: none;
    opacity: .85;
}

.promo-btn--order { background: #111111; }
.promo-btn--rules { background: #b23a2b; } /* brick-red */

/* ============================ Reveal animations ==========================
   Enabled only when JS adds `.anim` to .samsung-promo (progressive enhancement;
   also skipped under prefers-reduced-motion — see the view script). Elements
   start hidden and settle in once revealed. Reveals fire ONCE — nothing plays
   in reverse when scrolling back up. ------------------------------------- */

/* top illustration + banner: gentle fade-in on load (illustration, then banner) */
.anim .promo-illustration,
.anim .promo-banner {
    opacity: 0;
    transition: opacity 1s ease;
    will-change: opacity;
}
.anim .promo-illustration.is-visible,
.anim .promo-banner.is-visible {
    opacity: 1;
}

/* product rows: reveal device -> offer box (cloud) -> title, staggered & fluid */
.anim .promo-row__device,
.anim .promo-row__offer,
.anim .promo-row__title {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .6s ease, transform .75s cubic-bezier(.2, .7, .3, 1);
    will-change: opacity, transform;
}
.anim .promo-row.is-visible .promo-row__device,
.anim .promo-row.is-visible .promo-row__offer,
.anim .promo-row.is-visible .promo-row__title {
    opacity: 1;
    transform: none;
}
.anim .promo-row.is-visible .promo-row__device { transition-delay: 0s; }
.anim .promo-row.is-visible .promo-row__offer  { transition-delay: .16s; }
.anim .promo-row.is-visible .promo-row__title  { transition-delay: .32s; }

/* bottom section: staggered reveal (heading -> offer box -> note -> buttons) */
.anim .promo-bottom__title,
.anim .promo-bottom__banner,
.anim .promo-bottom__note,
.anim .promo-bottom__order,
.anim .promo-bottom .promo-btn--rules {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s ease, transform .75s cubic-bezier(.2, .7, .3, 1);
    will-change: opacity, transform;
}
.anim .promo-bottom.is-visible .promo-bottom__title,
.anim .promo-bottom.is-visible .promo-bottom__banner,
.anim .promo-bottom.is-visible .promo-bottom__note,
.anim .promo-bottom.is-visible .promo-bottom__order,
.anim .promo-bottom.is-visible .promo-btn--rules {
    opacity: 1;
    transform: none;
}
.anim .promo-bottom.is-visible .promo-bottom__title  { transition-delay: 0s; }
.anim .promo-bottom.is-visible .promo-bottom__banner { transition-delay: .12s; }
.anim .promo-bottom.is-visible .promo-bottom__note   { transition-delay: .24s; }
.anim .promo-bottom.is-visible .promo-bottom__order  { transition-delay: .34s; }
.anim .promo-bottom.is-visible .promo-btn--rules     { transition-delay: .44s; }

@media (prefers-reduced-motion: reduce) {
    .anim .promo-illustration,
    .anim .promo-banner,
    .anim .promo-row__device,
    .anim .promo-row__offer,
    .anim .promo-row__title,
    .anim .promo-bottom__title,
    .anim .promo-bottom__banner,
    .anim .promo-bottom__note,
    .anim .promo-bottom__order,
    .anim .promo-bottom .promo-btn--rules {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}