/* =====================================================================
   responsive.css — التجاوب (Desktop / Tablet / Mobile)
   الجوال هنا تصميم مختلف وليس تصغيرًا: شريط سفلي للإجراءات السريعة،
   قوائم قابلة للتمرير الأفقي، بطاقات مرتبة عموديًا، وأهداف لمس أكبر.
   نقاط التوقف: 1280 / 1180 / 1024 / 900 / 768 / 600 / 425 / 360
   ===================================================================== */

/* ---- شاشات كبيرة جدًا ---- */
@media (min-width: 1700px) {
  .container { width: min(100% - 4rem, 1380px); }
  html { font-size: 17px; }
}

/* ---- Laptop ---- */
@media (max-width: 1280px) {
  .guide-grid, .eservices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav__link { padding-inline: .6rem; font-size: .92rem; }
}

/* ---- يتحول الهيدر إلى قائمة الجوال ---- */
@media (max-width: 1180px) {
  .nav, .header__cta, .header__actions .icon-btn { display: none; }
  .burger { display: inline-grid; }
  .header__actions .icon-btn--wa { display: none; }
}

/* ---- Tablet landscape ---- */
@media (max-width: 1024px) {
  .grid--programs, .grid--3, .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-grid, .why-grid, .transport-grid, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact__info, .contact__form { grid-column: 1; }
  .contact__info { grid-row: 1; }
  .contact__form { grid-row: 2; }
  .masonry { columns: 3 220px; }
  .about { grid-template-columns: 1fr; }
  .about__media { max-width: 460px; margin-inline: auto; width: 100%; }
}

/* ---- Hero عمودي ---- */
@media (max-width: 900px) {
  .hero { min-height: auto; padding-block: calc(var(--header-h) + 2.5rem) 6.5rem; }
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__lead { margin-inline: auto; }
  .hero__cta, .hero__points { justify-content: center; }
  .hero__art { display: none; }
  .hero__scroll { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3)::before { display: none; }
  .stat:nth-child(n+3) { border-block-start: 1px solid var(--line); }
  .guide-grid, .eservices, .highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Tablet portrait ---- */
@media (max-width: 768px) {
  :root { --header-h: 64px; }
  body { font-size: 1rem; }
  .section { padding-block: 3.2rem; }
  .vm, .details__grid, .form__row { grid-template-columns: 1fr; }
  .masonry { columns: 2 150px; column-gap: .7rem; }
  .masonry__item { margin-block-end: .7rem; border-radius: 12px; }
  .masonry__btn figcaption { opacity: 1; transform: none; padding-block-start: 1.6rem; font-size: .82rem; }
  .masonry__btn figcaption span { display: none; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .toolbar { padding: .8rem; }
  .lightbox__stage { padding: 3.5rem .6rem 5.5rem; }
  .lightbox__nav { inset-block-start: auto; inset-block-end: 4.2rem; transform: none; width: 46px; height: 46px; }
  .modal { padding: .6rem; }
  .modal__panel { border-radius: 20px; }
  .contact__info, .contact__form { padding: 1.5rem; border-radius: 22px; }
  .timeline { padding-inline-start: 3rem; }
  .timeline__dot { inset-inline-start: -3rem; width: 40px; height: 40px; }
  .timeline::before { inset-inline-start: 19px; }
}

/* ---- Mobile: تصميم مخصص ---- */
@media (max-width: 600px) {
  body { padding-block-end: 70px; } /* مساحة للشريط السفلي */
  .container { width: min(100% - 1.6rem, 1240px); }
  .logo__text small { font-size: .66rem; }
  .logo__mark { height: 46px; }
  .logo__text strong { font-size: 1.2rem; }

  /* Hero */
  .hero h1 { font-size: clamp(2.1rem, 9.4vw, 2.8rem); }
  .hero__kicker { font-size: .85rem; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .hero__points { flex-direction: column; align-items: center; gap: .4rem; font-size: .9rem; }

  /* إحصائيات: بطاقات 2×2 مدمجة */
  .section--stats { margin-block-start: -2.6rem; }
  .stat { padding: 1.3rem .6rem; }
  .stat span { font-size: .9rem; }

  /* الشبكات عمودية */
  .grid--programs, .grid--3, .posts, .services-grid, .why-grid, .transport-grid, .videos, .grid--4 { grid-template-columns: 1fr; }
  .guide-grid, .eservices { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .guide-card, .eservice { padding: 1.1rem .9rem; }
  .guide-card strong, .eservice strong { font-size: 1rem; }
  .guide-card small, .eservice small { font-size: .82rem; }
  .highlights { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .why-card { padding: 1.4rem 1.1rem; }

  /* الفلاتر: شريط أفقي قابل للتمرير بدل التفاف على سطور كثيرة */
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -.2rem; padding-inline: .2rem; -webkit-overflow-scrolling: touch; }
  .filters::-webkit-scrollbar { display: none; }
  .filters--center { justify-content: flex-start; }
  .filter-btn { flex: none; }
  .toolbar { border-radius: 16px; }
  .search, .select, .select select { width: 100%; }

  /* بطاقة البرنامج */
  .program-card__actions { grid-template-columns: 1fr 1fr; }
  .program-card__body { padding: 1.2rem; }

  /* Slider: أزرار أقل */
  .slider__dots { max-width: 40%; }
  .slider__btn--play { display: none; }

  /* النوافذ كلوحة سفلية Bottom sheet */
  .modal { align-items: end; padding: 0; }
  .modal__panel { border-radius: 24px 24px 0 0; max-height: 92vh; transform: translateY(100%); }
  .modal.is-open .modal__panel { transform: none; }
  .modal__panel--full { border-radius: 0; max-height: none; }
  .modal__head { padding: 1.1rem 3.6rem .8rem 1.2rem; }
  .modal__head h2 { font-size: 1.3rem; }
  .modal__body { padding: 1.1rem 1.2rem 1.6rem; }
  .details__foot { flex-direction: column; align-items: stretch; }
  .guide-nav .btn { flex: 1 1 100%; }

  /* الفوتر وعناصر عائمة */
  .footer { padding-block-start: 3rem; }
  .footer__bottom { flex-direction: column; text-align: center; }
  .wa-float { inset-block-end: 82px; height: 54px; width: 54px; padding: 0; justify-content: center; }
  .wa-float span { display: none; }
  .to-top { inset-block-end: 82px; width: 46px; height: 46px; }
  .mobile-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 95; display: grid; grid-template-columns: 1fr 1.6fr; gap: .6rem; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); box-shadow: 0 -8px 24px rgba(10, 51, 40, .12); }
  .mobile-bar a, .mobile-bar button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; border-radius: 14px; font-weight: 700; }
  .mobile-bar a { background: var(--green-800); color: #fff; }
  .mobile-bar button { background: var(--grad-gold); color: var(--green-950); }
  .toasts { inset-block-start: auto; inset-block-end: 80px; }
  .cta__actions { flex-direction: column; }
  .cta__actions .btn { width: 100%; }
  .about__years { inset-inline-end: 8px; padding: .7rem 1rem; }
  .tab { flex: 1; padding-inline: .8rem; font-size: .92rem; }
  .levels th, .levels td { padding: .8rem; font-size: .92rem; }
}

/* ---- شاشات صغيرة ---- */
@media (max-width: 425px) {
  .section__head h2 { font-size: 1.85rem; }
  .btn { padding-inline: 1.2rem; }
  .price strong { font-size: 1.5rem; }
  .stat__value { font-size: 2rem; }
  .guide-card__num { font-size: 1.5rem; }
}

/* ---- 320px ---- */
@media (max-width: 360px) {
  .container { width: min(100% - 1.2rem, 1240px); }
  .logo__text strong { font-size: 1rem; }
  .logo__text small { font-size: .6rem; }
  .guide-grid, .eservices, .highlights { grid-template-columns: 1fr; }
  .program-card__actions { grid-template-columns: 1fr; }
  .stat span { font-size: .82rem; }
  .hero h1 { font-size: 2rem; }
  .mobile-bar { grid-template-columns: 1fr 1.4fr; }
  .filter-btn { padding-inline: .8rem; }
}

/* ---- شاشة قصيرة أفقية ---- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; }
}

/* ---- الطباعة ---- */
@media print {
  .site-header, .wa-float, .to-top, .mobile-bar, .loader, .hero__scroll { display: none !important; }
  body { background: #fff; padding: 0; }
  .section { padding-block: 1.5rem; }
}