/* ============================================================
   assets/css/promo_carousel.css
   Luxury Promotional Carousel — 1920 × 320 px recommended
   ============================================================ */

/* ── Height tokens ─────────────────────────────────────────── */
:root {
    --promo-h:    100px;   /* Desktop  ≥ 1200px  */
    --promo-h-lg: 85px;    /* Large tablet 1024–1199 */
    --promo-h-md: 70px;    /* Tablet  768–1023   */
    --promo-h-sm: 55px;    /* Mobile  < 768      */

    /* Oxblood palette for the CTA */
    --cta-bg:          #6B0F1A;
    --cta-bg-hover:    #850f20;
    --cta-border:      rgba(188, 110, 90, 0.55);   /* rose-gold tint */
    --cta-glow:        rgba(107, 15, 26, 0.55);
    --cta-glow-hover:  rgba(133, 15, 32, 0.70);
}

/* ── Carousel wrapper — fixed sticky bar ───────────────────── */
.promo-carousel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--promo-h);
    overflow: hidden;
    background: #000; /* Dark background looks best for contained images */
    z-index: 1010;
}

@media (max-width: 1199px) { .promo-carousel { height: var(--promo-h-lg); } }
@media (max-width: 1023px) { .promo-carousel { height: var(--promo-h-md); } }
@media (max-width: 767px)  { .promo-carousel { height: var(--promo-h-sm); } }

/* ── Inner slide track ─────────────────────────────────────── */
.promo-carousel-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Individual slide — positioning context for CTA ────────── */
.promo-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    z-index: 1;
    overflow: hidden;    /* Hard boundary — button cannot escape       */
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* ── Banner image — container controls height, not image ───── */
.promo-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures the 2544x416 images show fully without cropping */
    object-position: center;
    display: block;
    filter: brightness(0.85) saturate(0.9);
    transition: transform 0.6s ease;
    pointer-events: none;
    user-select: none;
}
.promo-slide:hover .promo-image {
    transform: scale(1.025);
}

/* ── Subtle dark gradient vignette ─────────────────────────── */
.promo-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.04) 0%,
        rgba(0,0,0,0.18) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* ═══════════════════════════════════════════════════════════
   LUXURY CTA BUTTON — White Glassmorphism
   Width is driven entirely by text content (auto).
   It will never stretch across the banner.
   ═══════════════════════════════════════════════════════════ */
.promo-cta {
    /* ── Stacking ── */
    position: absolute;
    z-index: 3;
    pointer-events: auto;

    /* ── Sizing: auto-width from content only ── */
    width: auto;          /* NEVER stretch — only as wide as the text */
    white-space: nowrap;
    
    /* Center text if any height overrides apply */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* ── White Glassmorphism Aesthetics ── */
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    font-weight: 500;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    text-transform: uppercase;
    border-radius: 4px;
    padding: 8px 24px;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Shine effect */
.promo-cta::before {
    content: '';
    position: absolute;
    top: 0; left: -150%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    animation: shine 4s infinite;
}
@keyframes shine {
    0%, 60% { left: -150%; }
    100% { left: 200%; }
}

/* ── Hover: slight lift and increased opacity ── */
.promo-cta:hover {
    text-decoration: none;
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    color: #ffffff !important;
}

/* ── Active: press-down feel ── */
.promo-cta:active {
    transform: scale(0.96) !important;
    transition-duration: 0.08s;
}

/* ═══════════════════════════════════════════════════════════
   BUTTON POSITIONS
   Every rule uses translate() so the button is anchored from
   its own geometric centre/edge — never from its top-left corner.
   .promo-slide { overflow: hidden } is the hard safety boundary.
   ═══════════════════════════════════════════════════════════ */

/* ── CENTER — exact mathematical middle ── */
.btn-center {
    top:  50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.btn-center:hover {
    transform: translate(-50%, calc(-50% - 2px)) scale(1.03);
}

/* ── TOP LEFT ── */
.btn-top_left {
    top:  25%;
    left: 6%;
    transform: translateY(-50%);
}
.btn-top_left:hover {
    transform: translateY(calc(-50% - 2px)) scale(1.03);
}

/* ── TOP RIGHT ── */
.btn-top_right {
    top:   25%;
    right: 6%;
    transform: translateY(-50%);
}
.btn-top_right:hover {
    transform: translateY(calc(-50% - 2px)) scale(1.03);
}

/* ── BOTTOM LEFT ── */
.btn-bottom_left {
    bottom: 25%;
    left:   6%;
    transform: translateY(50%);
}
.btn-bottom_left:hover {
    transform: translateY(calc(50% - 2px)) scale(1.03);
}

/* ── BOTTOM CENTER ── */
.btn-bottom_center {
    bottom: 25%;
    left:   50%;
    transform: translate(-50%, 50%);
}
.btn-bottom_center:hover {
    transform: translate(-50%, calc(50% - 2px)) scale(1.03);
}

/* ── BOTTOM RIGHT ── */
.btn-bottom_right {
    bottom: 25%;
    right:  6%;
    transform: translateY(50%);
}
.btn-bottom_right:hover {
    transform: translateY(calc(50% - 2px)) scale(1.03);
}

/* ═══════════════════════════════════════════════════════════
   SIBLING OFFSETS
   Push site-header, main content, and mobile drawer below
   the fixed carousel so nothing is hidden behind it.
   ═══════════════════════════════════════════════════════════ */

/* Navbar sits immediately below carousel */
.promo-carousel ~ .site-header {
    top: var(--promo-h) !important;
}
/* Main content area clears carousel + navbar (~80px base) */
.promo-carousel ~ .store-main {
    padding-top: calc(var(--promo-h) + 80px) !important;
}
/* Mobile drawer opens below carousel + navbar */
.promo-carousel ~ .mobile-drawer {
    top: calc(var(--promo-h) + 80px) !important;
}

/* Large tablet */
@media (max-width: 1199px) {
    .promo-carousel ~ .site-header   { top: var(--promo-h-lg) !important; }
    .promo-carousel ~ .store-main    { padding-top: calc(var(--promo-h-lg) + 80px) !important; }
    .promo-carousel ~ .mobile-drawer { top: calc(var(--promo-h-lg) + 80px) !important; }
}
/* Tablet */
@media (max-width: 1023px) {
    .promo-carousel ~ .site-header   { top: var(--promo-h-md) !important; }
    .promo-carousel ~ .store-main    { padding-top: calc(var(--promo-h-md) + 70px) !important; }
    .promo-carousel ~ .mobile-drawer { top: calc(var(--promo-h-md) + 70px) !important; }
}
/* Mobile */
@media (max-width: 767px) {
    .promo-carousel ~ .site-header   { top: var(--promo-h-sm) !important; }
    .promo-carousel ~ .store-main    { padding-top: calc(var(--promo-h-sm) + 65px) !important; }
    .promo-carousel ~ .mobile-drawer { top: calc(var(--promo-h-sm) + 65px) !important; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE — CTA button scales down, stays centered & tappable
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .promo-cta {
        /* Let Bootstrap handle sizing */
        width: auto;
        max-width: none;
    }

    /* All transforms remain as defined in base rules above.
       Only re-state top/left/right/bottom coordinates. */
    .btn-center        { top: 50%;    left: 50%; }
    .btn-top_left      { top: 22%;    left: 5%;  }
    .btn-top_right     { top: 22%;    right: 5%; }
    .btn-bottom_left   { bottom: 22%; left: 5%;  }
    .btn-bottom_center { bottom: 22%; left: 50%; }
    .btn-bottom_right  { bottom: 22%; right: 5%; }
}