/* =========================================================
   Home — app download (Figma node 190:55905)
   Panel colour/radius are not in Figma's code export; measured from the reference render.
   ========================================================= */

.al-app {
  padding-block: var(--al-sp-4xl);
  background: var(--al-bg);
}

.al-app__panel {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--al-sp-xl);
  min-height: 605px;
  /* 140px at the 1280 column (Figma), shrinking with the viewport */
  padding-inline: clamp(var(--al-sp-2xl), 11%, 140px);
  border-radius: var(--al-sp-4xl);
  background: var(--al-panel);
  overflow: hidden;
}

/* ---------------- Text + download ---------------- */
.al-app__info {
  flex: 0 1 434px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--al-sp-lg);
  padding-block: var(--al-sp-4xl);
  text-align: center;
}
.al-app__title {
  max-width: 320px;                   /* Figma breaks "…أمّن / الآن" onto two lines */
  font-weight: 700;
  font-size: 36px;
  line-height: 54px;
  color: var(--al-text);
  text-wrap: balance;
}
.al-app__sub {
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  color: var(--al-text-2);
  text-wrap: balance;
}
.al-app__download {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--al-sp-lg);
}
.al-app__qr {
  width: 180px;
  /* Height comes from the img's own width/height attributes, which HomeAppQrTests pins square.
     Repeating the number here would let the two disagree — a QR stretched off-square will not
     scan, and nothing on screen says so. */
  height: auto;
  border-radius: var(--al-sp-xs);     /* softens the QR's white quiet zone on the dark panel */
}
.al-app .al-store { min-height: 44px; transition: opacity var(--al-dur-hover) var(--al-ease-out); }
.al-app a.al-store:hover { opacity: 0.85; }
[data-theme="dark"] .al-app .al-store { box-shadow: 0 0 0 1px var(--al-border); }

/* ---------------- Phone artwork ----------------
   Layers are placed in Figma percentages of a 366.5 × 541.2 stage, so the stage can be resized as
   one unit. These insets are physical on purpose: the hand and phone are a photo composite and
   must not mirror in LTR. */
.al-app__phone {
  position: relative;
  flex-shrink: 0;
  width: 366.545px;
  max-width: 100%;
  aspect-ratio: 366.545 / 541.194;
  filter: var(--al-art-filter);
}
.al-app__phone > span {
  position: absolute;
  display: block;
  overflow: hidden;
}
.al-app__phone img { width: 100%; height: 100%; max-width: none; }
.al-app__hand   { inset: 0 0 55.53% 0; }
.al-app__iphone { inset: 32.62% 16.27% 0 35.09%; }
.al-app__screen { inset: 33.85% 18.43% 1.21% 37.24%; }

/* ---------------- 1024–1279: same layout, tighter ---------------- */
@media (max-width: 1279.98px) {
  .al-app__phone { width: clamp(280px, 30vw, 366.545px); }
}

/* ---------------- < 1024: stacked, text first ---------------- */
@media (max-width: 1023.98px) {
  .al-app { padding-block: var(--al-sp-2xl); }

  .al-app__panel {
    flex-direction: column;
    align-items: center;
    gap: var(--al-sp-xl);
    min-height: 0;
    padding: var(--al-sp-2xl) var(--al-sp-lg) var(--al-sp-xl);
    border-radius: var(--al-sp-2xl);
  }
  .al-app__info { flex: none; width: 100%; max-width: 480px; padding-block: 0; }
  .al-app__title { max-width: none; font-size: 30px; line-height: 44px; }
  .al-app__sub { font-size: 20px; line-height: 32px; }

  .al-app__phone {
    width: min(300px, 72%);
    /* the hand is cropped at the wrist; Figma hides that behind the panel's top edge, which the
       stacked layout no longer has, so fade it in instead */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
  }
}

@media (max-width: 767.98px) {
  .al-app__panel {
    padding: var(--al-sp-xl) var(--al-sp-md) var(--al-sp-lg);
    border-radius: var(--al-sp-xl);
  }
  .al-app__title { font-size: 26px; line-height: 38px; }
  .al-app__sub { font-size: 17px; line-height: 28px; }
  /* A QR code is for scanning from another screen; on a phone the store badges are the action */
  .al-app__qr { display: none; }
  .al-app__phone { width: min(240px, 70%); }
}

/* Hidden until the app is ready (2026-09-25) — delete this rule to show it again.
   Last in the file so no earlier rule or breakpoint can re-show it; the markup stays in HomeApp.razor. */
.al-app { display: none; }