/* ==========================================================================
   THE DESIGNERS HUB — Article (blog post), flowing layout
   ==========================================================================
   The client's articles have no Figma frame of their own (the pinned
   article.css matches one placeholder article only, #2129:2567). These posts
   vary in length and section count, so they flow in a centred column instead of
   being pixel-pinned — reusing the brand's article typography (Inter, the gold
   accent, the dark CTA plate) so they read as the same design.

   Flows within the shared canvas: a centred max-width column sits inside the
   1440 (desktop) / 768 (tablet) / 390 (mobile) canvas, so the header/footer
   chrome and the canvas scaling are untouched.
   ========================================================================== */

.page-post main { position: relative; }

.post {
  max-width: 764px;
  margin-inline: auto;
  padding: 64px 24px 96px;
  color: var(--grey-700);
  font-family: var(--font-body);
}

/* ---------- head ---------- */
.post-meta {
  color: var(--gold-deep);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.post-title {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(27px, 4.4vw, 40px);
  line-height: 1.12;
  text-transform: uppercase;
  margin: 0;
}

.post-title__rule {
  width: 72px;
  height: 4px;
  background: var(--gold);
  margin: 28px 0 0;
}

/* ---------- body ---------- */
.post-body { margin-top: 44px; }

.post-body h2 {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: var(--fw-semi);
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.2;
  text-transform: uppercase;
  margin: 52px 0 18px;
}

.post-body h3 {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: var(--fw-semi);
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.25;
  text-transform: uppercase;
  margin: 32px 0 14px;
}

.post-body p {
  font-size: 18px;
  line-height: 1.72;
  margin: 0 0 20px;
}

.post-body h2 + p,
.post-body h3 + p { margin-top: 0; }

/* the short bold lead that introduces a bullet list ("Questions ... :") */
.post-lead {
  color: var(--color-text);
  font-weight: var(--fw-semi);
  font-size: 18px;
  line-height: 1.5;
  margin: 24px 0 14px;
}

/* ---------- bullet list ---------- */
.post-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.post-list li {
  position: relative;
  padding-left: 26px;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 12px;
}

.post-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

/* ---------- closing CTA ---------- */
.post-cta {
  margin: 72px auto 0;
  max-width: 764px;
  background: var(--color-surface-dark);
  border-radius: 2px;
  padding: 48px 40px;
  text-align: center;
}

.post-cta__title {
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: var(--fw-semi);
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.post-cta__text {
  color: #D9D9D9;
  font-size: 17px;
  line-height: 1.6;
  margin: 0 auto 28px;
  max-width: 560px;
}

.post-cta .btn { display: inline-block; }

/* ---------- related ---------- */
.post-related {
  max-width: 764px;
  margin: 72px auto 0;
  padding: 0 24px;
}

.post-related__label {
  color: var(--grey-400);
  font-weight: var(--fw-semi);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.post-related__item { margin-bottom: 18px; }

.post-related__item a {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: var(--fw-semi);
  font-size: 18px;
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
}

.post-related__item a:hover,
.post-related__item a:focus-visible { color: var(--gold-deep); }

/* ==========================================================================
   OFFERING pages (services / private courses) — same flowing shell, extra
   components: a hero tagline + CTA, numbered program steps, a "who leads"
   block, a price card and an FAQ (reusing accordion.css + faq.js).
   ========================================================================== */

.post-tagline {
  color: var(--color-text);
  font-weight: var(--fw-semi);
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.4;
  margin: 24px 0 0;
}

.post-hero__cta { margin-top: 28px; }
.post-hero__cta .btn { display: inline-block; }

.post-section__eyebrow {
  color: var(--gold-deep);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 52px 0 14px;
}

/* ---------- numbered program steps ---------- */
.post-steps { margin: 8px 0 24px; padding: 0; list-style: none; counter-reset: step; }

.post-step {
  position: relative;
  padding: 20px 0 20px 60px;
  border-top: 1px solid #E2E2E2;
}
.post-step:last-child { border-bottom: 1px solid #E2E2E2; }

.post-step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-dark);
  color: var(--gold);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 17px;
  border-radius: 50%;
}

.post-step__title {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: var(--fw-semi);
  font-size: 18px;
  line-height: 1.3;
  text-transform: uppercase;
  margin: 4px 0 6px;
}
.post-step__desc { font-size: 17px; line-height: 1.6; margin: 0; }

/* ---------- who leads ---------- */
.post-leads {
  margin: 8px 0 8px;
  padding: 28px 32px;
  background: #F1F1F1;
  border-left: 4px solid var(--gold);
}
.post-leads__name {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: 20px;
  text-transform: uppercase;
  margin: 0;
}
.post-leads__role { color: var(--gold-deep); font-weight: var(--fw-semi); font-size: 15px; margin: 6px 0 14px; }
.post-leads__bio { font-size: 17px; line-height: 1.65; margin: 0 0 12px; }
.post-leads__bio:last-child { margin-bottom: 0; }

/* ---------- price card ---------- */
.post-price {
  margin: 40px 0 8px;
  padding: 36px 32px;
  background: var(--color-surface-dark);
  text-align: center;
}
.post-price__name {
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: var(--fw-semi);
  font-size: clamp(18px, 2.6vw, 24px);
  text-transform: uppercase;
  margin: 0 0 10px;
}
.post-price__meta { color: #BDBDBD; font-size: 15px; line-height: 1.5; margin: 0 0 18px; }
.post-price__amount {
  color: var(--gold);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(30px, 5vw, 40px);
  line-height: 1;
  margin: 0 0 6px;
}
.post-price__note { color: #BDBDBD; font-size: 14px; margin: 0 0 24px; }
.post-price .btn { display: inline-block; }

/* ---------- FAQ (accordion.css + faq.js) ---------- */
.post-faq { margin-top: 20px; }
.post-faq .cn-acc { margin-bottom: 12px; }
.post-faq .cn-acc__head { padding: 15px 20px; min-height: 48px; }
.post-faq .cn-acc__panel { padding: 16px 20px; border-top: 0; }
.post-faq .cn-acc__a { font-size: 15px; line-height: 22px; }

/* narrow screens — tighten the padding */
@media (max-width: 767px) {
  .post { padding: 44px 20px 72px; }
  .post-cta { padding: 36px 24px; }
  .post-body p, .post-list li { font-size: 17px; }
  .post-leads { padding: 22px 20px; }
  .post-price { padding: 30px 22px; }
}

/* ==== RTL OVERLAY (auto — tools/rtl-gen.js; mirrors horizontal geometry for Arabic, scoped to html[dir=rtl], changed decls only) ==== */
html[dir="rtl"] .post-list li {
    padding-right: 26px;
    padding-left: 0
}
html[dir="rtl"] .post-list li::before {
    right: 2px;
    left: auto
}
html[dir="rtl"] .post-step {
    padding: 20px 60px 20px 0
}
html[dir="rtl"] .post-step::before {
    right: 0;
    left: auto
}
html[dir="rtl"] .post-leads {
    border-right: 4px solid var(--gold);
    border-left: initial
}