/* ============================================================
   رِفادة — تصميم صفحة المنهجية ومكتبة المواد v52
   ============================================================ */
:root{
  --v52-teal:#0f5b5f;
  --v52-teal-dark:#0b4648;
  --v52-gold:#c59a4a;
  --v52-card:#fffdf8;
  --v52-line:#eadfce;
  --v52-muted:#6f7a78;
  --v52-shadow:0 12px 34px rgba(39,54,51,.075);
}

.rf52-page{
  background:
    radial-gradient(circle at 85% 5%, rgba(197,154,74,.12), transparent 30%),
    linear-gradient(180deg,#fffdf8 0%,#faf6ee 52%,#fbf8f1 100%);
  padding-bottom:3rem;
}

.rf52-breadcrumb{
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.9rem 0;
  color:var(--v52-muted);
  font-size:.9rem;
}
.rf52-breadcrumb a{
  color:var(--v52-teal);
  font-weight:800;
}

.rf52-hero{
  position:relative;
  min-height:360px;
  overflow:hidden;
  border:1px solid var(--v52-line);
  border-radius:28px;
  box-shadow:var(--v52-shadow);
  background:#f4ead8;
}
.rf52-hero-bg{
  position:absolute;
  inset:0;
}
.rf52-hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.rf52-hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 38%, rgba(255,253,248,.94), rgba(255,253,248,.74) 38%, rgba(255,253,248,.18) 70%),
    linear-gradient(90deg,rgba(255,255,255,.03) 0%,rgba(255,253,248,.58) 42%,rgba(255,253,248,.98) 74%);
}
.rf52-hero-content{
  position:relative;
  z-index:2;
  width:min(700px,64%);
  min-height:360px;
  padding:2.3rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}
.rf52-kicker{
  align-self:center;
  display:inline-flex;
  width:max-content;
  border:1px solid var(--v52-line);
  border-radius:999px;
  background:#fff8ec;
  color:#8b652c;
  padding:.32rem .8rem;
  font-weight:800;
  font-size:.86rem;
  margin-bottom:.75rem;
}
.rf52-hero h1{
  margin:0 0 .75rem;
  color:var(--v52-teal);
  font-size:2.8rem;
  line-height:1.22;
  font-weight:800;
}
.rf52-hero p{
  margin:0;
  color:#40524f;
  line-height:1.9;
}
.rf52-hero-notes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem;
  margin-top:1.1rem;
}
.rf52-hero-notes div{
  display:grid;
  gap:.15rem;
  justify-items:center;
  background:rgba(255,255,255,.78);
  border:1px solid var(--v52-line);
  border-radius:16px;
  padding:.75rem;
}
.rf52-hero-notes span{
  font-size:1.4rem;
}
.rf52-hero-notes strong{
  color:var(--v52-teal);
}
.rf52-hero-notes small{
  color:var(--v52-muted);
}

.rf52-hero-search{
  margin:1.2rem auto 0;
  width:min(620px,100%);
  display:flex;
  gap:.35rem;
  background:#f7f0e4;
  border:1px solid var(--v52-line);
  border-radius:18px;
  padding:.35rem;
}
.rf52-hero-search input{
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  padding:.9rem 1rem;
  font-family:inherit;
}
.rf52-hero-search button{
  border:0;
  background:var(--v52-teal);
  color:#fff;
  border-radius:14px;
  padding:0 1.35rem;
  font-family:inherit;
  font-weight:800;
  cursor:pointer;
}

.rf52-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.85rem;
  margin:1rem 0;
}
.rf52-stats div{
  background:#fff;
  border:1px solid var(--v52-line);
  border-radius:18px;
  box-shadow:0 8px 24px rgba(39,54,51,.045);
  padding:1rem;
  color:var(--v52-teal);
}
.rf52-stats strong{
  display:block;
  font-size:1.75rem;
  line-height:1.1;
}
.rf52-stats span{
  color:var(--v52-muted);
  font-size:.88rem;
}

.rf52-section-title{
  margin:2rem 0 1rem;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}
.rf52-section-title h2{
  color:var(--v52-teal);
  margin:0;
  font-size:1.65rem;
}
.rf52-section-title p{
  color:var(--v52-muted);
  margin:.2rem 0 0;
}

.rf52-method-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
.rf52-method-grid article{
  background:#fff;
  border:1px solid var(--v52-line);
  border-radius:22px;
  box-shadow:var(--v52-shadow);
  padding:1.15rem;
}
.rf52-method-grid i{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:#f5ead6;
  font-style:normal;
  font-size:1.65rem;
  margin-bottom:.75rem;
}
.rf52-method-grid h3{
  color:var(--v52-teal);
  margin:0 0 .45rem;
}
.rf52-method-grid p{
  color:#40524f;
  line-height:1.85;
  margin:0;
}

.rf52-two-col{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:1rem;
  margin-top:1rem;
}
.rf52-card{
  background:#fff;
  border:1px solid var(--v52-line);
  border-radius:22px;
  box-shadow:var(--v52-shadow);
  padding:1.25rem;
}
.rf52-card h2{
  color:var(--v52-teal);
  margin:0 0 .8rem;
}
.rf52-card.accent{
  background:linear-gradient(135deg,#fff8ec,#fffdf8);
  border-color:#ead4a8;
}
.rf52-card p{
  color:#40524f;
  line-height:1.9;
}
.rf52-steps{
  margin:0;
  padding-right:1.2rem;
}
.rf52-steps li{
  margin:.55rem 0;
  color:#40524f;
}
.rf52-steps strong{
  color:var(--v52-teal);
}
.rf52-btn{
  display:inline-flex;
  border-radius:999px;
  background:var(--v52-teal);
  color:#fff;
  padding:.65rem 1rem;
  font-weight:800;
  margin-top:.5rem;
}
.rf52-btn.secondary{
  background:#fffdf8;
  color:var(--v52-teal);
  border:1px solid var(--v52-line);
}

.rf52-reading-flow{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
}
.rf52-reading-flow div{
  background:#fff;
  border:1px solid var(--v52-line);
  border-radius:20px;
  padding:1rem;
  box-shadow:var(--v52-shadow);
  text-align:center;
}
.rf52-reading-flow span{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  margin:0 auto .6rem;
  border-radius:50%;
  background:var(--v52-teal);
  color:#fff;
  font-weight:800;
}
.rf52-reading-flow strong{
  display:block;
  color:var(--v52-teal);
}
.rf52-reading-flow small{
  color:var(--v52-muted);
}

/* Search page */
.rf52-filter-panel{
  background:#fff;
  border:1px solid var(--v52-line);
  border-radius:22px;
  box-shadow:0 8px 24px rgba(39,54,51,.045);
  padding:1rem;
  margin-bottom:1rem;
}
.rf52-filter-head{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-end;
  margin-bottom:.8rem;
}
.rf52-filter-head h2{
  margin:0;
  color:var(--v52-teal);
}
.rf52-filter-head p{
  color:var(--v52-muted);
  margin:.2rem 0 0;
}
.rf52-filter-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}
.rf52-filter-chips a{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border:1px solid var(--v52-line);
  border-radius:999px;
  background:#fffdf8;
  color:#39504d;
  padding:.55rem .9rem;
  font-weight:800;
}
.rf52-filter-chips a small{
  background:#f5ead6;
  border-radius:999px;
  padding:.05rem .4rem;
}
.rf52-filter-chips a.active,
.rf52-filter-chips a:hover{
  background:var(--v52-teal);
  color:#fff;
  border-color:var(--v52-teal);
}
.rf52-filter-chips a.active small,
.rf52-filter-chips a:hover small{
  background:rgba(255,255,255,.18);
  color:#fff;
}

.rf52-material-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:1rem;
}
.rf52-material-card{
  background:#fff;
  border:1px solid var(--v52-line);
  border-radius:24px;
  box-shadow:var(--v52-shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.rf52-material-card .img{
  height:190px;
  background:#f5ead8;
  overflow:hidden;
}
.rf52-material-card .img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.25s;
}
.rf52-material-card:hover .img img{
  transform:scale(1.05);
}
.rf52-material-card .body{
  padding:1rem;
  display:flex;
  flex-direction:column;
  flex:1;
}
.rf52-material-card .topline{
  display:flex;
  justify-content:space-between;
  gap:.5rem;
  color:#8b652c;
  font-size:.82rem;
  font-weight:800;
}
.rf52-material-card h2{
  color:var(--v52-teal);
  margin:.35rem 0 .1rem;
  font-size:1.35rem;
}
.rf52-material-card .latin{
  color:#9d7737;
  font-weight:700;
}
.rf52-material-card p{
  color:#40524f;
  line-height:1.75;
  font-size:.92rem;
}
.rf52-material-card .badges{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:auto;
}
.rf52-material-card .badges span{
  border-radius:999px;
  padding:.22rem .55rem;
  font-size:.76rem;
  font-weight:800;
  background:#f4ead8;
  color:#7b5a1f;
}
.rf52-material-card .badges .green{background:#e5f5ec;color:#166534}
.rf52-material-card .badges .blue{background:#e6f0f8;color:#1d4f72}
.rf52-material-card .badges .amber{background:#fff8ec;color:#8b652c}
.rf52-material-card .badges .red{background:#fff0ee;color:#ad3b34}
.rf52-material-card .more{
  display:inline-flex;
  color:var(--v52-teal);
  font-weight:800;
  margin-top:.8rem;
}
.rf52-empty{
  text-align:center;
  background:#fff;
  border:1px solid var(--v52-line);
  border-radius:22px;
  box-shadow:var(--v52-shadow);
  padding:3rem 1rem;
}
.rf52-empty div{
  font-size:3rem;
}
.rf52-empty h2{
  color:var(--v52-teal);
}
.rf52-pagination{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:1.5rem;
}
.rf52-pagination a{
  min-width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--v52-line);
  border-radius:999px;
  background:#fff;
  color:var(--v52-teal);
  font-weight:800;
}
.rf52-pagination a.active{
  background:var(--v52-teal);
  color:#fff;
  border-color:var(--v52-teal);
}

@media (max-width: 1000px){
  .rf52-hero-content{
    width:100%;
    background:rgba(255,253,248,.72);
  }
  .rf52-stats,
  .rf52-method-grid,
  .rf52-reading-flow{
    grid-template-columns:repeat(2,1fr);
  }
  .rf52-two-col{
    grid-template-columns:1fr;
  }
}
@media (max-width: 640px){
  .rf52-hero-content{
    padding:1.5rem;
  }
  .rf52-hero h1{
    font-size:2rem;
  }
  .rf52-hero-search{
    flex-direction:column;
  }
  .rf52-hero-search button{
    padding:.85rem;
  }
  .rf52-stats,
  .rf52-method-grid,
  .rf52-reading-flow{
    grid-template-columns:1fr;
  }
  .rf52-filter-head{
    display:block;
  }
}