/* Mobile-only layout (viewport ≤768px). Loaded with media attribute on link tag. */

@media screen and (max-width: 768px) {
  /* Prevent horizontal page scroll from full-bleed heroes */
  body {
    overflow-x: clip;
  }

  #main-content {
    overflow-x: clip;
  }

  .site-header {
    padding-top: env(safe-area-inset-top, 0);
  }

  .logo {
    font-size: 1.1rem;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Full-bleed article hero: drop 100vw breakout (causes horizontal overflow) */
  .article-hero {
    width: 100%;
    margin-left: 0;
  }

  .article-byline-bar {
    width: 100%;
    margin-left: 0;
  }

  .article-byline-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .article-hero-content {
    padding: 1.25rem var(--space-md);
  }

  .article-hero-content h1 {
    font-size: clamp(1.35rem, 5vw, 1.75rem);
  }

  /* Scrollable comparison tables */
  .article-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .article-body table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .article-body th,
  .article-body td {
    padding: 0.5rem 0.65rem;
    font-size: 0.85rem;
  }

  .rating-breakdown {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    width: 100%;
  }

  .rating-bar-item {
    text-align: left;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.25rem 0.75rem;
    align-items: center;
  }

  .rating-bar-label {
    grid-column: 1;
    grid-row: 1;
  }

  .rating-bar-value {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .rating-bar-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .btn-cta {
    display: flex;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
  }

  .disclosure-inline {
    display: block;
    margin: 0.35rem 0 0;
  }

  .ranking-methodology {
    padding: 0.85rem 1rem;
    font-size: 0.825rem;
  }

  .verdict-box {
    padding: 1.1rem var(--space-sm);
    font-size: 0.9rem;
  }

  .product-card {
    padding: var(--space-sm);
  }

  .home-hero h1 {
    font-size: clamp(1.75rem, 7vw, 2.25rem);
  }
}