/* ==========================================================================
   Strikethrough Text — responsive.css
   Breakpoints: 1024 (tablet/nav collapse), 768 (tablet), 560 (mobile).
   ========================================================================== */

@media (max-width: 1024px) {
  /* A backdrop filter creates a containing block for fixed descendants.
     Disable it here so the mobile drawer stays fixed to the viewport. */
  .site-header {
    background: var(--white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .footer__grid { grid-template-columns: repeat(4, max-content); }
  .footer__brand { grid-column: 1 / -1; }

  .article-layout { grid-template-columns: 1fr; }
  .side-toc { display: none; }

  /* Nav collapse */
  .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    height: 100dvh;
    width: min(320px, 86vw);
    max-width: 100vw;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    background: var(--white);
    padding: calc(var(--header-h) + 1rem) var(--space-5) var(--space-6);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    overflow-y: auto;
    z-index: 110;
    pointer-events: auto;
  }
  .nav__menu.is-open { transform: translateX(0); }
  .nav__close-row {
    display: flex;
    justify-content: flex-end;
    margin: calc(-1 * var(--header-h)) 0 var(--space-4);
    padding: 0;
  }
  .nav__link {
    width: 100%;
    font-size: 1.02rem;
    padding: 0.8rem 0.9rem;
    min-height: 48px;
  }
  .nav__menu-cta { display: block; margin-top: var(--space-3); }
  .nav__menu-cta .btn { width: 100%; }
}

@media (max-width: 960px) {
  /* Generator stacks: input first, results underneath */
  .generator__body { grid-template-columns: 1fr; }
  .gen-pane--output {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: var(--space-5);
  }
  .generator__input { min-height: 180px; }
}

@media (max-width: 900px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; gap: 0; }
  /* One continuous list once stacked — no double rule between columns */
  .faq-grid .accordion + .accordion { border-top: 0; }
}

@media (max-width: 820px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .split-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .split-layout__media { order: -1; }
  .split-layout__body .section-title { text-align: center; }
  .contact-grid { grid-template-columns: 1fr; }
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured__media img { min-height: 220px; }
  .review-card { flex: 0 0 calc((100% - var(--space-5)) / 2); }
}

@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .review-card { flex: 0 0 100%; }
  .reviews__top { flex-direction: column; align-items: flex-start; }
  .hero__actions .btn { width: 100%; }
  .hero__trust { gap: 0.8rem 1.2rem; }
  .result__head { flex-wrap: wrap; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  /* Long brand words may wrap on very narrow screens to avoid overflow */
  .hero__title .kw, .section-title .kw { white-space: normal; }
  .hero__title { word-break: break-word; }
}

@media (max-width: 480px) {
  /* Keep the workspace chrome bar on a single line */
  .generator__bar { gap: 0.5rem; padding-inline: 0.75rem; }
  .generator__bar-title { font-size: 0.72rem; }
  .generator__shield { font-size: 0.68rem; padding: 0.25rem 0.55rem; gap: 0.3rem; }
  .generator__shield svg { width: 13px; height: 13px; }
}

@media (max-width: 400px) {
  .footer__grid { grid-template-columns: 1fr; }
  .container { padding-inline: var(--space-4); }
  .brand__name { font-size: 1.08rem; }
}