/* ==========================================================================
   Responsive refinements
   Component files are written mobile-first; this file holds composition
   changes that cut across components, from the smallest phones upward.
   ========================================================================== */

/* ---- Up to 479px (360 / 390 / 430 phones) -------------------------------- */
@media (max-width: 479px) {
  .hero__bar {
    grid-template-columns: 1fr auto;
  }

  .hero__bar-center {
    display: none;
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .hero__pattern-wrap {
    inline-size: 30rem;
    inset-inline-end: -55%;
    inset-block-start: 8%;
  }

  .hero__media img {
    object-position: 70% 50%;
  }

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

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

  .certs li {
    padding: 0.9rem 1rem;
  }

  .svc-row {
    grid-template-columns: 2.5rem 1fr auto;
    gap: 0.75rem;
  }

  .svc-row__arrow {
    inline-size: 2.25rem;
    block-size: 2.25rem;
  }
}

/* ---- Phones & small tablets --------------------------------------------- */
@media (max-width: 767px) {
  .page-hero__index {
    display: none;
  }

  .hero__inner {
    padding-block-start: calc(var(--header-height) + 2rem);
  }

  .intro__media .photo--4x5 {
    aspect-ratio: 4 / 3;
  }

  .service__media .photo--4x5 {
    aspect-ratio: 4 / 3;
  }

  .future-band__media img {
    object-position: 35% 20%;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- Tablet portrait (768–1023) ----------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .intro__media .photo--4x5 {
    aspect-ratio: 16 / 10;
  }

  .hero__content {
    max-inline-size: 44rem;
  }
}

/* ---- Large desktop (1920+) ---------------------------------------------- */
@media (min-width: 1680px) {
  :root {
    --container: 1560px;
  }
}

/* ---- Short landscape viewports ------------------------------------------ */
@media (max-height: 560px) and (orientation: landscape) {
  .hero,
  .page-hero--full {
    min-block-size: 36rem;
  }

  .menu__link {
    font-size: 1.5rem;
  }
}

/* ---- Direction-specific details ---------------------------------------- */
/* The Arabic choice on the (LTR) language gate points toward reading direction */
.gate__choice[lang="ar"] .icon-arrow {
  transform: scaleX(-1);
}

/* ---- Print -------------------------------------------------------------- */
@media print {
  .site-header,
  .menu,
  .hero__pattern-wrap,
  .pattern,
  .scroll-cue {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .hero,
  .page-hero,
  .theme-black,
  .theme-charcoal {
    color: #000;
    background: #fff;
  }
}

/* ==========================================================================
   Phones (≤768px) — Home hero centred, compact shared mobile header & menu
   Desktop and tablet-landscape layouts are unaffected.
   ========================================================================== */
@media (max-width: 768px) {
  /* Home hero: centred text block (direction stays RTL/LTR; only the visual alignment centres) */
  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-inline: auto;
    text-align: center;
  }

  .hero__eyebrow {
    justify-content: center;
  }

  .hero__lead {
    max-inline-size: 90%;
    margin-inline: auto;
    line-height: 1.7;
  }

  /* Buttons stacked and centred, equal width, not stretched edge to edge */
  .hero__actions {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    inline-size: 100%;
  }

  .hero__actions .btn {
    flex: 0 0 auto;
    inline-size: min(100%, 17.5rem);
  }

  /* Compact header controls */
  .menu-toggle {
    inline-size: 44px;
    block-size: 44px;
  }

  .menu-toggle__bars {
    inline-size: 18px;
    block-size: 10px;
  }

  .header__actions {
    gap: 0.625rem;
  }

  .lang-switch a,
  .lang-switch span {
    min-inline-size: 2.25rem;
    min-block-size: 2rem;
    padding-inline: 0.45rem;
  }

  /* Mobile menu: smaller, cleaner type */
  .menu__link {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
    padding-block: 0.85rem;
    gap: 0.85rem;
  }

  .menu__link::before {
    font-size: 0.75rem;
    min-inline-size: 1.5rem;
  }
}

/* Phones (≤600px): the hero text group sits in the vertical middle of the space
   between the header and the bottom bar, instead of resting on the bar.
   The bar (scroll cue + location) stays pinned at the bottom. */
@media (max-width: 600px) {
  .hero__inner {
    grid-template-rows: 1fr auto;
    align-content: stretch;
  }

  .hero__content {
    align-self: center;
  }
}