/* ==========================================================================
   RESPONSIVE — Mobile & tablet adjustments
   Depends on tokens in css/main.css and components/*.css
   Mobile-first overrides layered on top of the desktop defaults.
   ========================================================================== */

/* ---- Tablet and below ---- */
@media (max-width: 768px) {
  .calculator-card {
    max-width: 380px;
    padding: var(--space-6);
    border-radius: 32px;
  }

  .calculator-wrapper::before {
    width: 200px;
    height: 200px;
    opacity: 0.3;
  }
}

/* ---- Mobile phones ---- */
@media (max-width: 480px) {
  .calculator-wrapper {
    padding: var(--space-4);
    align-items: stretch;
  }

  .calculator-card {
    max-width: 100%;
    width: 100%;
    margin: auto 0;
    padding: var(--space-5);
    border-radius: 28px;
    box-shadow: var(--shadow-btn-raised);
  }

  .calculator-display__result {
    font-size: clamp(2.2rem, 12vw, 3rem);
  }

  .calculator-display__expression {
    font-size: 1.1rem;
  }

  .calculator-keypad {
    gap: var(--space-3);
  }

  .btn {
    height: 64px;
    font-size: 1.3rem;
  }

  .btn--function {
    font-size: 1rem;
  }

  .btn--wide {
    padding-left: var(--space-5);
  }

  .btn--icon {
    width: 38px;
    height: 38px;
  }

  .btn--icon svg {
    width: 16px;
    height: 16px;
  }
}

/* ---- Very small phones ---- */
@media (max-width: 340px) {
  .btn {
    height: 56px;
    font-size: 1.15rem;
  }

  .calculator-keypad {
    gap: var(--space-2);
  }
}
@media (min-width: 1024px) {
  .calculator-wrapper {
    padding: var(--space-8);
  }

  .calculator-card {
    width: 60vw;
    max-width: 900px;
  }

  .calculator-wrapper::before {
    width: 320px;
    height: 320px;
    opacity: 0.4;
  }
}

/* ---- Large desktop / wide monitors ---- */
@media (min-width: 1440px) {
  .calculator-card {
    width: 60vw;
    max-width: 1100px;
  }
}