/* ===================================================================
   TAFASEEL CONTRACTING — RESPONSIVE BREAKPOINTS
   Mobile <600px | Tablet <900px | Laptop <1200px | Desktop | Ultra-wide >1600px
=================================================================== */

/* --------------------- Ultra-wide (>1600px) --------------------- */
@media (min-width: 1600px){
  :root{ --container: 1400px; }
  .hero-content{ max-width: 1040px; }
}

/* --------------------- Laptop (<1200px) --------------------- */
@media (max-width: 1200px){
  .grid-4{ grid-template-columns: repeat(3, 1fr); }
  .grid-5{ grid-template-columns: repeat(3, 1fr); }
  .footer-grid{ grid-template-columns: 1.2fr 1fr 1fr; }
  .masonry{ columns: 3 200px; }
}

/* --------------------- Tablet (<900px) --------------------- */
@media (max-width: 900px){
  .nav-links{
    position: fixed;
    top: 78px; left: 0; right: 0;
    flex-direction: column;
    background: var(--nav-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 24px;
    gap: 20px;
    border-bottom: 1px solid var(--line);
    transform: translateY(-140%);
    opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
    align-items: flex-start;
  }
  .nav-links.is-open{ transform: translateY(0); opacity: 1; }
  .nav-burger{ display: flex; }
  .nav-cta .btn--ghost{ display: none; }

  /* Bilingual split grid stacks: English on top, Arabic below, hairline becomes horizontal */
  .bi-grid{
    grid-template-columns: 1fr;
    gap: 0;
  }
  .bi-grid > .bi-rule{
    width: 100%;
    height: 1px;
    margin-block: 32px;
  }
  .bi-grid > .bi-col-ar,
  .bi-grid > .bi-col-en{ text-align: inherit; }

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

  .timeline{ grid-template-columns: 1fr; gap: 36px; }
  .timeline::before{ display: none; }

  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 32px; }
  .masonry{ columns: 2 220px; }

  dl.doc-fields{ grid-template-columns: 1fr; }
}

/* --------------------- Mobile (<600px) --------------------- */
@media (max-width: 600px){
  .wrap{ padding-inline: 18px; }
  .grid-2, .grid-3, .grid-4, .grid-5{ grid-template-columns: 1fr; }
  .stat{ border-inline-start: none; border-top: 1px solid var(--line); padding-top: 20px; }
  .stat:first-child{ border-top: none; }
  .stats-strip .grid{ gap: 0; }
  .hero-cta{ flex-direction: column; }
  .hero-cta .btn{ width: 100%; justify-content: center; }
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; }
  .masonry{ columns: 1 100%; }
  .doc-card-head{ flex-direction: column; gap: 12px; }
  .lightbox{ padding: 20px; }
  .lightbox-close{ top: 14px; right: 14px; }
}