/* ══════════════════════════════════════════
   HOMEPAGE PROGRAM BANNER  (between hero and organizer)
   Markup: /inc/program-banner.php — used by /index.php and /en/index.php
══════════════════════════════════════════ */
.pb-section { background: #fff; padding: 56px 32px; }
.pb {
  max-width: 1076px; margin: 0 auto; position: relative; overflow: hidden;
  border-radius: 26px; color: #fff;
  background: linear-gradient(135deg, #0e1e1e 0%, #113535 55%, #0f2a2a 100%);
  border: 1px solid rgba(0,145,158,.3);
  box-shadow: 0 18px 50px rgba(0,60,70,.22);
}
/* decorative rings */
.pb::before, .pb::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(0,145,158,.22);
}
.pb::before { width: 320px; height: 320px; top: -150px; left: 18%; }
.pb::after  { width: 260px; height: 260px; bottom: -170px; right: 22%; border-color: rgba(200,150,10,.18); }
.pb-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 90% at 100% 0%, rgba(0,145,158,.25), transparent 70%);
}
[dir="ltr"] .pb-glow, html:not([dir="rtl"]) .pb-glow {
  background: radial-gradient(ellipse 50% 90% at 0% 0%, rgba(0,145,158,.25), transparent 70%);
}

.pb-top { position: relative; display: flex; align-items: center; gap: 28px; padding: 36px 40px; }

.pb-date {
  flex-shrink: 0; width: 150px; text-align: center; padding: 16px 10px; border-radius: 18px;
  background: rgba(0,145,158,.12); border: 1px solid rgba(0,145,158,.35);
}
.pb-date b    { display: block; font-size: 2.3rem; font-weight: 900; line-height: 1.1; color: #FFD966; }
.pb-date span { font-size: .85rem; font-weight: 700; color: rgba(255,255,255,.75); }

.pb-text { flex: 1; min-width: 0; }
.pb-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .75rem; font-weight: 700; color: #FFD966;
  background: rgba(200,150,10,.12); border: 1px solid rgba(255,217,102,.35);
  padding: 4px 14px; border-radius: 50px; margin-bottom: 10px;
}
.pb-badge i { width: 7px; height: 7px; border-radius: 50%; background: #2dff8a; box-shadow: 0 0 8px #2dff8a; }
.pb-text h3 { font-size: 1.75rem; font-weight: 900; line-height: 1.35; color: #fff; }
.pb-text h3 span { color: var(--teal); }
.pb-text p { font-size: .95rem; color: rgba(255,255,255,.72); margin-top: 4px; }

.pb-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: linear-gradient(135deg, #c8960a, #FFD966); color: #1a1a1a;
  font-family: var(--font); font-weight: 900; font-size: 1rem;
  padding: 16px 34px; border-radius: 14px;
  box-shadow: 0 8px 24px rgba(200,150,10,.3);
  transition: transform .15s, box-shadow .2s;
}
.pb-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(200,150,10,.45); }

.pb-stats {
  position: relative; display: flex;
  border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.15);
}
.pb-stat { flex: 1 1 0; text-align: center; padding: 18px 10px; }
.pb-stat + .pb-stat { border-inline-start: 1px solid rgba(255,255,255,.08); }
.pb-stat b {
  display: block; font-size: 1.6rem; font-weight: 900; line-height: 1.2; color: #FFD966;
  font-variant-numeric: tabular-nums;
}
.pb-stat span { font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.7); }
.pb-riyal {
  display: inline-block; width: .8em; height: .8em; vertical-align: middle; margin-inline-end: 6px;
  background: no-repeat center/contain url("https://upload.wikimedia.org/wikipedia/commons/9/98/Saudi_Riyal_Symbol.svg");
  filter: brightness(0) saturate(100%) invert(85%) sepia(60%) saturate(500%) hue-rotate(5deg) brightness(105%);
}

/* ── Tablet ── */
@media (max-width: 960px) {
  .pb-section { padding: 44px 18px; }
  .pb-top { padding: 30px 26px; gap: 20px; }
  .pb-date { width: 130px; }
  .pb-date b { font-size: 2rem; }
  .pb-text h3 { font-size: 1.45rem; }
  .pb-btn { padding: 14px 24px; }
}

/* ── Mobile ── */
@media (max-width: 700px) {
  .pb-section { padding: 36px 14px; }
  .pb { border-radius: 20px; }
  .pb-top { flex-direction: column; align-items: stretch; text-align: center; gap: 16px; padding: 26px 18px 22px; }
  .pb-date { width: auto; align-self: center; padding: 10px 26px; }
  .pb-date b { font-size: 1.8rem; }
  .pb-text h3 { font-size: 1.35rem; }
  .pb-text p { font-size: .85rem; }
  .pb-btn { justify-content: center; padding: 14px; }
  .pb-stats { flex-wrap: wrap; }
  .pb-stat { flex: 1 1 50%; padding: 14px 8px; border-inline-start: 0 !important; }
  .pb-stat:nth-child(even) { border-inline-start: 1px solid rgba(255,255,255,.08) !important; }
  .pb-stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.08); }
  .pb-stat b { font-size: 1.3rem; }
  /* Arabic: no letter-spacing on mobile */
  [dir="rtl"] .pb-badge, [dir="rtl"] .pb-btn, [dir="rtl"] .pb-text h3 { letter-spacing: normal; }
}