/* Marchenholm — responsive.css : breakpoints 1280 / 1024 / 768 / 480. */

/* 1280 — container edge-of-gutter handling */
@media (max-width: 1280px) {
  :root { --container: 100%; }
  .mh-container { padding: 0 var(--gutter); }
}

/* 1024 — tablet */
@media (max-width: 1024px) {
  :root { --gutter: var(--gutter-m); }

  .mh-trust-grid { grid-template-columns: repeat(3, 1fr); }

  .mh-section { padding: var(--space-section-m) 0; }
  .mh-hero { padding: var(--space-section-m) 0; }

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

  .mh-leaderboard__row {
    grid-template-columns: 32px minmax(140px, 180px) 110px 180px 1fr;
    gap: 16px;
  }
  .mh-leaderboard__score { font-size: clamp(2.8rem, 6vw, 3.75rem); }
  .mh-leaderboard__bar-wrap { width: 180px; }

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

  .mh-contact-grid { grid-template-columns: 1fr; gap: var(--space-section-m); }

  .mh-card__pillar-row {
    grid-template-columns: 90px 36px 1fr;
    row-gap: 6px;
  }
  .mh-card__pillar-row .mh-lab-note {
    grid-column: 1 / -1;
    white-space: normal;
    font-size: var(--f-caption);
    color: var(--c-ink-muted);
    padding-left: 132px;
  }
}

/* 768 — mobile */
@media (max-width: 768px) {
  :root {
    --space-section: 48px;
    --space-block: 32px;
    --space-item: 18px;
  }

  .mh-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .mh-trust-tile { min-height: 120px; padding: 14px; }

  /* Affiliate banner — tighter on mobile */
  .mh-affiliate-banner { padding: 8px 16px; gap: 8px; }
  .mh-affiliate-banner p { font-size: 0.75rem; }

  /* Compliance footer row — loosen letter-spacing for better wrap */
  .mh-compliance-row { letter-spacing: 0.02em; padding: 10px 12px; }

  h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  h2 { font-size: clamp(1.375rem, 5vw, 1.75rem); }

  .mh-hero h1 { font-size: clamp(2rem, 10vw, 3rem); max-width: 16ch; }
  .mh-hero__subtitle { font-size: var(--f-body-l); }

  /* Nav → hamburger */
  .mh-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: var(--c-paper);
    border-bottom: 1px solid var(--c-ink);
    padding: 20px var(--gutter);
    gap: 12px;
    display: none;
  }
  .mh-nav[data-open="true"] { display: flex; }
  .mh-nav-toggle { display: flex; }
  .mh-header__inner { position: relative; }
  .mh-header__brand .mh-sub-wordmark { display: none; }

  /* Leaderboard rows stack */
  .mh-leaderboard__row {
    grid-template-columns: 28px 1fr auto;
    grid-template-areas:
      "rank name score"
      "bar bar bar"
      "note note note";
    row-gap: 10px;
    column-gap: 10px;
  }
  .mh-leaderboard__rank { grid-area: rank; }
  .mh-leaderboard__name { grid-area: name; font-size: 1.125rem; }
  .mh-leaderboard__score { grid-area: score; font-size: 2.5rem; }
  .mh-leaderboard__bar-wrap { grid-area: bar; width: 100%; }
  .mh-leaderboard__note { grid-area: note; white-space: normal; }

  /* Grid reflow */
  .mh-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
  .mh-grid--cols-3 { grid-template-columns: 1fr; }
  .mh-grid--cols-2 { grid-template-columns: 1fr; }

  .mh-footer__cols { grid-template-columns: 1fr; }

  /* Operator card */
  .mh-card { padding: 20px; }
  .mh-card__head { flex-direction: column; }
  .mh-card__score { font-size: 3rem; text-align: left; }
  .mh-card__name { font-size: 1.375rem; }
  .mh-card__pillar-row {
    grid-template-columns: 90px 36px 1fr;
    grid-template-areas:
      "label score bar"
      "note note note";
    row-gap: 6px;
  }
  .mh-card__pillar-label { grid-area: label; }
  .mh-card__pillar-score { grid-area: score; }
  .mh-card__pillar-row .mh-score-bar { grid-area: bar; }
  .mh-card__pillar-row .mh-lab-note {
    grid-area: note;
    white-space: normal;
    padding-left: 0;
    font-size: var(--f-caption);
    color: var(--c-ink-muted);
  }

  /* Compare grid → stacks */
  .mh-compare-grid { grid-template-columns: 1fr; }
  .mh-compare-grid__divider { height: 1px; min-height: 0; }

  /* Offers list → stacks */
  .mh-offer-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .mh-map { aspect-ratio: 4/3; }
}

/* 480 — small phones */
@media (max-width: 480px) {
  .mh-wordmark { font-size: 1.5rem; }
  .mh-hero h1 { font-size: 2rem; }
  .mh-card__score { font-size: 2.5rem; }
  .mh-age-gate__dialog { padding: 28px 20px; }
}