/* ==========================================================================
   Responsive Breakpoint Overrides — ColorBase Cortex
   ==========================================================================
   Breakpoints:
     Tablet        — max-width: 1024px
     Mobile        — max-width: 768px
     Small mobile  — max-width: 480px

   Also includes:
     prefers-reduced-motion  — disable animations / transitions
     @media print            — hide chrome, ensure readable text
   ========================================================================== */


/* ======================================================================
   1. TABLET  —  max-width: 1024px
   ====================================================================== */

@media (max-width: 1024px) {

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

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

  /* --- Hero ---------------------------------------------------------- */
  .hero h1,
  .hero-title {
    font-size: 44px;
  }

  /* --- Sections ------------------------------------------------------ */
  .section,
  section {
    padding: 60px 0;
  }

  /* --- Navigation ---------------------------------------------------- */
  .nav-links {
    gap: 24px;
  }
}


/* ======================================================================
   2. MOBILE  —  max-width: 768px
   ====================================================================== */

@media (max-width: 768px) {

  /* --- Navigation ---------------------------------------------------- */
  .nav-links {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .mobile-menu.active {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

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

  /* --- Hero ---------------------------------------------------------- */
  .hero {
    min-height: 90vh;
  }

  .hero h1,
  .hero-title {
    font-size: 36px;
  }

  .hero-subline,
  .hero p {
    font-size: 16px;
  }

  .hero-ctas {
    flex-direction: column;
  }

  .hero-ctas .btn,
  .hero-ctas a {
    width: 100%;
    text-align: center;
  }

  .hero-content {
    flex-direction: column;
    text-align: center;
  }

  .hero-eye {
    width: 220px;
    height: 220px;
    order: -1;
  }

  /* --- Sections ------------------------------------------------------ */
  .section,
  section {
    padding: 48px 0;
  }

  /* --- Typography scale ---------------------------------------------- */
  .text-display {
    font-size: 36px;
  }

  .text-h1 {
    font-size: 32px;
  }

  .text-h2 {
    font-size: 24px;
  }

  /* --- Container ----------------------------------------------------- */
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* --- Contact section ----------------------------------------------- */
  .contact-grid,
  .contact-columns {
    grid-template-columns: 1fr;
  }

  .contact-left,
  .contact-right {
    width: 100%;
  }

  /* --- Footer -------------------------------------------------------- */
  .footer,
  footer {
    flex-direction: column;
    text-align: center;
  }

  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-lg);
  }

  /* --- Metric strip -------------------------------------------------- */
  .metric-strip {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
  }

  /* --- Stepper (How It Works) ---------------------------------------- */
  .stepper {
    flex-direction: column;
    align-items: flex-start;
  }

  .stepper-connector {
    width: 2px;
    height: 32px;
  }

  /* --- Persona cards (Audiences) ------------------------------------- */
  .persona-cards,
  .audience-cards {
    grid-template-columns: 1fr;
  }

  /* --- Code block ---------------------------------------------------- */
  .code-block,
  pre,
  code {
    font-size: 13px;
  }

  /* --- Modal --------------------------------------------------------- */
  .modal,
  .modal-content {
    width: calc(100% - 32px);
    padding: 24px;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* --- Cookie banner ------------------------------------------------- */
  .cookie-banner {
    flex-direction: column;
    text-align: center;
    gap: var(--space-md);
  }
}


/* ======================================================================
   3. SMALL MOBILE  —  max-width: 480px
   ====================================================================== */

@media (max-width: 480px) {

  /* --- Hero ---------------------------------------------------------- */
  .hero h1,
  .hero-title {
    font-size: 28px;
  }

  /* --- Body font ----------------------------------------------------- */
  body {
    font-size: 15px;
  }

  /* --- Buttons ------------------------------------------------------- */
  .btn,
  button:not(.hamburger) {
    width: 100%;
    text-align: center;
  }

  /* --- Nav CTA in mobile menu ---------------------------------------- */
  .mobile-menu .nav-cta {
    width: 100%;
    text-align: center;
  }
}


/* ======================================================================
   4. PREFERS REDUCED MOTION
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ======================================================================
   5. PRINT STYLES
   ====================================================================== */

@media print {

  /* Hide non-essential chrome */
  .nav,
  .site-nav,
  nav,
  header nav,
  footer,
  .footer,
  .modal,
  .modal-overlay,
  .cookie-banner,
  .hamburger,
  .mobile-menu,
  .share-btn,
  .hero-ctas,
  .btn {
    display: none !important;
  }

  /* Readable text */
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }

  h1, h2, h3, h4 {
    page-break-after: avoid;
    color: #000;
  }

  p, li {
    orphans: 3;
    widows: 3;
  }

  /* Expand links for print */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }

  a[href^="#"]::after,
  a[href^="javascript"]::after {
    content: "";
  }

  /* Full-width layout */
  .container {
    max-width: 100%;
    padding: 0;
  }

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

  img {
    max-width: 100% !important;
  }
}