/*
 * Mobile-first breakpoints. Values mirror the --bp-* tokens in variables.css:
 *   480px (sm) · 768px (md) · 1024px (lg) · 1280px (xl)
 */

/* ---------- ≥ 360px: room for the header sign-up button ---------- */
@media (min-width: 360px) {
  .header-actions__signup {
    display: inline-flex;
  }
}

/* ---------- ≥ 480px ---------- */
@media (min-width: 480px) {
  .dashboard-preview__body {
    padding: var(--space-6);
  }

  .dp-stats {
    gap: var(--space-3);
  }

  .check-list--columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .price-card {
    padding: var(--space-8);
  }

  .price-card__badge {
    left: var(--space-8);
  }

  .cta-band {
    padding: var(--space-16) var(--space-10);
  }
}

/* ---------- ≥ 768px ---------- */
@media (min-width: 768px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid {
    gap: var(--space-6);
  }

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

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

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

  .feature-card--wide {
    grid-column: 1 / -1;
  }

  .equation {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .equation .ledger--result {
    grid-column: 1 / -1;
  }

  .equation__operator--equals {
    grid-column: 1 / -1;
  }

  .footer-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .footer-bottom {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

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

  .page-hero {
    padding-block: var(--space-12) var(--space-20);
  }
}

/* ---------- ≥ 1024px ---------- */
@media (min-width: 1024px) {
  :root {
    --header-height: 4.5rem;
  }

  /* Header & desktop navigation */
  .nav-toggle {
    display: none;
  }

  .header-actions .header-actions__login {
    display: inline-flex;
    font-size: 0.9375rem;
  }

  .site-nav {
    display: block;
    position: static;
    margin-left: var(--space-4);
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
  }

  .site-nav__actions {
    display: none;
  }

  .nav-list {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .nav-list > li {
    position: relative;
    border: 0;
  }

  .nav-link {
    width: auto;
    padding: 0.5rem 0.5625rem;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-weight: var(--fw-medium);
    color: var(--color-ink-700);
  }

  .nav-link:hover {
    background: var(--color-bg-alt);
    color: var(--color-ink-900);
  }

  .nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 12rem;
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
  }

  .nav-dropdown a {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
  }

  .nav-dropdown a:hover {
    background: var(--color-bg-alt);
  }

  /* Without JavaScript the dropdown opens on hover / keyboard focus */
  .nav-item--dropdown:not(.is-enhanced):hover > .nav-dropdown,
  .nav-item--dropdown:not(.is-enhanced):focus-within > .nav-dropdown {
    display: block;
  }

  /* Layout */
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
  }

  .split--wide-start {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }

  .split--reverse > :first-child {
    order: 2;
  }

  .hero {
    padding-top: var(--space-16);
  }

  .hero .split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }

  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .feature-card--wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    padding: var(--space-10);
  }

  .equation {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 0.85fr);
  }

  .equation .ledger--result,
  .equation__operator--equals {
    grid-column: auto;
  }

  .post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
    gap: var(--space-16);
  }

  .article-layout {
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: var(--space-16);
  }

  .article-layout .toc {
    order: 2;
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
  }

  .calculator {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }

  .calculator__inputs {
    grid-template-columns: minmax(0, 1fr);
  }

  .calculator__result {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
  }
}

/* ---------- ≥ 1280px ---------- */
@media (min-width: 1280px) {
  .site-nav {
    margin-left: var(--space-8);
  }

  .nav-list {
    gap: var(--space-1);
  }

  .nav-link {
    padding-inline: 0.75rem;
  }

  .header-actions {
    gap: var(--space-3);
  }
}