/* ─────────────────────────────────────────────
   RESPONSIVE — Mobile & Tablet
───────────────────────────────────────────── */

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  :root { --container-pad: 32px; }

  .hero { height: auto; min-height: 640px; }
  .hero__title { font-size: 80px; line-height: 72px; }

  .portfolio__grid { grid-template-columns: repeat(2, 1fr); }

  .info {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .info__right { min-height: 320px; }

  .creators__grid {
    grid-template-columns: 1fr 1fr;
  }

  .cta-surface-wrap { flex-direction: column; }
  .cta { width: 100%; min-height: 280px; }

  .footer__mid { grid-template-columns: 1fr 1fr; }
  .footer__conn { grid-column: 1 / -1; border-top: 1px solid var(--color-lime); }
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {
  :root { --container-pad: 20px; }

  /* NAV */
  .nav__links,
  .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav { height: 64px; }

  /* HERO */
  .hero { height: auto; min-height: 100svh; }
  .hero__title { font-size: 52px; line-height: 56px; }
  .hero__badge { font-size: 12px; }
  .hero__content { padding-bottom: 48px; }
  .hero__data-bar { display: none; }
  .hero__credit { display: none; }
  .hero__meta { flex-direction: column; gap: var(--space-md); }

  /* SLIDER */
  .slider-section { flex-direction: column; padding-bottom: var(--space-xl); }
  .slider-section__arrow { font-size: 48px; }
  .slider-section__title { font-size: 18px; }

  /* COORDINATES */
  .coordinates__overlay-box { width: 100%; position: relative; }
  .coordinates__main-image { height: 260px; }
  .coordinates__color-chips { flex-wrap: wrap; gap: var(--space-md); }

  /* PORTFOLIO */
  .portfolio__grid { grid-template-columns: 1fr; }
  .portfolio__heading { font-size: 52px; }

  /* BRANDING */
  .branding__name { font-size: 40px; }
  .branding__from { font-size: 14px; letter-spacing: 0.2em; }

  /* INFO */
  .info {
    grid-template-columns: 1fr;
    padding: var(--space-xl) var(--container-pad);
  }
  .info__heading { font-size: 32px; line-height: 40px; }
  .info__heading-wrap { flex-wrap: nowrap; }
  .info__art-thumb { width: 80px; }
  .info__right { min-height: 280px; }
  .info__specs { grid-template-columns: 1fr; }

  /* CREATORS */
  .creators__grid { grid-template-columns: 1fr; }
  .creators__heading { font-size: 52px; }

  /* THEME SWITCHER */
  .theme-switcher { padding: var(--space-xl) var(--container-pad); }

  /* CTA + SURFACE */
  .cta-surface-wrap { flex-direction: column; }
  .cta { width: 100%; min-height: 240px; }
  .surface { padding: var(--space-xl) var(--container-pad); }
  .surface__title { font-size: 24px; }
  .surface__body { flex-direction: column; }
  .surface__palettes { width: 100%; }
  .surface__chart-container { width: 100%; }
  .surface__chart { height: 200px; }

  /* FOOTER */
  .footer__top { grid-template-columns: 1fr; }
  .footer__brand { border-right: none; border-bottom: 1px solid var(--color-lime); }
  .footer__mid { grid-template-columns: 1fr; }
  .footer__auth { border-right: none; border-bottom: 1px solid var(--color-lime); }
  .footer__legal { border-right: none; border-bottom: 1px solid var(--color-lime); }
  .footer__conn { text-align: left; }
  .footer__conn-secure,
  .footer__conn-copy { text-align: left; }
}

/* ── Mobile nav open state ── */
.nav.nav--open .nav__links {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 64px; left: 0; right: 0;
  background: var(--color-nav-bg);
  padding: var(--space-xl) var(--container-pad);
  gap: var(--space-xl);
  border-top: 1px solid var(--color-grey-border);
  backdrop-filter: blur(12px);
}

.nav.nav--open .nav__cta {
  display: flex;
  position: fixed;
  top: auto; bottom: 0; left: 0; right: 0;
  height: 64px;
  margin: 0;
  width: 100%;
}