/* ============================================================================
   Translate page — "Coming Soon" (Figma frame 2014:1730)
   Reuses shared .section / .section__header / .section__subtitle / .container,
   the .quality.* provenance block (identical to the home page) and the
   .page-banner title band. Page-specific: the upload "Coming Soon" card and the
   How-It-Works step grid.
   ========================================================================== */

/* Section rhythm — Figma gaps between sections are a flat 60px. Each section
   carries 30px top+bottom so two adjacent sections sum to that 60px; the first
   and last sections pad to 60px against the title band and the footer. */
.page--translate .section { padding-block: 30px; }
.page--translate .translate-ready { padding-top: 60px; }
.page--translate .translate-quality { padding-bottom: 60px; }

/* Headers are centred (Figma) and the subtitle column is 963px wide. */
.page--translate .section__header { max-width: 963px; margin-bottom: 30px; }

/* ---- 1. Ready: the upload "Coming Soon" card --------------------------- */
.translate-upload {
  background: #FBF2E6;                      /* Figma: cream card, radius 30 */
  border-radius: 30px;
  padding: 20px;
}
.translate-dropzone {
  background: var(--color-white);
  border: 1px dashed var(--color-pink);     /* Figma: #E51D74, 1px */
  border-radius: 10px;
  padding: 40px 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.translate-dropzone__art {
  width: 128px;                             /* Figma illustration frame = 128×120 */
  height: auto;
}
.translate-dropzone__title {
  /* Figma: 28/38px, weight 700, #333. */
  font-size: 28px;
  line-height: 38px;
  font-weight: var(--font-weight-bold);
  color: var(--color-body-strong);
  margin: 18px 0 38px;        /* Figma: ~24px above, ~38px to the CTA below */
}
.translate-start {
  /* Figma: full-width #E9AC3B CTA, radius 10, 24/33 white — but the button group
     carries 40% opacity (Figma node 2014 "Group 727" opacity=0.4), i.e. a
     disabled/inactive look because the flow isn't built. Presentational only
     (aria-disabled, no navigation). */
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: #E9AC3B;
  color: var(--color-white);
  font-family: inherit;   /* locale font: Noto Sans (LTR) / Noto Naskh Arabic (RTL) */
  font-size: 24px;
  line-height: 33px;
  font-weight: var(--font-weight-bold);
  padding: 17px 24px;
  opacity: 0.4;            /* Figma: disabled-state look */
  cursor: not-allowed;
}
.translate-note { margin-top: 20px; }
.translate-note__title {
  /* Figma: 16/22px, weight 700, #504639. */
  font-size: var(--font-size-md);
  line-height: 22px;
  font-weight: var(--font-weight-bold);
  color: #504639;
  margin: 0 0 4px;
}
.translate-note__text {
  font-size: var(--font-size-md);
  line-height: 22px;
  color: #504639;
  margin: 0;
}

/* ---- 2. How It Works step grid ----------------------------------------- */
.translate-steps {
  /* Figma: 2 columns; right column starts at ~675px of the 1200 container. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 150px;          /* Figma: right column starts at 675px of 1200 */
  row-gap: 40px;
}
.translate-step { text-align: start; }
.translate-step__num {
  /* Figma: 50px orange disc; the ~52px white numeral sits LOW — its baseline
     rests on the bottom of the disc (the Figma node group is 71px tall with the
     circle in its upper part and the digit centred in the taller box), so the
     digit reads as sitting on the circle's bottom edge with space above it. */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-orange);
  color: var(--color-white);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 18px;
}
.translate-step__num span {
  /* The step numerals are a design element (Figma: a 52px white digit sitting on
     the disc's bottom edge), not localized copy — the markup hard-codes 1-4. Pin
     them to the Latin face so they render identically in both languages: on /ar
     the body font is NotoNaskhArabic, whose digits sit differently in the em box,
     so the translateY below — tuned to Noto Sans's metrics — clipped them badly. */
  font-family: var(--font-primary);
  font-size: 52px;              /* Figma: ~52px numeral */
  font-weight: var(--font-weight-bold);
  line-height: 1;
  transform: translateY(0.16em);  /* drop the font's descent below the disc so the digit base touches the bottom */
}
.translate-step__title {
  /* Figma: 18/25px, weight 700, #333. */
  font-size: var(--font-size-lg);
  line-height: 25px;
  font-weight: var(--font-weight-bold);
  color: var(--color-body-strong);
  margin: 0 0 10px;
}
.translate-step__text {
  /* Figma: step descriptions are #333 text at 70% node opacity — distinct from the
     solid-#333 bold step titles. Replicate the design's opacity exactly (≈ #707070
     on white) rather than approximating with a fixed gray. */
  font-size: var(--font-size-lg);
  line-height: 25px;
  color: var(--color-body-strong);
  opacity: 0.7;
  margin: 0;
}
.translate-step__text + .translate-step__text { margin-top: 4px; }

/* ---- 3. Divider rule above the Quality section ------------------------- */
.translate-rule {
  /* Figma: full-container 1px rule, #D9D9D9. */
  border: 0;
  border-top: 1px solid #D9D9D9;
  margin: 0 0 40px;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 720px) {
  .translate-steps { grid-template-columns: 1fr; row-gap: 32px; }
}