/* =====================================================
 * DecryptCode INC — Responsive Overrides
 * Mobile-first breakpoints for all components
 * Breakpoints: 640 | 768 | 1024 | 1200 | 1400
 * Last Updated: February 21, 2026
 * ===================================================== */

/* ═══════════════════════════════════════════
 * PRINT STYLES
 * ═══════════════════════════════════════════ */

@media print {
  .navbar,
  .mobile-nav,
  .mobile-nav-overlay,
  .footer__social,
  .btn,
  .proof-strip,
  .cta-strip,
  .neural-grid-bg::before,
  .neural-grid-bg::after {
    display: none !important;
  }

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

  .container {
    max-width: 100%;
    padding: 0;
  }

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

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #555;
  }

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

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

/* ═══════════════════════════════════════════
 * EXTRA SMALL (< 640px) — Mobile defaults
 * Everything is mobile-first, so base styles
 * handle this range. Below are overrides only.
 * ═══════════════════════════════════════════ */

/* Fix: ultra-narrow screens */
@media (max-width: 374px) {
  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .metric-strip {
    grid-template-columns: 1fr;
  }

  .case-hero__metrics {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════
 * SMALL (≥ 640px) — Large phone / Small tablet
 * Already handled in component files.
 * Cross-component coordination below.
 * ═══════════════════════════════════════════ */

@media (min-width: 640px) {
  /* Post layout with sidebar hint */
  .post-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Service process horizontal hints */
  .process-steps--horizontal {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════
 * MEDIUM (≥ 768px) — Tablet
 * ═══════════════════════════════════════════ */

@media (min-width: 768px) {
  /* Blog post with TOC sidebar */
  .post-layout {
    grid-template-columns: 200px 1fr;
    gap: var(--space-8);
  }

  /* Case study with sidebar */
  .case-layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: var(--space-8);
  }

  /* Contact gets side-by-side */
  .contact {
    grid-template-columns: 1fr 1.5fr;
  }

  /* Wider form rows */
  .form__row {
    grid-template-columns: 1fr 1fr;
  }

  /* Tighten up spacing for tablet */
  .section {
    padding-block: var(--space-12);
  }
}

/* ═══════════════════════════════════════════
 * LARGE (≥ 1024px) — Desktop
 * ═══════════════════════════════════════════ */

@media (min-width: 1024px) {
  /* Blog post layout: TOC | Content */
  .post-layout {
    grid-template-columns: 220px 1fr;
    gap: var(--space-10);
  }

  /* Case study: Content | Sidebar */
  .case-layout {
    grid-template-columns: 1fr 280px;
    gap: var(--space-10);
  }

  /* Hero gets more breathing room */
  .hero {
    padding-top: calc(64px + var(--space-16));
    padding-bottom: var(--space-16);
  }

  /* Service hero wider */
  .service-hero,
  .case-hero {
    padding-top: calc(64px + var(--space-12));
  }

  /* Footer full layout */
  .footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }

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

  /* Section spacing */
  .section {
    padding-block: var(--space-16);
  }

  .section--lg {
    padding-block: var(--space-20);
  }
}

/* ═══════════════════════════════════════════
 * EXTRA LARGE (≥ 1200px) — Wide desktop
 * ═══════════════════════════════════════════ */

@media (min-width: 1200px) {
  /* Widen post + TOC */
  .post-layout {
    grid-template-columns: 240px 1fr;
  }

  /* Case study: wider sidebar */
  .case-layout {
    grid-template-columns: 1fr 300px;
  }

  /* Container gets maxed */
  .container {
    padding-inline: var(--space-8);
  }
}

/* ═══════════════════════════════════════════
 * 2XL (≥ 1400px) — Ultra-wide
 * ═══════════════════════════════════════════ */

@media (min-width: 1400px) {
  .container--xl {
    max-width: var(--container-2xl);
  }

  .hero__content {
    max-width: 800px;
  }

  .hero__subtitle {
    max-width: 640px;
  }
}

/* ═══════════════════════════════════════════
 * LANDSCAPE PHONES
 * ═══════════════════════════════════════════ */

@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-top: calc(64px + var(--space-8));
    padding-bottom: var(--space-8);
  }

  .navbar {
    height: 52px;
  }
}

/* ═══════════════════════════════════════════
 * HIGH CONTRAST MODE
 * ═══════════════════════════════════════════ */

@media (forced-colors: active) {
  .btn--primary {
    border: 2px solid ButtonText;
  }

  .node-card,
  .insight-card,
  .case-card {
    border: 1px solid CanvasText;
  }

  .navbar {
    border-bottom: 2px solid CanvasText;
  }

  a:focus-visible {
    outline: 2px solid Highlight;
  }
}