/* =========================================================
   Gökhan Efe — Responsive rules
   Mobile-first base lives in style.css / article.css.
   Breakpoints layered on top for larger viewports.
   ========================================================= */

/* ~425px small phones: tighten hero title a touch */
@media (max-width: 424px) {
  .header-inner { padding: 12px 16px; }
  .container { padding: 0 16px; }
  .hero-title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
}

/* >= 640px: two-column card grids begin */
@media (min-width: 640px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}

/* >= 768px: nav becomes horizontal, hero splits, footer columns grow */
@media (min-width: 768px) {
  .menu-toggle { display: none; }
  .primary-nav { display: block; }
  .mobile-nav { display: none; }

  .hero-grid { grid-template-columns: 1.6fr 1fr; align-items: start; }
  .hero-grid > * { min-width: 0; }
  .hero-title { font-size: var(--step-4); }

  .video-feature { grid-template-columns: 1.3fr 1fr; }

  .newsletter { flex-direction: row; align-items: center; justify-content: space-between; padding: 44px 40px; }
  .newsletter-form { flex-direction: row; min-width: 380px; }
  .newsletter-form input[type="email"] { flex: 1; }

  .footer-inner { grid-template-columns: 1.1fr 2fr; }
  .footer-cols { grid-template-columns: repeat(4, 1fr); }

  .card-horizontal { grid-template-columns: 160px 1fr; }
}

/* >= 1024px: article gets a real sidebar, category/article grids widen */
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .latest-layout { grid-template-columns: 2fr 1fr; }
  .latest-layout > * { min-width: 0; }

  .article-layout { grid-template-columns: 720px 1fr; align-items: start; }
  .article-layout > * { min-width: 0; }
  .article-sidebar { position: sticky; top: 96px; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}

/* >= 1280px: comfortable max widths */
@media (min-width: 1280px) {
  .hero-title { font-size: var(--step-4); }
}

@media print {
  .site-header, .site-footer, .toc, .share-row, .newsletter, .mobile-nav, .next-article { display: none !important; }
  .article-body { font-size: 12pt; }
}