/* =========================================================================
   yfattal.com — Courses archive
   يُحمَّل بعد yf-single-course.css ويستعمل نفس متغيّرات الهوية.
   كل الأنماط محصورة داخل .yf-archive
   ========================================================================= */

.yf-archive{padding-bottom:72px}

/* ---------------- الترويسة ---------------- */
.yf-archive .yf-hero__inner{position:relative;display:grid;gap:14px;padding-block:46px 42px;max-width:74ch}
.yf-archive .yf-hero__title{color:var(--yf-band-ink)}
.yf-archive .yf-hero__desc{color:var(--yf-band-muted);font-size:16.5px;max-width:62ch}

.yf-hero__facts{list-style:none;margin:10px 0 0;padding:16px 0 0;border-top:1px solid var(--yf-band-line);
  display:flex;flex-wrap:wrap;gap:10px 30px}
.yf-hero__facts li{display:flex;align-items:baseline;gap:7px;color:var(--yf-band-muted);font-size:14px}
.yf-hero__facts b{font-family:var(--yf-mono);font-size:22px;font-weight:600;color:var(--yf-brand);letter-spacing:-.02em}

/* ---------------- الدورة المميّزة ---------------- */
.yf-feat{margin-top:-26px;position:relative;z-index:2;background:var(--yf-surface);
  border:1px solid var(--yf-line);border-radius:16px;box-shadow:var(--yf-shadow);overflow:hidden}
.yf-feat__grid{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr)}
.yf-feat__media{position:relative;background:var(--yf-surface-2);min-height:100%}
.yf-feat__media img{width:100%;height:100%;object-fit:cover;display:block}
.yf-feat__copy{padding:30px 32px;display:grid;gap:13px;align-content:start}
.yf-feat__title{font-family:var(--yf-display);font-size:clamp(20px,2.6vw,27px);font-weight:800;
  line-height:1.45;margin:0;letter-spacing:-.01em}
.yf-archive .yf-feat__title a{text-decoration:none;color:inherit}
.yf-archive .yf-feat__title a:hover{color:var(--yf-brand-deep)}
.yf-feat__desc{color:var(--yf-ink-2);font-size:15.5px;max-width:56ch}
.yf-feat__buy{margin-top:6px;padding-top:18px;border-top:1px solid var(--yf-line);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.yf-feat__btns{display:flex;gap:10px;flex-wrap:wrap}
.yf-course .yf-feat__btns .yf-btn{width:auto;display:inline-block;padding:12px 22px}
.yf-feat__fine{font-size:13px;color:var(--yf-muted)}
.yf-feat .yf-card__meta{margin-top:2px}

/* ---------------- شريط الأدوات ---------------- */
.yf-tools{margin-top:34px;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:14px 22px}

.yf-archive .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.yf-chips{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.yf-course .yf-chip{font-family:var(--yf-body);font-size:14px;font-weight:600;color:var(--yf-ink-2);
  background:var(--yf-surface);border:1px solid var(--yf-line-2);border-radius:999px;
  padding:7px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.yf-course .yf-chip span{font-family:var(--yf-mono);font-size:12px;color:var(--yf-muted)}
.yf-course .yf-chip:hover{border-color:var(--yf-ink);color:var(--yf-ink)}
.yf-course .yf-chip.is-on{background:var(--yf-band);border-color:var(--yf-band);color:#fff}
.yf-course .yf-chip.is-on span{color:var(--yf-brand)}
.yf-course .yf-chip:focus-visible{outline:3px solid var(--yf-brand-deep);outline-offset:2px}

.yf-search{position:relative;width:228px;max-width:100%}
.yf-search svg{position:absolute;inset-inline-start:13px;inset-block-start:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--yf-muted);pointer-events:none}
.yf-course .yf-search input{width:100%;font-family:var(--yf-body);font-size:15px;color:var(--yf-ink);
  background:var(--yf-surface);border:1px solid var(--yf-line-2);border-radius:999px;
  padding:9px 38px 9px 15px;line-height:1.5}
.yf-course .yf-search input::placeholder{color:var(--yf-muted)}
.yf-course .yf-search input:focus{outline:none;border-color:var(--yf-brand-deep);
  box-shadow:0 0 0 3px rgba(253,207,54,.32)}
.yf-course .yf-search input::-webkit-search-cancel-button{cursor:pointer}

.yf-count{margin:16px 0 0;font-size:13.5px;color:var(--yf-muted);min-height:1.2em}

/* ---------------- الشبكة ---------------- */
.yf-grid{margin-top:14px;display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(292px,1fr))}

.yf-card{position:relative;display:flex;flex-direction:column;background:var(--yf-surface);
  border:1px solid var(--yf-line);border-radius:14px;overflow:hidden;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.yf-card:hover{transform:translateY(-3px);box-shadow:var(--yf-shadow);border-color:var(--yf-line-2)}
.yf-card.is-hidden{display:none}

.yf-card__media{position:relative;aspect-ratio:16/9;background:var(--yf-surface-2);overflow:hidden}
.yf-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.yf-card__ph{width:100%;height:100%;display:grid;place-items:center;padding:20px;text-align:center;
  background:linear-gradient(150deg,var(--yf-band) 0%,#33333A 62%,#3E3A22 100%)}
.yf-card__ph span{font-family:var(--yf-display);font-weight:700;font-size:17px;line-height:1.55;
  color:var(--yf-brand);text-wrap:balance}

.yf-card__off{position:absolute;inset-block-start:11px;inset-inline-start:11px;z-index:2;
  background:var(--yf-brand);color:var(--yf-on-brand);font-family:var(--yf-display);font-weight:700;
  font-size:12.5px;border-radius:6px;padding:5px 10px;display:inline-flex;gap:4px;align-items:center;
  box-shadow:0 2px 10px rgba(20,20,22,.24)}
.yf-card__off--free{background:#17705B;color:#fff}
.yf-card__level{position:absolute;inset-block-end:11px;inset-inline-end:11px;z-index:2;
  background:rgba(26,26,28,.82);color:#F2F2EE;font-size:12px;font-weight:600;
  border-radius:6px;padding:4px 9px;backdrop-filter:blur(3px)}

.yf-card__body{padding:17px 18px 15px;display:flex;flex-direction:column;gap:9px;flex:1}
.yf-card__cat{font-family:var(--yf-mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--yf-brand-deep)}
.yf-course .yf-card__title{font-size:17.5px;font-weight:700;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yf-archive .yf-card__title a{text-decoration:none;color:inherit}
.yf-archive .yf-card__title a:hover{color:var(--yf-brand-deep)}
.yf-archive .yf-crumbs a{color:var(--yf-band-muted)}
.yf-archive .yf-crumbs a:hover{color:var(--yf-band-ink)}
.yf-card__title a::after{content:"";position:absolute;inset:0;z-index:3}
.yf-card__desc{font-size:14.5px;color:var(--yf-muted);line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.yf-card__rating{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--yf-ink-2)}
.yf-card__rating .yf-stars__bg{color:var(--yf-line-2)}
.yf-card__rating-n{color:var(--yf-muted)}

.yf-card__meta{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 15px;
  font-size:13px;color:var(--yf-ink-2)}
.yf-card__meta li{display:inline-flex;align-items:center;gap:6px}
.yf-card__meta svg{width:14px;height:14px;color:var(--yf-brand-deep);flex:none}
.yf-card__meta b{font-weight:600}

.yf-card__foot{border-top:1px solid var(--yf-line);padding:13px 18px;display:flex;
  align-items:center;justify-content:space-between;gap:12px;background:#FCFCFA}
.yf-card__price{display:flex;align-items:baseline;gap:9px}
.yf-card__now{font-family:var(--yf-mono);font-size:22px;font-weight:600;letter-spacing:-.02em;
  color:var(--yf-ink);direction:ltr}
.yf-card__now--free{font-family:var(--yf-display);font-size:19px;color:#17705B}
.yf-card__price del{font-family:var(--yf-mono);font-size:14.5px;color:var(--yf-muted);direction:ltr}
.yf-card__cta{display:inline-flex;align-items:center;gap:4px;font-family:var(--yf-display);
  font-size:14px;font-weight:700;color:var(--yf-brand-deep);white-space:nowrap}
.yf-card__cta svg{width:15px;height:15px;transform:rotate(90deg);transition:transform .16s ease}
.yf-card:hover .yf-card__cta svg{transform:rotate(90deg) translateY(3px)}

/* ---------------- حالات فارغة ---------------- */
.yf-empty{margin:34px 0;padding:26px;text-align:center;background:var(--yf-surface);
  border:1px dashed var(--yf-line-2);border-radius:12px;color:var(--yf-muted);font-size:15px}
.yf-course .yf-linkbtn{background:none;border:none;padding:0 4px;cursor:pointer;
  font-family:var(--yf-body);font-size:15px;font-weight:700;color:var(--yf-brand-deep);
  text-decoration:underline;text-underline-offset:3px}

/* ---------------- الاستجابة ---------------- */
@media (max-width:900px){
  .yf-feat__grid{grid-template-columns:1fr}
  .yf-feat__media{aspect-ratio:16/9}
  .yf-feat__copy{padding:24px 22px}
  .yf-feat{margin-top:-18px}
}
@media (max-width:860px){
  .yf-tools{grid-template-columns:1fr}
  .yf-search{width:100%}
}
@media (max-width:640px){
  .yf-archive .yf-hero__inner{padding-block:34px 32px}
  .yf-grid{grid-template-columns:1fr;gap:18px}
  .yf-hero__facts{gap:10px 20px}
  .yf-hero__facts b{font-size:19px}
  .yf-feat__buy{flex-direction:column;align-items:stretch}
  .yf-course .yf-feat__btns .yf-btn{flex:1;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .yf-card,.yf-card__cta svg,.yf-course .yf-chip{transition:none}
  .yf-card:hover{transform:none}
}