/* ============================================================
   Promo Banners — homepage promotional sections
   Used by: index.php (#promo-banner-1, #promo-banner-2)
   Structured with .is-hidden toggle class for future admin control
   (see admin/banners.php) — do not add inline display styles here.

   Compact inset card format: contained within the page's standard
   1280px wrapper, rounded corners, short horizontal strip — sits
   between sections rather than acting as a full section itself.
   ============================================================ */

.promo-banner {
  width: 100%;
  margin: 12px 0;
}

.promo-banner.is-hidden {
  display: none;
}

.promo-banner-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.promo-banner-card {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 240px;
  border-radius: 16px;
  overflow: hidden;
}

.promo-banner-media {
  flex: 0 0 42%;
  position: relative;
  height: 100%;
}

.promo-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: right;
  padding: 24px 32px;
}

.promo-eyebrow {
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #C9A84C;
  margin: 0 0 8px;
}

.promo-heading {
  font-family: 'Cairo', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
  margin: 0 0 8px;
}

.promo-subtitle {
  font-family: 'Cairo', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  max-width: 380px;
  margin: 0 0 16px;
}

.promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 9999px;
  padding: 10px 26px;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}

/* ---------- Promo Banner 1: Season Sale (light) ---------- */
/* Nested inside the "منتجات مميزة" section — no separate background
   wrapper, sits directly on that section's White background with
   no visual seam. Only the card's rounded overflow clips the image. */

#promo-banner-1 { margin: 0 0 32px; }

#promo-banner-1 .promo-banner-container {
  max-width: none;
  padding: 0;
  margin: 0;
}

#promo-banner-1 .promo-heading { color: #1F3F5B; }
#promo-banner-1 .promo-subtitle { color: #6B7280; }

#promo-banner-1 .promo-cta {
  background: #1F3F5B;
  color: #ffffff;
}
#promo-banner-1 .promo-cta:hover { background: #C9A84C; color: #1F3F5B; }

.promo-media-frame {
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 20%, black 100%);
}

.promo-media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Promo Banner 2: Exceptional Design (dark) ---------- */

#promo-banner-2 .promo-banner-card {
  background: #1F3F5B;
  border-top: 2px solid #C9A84C;
}

#promo-banner-2 .promo-heading { color: #ffffff; }
#promo-banner-2 .promo-subtitle { color: #DCE7F2; }

#promo-banner-2 .promo-cta {
  background: transparent;
  color: #C9A84C;
  border: 1.5px solid #C9A84C;
}
#promo-banner-2 .promo-cta:hover { background: #C9A84C; color: #1F3F5B; }

.promo-media-frame-dark {
  width: 100%;
  height: 100%;
  position: relative;
}

.promo-media-frame-dark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.promo-media-frame-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(31,63,91,0.5) 0%, transparent 35%);
  pointer-events: none;
}

/* ---------- Mobile: keep compact side-by-side strip ---------- */

@media (max-width: 640px) {
  #promo-banner-2.promo-banner { margin: 32px 0; }
  #promo-banner-2 .promo-banner-container { padding: 0 16px; }
  #promo-banner-1 { margin: 0 0 24px; }

  .promo-banner-card { height: 210px; }

  .promo-banner-media { flex: 0 0 38%; }

  .promo-banner-text {
    padding: 16px 18px;
  }

  .promo-eyebrow { font-size: 11px; margin-bottom: 6px; }
  .promo-heading { font-size: clamp(18px, 5vw, 24px); margin-bottom: 6px; }
  .promo-subtitle { font-size: 12px; line-height: 1.5; margin-bottom: 12px; max-width: 100%; }
  .promo-cta { padding: 8px 18px; font-size: 12px; }

  .promo-media-frame {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 12%, black 100%);
  }
}