/* =========================================================================
   BriefNepal — responsive breakpoints (mobile-first overrides).
   Base styles in style.css; these scale the magazine layout up / down.
   ========================================================================= */

/* ---- Large tablet / small desktop ---- */
@media (max-width: 1024px) {
  .layout { grid-template-columns: 1fr 280px; gap: 24px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .featured { grid-template-columns: 1.4fr 1fr; }
}

/* ---- Tablet: drop the sidebar below content ---- */
@media (max-width: 880px) {
  .layout { grid-template-columns: 1fr; }
  .layout__side { position: static; }
  .admin__cards { grid-template-columns: 1fr 1fr; }
  .featured { grid-template-columns: 1fr; }
  .feature--lg { min-height: 320px; }
}

/* ---- Mobile ---- */
@media (max-width: 680px) {
  body { font-size: 15px; }

  .datebar__tag { display: none; }
  .masthead__inner { justify-content: center; padding: 14px 16px; }
  .brand { font-size: 1.7rem; }

  /* Collapse nav into a toggled drawer — Menu button + search share one row */
  .nav__inner { flex-wrap: wrap; padding: 7px 16px; gap: 8px; }
  .nav-toggle { display: inline-flex; align-items: center; order: 1; width: auto; border-radius: 3px; padding: 9px 14px; }
  .search { order: 2; flex: 1; margin: 0; }
  .search__input { width: 100%; }
  .nav__links {
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    overflow: hidden;
    max-height: 0;
    transition: max-height .25s ease;
  }
  .nav.is-open .nav__links { max-height: 640px; margin-top: 4px; }
  .nav__link { width: 100%; border-bottom: 1px solid rgba(255,255,255,.08); }

  .featured__grid { grid-template-columns: 1fr 1fr; }
  .feature--lg .feature__title { font-size: 1.3rem; }

  .grid { grid-template-columns: 1fr; gap: 16px; }

  .article { padding: 18px; }
  .article__title { font-size: 1.55rem; }
  .article__summary { font-size: 1.02rem; }

  .footer__inner { grid-template-columns: 1fr; gap: 22px; padding: 30px 16px 20px; }

  .admin__cards { grid-template-columns: 1fr; }
  .admin__bar-inner { height: auto; padding: 12px 0; flex-direction: column; gap: 10px; align-items: stretch; }
  .admin__key input { width: 100%; }

  .ticker__label { padding: 0 12px; font-size: .68rem; }
}

/* ---- Small phones ---- */
@media (max-width: 420px) {
  .featured__grid { grid-template-columns: 1fr; }
  .article__title { font-size: 1.35rem; }
}

/* ---- Honour reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .ticker__track { animation: none !important; }
}