/* ═══════════════════════════════════════════════════════════════════════════════
   Secretnote Group — Responsive Stylesheet
   responsive.css
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Tablet: max 1024px ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

  :root {
    --container-pad: clamp(1.5rem, 4vw, 4rem);
  }

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

  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .footer__nav {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero__title {
    max-width: 100%;
  }

  /* Hide desktop nav, show toggle */
  .nav--desktop { display: none; }
  .nav__toggle  { display: flex; }

}

/* ─── Tablet small: max 768px ────────────────────────────────────────────────── */
@media (max-width: 768px) {

  :root {
    --container-pad: 1.5rem;
    --header-height: 60px;
  }

  .section { padding-block: clamp(3rem, 8vw, 5rem); }

  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

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

  .footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

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

  .num-list { gap: var(--space-6); }

  .hero__actions { flex-direction: column; align-items: flex-start; }

  /* Custom cursor off on touch */
  .cursor { display: none; }

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

  .data-row {
    flex-direction: column;
    gap: var(--space-1);
  }

  .data-row__label { flex: none; }

}

/* ─── Mobile: max 430px ─────────────────────────────────────────────────────── */
@media (max-width: 430px) {

  :root {
    --container-pad: 1.25rem;
  }

  .footer__nav {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .nav--mobile__link {
    font-size: 2.2rem;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .btn--link {
    width: auto;
    justify-content: flex-start;
  }

  .hero__meta { margin-bottom: var(--space-8); }

  .stat__value {
    font-size: var(--text-4xl);
  }

}

/* ─── Large screens: min 1920px ──────────────────────────────────────────────── */
@media (min-width: 1920px) {
  :root {
    --container-pad: 8rem;
  }
}

/* ─── Print ───────────────────────────────────────────────────────────────────── */
@media print {
  .header, .footer, .cursor, .nav--mobile, .hero__canvas,
  .nav__toggle, .btn { display: none !important; }

  body { color: #000; background: #fff; }

  .page-hero { padding-top: 2rem; }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.75rem;
    color: #666;
  }
}