/* =================================================================
   MDFWala — responsive.css
   Tablet & mobile breakpoints
   ================================================================= */

/* ---------- Large desktop down ---------- */
@media (max-width: 1100px) {
  .grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1.4fr;
  }

  .footer__grid> :nth-child(3) {
    display: none;
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  :root {
    --header-h: 70px;
  }

  .section {
    padding: 72px 0;
  }

  /* Hide desktop nav, show hamburger */
  .nav__menu,
  .nav__actions .btn-wa,
  .nav__actions .btn--primary {
    display: none;
  }

  .hamburger {
    display: grid;
  }

  .nav__mobile-icon--wa {
    display: grid;
  }

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

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

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

  .split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .split__media {
    order: -1;
  }

  .split__badge {
    right: 16px;
    bottom: -20px;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 190px;
  }

  .gallery-item.wide {
    grid-column: span 2;
  }

  .gallery-item.tall {
    grid-row: span 1;
  }

  /* Timeline → single column */
  .timeline::before {
    left: 18px;
  }

  .tl-item {
    width: 100%;
    left: 0 !important;
    text-align: left !important;
    padding: 0 0 40px 52px;
  }

  .tl-item .tl-item__dot {
    left: 9px !important;
    right: auto !important;
  }

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

  .footer__grid> :nth-child(3) {
    display: block;
  }

  .cta-banner {
    padding: 54px 28px;
  }

  .hero__scroll {
    display: none;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .container {
    padding-inline: 18px;
  }

  .section {
    padding: 60px 0;
  }

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

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

  .hero {
    min-height: 560px;
  }

  .hero__arrow {
    width: 44px;
    height: 44px;
  }

  .hero__arrow.prev {
    left: 12px;
  }

  .hero__arrow.next {
    right: 12px;
  }

  .hero__cta {
    flex-direction: column;
  }

  .hero__cta .btn {
    width: 100%;
  }

  .section-head {
    margin-bottom: 38px;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }

  .gallery-item.wide {
    grid-column: span 1;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer__grid> :nth-child(3) {
    display: block;
  }

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

  .form-card,
  .contact-info-card {
    padding: 26px 20px;
  }

  .cta-banner__btns {
    flex-direction: column;
  }

  .cta-banner__btns .btn {
    width: 100%;
  }

  .phone-float {
    right: 16px;
    left: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
  }

  .to-top {
    left: 16px;
    right: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .nav__actions {
    gap: 6px;
  }

  .nav__mobile-icon {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }
}

/* ---------- Small ---------- */
@media (max-width: 380px) {
  .logo {
    font-size: 1.15rem;
  }

  .logo__icon {
    width: 34px;
    height: 34px;
  }
}