/* ============================= */
/* Promotion Wrapper & Section   */
/* Progressive enhancement model */
/* ============================= */

/* ---------- Baseline (very safe, works even for old browsers) ---------- */
.promotion-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    /* default background - you can override with .bg-* classes below */
    background: linear-gradient(135deg, #eef2f7, #ffffff);
    box-sizing: border-box;
}

/* Baseline uses inline-block cards inside a nowrap container so old UAs handle it */
.promotion-section {
    white-space: nowrap;          /* keep items on single row in old browsers */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOS smooth scrolling (safe to include) */
    padding: 20px;
    background: linear-gradient(135deg, #f8fbfd, #ffffff);
    box-sizing: border-box;
    /* fallback spacing for browsers that don't support gap */
}

/* Baseline card display (inline-block) */
.promotion-card {
    display: inline-block;       /* baseline friendly layout */
    vertical-align: top;
    width: 320px;
    margin-right: 20px;          /* fallback spacing (used if gap unsupported) */
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

/* remove extra margin on last baseline card */
.promotion-section .promotion-card:last-child {
    margin-right: 0;
}

/* Generic visuals */
.promotion-card h2 {
    font-size: 1.4rem;
    color: #2d3748;
    margin-bottom: 12px;
    font-weight: 600;
    text-align: center;
}

.promotion-card p {
    font-family: 'Arial', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 15px;
    text-align: justify;
}

.promotion-images {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}

.promotion-images img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover; /* object-fit will be ignored by old browsers */
}

/* Nav arrows (safe CSS) */
.promo-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}
.promo-nav:hover { background: rgba(0,0,0,0.8); }
.promo-nav.prev { left: 15px; }
.promo-nav.next { right: 15px; }

/* Mobile baseline */
@media (max-width: 768px) {
    .promotion-card {
        width: 90%;
        margin: 0 10px 0 0; /* reduce right margin for mobile baseline */
        display: inline-block;
        flex: 0 0 auto;     /* harmless if browser understands flex */
    }
}

/* ---------- Modern enhancements for browsers that support flexbox ---------- */
@supports (display: flex) {
    .promotion-section {
        display: flex;
        flex-wrap: nowrap;
        gap: 20px;                 /* modern spacing */
        overflow-x: hidden;        /* for smooth slider control via JS (optional) */
        padding: 20px;
        scroll-snap-type: x mandatory; /* nice snapping in supporting browsers */
        /* note: 'scrollbar-width' and 'scroll-behavior' are intentionally not used here
           to avoid issues with CSS validators and to keep behavior controlled by JS */
    }

    .promotion-card {
        display: block;            /* flex children are block-level inside flex container */
        margin: 0;                 /* gap handles spacing */
        scroll-snap-align: center; /* snap cards nicely in modern browsers */
    }
}

/* Optional (modern) scrollbar styling for WebKit browsers - ignored by IE */
.promotion-section::-webkit-scrollbar {
    height: 6px;
}
.promotion-section::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}
.promotion-section::-webkit-scrollbar-track {
    background: transparent;
}

/* Hover lift */
.promotion-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* ---------- Background helper classes ---------- */
.promotion-wrapper.bg-solid { background: #f5f5f5; }
.promotion-wrapper.bg-dark {
    background: #1a202c;
    color: #fff;
}
.promotion-wrapper.bg-dark .promotion-card {
    background: #2d3748;
    color: #f1f1f1;
}
.promotion-wrapper.bg-image {
    background: url('/images/promo-bg.jpg') no-repeat center center/cover;
}

/* ---------- Accessibility & minor helpers ---------- */
/* Add focus styles for keyboard users */
.promo-nav:focus { outline: 2px solid #fff; outline-offset: 2px; }

/* Ensure images don't overflow inside cards in older UAs */
.promotion-card img { max-width: 100%; height: auto; display: block; }