/* ==========================================================================
   responsive.css
   Breakpoint adjustments — mobile, tablet, desktop.
   Mobile-first overrides layered on top of the base styles.
   ========================================================================== */

/* ------------------------------------ Tablet (≤ 768px) ------------------------------------ */

@media (max-width: 768px) {
  .header-inner {
    padding: 0 var(--space-5);
  }

  .main-nav {
    gap: var(--space-5);
  }

  .page {
    padding: var(--space-7) var(--space-5);
  }
}

/* ------------------------------------ Mobile (≤ 480px) ------------------------------------ */

@media (max-width: 480px) {
  .header-inner {
    padding: 0 var(--space-4);
  }

  .brand-name {
    display: none;
  }

  .main-nav {
    gap: var(--space-4);
  }

  .nav-link {
    font-size: 13px;
  }

  .card {
    padding: var(--space-7) var(--space-5);
  }

  .title {
    font-size: 24px;
  }

  .preview {
    height: 200px;
  }

  .actions {
    flex-direction: column;
  }

  .info-row {
    flex-wrap: wrap;
  }

  .toast {
    left: var(--space-4);
    right: var(--space-4);
    transform: translateY(16px);
    width: calc(100% - var(--space-8));
  }

  .toast.show {
    transform: translateY(0);
  }
}

/* ------------------------------------ Small Mobile (≤ 360px) ------------------------------- */

@media (max-width: 360px) {
  .card {
    padding: var(--space-6) var(--space-4);
  }

  .title {
    font-size: 21px;
  }

  .preview {
    height: 170px;
  }
}

/* ------------------------------------ Desktop (≥ 1024px) ----------------------------------- */

@media (min-width: 1024px) {
  .card:hover {
    box-shadow: var(--shadow-card-hover);
  }
}