/* =============================================================
   responsive.css — Fulda Gap theme
   Loaded at priority 20 (after style.css). Contains all
   breakpoint overrides not already scoped inside style.css.
   Breakpoints used by style.css:
     nav / ticker mobile  : max-width 760px  / min-width 761px
     ticker label         : max-width 760px
     grid / layout        : max-width 960px
     grid single-col      : max-width 640px
   ============================================================= */

/* ── Global wrap padding on narrow screens ─────────────────── */
@media (max-width: 767px) {
  .wrap {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ── Toolbar flex-wrap ─────────────────────────────────────── */
.posts-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* ── Hero / featured post ──────────────────────────────────── */
@media (max-width: 960px) {
  .featured-post {
    height: 300px;
  }
}

/* ── Single post ───────────────────────────────────────────── */
@media (max-width: 960px) {
  .single-wrap {
    grid-template-columns: 1fr;
  }
  .single-wrap .sidebar {
    display: none; /* hide sidebar on article pages at tablet; sidebar-less feel */
  }
}

@media (max-width: 640px) {
  .single-main {
    padding: 1.25rem 1rem 1.5rem;
    border-radius: 8px;
  }
  .post-header h1 {
    font-size: 1.45rem;
    line-height: 1.25;
  }
  .single-main .entry-content {
    font-size: 1rem;
  }
  .single-main .comments-area {
    padding: 1rem;
  }
}

/* ── Sidebar stacking on index/archive ─────────────────────── */
@media (max-width: 880px) {
  .site-layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    order: 2;
    width: 100%;
    margin-top: 1.25rem;
  }
  .main-content {
    order: 1;
  }
}

/* ── Footer layout ─────────────────────────────────────────── */
@media (max-width: 960px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-cats-panel {
    position: static;
    border: 1px solid #333;
    border-bottom: 2px solid var(--red);
    margin-top: 0.5rem;
  }
}

/* ── News ticker ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .ticker-pause {
    display: none; /* too cramped on very small phones */
  }
  .news-ticker .wrap {
    padding-block: 0.4rem;
  }
}

/* ── Scroll-to-top button ───────────────────────────────────── */
@media (max-width: 640px) {
  #scroll-top {
    bottom: 1rem;
    right: 1rem;
    width: 2.2rem;
    height: 2.2rem;
  }
}

/* ── Typography ─────────────────────────────────────────────── */
@media (max-width: 420px) {
  .site-title  { font-size: 0.95rem; }
  .nav-strip .nav-list a { padding: 0.5rem 0.6rem; }
  .posts-grid  { gap: 0.9rem; }
}

/* ── Wide screens: expand content area ─────────────────────── */
@media (min-width: 1200px) {
  .posts-section .wrap {
    max-width: 1380px;
  }
  .posts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .sidebar {
    flex: 0 0 300px;
    max-width: 300px;
  }
}