/* ==========================================================================
   Responsive — each range re-composes the layout rather than shrinking it.
   Ranges: <=1180 drawer nav · <=1024 spreads unstack · <=900 process/criteria
   ·<=640 phone · <=380 small phone
   ========================================================================== */

@media (max-width: 1180px) {
  .nav { display: none; }
  .nav-toggle { display: grid; }
  .header__actions .btn--line { display: none; }

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

/* ---- <= 1024px : the asymmetric spreads become single columns ------------- */

/* ---- <= 1100px : five stages stack into a ruled list ---------------------- */

@media (max-width: 1100px) {
  .process { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stage { padding-block: clamp(1.25rem, 1rem + 1vw, 1.85rem); }
  .stage::before { inset-inline: 0; }
}

@media (max-width: 1024px) {
  .about__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3rem); }

  /* Side by side, the statement and its photographs keep the spread's feel */
  .about__media {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: end;
    gap: 1rem;
    padding: 0;
  }

  .about__media-main { aspect-ratio: auto; }
  .about__media-inset { position: static; width: 100%; border: 0; }

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

  .chapter__head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .chapter__head--split .chapter__lead { margin-top: var(--space-4); }

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

/* ---- <= 860px : the timeline stacks ----------------------------------------
   Three milestones across a phone leaves each column about a hundred pixels
   wide, which wraps the copy to one word a line and makes the chapter taller
   than it would be stacked. Year and copy sit side by side instead. */

@media (max-width: 860px) {
  .timeline { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .milestone {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: clamp(1rem, 4vw, 1.75rem);
    padding-block: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  }

  .milestone__year {
    grid-row: span 2;
    margin-bottom: 0;
    font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.4rem);
  }

  .creed { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }

  .values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 1.75rem);
  }
}

@media (max-width: 560px) {
  .values-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .value-cell { padding-block: 1rem; }
}

/* ---- <= 900px : the process turns vertical -------------------------------- */

@media (max-width: 900px) {
  .hero__foot { grid-template-columns: minmax(0, 1fr); align-items: start; }

  /* A narrow box crops the art horizontally instead of vertically, so the
     framing shifts to keep the stage and the model in view. */
  .hero__media img { object-position: 38% 34%; }

  /* The copy now covers most of the frame, so the photograph drops back
     further behind it than it needs to on a wide screen. */
  .hero__scrim {
    background: linear-gradient(
      to bottom,
      rgba(4, 10, 19, 0.78) 0%,
      rgba(4, 10, 19, 0.52) 12%,
      rgba(4, 10, 19, 0.88) 34%,
      rgba(4, 10, 19, 0.96) 100%
    );
  }

  /* Cover on a narrow, tall box magnifies whatever is at the centre of a
     wide backdrop — usually a face. Push it down further still. */
  .chapter--photo .chapter__veil {
    background: linear-gradient(
      to bottom,
      rgba(4, 10, 19, 0.96) 0%,
      rgba(4, 10, 19, 0.93) 45%,
      rgba(4, 10, 19, 0.97) 100%
    );
  }

  .feature__img { aspect-ratio: 4 / 3; }
  .feature__body-inner { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .feature__meta { text-align: start; flex-direction: row; align-items: baseline; gap: 0.75rem; }
}

/* ---- <= 640px : phone ------------------------------------------------------ */

/* ---- <= 760px : the dialog stacks, photograph first ----------------------- */

@media (max-width: 760px) {
  .project-dialog { max-height: 88svh; overflow-y: auto; }

  .detail {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
  }

  .detail__media { order: -1; }
  .detail__img { aspect-ratio: 16 / 10; height: auto; }
  .detail__body { overflow: visible; }
  .detail__body .btn { width: 100%; align-self: stretch; }
}

@media (max-width: 760px) {
  /* Edge-to-edge bleed is a wide-screen device. On a phone it just puts the
     first card against the bezel, so the track stays inside the container. */
  .gallery__viewport { margin-inline: 0; }
  .gallery__track { padding-inline: 0; }
}

@media (max-width: 640px) {
  .header__actions .btn--primary { display: none; }

  .brand__mark { height: 2.5rem; }
  .brand__wordmark { height: 1.6rem; }

  .hero { min-height: min(92svh, 760px); padding-block: 7rem 2.5rem; }
  .hero__title { max-width: none; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; }

  .about__media { grid-template-columns: minmax(0, 1fr); }
  .about__media-main { aspect-ratio: auto; }
  .about__media-inset { display: none; }

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

  .criteria { grid-template-columns: minmax(0, 1fr); }

  /* Seventeen logos two-abreast turns the wall into a nine-row list. Three
     per row with tight gutters roughly halves the height while keeping each
     mark big enough to recognise. Ragged final rows centre rather than hang. */
  .wall {
    column-gap: 0.85rem;
    row-gap: 1.25rem;
    justify-content: center;
  }

  .wall img {
    width: clamp(3.6rem, 24vw, 6rem);
    height: 2.35rem;
  }

  .wall-group + .wall-group {
    margin-top: 2rem;
    padding-top: 1.5rem;
  }

  /* One column per block made the footer 1,400px tall on a phone — two and a
     half times its desktop height. The brand and the map keep the full width;
     the two short lists sit side by side between them. */
  .footer__grid {
    /* Uneven split: the contact column holds "+966 56 600 9911", which wraps
       to two lines in an equal half at phone widths. */
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 1.75rem 1.25rem;
    padding-bottom: 2rem;
  }

  .footer__grid > :first-child,
  .footer__grid > :last-child { grid-column: 1 / -1; }

  .footer__brand img { height: 3.75rem; }
  .footer__tagline { margin-bottom: 1.5rem; }
  .footer__col-title { margin-bottom: 1rem; }
  .footer__links { gap: 0.5rem; }
  .footer__contact-item { padding-block: 0.65rem; gap: 0.6rem; }
  /* Fluid rather than fixed: the number has to stay on one line down to
     320px, where the contact column is only about 150px wide. */
  .footer__contact-value { font-size: clamp(0.85rem, 3.5vw, 1.0625rem); }
  .footer__map iframe { height: 10rem; }

  .footer__bar {
    justify-content: flex-start;
    gap: 0.35rem;
    padding-block: 1.25rem;
  }

  .project { flex-basis: min(74vw, 17rem); }

  .community__cta .btn { flex-wrap: wrap; width: 100%; row-gap: 0.15rem; }
  .community__number { padding-inline-start: 0; border-inline-start: 0; }
}

@media (max-width: 380px) {
  :root { --fs-body: 1rem; }
  .brand__wordmark { display: none; }
  .project { flex-basis: 80vw; }
}

/* ---- >= 641px : the floating button steps back ------------------------------
   The header keeps "اطلب تنظيم فعاليتك" in view on desktop, so a second full
   label floating over the page is redundant. It becomes a plain icon there,
   and stays labelled on phones where the header CTA is hidden. */

@media (min-width: 641px) {
  .whatsapp-float { padding: 0.6rem; gap: 0; }
  .whatsapp-float__label { display: none; }
  .whatsapp-float__icon { width: 2.5rem; height: 2.5rem; }
  .whatsapp-float__icon svg { width: 1.35rem; height: 1.35rem; }
}

/* ---- Coarse pointer -------------------------------------------------------- */

@media (hover: none) {
  .value::before { opacity: 0.4; }
}

@media print {
  .header, .whatsapp-float, .gallery__foot { display: none !important; }
  body { background: #fff; color: #000; }
}