/**
 * @file        responsive.css
 * @description Mobile-first responsive breakpoint overrides (480px, 768px tablet, 1200px desktop)
 *
 * @author      Thomas Dobler - SYNTHETIXMIND LTD
 * @email       tom@synthetixmind.com
 * @company     SYNTHETIXMIND LTD, Paphos, Cyprus
 * @url         https://synthetixmind.com
 *
 * @uid         c3d4e5f6-a7b8-9012-cdef-012345678892
 * @version     0.0.0.6
 * @created     2026-05-10
 * @updated     2026-05-28
 *
 * @copyright   (c) 2026 by SYNTHETIXMIND LTD
 * @license     Proprietary — All rights reserved
 */

/* ── Mobile only (< 768px) ───────────────────────────────────────────────── */
/*
 * WHY: max-width overrides for issues that only exist on small screens.
 * These complement the mobile-first base styles in components.css by
 * reverting or suppressing effects that look bad at narrow widths.
 */
@media (max-width: 767px) {

  /* Hero: stack CTA buttons full-width for easy tap targets */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Hero badge: allow text to wrap on very narrow screens */
  .hero__badge {
    white-space: normal;
    border-radius: var(--radius-lg);
    justify-content: center;
    text-align: center;
  }

  /* Section headers: reduce bottom gap so content stays visible in short viewports */
  .section__header {
    margin-bottom: var(--space-8);
  }

  /* FAQ: suppress horizontal slide — causes scrollbar on mobile */
  .faq__item:hover,
  .faq__item.is-open {
    transform: none;
  }

  /* Nav logo text: hide on very small screens (< 400px) to prevent overflow */
  @media (max-width: 399px) {
    .nav__logo-text {
      display: none;
    }
  }
}

/* ── Small breakpoint (480px+) ───────────────────────────────────────────── */
@media (min-width: 480px) {

  /* Features — 2 columns from 480px upwards so cards use available space */
  .features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Tablet and up (768px+) ──────────────────────────────────────────────── */
@media (min-width: 768px) {

  /* Design tokens overrides */
  :root {
    --section-py:     var(--space-16); /* 64px */
    --container-px:   var(--space-8);  /* 32px */
  }

  /* Typography scale up */
  h1 { font-size: var(--text-5xl); }
  h2 { font-size: var(--text-4xl); }
  h3 { font-size: var(--text-3xl); }

  /* Navigation — show desktop links */
  .nav__links {
    display: flex;
  }

  .nav__cta {
    display: inline-flex;
  }

  .nav__hamburger {
    display: none;
  }

  /* Hero — 2-column layout with image */
  .hero__title {
    font-size: var(--text-6xl);
  }

  .hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-12);
  }

  .hero__content {
    max-width: none;
  }

  .hero__image-col {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero__checkpoints {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
  }

  /* Guardian grid — 2 columns */
  .guardian__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Stats grid — 3 columns */
  .stats__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Stats: restore value size and box padding for wider layout */
  .stats__value {
    font-size: var(--text-5xl); /* 40px at tablet */
  }

  .stats__box {
    padding: var(--space-8); /* 32px — proportioned for 3-col tablet grid */
  }

  /* Features — 2 columns on tablet (4 columns is too cramped at 768px) */
  .features__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Dashboard — side by side, text 2/3, image 1/3 */
  .dashboard__layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-12);
  }

  .dashboard__text {
    flex: 2;
    max-width: none;
  }

  .dashboard__image-wrap {
    flex: 1;
  }

  /* About grid — 3 columns */
  .about__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Test-signup form: restore comfortable padding at tablet */
  .testsignup__form {
    padding: var(--space-8); /* 32px */
  }

  /* Test-signup form row — 2 columns for first/last name */
  .testsignup__form-row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Cookie banner — horizontal layout */
  .cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .cookie-banner__text {
    flex: 1;
    padding-right: var(--space-6);
  }

  .cookie-banner__actions {
    flex-shrink: 0;
  }

  /* Footer layout — horizontal */
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .footer__brand {
    flex: 0 0 280px;
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ── Desktop (1200px+) ───────────────────────────────────────────────────── */
@media (min-width: 1200px) {

  /* Design tokens overrides */
  :root {
    --section-py:     var(--space-20); /* 80px */
    --container-px:   var(--space-10); /* 40px */
  }

  /* Typography scale up */
  h1 { font-size: calc(var(--text-6xl) * 1.1); } /* ~53px */

  /* Hero — widen column gap at large screens */
  .hero__inner {
    gap: var(--space-16);
  }

  /* Features — 4 equal columns at desktop */
  .features__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Connector arrows between feature steps */
  .features__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-border);
  }

  /* Dashboard — refined proportions, text 2/3 image 1/3 */
  .dashboard__text {
    flex: 2;
  }

  /* Stats: full padding and larger numbers at desktop */
  .stats__box {
    padding: var(--space-10); /* 40px — full padding on desktop */
  }

  .stats__value {
    font-size: calc(var(--text-6xl) * 1.1);
  }

  /* Signup form: full padding at desktop */
  .testsignup__form {
    padding: var(--space-10); /* 40px */
  }
}

/* ── Large screens (1440px+) ─────────────────────────────────────────────── */
@media (min-width: 1440px) {
  :root {
    --max-width: 1280px;
  }
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
  .nav,
  .cookie-banner,
  .hero__bg,
  .nav__hamburger {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  h1, h2, h3 {
    color: #000;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .section {
    padding-block: 24pt;
  }
}