/**
 * Calculadora de Média Escolar — Responsive
 * B20 Conteúdo Digital | v2.0
 */

/* ============================================================
   MOBILE FIRST (default < 480px)
   ============================================================ */

/* Mobile layout for calc-type-card to reduce scroll */
.calc-type-grid { grid-template-columns: 1fr !important; }

.calc-type-card {
  display: flex !important;
  align-items: center !important;
  text-align: left;
  padding: var(--space-4);
  gap: var(--space-4);
  border-radius: var(--radius-lg);
}

.type-icon {
  font-size: 2rem;
  margin-bottom: 0;
}

.calc-type-card h3 {
  font-size: 0.9rem;
  margin-bottom: 2px;
}

.calc-type-card p {
  font-size: 0.75rem;
}

/* Stats grid 2 cols on small */
.stats-grid { grid-template-columns: repeat(2, 1fr); }

/* Action grid — 2 cols */
.action-grid { grid-template-columns: repeat(2, 1fr); }

/* Result details 3 cols */
.result-details-grid { grid-template-columns: repeat(3, 1fr); }

/* Exercise options 1 col on very small */
@media (max-width: 360px) {
  .exercise-options { grid-template-columns: 1fr; }
  .action-grid      { grid-template-columns: 1fr; }
  .calc-type-grid   { grid-template-columns: 1fr; }
}

/* ============================================================
   TABLET (≥ 640px)
   ============================================================ */
@media (min-width: 640px) {
  .container { padding: 0 var(--space-6); }

  .action-grid         { grid-template-columns: repeat(2, 1fr); }
  .calc-type-grid      { grid-template-columns: repeat(2, 1fr); }
  .stats-grid          { grid-template-columns: repeat(4, 1fr); }

  .calc-type-card {
    display: block;
    text-align: center;
    padding: var(--space-6);
    border-radius: var(--radius-xl);
  }

  .type-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-3);
  }

  .calc-type-card h3 {
    font-size: 0.95rem;
    margin-bottom: var(--space-2);
  }

  .calc-type-card p {
    font-size: 0.8rem;
  }
  .needed-inputs       { grid-template-columns: repeat(2, 1fr); }
  .result-actions      { flex-wrap: nowrap; }

  .wizard-progress {
    padding: 0 var(--space-8);
  }

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

  .grade-row.weighted-row {
    grid-template-columns: auto 1fr 100px 1fr auto;
  }

  .modal-overlay {
    align-items: center;
  }

  .modal-sheet {
    border-radius: var(--radius-xl);
    margin: var(--space-4);
  }
}

/* ============================================================
   DESKTOP (≥ 1024px)
   ============================================================ */
@media (min-width: 1024px) {
  body {
    padding-bottom: 0;
  }

  /* Show desktop nav, hide bottom nav */
  .desktop-nav { display: flex; }
  .bottom-nav  { display: none; }

  main { padding-top: 64px; }

  .container {
    padding: 0 var(--space-8);
    max-width: 960px;
  }

  .action-grid       { grid-template-columns: repeat(4, 1fr); }
  .calc-type-grid    { grid-template-columns: repeat(4, 1fr); }
  .needed-inputs     { grid-template-columns: repeat(3, 1fr); }

  .page { padding: var(--space-10) 0; }

  .hero { padding: var(--space-8) 0 var(--space-5); }
  .hero h1 { font-size: 3.5rem; }

  /* Toast shows at bottom center, not over bottom nav */
  .toast { bottom: 32px; }
}

/* ============================================================
   LARGE DESKTOP (≥ 1280px)
   ============================================================ */
@media (min-width: 1280px) {
  .container { max-width: 1100px; }

  .action-grid { gap: var(--space-5); }
  .hero h1 { font-size: 4rem; }
}

/* ============================================================
   LANDSCAPE MOBILE
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding: var(--space-5) 0; }
  .hero h1 { font-size: 1.8rem; }
  .result-ring { width: 100px; height: 100px; }
  .result-number { font-size: 1.6rem; }
}

/* ============================================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================================ */
@media (hover: none) {
  .action-card:hover    { transform: none; }
  .btn-primary:hover    { transform: none; }
  .history-item:hover   { transform: none; }
  .activity-item:hover  { transform: none; }
}