/* ==========================================================================
   GRANADA — responsive.css
   Mobile-first breakpoints. Base styles assume small screens where relevant;
   these queries adapt the grid-heavy layouts down for tablet & mobile.
   Breakpoints: 1024px (tablet/laptop), 768px (tablet), 560px (mobile)
   ========================================================================== */

/* ---------- <= 1024px : Tablet landscape / small laptop ---------- */
@media (max-width: 1024px) {
  :root { --nav-h: 70px; }

  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__about { grid-column: 1 / -1; max-width: none; }
  .svc-detail__layout { grid-template-columns: 1fr; }
  .svc-detail__aside { position: static; }
  .cs-meta { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- <= 880px : Mobile navigation kicks in ---------- */
@media (max-width: 880px) {
  .nav__toggle { display: flex; }

  .nav__menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(88vw, 360px);
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--sp-1);
    padding: calc(var(--nav-h) + var(--sp-4)) var(--sp-5) var(--sp-6);
    background: var(--c-white);
    border-left: 1px solid var(--c-border);
    transform: translateX(100%);
    transition: transform 0.45s var(--ease);
    overflow-y: auto;
    z-index: 999;
  }

  .nav__menu.is-open { transform: translateX(0); }

  .nav__link { padding: var(--sp-4); font-size: var(--fs-md); border-bottom: 1px solid var(--c-border); border-radius: 0; }
  .nav__link.is-active::after { display: none; }

  .nav__item--has-drop .nav__drop {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 0 var(--sp-4);
    min-width: 0;
  }

  .nav__actions .btn { display: none; }
}

/* ---------- <= 768px : Tablet portrait ---------- */
@media (max-width: 768px) {
  :root { --sp-10: 5rem; --sp-9: 4rem; }

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

  .hero-split { grid-template-columns: 1fr; }
  .hero-split .hero__inner { text-align: center; }
  .hero-split .hero__actions { justify-content: center; }
  .hero-media { order: -1; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1; }
  .portfolio-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .plan--featured { order: -1; }
  .featured-post { grid-template-columns: 1fr; }
  .featured-post__media { aspect-ratio: 16/9; }
  .featured-post__body { padding: var(--sp-6); }
  .contact-layout { grid-template-columns: 1fr; }
  .cs-results { grid-template-columns: 1fr; }
  .cs-gallery { grid-template-columns: 1fr 1fr; }
  .form__row { grid-template-columns: 1fr; }

  .compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare { min-width: 560px; }
}

/* ---------- <= 560px : Mobile ---------- */
@media (max-width: 560px) {
  .stats__grid { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .cs-meta { grid-template-columns: 1fr; }
  .cs-gallery { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }

  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .cta__actions { flex-direction: column; }
  .cta__actions .btn { width: 100%; }
  .slide__quote { font-size: var(--fs-lg); }
  .blog-toolbar { flex-direction: column; align-items: stretch; }
  .search { max-width: none; }
}