/* =============================================
   FabricAI — Responsive Design
   styles/responsive.css
   ============================================= */

/* ═══════════════════════════════════════════
   LARGE DESKTOP (≥1400px)
   ═══════════════════════════════════════════ */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }

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

/* ═══════════════════════════════════════════
   LAPTOP (≤1200px)
   ═══════════════════════════════════════════ */
@media (max-width: 1200px) {
  .garment-grid {
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  }

  .result-cards-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* ═══════════════════════════════════════════
   TABLET (≤992px)
   ═══════════════════════════════════════════ */
@media (max-width: 992px) {

  /* Header */
  .header-brand-name {
    font-size: var(--text-lg);
  }

  /* Hero */
  .dashboard-hero {
    padding-block: var(--space-8) var(--space-6);
  }

  /* Upload — stack vertically */
  .upload-grid {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin-inline: auto;
  }

  /* Gender toggle */
  .gender-toggle {
    width: 100%;
  }

  .gender-btn {
    flex: 1;
  }

  /* Garment grid */
  .garment-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  /* Generate button */
  .generate-btn {
    min-width: 240px;
  }

  .generate-btn.loading {
    min-width: 300px;
  }

  /* Result cards — stack to 2 columns */
  .result-cards-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Move the featured/AI card to full width */
  .result-img-card.featured {
    grid-column: 1 / -1;
    max-height: 480px;
  }

  .result-img-card.featured .result-card-img-wrap {
    aspect-ratio: 16/9;
    max-height: 400px;
  }

  .result-img-card.featured .result-card-img {
    object-position: top;
  }

  /* Comparison slider */
  .slider-container {
    aspect-ratio: 3/2;
  }
}

/* ═══════════════════════════════════════════
   TABLET PORTRAIT (≤768px)
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Container padding */
  .container {
    padding-inline: var(--space-4);
  }

  /* Header — compact */
  .header-inner {
    padding-inline: var(--space-4);
  }

  .logout-btn span {
    display: none;
  }

  /* Hero */
  .dashboard-hero-title {
    font-size: clamp(1.5rem, 5vw, 2.2rem);
  }

  .dashboard-hero-subtitle {
    font-size: var(--text-base);
  }

  /* Step header */
  .step-title {
    font-size: var(--text-lg);
  }

  /* Auth card */
  .auth-card {
    padding: var(--space-8) var(--space-6);
  }

  /* Drop zone min-height */
  .drop-zone {
    min-height: 180px;
  }

  /* Garment grid */
  .garment-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--space-2);
  }

  .garment-icon {
    width: 40px;
    height: 40px;
  }

  /* Generate section */
  .generate-section {
    align-items: stretch;
  }

  .generate-btn {
    width: 100%;
    min-width: unset;
    max-width: 420px;
    margin-inline: auto;
  }

  .generate-btn.loading {
    min-width: unset;
  }

  .generate-requirements {
    gap: var(--space-3);
  }

  /* Result cards */
  .result-cards-grid {
    grid-template-columns: 1fr;
  }

  .result-img-card.featured {
    grid-column: auto;
    order: -1;
  }

  .result-img-card.featured .result-card-img-wrap {
    aspect-ratio: 3/4;
    max-height: none;
  }

  /* Result header */
  .result-header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Result actions */
  .result-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .result-btn {
    justify-content: center;
  }

  /* Comparison slider */
  .slider-container {
    aspect-ratio: 1/1;
  }

  /* Toast */
  #toast-container {
    right: var(--space-3);
    left: var(--space-3);
  }

  .toast {
    min-width: unset;
    max-width: 100%;
  }

  /* Garment selection wrap */
  .garment-selection-wrap {
    padding: var(--space-5);
  }
}

/* ═══════════════════════════════════════════
   MOBILE (≤480px)
   ═══════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Container */
  .container {
    padding-inline: var(--space-3);
  }

  /* Auth */
  .auth-card {
    padding: var(--space-6) var(--space-4);
  }

  .auth-logo {
    width: 60px;
    height: 60px;
  }

  .auth-brand-name {
    font-size: var(--text-xl);
  }

  /* Header */
  .header-logo-icon {
    width: 32px;
    height: 32px;
  }

  .header-brand-name {
    font-size: var(--text-base);
  }

  /* Step number */
  .step-number {
    width: 30px;
    height: 30px;
    font-size: var(--text-xs);
  }

  /* Section gap */
  .step-section {
    margin-bottom: var(--space-8);
  }

  /* Gender toggle */
  .gender-btn {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    min-width: unset;
  }

  /* Garment grid — 3 per row */
  .garment-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .garment-card {
    padding: var(--space-4) var(--space-2);
  }

  .garment-icon {
    width: 34px;
    height: 34px;
  }

  .garment-label {
    font-size: var(--text-xs);
  }

  /* Divider spacing */
  .divider {
    margin-block: var(--space-6);
  }

  /* Drop zone */
  .drop-zone {
    min-height: 160px;
  }

  .drop-zone-icon {
    width: 40px;
    height: 40px;
  }

  .drop-zone-text-primary {
    font-size: var(--text-sm);
  }

  /* Comparison slider */
  .slider-container {
    aspect-ratio: 4/5;
  }

  /* Result cards */
  .result-img-card.featured .result-card-img-wrap {
    aspect-ratio: 3/4;
  }

  /* Generate button */
  .generate-btn {
    height: 56px;
    font-size: var(--text-base);
  }

  /* Fullscreen */
  .fullscreen-close {
    top: var(--space-3);
    right: var(--space-3);
  }
}

/* ═══════════════════════════════════════════
   LANDSCAPE PHONES (height < 500px)
   ═══════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {

  /* Auth */
  #auth-section {
    align-items: flex-start;
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .auth-card {
    max-width: 600px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: center;
  }

  .auth-logo-wrap {
    margin-bottom: 0;
  }

  .auth-logo {
    width: 56px;
    height: 56px;
  }

  /* Slider */
  .slider-container {
    aspect-ratio: 16/9;
    max-height: 300px;
  }

  /* Dashboard hero */
  .dashboard-hero {
    padding-block: var(--space-6) var(--space-4);
  }
}

/* ═══════════════════════════════════════════
   HIGH RESOLUTION SCREENS
   ═══════════════════════════════════════════ */
@media (min-resolution: 2dppx) {
  /* Sharper borders */
  .auth-card,
  .card,
  .upload-card,
  .garment-selection-wrap,
  .comparison-section,
  .result-img-card {
    border-width: 0.5px;
  }
}

/* ═══════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════ */
@media print {
  #auth-section,
  .site-header,
  .generate-section,
  .comparison-section,
  .result-actions,
  #toast-container,
  #offline-banner,
  #fullscreen-modal {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .result-cards-grid {
    grid-template-columns: 1fr 1fr;
    break-inside: avoid;
  }

  .result-img-card {
    border: 1px solid #ccc;
    break-inside: avoid;
  }
}