/* ============================================
   Boya Uzmanı — Responsive Breakpoints
   Mobile-first. Verified: 320/360/375/390/414/768/1024/1280/1440/1920
   ============================================ */

/* Small phones: tighten type scale + spacing a touch */
@media (max-width: 359px) {
  .hero-actions .btn,
  .cta-band .cta-actions .btn {
    width: 100%;
  }
  .district-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-1);
  }
  .district-chip {
    font-size: var(--text-xs);
    padding: 0.5rem 0.35rem;
  }
}

/* --- 480px: small tablets / large phones landscape --- */
@media (min-width: 480px) {
  .before-after {
    grid-template-columns: 1fr 1fr;
  }
  .form-row-2 {
    grid-template-columns: 1fr 1fr;
  }
  .trust-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .district-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .reason-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- 560px: services start pairing up, steps pair up --- */
@media (min-width: 560px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- 640px --- */
@media (min-width: 640px) {
  .hero-actions {
    flex-wrap: nowrap;
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .project-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .quote-split {
    grid-template-columns: 1fr 1fr;
  }
  .sitemap-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- 768px: tablet — nav still hidden, but layout opens up --- */
@media (min-width: 768px) {
  .district-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .footer-grid {
    grid-template-columns: 2fr repeat(3, 1fr);
  }
  .footer-bottom {
    flex-wrap: nowrap;
  }
  .section {
    padding: var(--space-10) 0;
  }
  h1 { font-size: var(--text-4xl); }
}

/* --- 900px: reason list + steps go fuller width --- */
@media (min-width: 900px) {
  .reason-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sitemap-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- 960px: desktop nav appears, hero becomes two columns --- */
@media (min-width: 960px) {
  .main-nav {
    display: block;
  }
  .header-phone-btn {
    display: inline-flex;
  }
  .mobile-phone-btn,
  .menu-toggle {
    display: none;
  }

  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
  .hero-visual {
    order: 2;
  }

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

  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
  .step {
    position: relative;
  }
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.75rem;
    left: calc(50% + 2.6rem);
    width: calc(100% - 3.2rem);
    height: 2px;
    background: var(--color-border-strong);
  }

  .quote-grid {
    grid-template-columns: 1.3fr 0.9fr;
  }

  .district-grid {
    grid-template-columns: repeat(6, 1fr);
  }

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

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

  .mobile-dock {
    display: none;
  }
  body.has-dock {
    padding-bottom: 0;
  }
}

/* --- 1024px --- */
@media (min-width: 1024px) {
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  .project-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
  .cta-band {
    padding: var(--space-9) var(--space-9);
  }
}

/* --- 1280px --- */
@media (min-width: 1280px) {
  .services-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- 1440px+: cap line-length growth, keep container centered --- */
@media (min-width: 1440px) {
  :root {
    --container-max: 1240px;
  }
}

/* --- 1920px+: ultra-wide, prevent hero from feeling sparse --- */
@media (min-width: 1920px) {
  :root {
    --container-max: 1320px;
  }
}

/* --- Fine pointer only: hover-dependent affordances --- */
@media (hover: hover) and (pointer: fine) {
  .service-card {
    transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .service-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}