/* =============================================================================
   Direct Skills UAE — shared inner-page pieces
   Loaded by frontend/partials/page-header.blade.php on every inner page.
   · .ds-phead   parchment page header: breadcrumb, title, arch photograph
   · .ds-crumbs  the breadcrumb trail
   · .ds-prose   typography for rich text written in the admin or imported
   · .ds-share   the "share this" row (frontend/partials/share.blade.php)
   Same rules as every ds-* file: colours only through --ds-* tokens, and no
   :hover / .is-active rule changes padding, margin, gap, width or font.
   ========================================================================== */

/* ---------------------------------------------------------- page header */
.ds-phead { position: relative; background: var(--ds-parchment); padding: 40px 0 84px; overflow: hidden; }
.ds-phead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; border-top: 1px solid var(--ds-gold); border-bottom: 1px solid rgb(var(--ds-gold-rgb) / .45); pointer-events: none; }
.ds-phead__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.ds-phead--plain .ds-phead__grid { grid-template-columns: minmax(0, 900px); }
.ds-phead__copy { min-width: 0; }

.ds-crumbs ol { list-style: none; margin: 0 0 38px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; font-size: .86rem; line-height: 1.5; color: var(--ds-muted); }
.ds-crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.ds-crumbs li + li::before { content: ""; flex: none; width: 5px; height: 5px; margin: 0 12px; transform: rotate(45deg); background: var(--ds-gold); }
.ds-crumbs a { color: var(--ds-ink); font-weight: 500; box-shadow: inset 0 -1px 0 transparent; transition: box-shadow .25s var(--ds-ease), color .25s var(--ds-ease); }
.ds-crumbs a:hover { box-shadow: inset 0 -1px 0 var(--ds-gold); color: var(--ds-gold-deep); }
.ds-crumbs [aria-current] { overflow-wrap: anywhere; }

.ds-phead__eyebrow { margin-bottom: 18px; font-family: var(--ds-font-caps); font-size: .8rem; letter-spacing: .24em; line-height: 1.6; text-transform: uppercase; color: var(--ds-gold-deep); text-wrap: balance; }
/* The rule follows the last word, so a long eyebrow that wraps keeps it beside its text. */
.ds-phead__eyebrow::after { content: ""; display: inline-block; width: 56px; height: 1px; margin-left: 16px; vertical-align: middle; background: var(--ds-gold); }
.ds-phead__title { font-size: clamp(2.05rem, 4vw, 3.5rem); text-wrap: balance; overflow-wrap: break-word; }
.ds-phead__lede { margin-top: 22px; }
.ds-phead__actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.ds-phead__actions > * { min-width: 0; }

/* The photograph. Banner photos are landscape (1600×900), so the arch is a
   landscape 4:3 as wide as the text column, with a shallow curve given in
   percentages (a 999px radius is scaled down by the browser and flattens
   unpredictably). A tall, narrow arch showed only a central slice and cut
   people's faces off at the edges — DESIGN_DIRECTION §0.1. */
.ds-phead__media { position: relative; justify-self: end; width: 100%; max-width: 600px; min-width: 0; }
.ds-phead__media::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 1px solid rgb(var(--ds-gold-rgb) / .65); border-radius: 50% 50% 14px 14px / 80px 80px 14px 14px; pointer-events: none; }
.ds-phead__arch { aspect-ratio: 4 / 3; border-radius: 50% 50% 14px 14px / 80px 80px 14px 14px; box-shadow: var(--ds-shadow); }
.ds-phead__arch img { object-position: 50% 30%; }
.ds-phead__seal { --size: 88px; position: absolute; left: -34px; bottom: 44px; z-index: 1; font-size: 1.35rem; }

/* --------------------------------------------------------------- prose */
.ds-prose { color: var(--ds-text); font-size: 1.02rem; line-height: 1.78; overflow-wrap: break-word; min-width: 0; }
.ds-prose > :first-child { margin-top: 0; }
.ds-prose > * + * { margin-top: 1em; }
.ds-prose p { margin-bottom: 0; }
.ds-prose h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-top: 1.6em; }
.ds-prose h3 { font-size: 1.38rem; font-weight: 400; margin-top: 1.7em; }
.ds-prose h4 { font-size: 1.1rem; font-weight: 500; margin-top: 1.5em; color: var(--ds-ink-2); }
.ds-prose h5, .ds-prose h6 { font-family: var(--ds-font-body); font-size: 1rem; font-weight: 600; color: var(--ds-ink); margin-top: 1.3em; }
.ds-prose h2 + *, .ds-prose h3 + *, .ds-prose h4 + * { margin-top: .6em; }
.ds-prose strong, .ds-prose b { font-weight: 600; color: var(--ds-ink); }
.ds-prose a { color: var(--ds-ink); font-weight: 500; box-shadow: inset 0 -1px 0 var(--ds-gold); transition: color .25s var(--ds-ease); }
.ds-prose a:hover { color: var(--ds-gold-deep); }
.ds-prose ul, .ds-prose ol { list-style: none; margin-bottom: 0; padding: 0; display: grid; gap: .55em; }
.ds-prose ul > li { position: relative; padding-left: 1.7em; }
.ds-prose ul > li::before { content: ""; position: absolute; left: .25em; top: .72em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--ds-gold); }
.ds-prose ol { counter-reset: ds-ol; }
.ds-prose ol > li { position: relative; padding-left: 2.6em; counter-increment: ds-ol; }
.ds-prose ol > li::before { content: counter(ds-ol, decimal-leading-zero); position: absolute; left: 0; top: .28em; font-family: var(--ds-font-caps); font-size: .78rem; font-weight: 600; letter-spacing: .06em; line-height: 1.4; color: var(--ds-gold-deep); }
.ds-prose li > ul, .ds-prose li > ol { margin-top: .55em; }
.ds-prose li > p { margin: 0; }
.ds-prose blockquote { margin-left: 0; margin-right: 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--ds-gold); color: var(--ds-muted); }
.ds-prose hr { border: 0; height: 1px; background: var(--ds-line); margin: 2em 0; }
.ds-prose img { border-radius: 3px; height: auto; }
.ds-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .95rem; line-height: 1.55; border-top: 1px solid var(--ds-gold); }
.ds-prose th, .ds-prose td { padding: 11px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ds-line); }
.ds-prose th { font-weight: 600; color: var(--ds-ink); background: var(--ds-parchment); }
.ds-prose td > p, .ds-prose th > p { margin: 0; }

/* --------------------------------------------------------------- share */
.ds-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding-top: 22px; border-top: 1px solid var(--ds-line); }
.ds-share__label { font-family: var(--ds-font-caps); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ds-gold-deep); margin-right: 6px; }
.ds-share a, .ds-share button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid var(--ds-line); border-radius: 3px; background: var(--ds-paper); color: var(--ds-ink); font-size: .86rem; font-weight: 500; cursor: pointer; transition: border-color .25s var(--ds-ease), background-color .25s var(--ds-ease), color .25s var(--ds-ease); }
.ds-share a:hover, .ds-share button:hover { border-color: var(--ds-gold); background: var(--ds-parchment); color: var(--ds-gold-deep); }
.ds-share svg { width: 15px; height: 15px; flex: none; }
/* Social share buttons are icon-only square chips so the whole row — label,
   networks and Copy link — stays on one line inside the narrow course column
   (the name of each network is on its title/aria-label). */
.ds-share__net { width: 40px; padding: 0; justify-content: center; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  .ds-phead__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .ds-phead__media::before, .ds-phead__arch { border-radius: 50% 50% 12px 12px / 60px 60px 12px 12px; }
  .ds-phead__seal { --size: 74px; left: -22px; font-size: 1.15rem; }
}
@media (max-width: 768px) {
  .ds-phead { padding: 26px 0 56px; }
  .ds-phead__grid, .ds-phead--plain .ds-phead__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ds-crumbs ol { margin-bottom: 26px; font-size: .82rem; }
  /* The current page is the heading right below; on a phone the trail stops at its parent. */
  .ds-crumbs li:last-child:not(:first-child):not(:nth-child(2)) { display: none; }
  .ds-phead__eyebrow { font-size: .7rem; letter-spacing: .16em; }
  .ds-phead__eyebrow::after { width: 36px; margin-left: 12px; }
  .ds-phead__media { justify-self: stretch; max-width: none; margin-right: 12px; }
  .ds-phead__media::before { inset: 12px -12px -12px 12px; border-radius: 50% 50% 12px 12px / 56px 56px 12px 12px; }
  .ds-phead__arch { aspect-ratio: 16 / 10; border-radius: 50% 50% 12px 12px / 56px 56px 12px 12px; }
  .ds-phead__seal { --size: 64px; left: 14px; bottom: -18px; font-size: 1rem; }
  .ds-phead__actions .ds-btn { flex: 1 1 auto; }
  .ds-prose { font-size: 1rem; }
  .ds-prose th, .ds-prose td { padding: 9px 12px; }
}