/*
 * Responsive fixes — loaded after site.css.
 *
 * Grid columns written as "1fr" can never be narrower than their widest
 * content, so on small phones some sections grew wider than the screen.
 * "minmax(0, 1fr)" lets them shrink to fit. Checked at 320, 360, 375, 414,
 * 768, 820, 1024, 1280, 1440 and 1920px wide.
 */

/* Safety net: nothing may make the page scroll sideways. "clip" (unlike
   "hidden") keeps position: sticky working for the category bar. */
html, body { overflow-x: clip; }
img, video { max-width: 100%; }

/* ── Home: main column + sidebar ─────────────────────────────── */
.page-home .main-with-sidebar > * { min-width: 0; }
@media (max-width: 1100px) {
  .page-home .main-with-sidebar { grid-template-columns: minmax(0, 1fr); }
  .page-home .sidebar > * { min-width: min(280px, 100%); }
}
@media (max-width: 640px) {
  /* A wrapping column flex line is as wide as its widest item — keep it
     to a single line so the sidebar cards match the screen width. */
  .page-home .sidebar { flex-wrap: nowrap; }
  .page-home .articles-grid--3,
  .page-home .trending-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Footer ───────────────────────────────────────────────────── */
.site-footer .footer-grid > * { min-width: 0; }
.site-footer .newsletter-input { min-width: 0; width: 100%; }
@media (max-width: 640px) {
  /* One column on phones: brand, Categories, Quick Links, Newsletter */
  .site-footer .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 3rem 0 2.25rem; }
}

/* ── Contact form ─────────────────────────────────────────────── */
.page-contact .contact-grid > *,
.page-contact .form-row > * { min-width: 0; }
.page-contact .form-input { min-width: 0; width: 100%; }
@media (max-width: 900px) {
  .page-contact .contact-grid,
  .page-contact .form-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .page-contact .form-card { padding: 1.5rem 1.15rem; border-radius: 18px; }
}

/* ── Article page ─────────────────────────────────────────────── */
/* Table of contents: sidebar on desktop, collapsible box above the
   article on phones and tablets. */
.page-article .toc-mobile-wrap { display: none; }
@media (max-width: 1024px) {
  .page-article .toc-mobile-wrap { display: block; margin: 0 0 1.75rem; }
  .page-article .toc-sidebar { display: none; }
  .page-article .toc-mobile { padding: 0; margin: 0; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05); }
  .page-article .toc-mobile > summary {
    list-style: none; cursor: pointer; margin: 0;
    padding: 1rem 1.15rem; border-radius: 18px;
  }
  .page-article .toc-mobile > summary::-webkit-details-marker { display: none; }
  .page-article .toc-mobile > summary .icon { color: #16a34a; }
  .page-article .toc-mobile-chevron { margin-left: auto; display: inline-flex; transition: transform 0.2s ease; }
  .page-article .toc-mobile > summary .toc-mobile-chevron .icon { color: #737373; }
  .page-article .toc-mobile[open]:not(.is-closing) .toc-mobile-chevron { transform: rotate(90deg); }
  .page-article .toc-mobile > nav { padding: 0 1.15rem 1.1rem; }
  .page-article .toc-mobile .toc-link { font-size: 0.9rem; display: inline-block; padding: 0.15rem 0; }
}

.page-article .article-layout > * { min-width: 0; }
.page-article .article-prose table { max-width: 100%; }
.page-article .article-prose pre { max-width: 100%; }

/* ── Very small phones (≤360px) ───────────────────────────────── */
@media (max-width: 360px) {
  .logo-img { height: 34px; }
  .header-controls { gap: 6px; }
  .search-btn, .mobile-menu-btn { width: 38px; height: 38px; }
}

/* ── Blogs page ───────────────────────────────────────────────── */
.page-blogs .categories-grid > *, .page-blogs .articles-grid > * { min-width: 0; }
@media (max-width: 768px) {
  .page-blogs .section { padding: 3rem 0; }
  .page-blogs .section-title { font-size: 1.6rem; }
  .page-blogs .section-header { gap: 1rem; margin-bottom: 1.75rem; }
}
@media (max-width: 480px) {
  /* Stats stay on one row; categories two per row instead of nine tall cards */
  .page-blogs .blog-hero-stats { flex-direction: row; gap: 1.1rem; }
  .page-blogs .hero-stat-divider { display: block; height: 32px; }
  .page-blogs .hero-stat-value { font-size: 1.5rem; }
  .page-blogs .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
  .page-blogs .cat-card { gap: 0.6rem; padding: 0.8rem 0.75rem; border-radius: 14px; }
  .page-blogs .cat-card-icon { width: 40px; height: 40px; border-radius: 11px; }
  .page-blogs .cat-card-emoji { font-size: 1.25rem; }
  .page-blogs .cat-card-name { font-size: 0.85rem; line-height: 1.25; }
  .page-blogs .cat-card-count { font-size: 0.72rem; }
  .page-blogs .cat-card-arrow { display: none; }
  .page-blogs .section-title { font-size: 1.4rem; }
  .page-blogs .section-header { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 340px) {
  .page-blogs .categories-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Category page ────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Three equal stat cards on one row instead of 2 + 1 */
  .page-category .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
  .page-category .hero-stat { min-width: 0; padding: 0.75rem 0.7rem; border-radius: 14px; }
  .page-category .hero-stat strong { font-size: 1.2rem; }
  .page-category .hero-stat span { font-size: 0.75rem; line-height: 1.3; }
}

/* ── Contact: info cards ──────────────────────────────────────── */
/* Icon on the left, title and text stacked beside it (they used to sit in
   three narrow columns). */
.page-contact .info-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.15rem;
  align-items: center;
}
.page-contact .info-card .info-icon-wrap { grid-row: 1 / span 2; }
.page-contact .info-card h3 { margin: 0; align-self: end; }
.page-contact .info-card .info-note,
.page-contact .info-card .info-email { margin: 0; align-self: start; }
.page-contact .info-card:nth-of-type(1) .info-icon-wrap { color: #16a34a; }
.page-contact .info-card:nth-of-type(2) .info-icon-wrap { color: #2563eb; }
.page-contact .info-card:nth-of-type(3) .info-icon-wrap { color: #ca8a04; }
@media (max-width: 900px) {
  .page-contact .info-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.85rem; }
  .page-contact .info-col > * { margin: 0; }
}

/* ── Tablets ──────────────────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 900px) {
  /* Three article cards per row were too narrow on tablets */
  .page-home .articles-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .page-article .article-trust-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .page-article .sidebar-card { max-width: none; }
}

/* ── FAQ header: the note beside "Contact us" stays on two lines ─ */
.faq-section .faq-header-actions p { text-wrap: balance; }
@media (min-width: 1200px) {
  .faq-section .faq-header { grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; align-items: center; }
  .faq-section .faq-header-actions { align-items: center; gap: 1.75rem; }
  .faq-section .faq-header-actions p { max-width: none; width: 30rem; font-size: 0.925rem; }
}
@media (min-width: 641px) and (max-width: 1199px) {
  /* Title on top, note and button side by side underneath */
  .faq-section .faq-header { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .faq-section .faq-header-actions { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; }
  .faq-section .faq-header-actions p { max-width: 36rem; font-size: 0.925rem; }
}
@media (max-width: 640px) {
  /* Note uses the full width on phones, button underneath */
  .faq-section .faq-header-actions { gap: 1rem; }
  .faq-section .faq-header-actions p { max-width: none; font-size: 0.875rem; text-wrap: pretty; }
}
@media (max-width: 360px) {
  .faq-section .faq-header-actions p { font-size: 0.8125rem; }
}
@media (max-width: 340px) {
  .faq-section .faq-header-actions p { font-size: 0.76rem; text-wrap: wrap; letter-spacing: -0.005em; }
}