/* =========================================================
   Website Tester — Responsive overrides (mobile-first base
   lives in style.css / components.css / pages.css)
   ========================================================= */

/* Base (< 480px) already assumed single column, stacked nav */
.header-nav { display: none; }

.results-actions {
  width: 100%;
  flex-direction: column;
}
.results-actions .btn { width: 100%; }

.overview-grid {
  grid-template-columns: 1fr;
  gap: var(--space-5);
  text-align: center;
  justify-items: center;
}

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

.kv-grid { grid-template-columns: 1fr; }
.kv-grid dt { font-weight: 500; margin-top: var(--space-2); }
.kv-grid dt:first-child { margin-top: 0; }

.card-pad { padding: var(--space-4); }
.card-header { align-items: flex-start; }

.results-url { min-width: 0; word-break: break-word; }

.stat-summary-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }

.category-grid { grid-template-columns: repeat(2, 1fr); }

.metric-grid { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }

.image-audit-grid { grid-template-columns: 1fr; }

/* Accordion triggers (Links, Recommendations): title + badges + chevron
   can't all fit on one line at phone widths without overflowing —
   wrap the badge/chevron group onto its own row under the title. */
.accordion-trigger {
  flex-wrap: wrap;
  row-gap: var(--space-2);
}
.accordion-trigger-left { width: 100%; }
.accordion-trigger-left .url-text {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.accordion-trigger > .row.gap-3 { width: 100%; justify-content: flex-start; }

/* ---------- >= 480px ---------- */
@media (min-width: 480px) {
  .results-actions { flex-direction: row; }
  .results-actions .btn { width: auto; flex: 1; }

  .card-pad { padding: var(--space-5); }
  .card-header { align-items: center; }

  .stat-summary-row { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-4) var(--space-5); }

  .accordion-trigger { flex-wrap: nowrap; row-gap: 0; }
  .accordion-trigger-left { width: auto; }
  .accordion-trigger-left .url-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    -webkit-line-clamp: unset;
  }
  .accordion-trigger > .row.gap-3 { width: auto; }
}

/* ---------- >= 640px small tablets ---------- */
@media (min-width: 640px) {
  .feature-strip { grid-template-columns: repeat(3, 1fr); }
  h1, .h1 { font-size: 2.5rem; }
}

/* ---------- >= 768px tablet ---------- */
@media (min-width: 768px) {
  .header-nav { display: flex; }

  section { padding: var(--space-9) 0; }

  h1, .h1 { font-size: 3rem; }
  h2, .h2 { font-size: 1.875rem; }

  .overview-grid {
    grid-template-columns: auto 1fr;
    text-align: left;
    justify-items: start;
  }

  .kv-grid { grid-template-columns: 160px 1fr; }
  .kv-grid dt { margin-top: 0; }

  .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .image-audit-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

/* ---------- >= 1024px desktop ---------- */
@media (min-width: 1024px) {
  .container { padding: 0 var(--space-6); }

  h1, .h1 { font-size: 3.25rem; }
}

/* ---------- >= 1280px large desktop ---------- */
@media (min-width: 1280px) {
  .container { padding: 0 var(--space-7); }
}

/* ---------- Desktop sidebar nav — removed entirely.
   Same call as the mobile subnav tab bar: not worth the layout risk for a
   secondary "jump to section" convenience. Report sections are reachable
   by scrolling on every screen size now, no dedicated jump nav. ---------- */
.results-subnav-desktop { display: none !important; }