/* =========================================================================
 * responsive.css — Mobile-first breakpoint overrides
 * JOICE.AI CO., LIMITED — joicettech.com
 *
 * Breakpoints: 480 / 768 / 1024 / 1280 / 1600
 * The base + components CSS already handles most scaling via clamp() tokens.
 * This file consolidates layout adjustments per breakpoint.
 * ========================================================================= */

/* Default: mobile-first (≤ 480 px) — most layout stacks single-column */

/* 480 px — phone (landscape) ------------------------------------------------ */
@media (min-width: 480px) {
  .c-form__row { grid-template-columns: 1fr 1fr; }
}

/* 768 px — tablet portrait ------------------------------------------------- */
@media (min-width: 768px) {
  .c-hero { min-height: 92vh; }
  .c-hero__copy { padding-block: 24vh var(--s-24); }
  .c-app-feature { gap: var(--s-12); }
}

/* 1024 px — tablet landscape / small desktop ------------------------------ */
@media (min-width: 1024px) {
  .c-nav__menu, .c-nav__cta { display: flex; }
  .c-nav__burger { display: none; }
  .c-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .c-grid--5 { grid-template-columns: repeat(5, 1fr); }
  .c-app-feature { grid-template-columns: 1fr 1fr; }
  .c-contact-grid { grid-template-columns: repeat(3, 1fr); }
  .c-mascot-strip__list { grid-template-columns: repeat(4, 1fr); }
  .c-steps { grid-template-columns: repeat(3, 1fr); }
  .c-stats { grid-template-columns: repeat(3, 1fr); }
  .c-footer__top { grid-template-columns: 2fr 2fr 1fr; }
  .c-legal-layout { grid-template-columns: 280px 1fr; }
}

/* 1280 px — desktop -------------------------------------------------------- */
@media (min-width: 1280px) {
  .c-hero__title { font-size: clamp(72px, 7.5vw, 128px); }
  .c-section__title { font-size: clamp(48px, 5.2vw, 88px); }
}

/* 1600 px — wide desktop --------------------------------------------------- */
@media (min-width: 1600px) {
  .c-container { max-width: 1560px; }
  .c-hero { min-height: 88vh; }
}

/* Mobile-specific (max-width queries) ------------------------------------- */
@media (max-width: 1023px) {
  .c-grid--3, .c-grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .c-grid, .c-grid--2, .c-grid--3, .c-grid--5 { grid-template-columns: 1fr; }
  .c-hero { min-height: 100svh; }
  .c-hero__copy { padding-block: 28vh var(--s-16); }
  .c-hero__mascot { right: 4%; bottom: 4%; width: 96px; }
  .c-mascot-strip__list { grid-template-columns: repeat(2, 1fr); }
  .c-footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  .c-mascot-strip__list { grid-template-columns: 1fr; }
  .c-cta-group { gap: var(--s-4); }
}

/* Reduce motion on mobile devices that report "reduce" via data-saver ---- */
@media (prefers-reduced-motion: reduce) {
  .c-hero { min-height: 80vh; }
}