/* ============================================================
   responsive.css — breakpoints for phone / tablet / landscape
   ============================================================ */

/* Tablet and below */
@media (max-width: 768px) {
  .question-hero__buttons { gap: 18px; }
  .btn--yes, .btn--no { font-size: 1.15rem; padding: 16px 38px; }
  .review-row__value { max-width: 52%; font-size: 0.95rem; }
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 12px; }
}

/* Phones */
@media (max-width: 480px) {
  .btn { padding: 13px 26px; font-size: 1rem; }
  .btn--yes, .btn--no { font-size: 1.05rem; padding: 15px 30px; }
  .heart-progress { font-size: 1.2rem; gap: 6px; }
  .card { padding: 16px 8px; border-radius: 18px; }
  .card__icon { font-size: 1.7rem; }
  .card__label { font-size: 0.85rem; }
  .card-grid { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); max-height: 50vh; }
  .review__actions, .slide-nav { gap: 10px; }
  .sound-toggle { width: 42px; height: 42px; top: 12px; right: 12px; }
  .toast { bottom: 24px; font-size: 0.9rem; padding: 12px 20px; }
}

/* Short landscape screens (phones held sideways) */
@media (max-height: 480px) and (orientation: landscape) {
  .preloader__heart,
  .question-hero__heart,
  .final__heart { font-size: clamp(54px, 14vh, 90px); }
  .question-hero__title { margin: 6px 0 18px; }
  .heart-progress { margin-bottom: 10px; }
  .card-grid { max-height: 42vh; }
  .slide { gap: 12px; }
  .continue-btn { margin-top: 20px; }
}

/* Large desktops — keep content from stretching too wide */
@media (min-width: 1280px) {
  .slides { width: 720px; }
}

/* Touch devices: the NO button should jump rather than rely on hover */
@media (hover: none) {
  .btn--no { transition: transform 0.18s ease, left 0.18s ease, top 0.18s ease; }
}