/* ============================================================
   RESPONSIVE — Syed Muhammad Ali Shah · Homepage
   Breakpoints: 1024 / 860 / 640
   ============================================================ */

@media (max-width: 1024px) {
  .slide__title { font-size: clamp(1.7rem, 4vw, 2.6rem); }
  .cards { grid-template-columns: 1fr 1fr; }
  .cards .card:last-child { grid-column: 1 / -1; }
  .about__grid { grid-template-columns: 1fr; }
  .about__mosque { height: 240px; }
  .legacy__grid { grid-template-columns: 1fr; }
  .frame-gold--portrait { max-width: 360px; }
  .cta__band { grid-template-columns: 1fr; }
  .cta__photo { order: -1; padding-bottom: 0; }
  .frame-ornate { max-width: 280px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav__menu, .nav__social { display: none; }
  .nav__toggle { display: block; }

  /* Mobile dropdown panel */
  .nav { flex-wrap: wrap; border-radius: 26px; }
  .nav__menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .5s var(--ease), opacity .4s, margin .4s;
    gap: 4px;
  }
  .nav.is-open .nav__menu { max-height: 480px; opacity: 1; margin-top: 8px; }
  .nav__link { text-align: center; padding: 13px; font-size: 1.02rem; }
  .nav__social { display: none; }
  .nav.is-open .nav__social {
    display: flex;
    width: 100%;
    justify-content: center;
    max-height: 80px;
    overflow: hidden;
    opacity: 1;
    padding: 10px 0 6px;
    transition: max-height .5s var(--ease), opacity .4s;
  }

  /* Hero stacks: copy above, photo below (fixed viewport height for fade slider) */
  .slider__viewport { aspect-ratio: auto; height: 740px; min-height: 0; }
  .slide { grid-template-columns: 1fr; grid-template-rows: auto 300px; position: absolute; align-content: start; }
  .slide__copy { order: 1; padding: 34px 26px 30px; justify-content: flex-start; background: linear-gradient(180deg, rgba(3,15,11,.97) 40%, rgba(3,15,11,.78)); }
  .slide__photo { order: 2; min-height: 300px; }
  .slider__arrow { display: none; }
  .slider__thumbs { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .slider__thumb-label { display: none; }

  .stats__band { grid-template-columns: 1fr; }
  .stat + .stat::before { left: 20%; right: 20%; top: 0; bottom: auto; width: auto; height: 1px; }

  .videos__head { flex-direction: column; align-items: flex-start; }
  .footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .footer__bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 640px) {
  .section { padding: 60px 0; }
  .wrap { width: calc(100% - 36px); }
  .cards { grid-template-columns: 1fr; }
  .brand { font-size: 1.05rem; }
  .nav { padding: 10px 18px; }
  .slide { grid-template-rows: auto 240px; }
  .slider__viewport { height: 720px; }
  .slide__photo { min-height: 240px; }
  .btn { padding: 14px 30px; font-size: 0.95rem; }
  .reels { grid-auto-columns: minmax(200px, 72vw); }
}