/* =====================================================================
   UGTM FAE child - /about/ and /welcome/ institutional presentation.

   Loaded only by page-about.php and by single.php for the regional-office
   message, so nothing here can reach the shell, the homepage, the listings
   or any other article. It adds no colour of its own: every value below is
   an existing design token, and the two brand colours are the site's own
   pink (#F090B0) and gold (#B09050).

   Every selector is prefixed .ugtm-value, .ugtm-highlight, .ugtm-commit,
   .ugtm-digital or .ugtm-message, except the hero watermark, which is
   scoped to the About page's body class.
   ===================================================================== */

/* --- 1. hero watermark ------------------------------------------------
   The authentic emblem, set into the existing dark hero panel rather than
   added as a new element, so no template needs to emit extra markup. The
   panel is already position:relative/overflow:hidden, and its :after (the
   pink circle) is untouched - this uses :before, which was free. */

body.page-id-201 .inner-hero-panel::before {
  content: "";
  position: absolute;
  inset-inline-end: -28px;
  top: -34px;
  width: 190px;
  height: 190px;
  background: url("../../../../uploads/2026/07/cropped-cropped-logo-300x300.png") no-repeat center / contain;
  opacity: .14;
  pointer-events: none;
}

/* --- 2. highlighted statement (رسالتنا) -------------------------- */

.ugtm-highlight {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--color-brand-gold);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 30px);
  max-width: 820px;
}

.ugtm-highlight p {
  margin: 0 0 1em;
  font-size: var(--fs-body);
  line-height: 1.95;
  color: var(--color-ink);
}

.ugtm-highlight p:last-child { margin-bottom: 0; }

/* --- 3. value rows (قيمنا ومبادئنا) --------------------------------
   Five groups. A three-column grid would leave an orphan on the last row,
   so these are full-width rows: the label keeps a fixed measure beside its
   values on wide screens and stacks above them on narrow ones. */

.ugtm-values { display: grid; gap: 14px; }

.ugtm-value {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 6px 26px;
  align-items: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--color-brand-pink);
  border-radius: var(--radius-md);
  padding: 20px 22px;
}

.ugtm-value:nth-child(even) { border-inline-start-color: var(--color-brand-gold); }

.ugtm-value-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.5;
  color: var(--color-ink);
  min-width: 0;
}

.ugtm-value-text {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: 1.85;
  color: var(--color-muted);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* --- 4. digital services (التحول الرقمي) ---------------------------
   A quiet gold rule above the existing tile grid, enough to set the section
   apart without inventing a second card style. */

.ugtm-digital-note {
  margin: 0 0 18px;
  padding-inline-start: 16px;
  border-inline-start: 3px solid var(--color-brand-gold);
  font-size: var(--fs-meta);
  line-height: 1.8;
  color: var(--color-muted);
  max-width: 760px;
}

/* --- 5. closing commitment (التزامنا) ------------------------------ */

.ugtm-commit {
  background: linear-gradient(135deg, var(--color-ink), #3a2a18);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.ugtm-commit::after {
  content: "";
  position: absolute;
  inset: auto -50px -70px auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(240, 144, 176, .16);
  pointer-events: none;
}

.ugtm-commit-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: var(--color-brand-pink);
}

.ugtm-commit p {
  margin: 0;
  position: relative;
  z-index: 1;
  font-size: var(--fs-body);
  line-height: 2;
  color: rgba(255, 255, 255, .94);
  max-width: 820px;
}

/* =====================================================================
   6. The regional-office message (/welcome/).
   Lives inside .entry-content within the article's 680px measure, so the
   reading width is already right and is not overridden here.
   ===================================================================== */

.ugtm-message-mark {
  display: block;
  margin: 0 auto 22px;
  width: 92px;
  height: 92px;
}

.ugtm-basmala {
  margin: 0 0 26px;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.2vw, 1.5rem);
  line-height: 1.9;
  color: var(--color-brand-gold);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

/* Thin rules either side, drawn rather than typed, so no decorative
   character is read out by a screen reader. */
.ugtm-basmala::before,
.ugtm-basmala::after {
  content: "";
  height: 1px;
  background: linear-gradient(to left, transparent, var(--color-border));
}

.ugtm-basmala::after { background: linear-gradient(to right, transparent, var(--color-border)); }

.ugtm-message p {
  margin: 0 0 1.15em;
  font-size: var(--fs-body);
  line-height: 2.05;
  color: var(--color-ink);
  text-align: start;
}

.ugtm-message-final {
  margin: 28px 0 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--color-brand-pink);
  border-radius: var(--radius-md);
  padding: clamp(18px, 3vw, 26px);
}

.ugtm-message-final p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 2.3vw, 1.2rem);
  line-height: 1.95;
  color: var(--color-ink);
}

.ugtm-signature {
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  text-align: start;
}

.ugtm-signature strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.6;
  color: var(--color-ink);
}

.ugtm-signature span {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-meta);
  color: var(--color-muted);
}

/* --- 7. narrow screens ------------------------------------------------ */

@media (max-width: 48rem) {
  body.page-id-201 .inner-hero-panel::before {
    width: 140px;
    height: 140px;
    inset-inline-end: -20px;
    top: -24px;
  }

  .ugtm-value {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 16px 18px;
  }

  .ugtm-basmala { gap: 10px; }

  .ugtm-message-mark { width: 76px; height: 76px; }
}