/* =========================================
   RESPONSIVE — Recipe to Grocery List v2.0
   ========================================= */

/* ── Mobile Kecil (< 375px) ── */
@media (max-width: 374px) {
  .recipe-card__body   { padding: var(--space-3); }
  .recipe-card__meta   { font-size: var(--text-2xs); }

  .ingredient-row {
    grid-template-columns: 1fr;
  }

  .ingredient-row > * { grid-column: span 1; }

  .btn-lg { width: 100%; }

  .app-header__brand span:not(.app-header__logo) {
    display: none; /* Only show logo on very small screens */
  }
}

/* ── Tablet Landscape (640px – 1023px) ── */
@media (min-width: 640px) and (max-width: 1023px) {
  .recipe-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .meal-plan {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .meal-plan-actions {
    grid-column: span 2;
  }
}

/* ── Desktop (> 1024px) ── */
@media (min-width: 1024px) {
  .recipe-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .recipe-form {
    max-width: 720px;
  }

  .meal-plan {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }

  .meal-plan__day:first-child {
    grid-column: span 4;
  }

  .meal-plan-actions {
    grid-column: span 4;
  }

  .grocery-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .grocery-list .grocery-category:first-child {
    grid-column: span 2;
  }

  .search-bar {
    flex-direction: row;
  }
}

/* ── Large Desktop (> 1280px) ── */
@media (min-width: 1280px) {
  .recipe-grid {
    grid-template-columns: repeat(4, 1fr);
  }

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

  .grocery-list .grocery-category:first-child {
    grid-column: span 2;
  }

  .meal-plan {
    grid-template-columns: repeat(7, 1fr);
  }

  .meal-plan__day:first-child {
    grid-column: span 1;
  }

  .meal-plan-actions {
    grid-column: span 7;
  }
}

/* ── Container Queries ── */
.recipe-list-section {
  container-type: inline-size;
  container-name: recipe-list;
}

@container recipe-list (min-width: 520px) {
  .recipe-card {
    flex-direction: row;
  }

  .recipe-card__select {
    position: static;
    padding: var(--space-4);
    display: flex;
    align-items: flex-start;
  }

  .recipe-card::before {
    top: 0; left: 0; right: auto;
    width: 3px; height: 100%;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  }

  .recipe-card__body {
    flex: 1;
  }
}

@container recipe-list (min-width: 700px) {
  .recipe-card__meta {
    gap: var(--space-2);
  }
}

/* ── Height-based Queries ── */
@media (max-height: 600px) and (orientation: landscape) {
  .app-header {
    padding-block: var(--space-2);
    min-height: 48px;
  }

  .app-nav__link {
    padding: var(--space-1-5) var(--space-3);
  }

  .modal__container { max-height: 80dvh; }
  .modal__body      { padding: var(--space-4); }
}

/* ── Dark Mode Refinements ── */
@media (min-width: 1024px) {
  [data-theme="dark"] .card:hover {
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.6);
  }
}

/* Dark mode skeleton */
[data-theme="dark"] .skeleton {
  background: linear-gradient(
    105deg,
    #1e293b 25%,
    #253552 50%,
    #1e293b 75%
  );
  background-size: 200% 100%;
  animation: skeleton-sweep 1.6s ease infinite;
}

/* ── High Contrast Mode ── */
@media (prefers-contrast: high) {
  .card   { border-width: 2px; }
  .btn    { border-width: 2px; }
  .input  { border-width: 2px; }
  .progress { border: 2px solid currentColor; }
  .badge  { border: 1px solid currentColor; }
}

/* ── Print Styles ── */
@media print {
  @page { margin: 1.5cm; }

  body {
    background: white;
    color: black;
  }

  .app-header,
  .app-nav,
  .skip-link,
  .btn,
  .toast-container,
  .modal,
  .action-bar,
  .search-bar,
  .recipe-card__actions,
  .recipe-card__select,
  .grocery-actions,
  .meal-plan__add-btn,
  .meal-plan__recipe-remove,
  .meal-plan-actions {
    display: none !important;
  }

  .app { display: block; }
  .app-main { padding: 0; max-width: 100%; }

  .card,
  .grocery-category,
  .meal-plan__day {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
    background: white;
  }

  .page-header__title {
    background: none;
    -webkit-text-fill-color: #000;
    font-size: 18pt;
  }

  .recipe-card,
  .grocery-item {
    break-inside: avoid;
  }

  .badge {
    border: 1px solid #999;
    background: transparent;
  }
}