/* ============================= ABOUT ============================= */

.ab-band .media { aspect-ratio: 21 / 8; }

/* Key facts beside the overview */
.ab-facts { display: grid; margin-top: 12px; border-top: 1px solid var(--line); }
.ab-facts > div { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.ab-facts dt { color: var(--muted); }
.ab-facts dd { font-weight: 600; }

/* Vision & mission */
.ab-vm-grid { gap: clamp(20px, 3vw, 48px); }
.ab-vm { display: grid; gap: 16px; align-content: start; padding-top: 24px; border-top: 2px solid var(--basalt); }
.ab-vm .t-h3 { font-weight: 500; line-height: 1.55; }
html[lang="ar"] .ab-vm .t-h3 { line-height: 1.85; }

/* Values: ruled five-column row */
.ab-values { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ab-value { display: grid; gap: 12px; align-content: start; padding: 28px 20px 8px 0; }
[dir="rtl"] .ab-value { padding: 28px 0 8px 20px; }
.ab-value + .ab-value { padding-inline-start: 20px; border-inline-start: 1px solid var(--line); }
.ab-value .icon { width: 32px; height: 32px; color: var(--accent); }
.ab-value p { color: var(--muted); font-size: var(--fs-small); line-height: 1.75; }

/* Strategic objectives */
.ab-goals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.ab-goal { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2.4vw, 32px); background: var(--surface); border-top: 2px solid var(--oxide-light); }
.ab-goal p:last-child { color: var(--muted); font-size: var(--fs-small); line-height: 1.8; }

/* Leadership */
.ab-leader-card { margin-top: 12px; padding: 28px; background: var(--basalt); color: var(--limewash); display: grid; gap: 6px; border-inline-start: 3px solid var(--oxide); }
.ab-leader-card__name { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }
.ab-leader-card__role { color: rgba(246,243,236,.7); font-size: var(--fs-small); }
.ab-timeline { display: grid; margin-top: 28px; border-top: 1px solid var(--line); }
.ab-timeline li { display: grid; grid-template-columns: 80px 1fr; gap: 16px; align-items: baseline; padding-block: 14px; border-bottom: 1px solid var(--line); }
.ab-timeline span { font-family: var(--font-latin); font-weight: 700; color: var(--accent); }
.ab-timeline p { font-size: var(--fs-small); }

/* Group structure */
.ab-holding { display: grid; justify-items: center; }
.ab-holding__root { padding: 16px 36px; background: var(--oxide); color: var(--limewash); font-weight: 700; }
.ab-holding__stem { width: 1px; height: 40px; background: var(--line); }
.ab-holding__row { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); width: 100%; padding-top: 40px; }
.ab-holding__row::before { content: ""; position: absolute; top: 0; left: 16.66%; right: 16.66%; height: 1px; background: var(--line); }
.ab-holding__node { position: relative; display: grid; gap: 8px; align-content: start; padding: clamp(20px, 2.4vw, 28px); background: var(--surface); border-top: 2px solid var(--line); }
.ab-holding__node::before { content: ""; position: absolute; top: -42px; left: 50%; width: 1px; height: 40px; background: var(--line); }
.ab-holding__node.is-current { border-top-color: var(--oxide-light); }

/* Licensing rows */
.ab-legal { display: grid; border-top: 1px solid var(--line); }
.ab-legal > div { display: grid; grid-template-columns: minmax(130px, 32%) 1fr; gap: 6px 24px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.ab-legal dt { font-weight: 700; }
.ab-legal dd { color: var(--muted); }

@media (max-width: 1100px) {
  .ab-values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-value:nth-child(4) { padding-inline-start: 0; border-inline-start: 0; }
  .ab-value:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 960px) {
  .ab-goals, .ab-holding__row { grid-template-columns: 1fr; }
  .ab-holding__row::before, .ab-holding__node::before { content: none; }
  .ab-holding__row { padding-top: 20px; }
  .ab-band .media { aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
  .ab-values { grid-template-columns: 1fr; }
  .ab-value, [dir="rtl"] .ab-value { padding: 20px 0 16px; }
  .ab-value + .ab-value { padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid var(--line); }
  .ab-legal > div, .ab-facts > div { grid-template-columns: 1fr; gap: 4px; }
}