:root {
  --font: "Noto Kufi Arabic", system-ui, sans-serif;
  --purple: #4b1f6f;
  --purple-2: #3d1a5b;
  --aqua: #41e6c0;
  --text: #fff;
  --muted: #e7dff3;
  --gray: #555;
  --radius-xl: 28px;
  --radius-lg: 20px;
  --shadow-lg: 0 30px 60px rgba(0, 0, 0, 0.35);
  --btn-h: 3rem;
  --btn-w: 12rem;
  --btn-r: 12px;
  --section-pad: clamp(1.2rem, 3vw, 2rem);
  --hero-radius: 24px;
}

*{ box-sizing: border-box }
html, body{ height:100%; max-width:100%; overflow-x: clip; }
body{
  margin:0;
  font-family: var(--font);
  color:#1f1f1f;

  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* Wrapper */
.albahaa-page-wrap{
  position: relative;
  padding: clamp(18px, 2.6vw, 28px);
  overflow: clip;
}
.albahaa-page-wrap::before,
.albahaa-page-wrap::after{
  content:"";
  position:absolute;
  z-index:0;
  border-radius:50%;
  filter: blur(6px);
}
.albahaa-page-wrap::before{
  width:360px; height:360px;
  top:-80px; inset-inline-start:-80px;
  background: radial-gradient(closest-side, rgba(75,31,111,.08), transparent);
  animation: floatA 16s ease-in-out infinite;
}
.albahaa-page-wrap::after{
  width:440px; height:440px;
  bottom:-100px; inset-inline-end:-100px;
  background: radial-gradient(closest-side, rgba(65,230,192,.08), transparent);
  animation: floatB 18s ease-in-out infinite;
}
@keyframes floatA{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(12px)} }
@keyframes floatB{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@media (prefers-reduced-motion: reduce){
  .albahaa-page-wrap::before,.albahaa-page-wrap::after{ animation:none }
}

/* Container */
.albahaa-container{
  width: min(1200px, 92vw);
  margin-inline: auto;
  padding-inline: clamp(12px, 2vw, 18px);
  position: relative; z-index:1;
}

/* Hero */
.albahaa-page-hero{
  background:
    linear-gradient(180deg, rgba(75,31,111,.10), rgba(75,31,111,.0)),
    linear-gradient(0deg, rgba(255,255,255,.75), rgba(255,255,255,.75));
  border: 1px solid rgba(75,31,111,.10);
  backdrop-filter: blur(6px);
  border-radius: var(--hero-radius);
  padding: var(--section-pad);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.albahaa-hero-top{
  display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:start;
}
.albahaa-hero-title{
  margin:0; color:var(--purple);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight:800; letter-spacing:.2px;
}
.albahaa-subtitle{ margin:.15rem 0 0; color:#4a4a4a; font-size:clamp(.95rem,1.8vw,1.05rem) }

/* WhatsApp Button */
.albahaa-whatsapp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  height:var(--btn-h); min-width:var(--btn-w); padding-inline:1rem;
  border-radius:var(--btn-r); border:1px solid rgba(0,0,0,.06);
  background: linear-gradient(180deg, #25D366, #20bf59);
  color:#fff; font-weight:800; text-decoration:none;
  box-shadow: 0 10px 20px rgba(37,211,102,.25);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.albahaa-whatsapp-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 26px rgba(37,211,102,.30) }
.albahaa-whatsapp-btn svg{ width:18px; height:18px }

/* Breadcrumb */
.albahaa-breadcrumb{
  margin-top:.9rem; display:flex; flex-wrap:wrap; gap:.45rem .75rem; align-items:center;
  font-size:.95rem; color:#6b6b6b;
}
.albahaa-breadcrumb a{ color:var(--purple); text-decoration:none; font-weight:800 }
.albahaa-breadcrumb .sep{ opacity:.35 }

/* Grid */
.albahaa-archive-grid{
  margin-top: clamp(18px, 2.2vw, 26px);
  display:grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 2vw, 18px);
}
.albahaa-card{
  grid-column: span 4;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius-lg); overflow: clip;
  box-shadow: 0 6px 22px rgba(0,0,0,.06);
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, opacity .5s ease, translate .5s ease;
  opacity:0; translate:0 12px;
}
.albahaa-card.revealed{ opacity:1; translate:0 0 }
.albahaa-card:hover{ transform: translateY(-6px); box-shadow:0 18px 45px rgba(75,31,111,.18); border-color: rgba(75,31,111,.18) }

.albahaa-card-thumb{
  aspect-ratio: 16/9;
  background:
    linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.08)),
    linear-gradient(120deg, rgba(75,31,111,.12), rgba(65,230,192,.12));
  background-repeat: no-repeat;
}
.albahaa-card-body{ padding:14px 16px 16px }
.albahaa-meta{ display:inline-block; gap:10px; align-items:center; color:#7a7a7a; font-size:.86rem }
.albahaa-meta .dot{ width:4px; height:4px; background:#bdbdbd; border-radius:50% }
.albahaa-card-title{ margin:.45rem 0 .35rem; font-size:clamp(1rem, 2vw, 1.1rem); line-height:1.5; color:#1e1e1e; font-weight:800 }
.albahaa-excerpt{
  color:#4c4c4c; font-size:.95rem; line-height:1.8;
  max-height: 3.6em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.albahaa-card-footer{ margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:10px }
.albahaa-tag{ font-size:.78rem; color:#2b2b2b; background:#f5f1fb; border:1px solid rgba(75,31,111,.12); padding:.35rem .6rem; border-radius:999px }
.albahaa-read-more{
  color:#fff; text-decoration:none; font-weight:800;
  background: linear-gradient(180deg, var(--purple), var(--purple-2));
  padding:.6rem .9rem; border-radius:12px; transition: filter .2s ease, transform .2s ease;
}
.albahaa-read-more:hover{ filter:brightness(1.05); transform:translateY(-1px) }

/* Pagination */
.albahaa-pagination{ margin: clamp(16px, 3vw, 26px) 0 6px; display:flex; justify-content:center; gap:8px; flex-wrap:wrap }
.albahaa-page-btn{
  min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px; border:1px solid rgba(0,0,0,.08);
  background:#fff; color:#1f1f1f; text-decoration:none; font-weight:800;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.albahaa-page-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.08) }
.albahaa-page-btn.is-current{ background: linear-gradient(180deg, var(--purple), var(--purple-2)); color:#fff; border-color:transparent }
.albahaa-page-btn.is-ghost{ background:#f7f3ff; color:var(--purple); border-color: rgba(75,31,111,.15); padding:16px }

@media (max-width:1100px){ .albahaa-card{ grid-column: span 6 } }
@media (max-width:640px){
  .albahaa-hero-top{ grid-template-columns: 1fr; gap:.65rem }
  .albahaa-whatsapp-btn{ width:100%; min-width:0 }
  .albahaa-breadcrumb{ font-size:.92rem }
  .albahaa-archive-grid{ gap:12px }
  .albahaa-card{ grid-column: span 12 }
  .albahaa-page-wrap::before{ width:240px; height:240px; top:-60px; inset-inline-start:-60px }
  .albahaa-page-wrap::after{ width:280px; height:280px; bottom:-70px; inset-inline-end:-70px }
  .albahaa-page-btn.is-ghost{ padding:10px }
}