/* NEWS 6 Online — responsive overrides.
   Loaded on every page; base layout stays inline (desktop-first),
   these rules reflow things for tablets and phones. Three tiers:
   >860 desktop (untouched), 601-860 tablet/large-phone, <=600 phone,
   <=400 tiny phone. clamp() is used on key type sizes so scaling
   between breakpoints doesn't jump. */

html, body {
  overflow-x: hidden;
}

@media (max-width: 860px) {
  .n6-util {
    flex-wrap: wrap !important;
    gap: 4px !important;
    font-size: 10px !important;
    padding: 4px 12px !important;
  }

  .n6-masthead {
    padding: 14px 12px 8px 12px !important;
  }
  .n6-logo {
    font-size: clamp(28px, 6vw, 44px) !important;
  }
  .n6-tagline {
    font-size: 12px !important;
  }
  .n6-datebar {
    text-align: left !important;
    font-size: 11px !important;
  }

  .n6-navbar {
    flex-wrap: wrap !important;
    padding: 4px 8px !important;
  }
  .n6-navbar a {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  .n6-breadcrumb {
    padding: 8px 12px !important;
  }

  /* index.html: sidebar drops below main column */
  .n6-maingrid {
    grid-template-columns: 1fr !important;
  }
  .n6-sidebar {
    border-left: none !important;
    border-top: 1px solid #444 !important;
  }

  /* index.html: story grid becomes two columns (tablet / large phone) */
  .n6-contentgrid {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-flow: dense !important;
    padding: 14px !important;
  }
  .n6-briefs-outer {
    grid-column: 1 / span 2 !important;
  }
  .n6-headline-lead {
    font-size: clamp(19px, 3.4vw, 24px) !important;
  }

  /* Article pages: tighten padding, shrink headline */
  .n6-article-wrap {
    padding: 0 12px 16px 12px !important;
  }
  .n6-article-pad {
    padding: 16px 14px !important;
  }
  .n6-headline {
    font-size: clamp(20px, 4vw, 26px) !important;
  }
  .n6-photo-placeholder {
    height: 180px !important;
  }
  .n6-lead-photo {
    height: 200px !important;
  }

  /* Archive page: two cards per row instead of three */
  .n6-archivegrid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Found Footage index: featured/secondary cards stack */
  .n6-footagegrid {
    grid-template-columns: 1fr !important;
  }

  /* 404 page */
  .n6-404block {
    padding: 24px 16px !important;
  }
}

@media (max-width: 600px) {
  /* Phones: everything collapses to a single stacked column */
  .n6-contentgrid {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }
  .n6-contentgrid > div {
    grid-column: 1 !important;
  }
  .n6-briefs {
    grid-template-columns: 1fr !important;
  }
  .n6-archivegrid {
    grid-template-columns: 1fr !important;
  }
  .n6-photo-placeholder {
    height: 150px !important;
  }
  .n6-lead-photo {
    height: 170px !important;
  }
}

@media (max-width: 400px) {
  .n6-tagline {
    display: none !important;
  }
  .n6-logo {
    font-size: 26px !important;
  }
  .n6-util {
    font-size: 9px !important;
  }
}