/**
 * SKYPURE — Responsive Architecture
 * Tablet & Mobile Intentional Layouts
 */

/* ==========================================================================
   DESKTOP & LARGE DISPLAYS (> 1200px)
   ========================================================================== */
@media (min-width: 1201px) {
  .mobile-toggle,
  .mobile-drawer {
    display: none !important;
  }
}

/* ==========================================================================
   MEDIUM DESKTOP & TABLET LANDSCAPE (<= 1200px)
   ========================================================================== */
@media (max-width: 1200px) {
  :root {
    --container-pad: 2rem;
  }

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

  .trust-grid::before {
    left: 50%;
  }

  .trust-grid::after {
    display: none;
  }

  .trust-card:nth-child(-n+3) {
    border-bottom: none;
  }

  .trust-card:nth-child(-n+4) {
    border-bottom: 1px solid var(--border-grid);
  }

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

  .services-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  .ref-card-main {
    grid-column: span 12;
  }

  .ref-card-secondary {
    grid-column: span 6;
  }

  .ref-card-third {
    grid-column: span 6;
  }
}

/* ==========================================================================
   TABLET PORTRAIT (<= 992px)
   ========================================================================== */
@media (max-width: 992px) {
  :root {
    --header-height: 72px;
  }

  .nav-desktop,
  .header-cta .header-phone {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

  .first-scroll-inner,
  .about-layout,
  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .services-layout {
    grid-template-columns: 1fr;
  }

  .services-preview-sticky {
    position: relative;
    top: 0;
    order: -1;
  }

  .services-preview-stage,
  .services-slider {
    height: 440px;
    min-height: 440px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  .footer-brand {
    grid-column: span 2;
  }
}

/* ==========================================================================
   MOBILE DEVICES (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --container-pad: 1.25rem;
    --space-3xl: 4.5rem;
    --space-2xl: 3rem;
  }

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

  .trust-grid::before,
  .trust-grid::after {
    display: none;
  }

  .trust-card:nth-child(-n+4) {
    border-bottom: none;
  }

  .trust-card:nth-child(-n+5) {
    border-bottom: 1px solid var(--border-grid);
  }

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

  .process-step {
    min-height: 160px;
  }

  .ref-card-secondary,
  .ref-card-third {
    grid-column: span 12;
  }

  .before-after-wrapper {
    padding: var(--space-md);
  }

  .before-after-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .ba-tabs {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  .ba-tab {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 7px 12px;
    font-size: 0.7rem;
  }

  .ba-case-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
  }

  .ba-case-nav {
    width: 100%;
    justify-content: flex-end;
  }

  .before-after-container {
    min-height: 260px;
    aspect-ratio: 4 / 3;
  }

  .hero-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    grid-column: span 1;
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-sm);
    align-items: flex-start;
  }

  .contact-form {
    padding: var(--space-lg);
  }

  .btn {
    width: 100%;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    gap: var(--space-xs);
  }

  .hero-scroll-track {
    height: 260vh;
  }

  .statement-headline-scrolly {
    font-size: 1.85rem;
    line-height: 1.1;
  }

  .statement-body-scrolly {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .brand {
    gap: 10px;
  }

  .brand-logo-img {
    width: 36px;
    height: 36px;
  }
}

/* ==========================================================================
   TINY SCREENS (<= 420px)
   ========================================================================== */
@media (max-width: 420px) {
  .hero-brand-title {
    font-size: 3.5rem;
  }

  .arch-placeholder {
    padding: var(--space-sm);
  }

  .arch-placeholder-header,
  .arch-placeholder-footer {
    font-size: 0.65rem;
  }
}