/* Tamouh Theme — responsive.css (Mobile) */
@media (max-width: 900px) {
  .main-nav {
    position: fixed; inset: 0 0 0 auto; width: min(80vw, 22rem);
    background: var(--card); box-shadow: var(--shadow-lg);
    transform: translateX(100%); transition: transform .3s ease;
    padding: 5rem 1.5rem 2rem; overflow-y: auto; z-index: 60;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-menu { flex-direction: column; gap: 1.25rem; }
  .main-menu a { font-size: 1.05rem; }

  .menu-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; background: transparent; border: 1px solid var(--border);
    border-radius: 10px; cursor: pointer; padding: 0;
  }
  .menu-toggle span { display: block; width: 22px; height: 2px; background: var(--foreground); margin: 0 auto; transition: all .25s ease; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 55; opacity: 0;
    visibility: hidden; transition: opacity .3s ease;
  }
  .nav-overlay.is-open { opacity: 1; visibility: visible; }
}

@media (max-width: 600px) {
  .section { padding-block: 3.5rem; }
  .hero { min-height: 78vh; }
  .hero__content { padding-block: 4rem; }
  .cards-grid--4 { grid-template-columns: 1fr 1fr; }
  .stats-band__grid { grid-template-columns: 1fr 1fr; }
  .single-meta-strip__grid { grid-template-columns: 1fr 1fr; }
  .section-head--row { flex-direction: column; align-items: flex-start; }
  .badge-years { position: static; display: inline-block; margin-top: 1rem; }
}

@media (max-width: 400px) {
  .cards-grid--4 { grid-template-columns: 1fr; }
}