/* ==========================================================================
   THE DESIGNERS HUB — Program template (FLOWING)
   ==========================================================================
   A faithful, flowing re-build of the pinned "Brand Design Identity" design
   (program.css / Figma #2129:2906) so EVERY service and course can reuse the
   exact same look with only its own content swapped — name, leader, price,
   photo, bullets and steps. Unlike program.css (which pins every node to a
   fixed Figma coordinate for one fixed content set), this flows, so it adapts
   to any number of bullets/steps and any copy length, at every breakpoint.

   Design language carried over 1:1 from Brand Design Identity:
     - dark hero over the program photo + a dark lede strip below it
     - "designed for": centred title between two gold hairlines, 2-col bullets,
       a centred italic quote in a thin-ruled box
     - "service": a 5px ink frame over a darkened photo, white title, labelled
       bullet groups each under a gold hairline
     - "program structure": an 8px ink frame, dark step cards with a gold
       "STEP N" chip, gold title, hairline and light body
     - "who leads": a dark panel with the leader portrait framed and offset to
       the left, gold eyebrow + hairline, name, role, 2-col bullets, bio
     - "outcomes": a dark panel over a darkened photo, bullets, a from → to
       line and a gold CTA
     - "pricing": a thin ink outer frame, a dark plate, a light inner card with
       a dark gold-ruled meta bar straddling its top, the amount, note and CTA
     - FAQ (accordion.css) and a dark closing CTA plate inside a thin frame

   Colours/borders are the same tokens program.css uses, so they resolve
   identically. --rule-gold is the third gold used only for hairlines.
   ========================================================================== */

.page-tpl { --rule-gold: #CD9926; }
.page-tpl main { position: relative; background: var(--bg); }

/* shared centred column — the effective canvas is 1440 (desktop) / 768 (tablet)
   / 390 (mobile) via canvas.js, so this width + padding reads like Figma. */
.tpl-wrap { max-width: 1280px; margin-inline: auto; padding-inline: 80px; }

.page-tpl h1,
.page-tpl h2,
.page-tpl h3 { font-family: var(--font-heading); text-transform: uppercase; }

/* --- bullets: a gold dot with a label, laid out in a responsive 2-col grid - */
.tpl-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 18px;
}
.tpl-bullets li {
  position: relative;
  padding-left: 24px;
  font-size: 16px;
  line-height: 1.35;
}
.tpl-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
}
/* light bullets sit on dark panels */
.tpl-bullets--light li { color: var(--white); }
.tpl-bullets--light li::before { background: var(--gold); }

/* the gold CTA button — the 239x52 component from the frame */
.tpl-btn.btn { display: inline-flex; min-height: 52px; padding: 0 40px; }

/* ==========================================================================
   1. HERO — dark, over the program photo, with a lede strip below
   ========================================================================== */
.tpl-hero {
  position: relative;
  color: var(--white);
  text-align: center;
  background: var(--color-surface-dark) center / cover no-repeat;
  background-image: linear-gradient(rgba(18,18,18,.55), rgba(18,18,18,.72)), var(--hero-img);
  padding: 104px 24px 84px;
}
.tpl-hero__title {
  color: var(--white);
  font-weight: var(--fw-bold);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
  margin: 0 auto;
  max-width: 900px;
}
.tpl-hero__sub {
  color: var(--white);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.5;
  margin: 20px auto 0;
  max-width: 760px;
}
.tpl-hero__note {
  color: #E2E2E2;
  font-size: clamp(14px, 1.7vw, 17px);
  line-height: 1.5;
  margin: 12px auto 0;
  max-width: 720px;
}
.tpl-hero__btn { margin-top: 32px; }

/* the dark lede strip directly under the hero */
.tpl-lede {
  background: var(--color-surface-dark);
  color: var(--white);
  text-align: center;
  padding: 40px 24px 48px;
}
.tpl-lede p {
  font-weight: var(--fw-med);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 760px;
}

/* ==========================================================================
   2. DESIGNED FOR — light, framed, gold hairlines + centred quote
   ========================================================================== */
.tpl-for { padding: 72px 0 8px; }
.tpl-for__frame {
  border: 1px solid var(--ink);
  padding: 48px clamp(24px, 5vw, 72px) 56px;
}
.tpl-rule { height: 1px; background: var(--gold); border: 0; }
.tpl-for__title {
  color: var(--color-text);
  font-weight: var(--fw-semi);
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.25;
  text-align: center;
  margin: 22px auto;
  max-width: 760px;
}
.tpl-for .tpl-bullets { margin-top: 40px; }
.tpl-for .tpl-bullets li { color: var(--color-text); }
.tpl-for__quote-box {
  margin: 40px auto 0;
  max-width: 600px;
  border: 1px solid var(--black);
  padding: 26px 32px;
}
.tpl-for__quote {
  color: var(--color-text);
  font-weight: var(--fw-med);
  font-style: italic;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.4;
  text-align: center;
  margin: 0;
}

/* ==========================================================================
   3. SERVICE — dark, a 5px ink frame over a darkened photo, labelled groups
   ========================================================================== */
.tpl-svc { padding: 64px 0 8px; }
.tpl-svc__frame {
  position: relative;
  border: 5px solid var(--ink);
  color: var(--white);
  overflow: hidden;
  background: var(--color-surface-dark);
  padding: 56px clamp(24px, 5vw, 60px) 60px;
}
/* the darkened photo sits behind everything in the frame */
.tpl-svc__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(30,30,30,.72), rgba(30,30,30,.82)), var(--svc-img) center / cover no-repeat;
  z-index: 0;
}
.tpl-svc__frame > * { position: relative; z-index: 1; }
.tpl-svc__title {
  color: var(--white);
  font-weight: var(--fw-med);
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.25;
  margin: 0 0 36px;
  max-width: 680px;
}
.tpl-svc__lbl {
  color: var(--white);
  font-weight: var(--fw-med);
  font-size: clamp(16px, 2vw, 19px);
  margin: 32px 0 0;
}
.tpl-svc__lbl:first-of-type { margin-top: 0; }
.tpl-svc .tpl-rule { margin: 12px 0 22px; }
.tpl-svc .tpl-bullets li { color: var(--white); font-weight: var(--fw-light); }

/* ==========================================================================
   4. PROGRAM STRUCTURE — light 8px ink frame, dark step cards
   ========================================================================== */
.tpl-steps { padding: 64px 0 8px; }
.tpl-steps__frame {
  border: 8px solid var(--ink);
  background: var(--bg);
  padding: 48px clamp(20px, 4vw, 40px) 0;
}
.tpl-steps__title {
  color: var(--color-text);
  font-weight: var(--fw-semi);
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.25;
  text-align: center;
  margin: 0 0 40px;
}
.tpl-steps__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
  /* the dark strip that closes the section in the frame */
  border-bottom: 50px solid var(--color-surface-dark);
  margin: 0 -40px;
  padding: 0 40px 40px;
}
.tpl-step {
  position: relative;
  background: var(--color-surface-dark);
  border: 1px solid var(--black);
  border-radius: 2px;
  padding: 22px 18px 20px;
}
.tpl-step__chip {
  color: var(--gold);
  font-weight: var(--fw-semi);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.tpl-step__title {
  color: var(--gold);
  font-weight: var(--fw-med);
  font-size: 15px;
  line-height: 1.2;
  text-transform: none;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bg);
}
.tpl-step__body {
  color: var(--bg);
  font-weight: var(--fw-light);
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}

/* ==========================================================================
   5. WHO LEADS — dark panel, portrait framed and offset to the left
   ========================================================================== */
.tpl-expert { padding: 72px 0 8px; }
.tpl-expert__inner {
  position: relative;
  background: var(--color-surface-dark);
  color: var(--white);
  display: grid;
  grid-template-columns: 360px 1fr;
  align-items: center;
  gap: 56px;
  padding: 56px 56px 56px 0;
}
/* the portrait sits in the left column but overhangs the panel's left edge */
.tpl-expert__photo {
  width: 340px;
  height: 466px;
  object-fit: cover;
  object-position: center top;   /* keep faces in frame — people photos crop from the top */
  border: 10px solid var(--ink);
  margin: -40px 0 -40px -20px;
  justify-self: start;
  background: var(--ink);
}
.tpl-expert__body { min-width: 0; }
.tpl-expert__eyebrow {
  color: var(--gold);
  font-weight: var(--fw-bold);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.tpl-expert__body .tpl-rule { background: var(--rule-gold); }
.tpl-expert__eyebrow + .tpl-rule { width: 240px; margin-bottom: 20px; }
.tpl-expert__name {
  color: var(--white);
  font-weight: var(--fw-med);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.1;
  margin: 0;
}
.tpl-expert__role {
  color: var(--white);
  font-size: clamp(15px, 1.8vw, 18px);
  margin: 8px 0 24px;
}
.tpl-expert .tpl-bullets { row-gap: 14px; }
.tpl-expert .tpl-bullets li { color: var(--white); font-weight: var(--fw-light); }
.tpl-expert__body .tpl-rule--btm { margin: 26px 0 20px; }
.tpl-expert__bio {
  color: var(--white);
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   6. OUTCOMES — dark panel over a darkened photo, from → to line, CTA
   ========================================================================== */
.tpl-out { padding: 72px 0 8px; }
.tpl-out__inner {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-dark);
  color: var(--white);
  padding: 56px clamp(24px, 5vw, 60px) 60px;
}
.tpl-out__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(24,24,24,.74), rgba(24,24,24,.84)), var(--out-img) center / cover no-repeat;
  z-index: 0;
}
.tpl-out__inner > * { position: relative; z-index: 1; }
.tpl-out__title {
  color: var(--white);
  font-weight: var(--fw-med);
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.25;
  margin: 0 0 36px;
  max-width: 640px;
}
.tpl-out .tpl-bullets { margin-bottom: 28px; }
.tpl-out__line {
  color: var(--white);
  font-size: clamp(16px, 1.9vw, 18px);
  line-height: 1.5;
  margin: 0 0 32px;
}
.tpl-out__line span { color: var(--gold); }

/* ==========================================================================
   7. PRICING — thin ink frame, dark plate, light inner card + gold meta bar
   ========================================================================== */
.tpl-price { padding: 64px 0 8px; }
.tpl-price__frame {
  border: 1px solid var(--ink);
  background: var(--bg);
  padding: 40px;
}
.tpl-price__plate {
  background: var(--color-surface-dark);
  padding: 56px clamp(24px, 5vw, 60px) 60px;
  text-align: center;
}
.tpl-price__title {
  color: var(--bg);
  font-weight: var(--fw-med);
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.25;
  margin: 0 0 40px;
}
.tpl-price__card {
  background: var(--bg);
  max-width: 752px;
  margin: 0 auto;
  padding: 0 32px 40px;
}
/* the dark meta bar straddles the top edge of the light card */
.tpl-price__meta {
  position: relative;
  background: var(--color-surface-dark);
  border-top: 1px solid var(--rule-gold);
  color: var(--gold);
  font-weight: var(--fw-med);
  font-size: clamp(15px, 1.9vw, 19px);
  line-height: 1.4;
  padding: 18px 24px;
  margin: -30px auto 32px;
  max-width: 528px;
}
.tpl-price__amount {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: var(--fw-semi);
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1;
  margin: 0 0 8px;
}
.tpl-price__note {
  color: var(--color-text);
  font-size: 15px;
  margin: 0 0 26px;
}

/* ==========================================================================
   8. FAQ — accordion.css supplies the control; geometry only here
   ========================================================================== */
.tpl-faq { padding: 72px 0 8px; }
.tpl-faq__title {
  color: var(--color-text);
  font-weight: var(--fw-semi);
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.25;
  margin: 0 0 32px;
}
.tpl-faq__list { display: flex; flex-direction: column; gap: 16px; }
.tpl-faq__list .cn-acc__head { padding: 15px 20px; min-height: 48px; }
.tpl-faq__list .cn-acc__panel { padding: 16px 20px; border-top: 0; }
.tpl-faq__list .cn-acc__a { font-size: 15px; line-height: 1.5; }

/* ==========================================================================
   9. CLOSING CTA — thin frame, dark plate
   ========================================================================== */
.tpl-cta { padding: 72px 0 96px; }
.tpl-cta__frame { border: 1px solid var(--ink); background: var(--bg); padding: 40px; }
.tpl-cta__plate {
  background: var(--color-surface-dark);
  text-align: center;
  padding: 52px clamp(24px, 5vw, 60px);
}
.tpl-cta__title {
  color: var(--bg);
  font-weight: var(--fw-med);
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.25;
  margin: 0 auto 18px;
  max-width: 800px;
}
.tpl-cta__text {
  color: var(--white);
  font-weight: var(--fw-light);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.5;
  margin: 0 auto 28px;
  max-width: 820px;
}

/* ==========================================================================
   TABLET (effective 768 canvas) — tighten padding, keep 2-col where it fits
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
  .tpl-wrap { padding-inline: 40px; }
  .tpl-expert__inner { grid-template-columns: 300px 1fr; gap: 36px; padding-right: 40px; }
  .tpl-expert__photo { width: 280px; height: 384px; }
}

/* ==========================================================================
   MOBILE (effective 390 canvas) — single column throughout
   ========================================================================== */
@media (max-width: 767px) {
  .tpl-wrap { padding-inline: 16px; }
  .tpl-bullets { grid-template-columns: 1fr; row-gap: 14px; }

  .tpl-hero { padding: 72px 20px 56px; }
  .tpl-lede { padding: 32px 20px 40px; }

  .tpl-for { padding: 48px 0 8px; }
  .tpl-for__frame { padding: 32px 20px 40px; }
  .tpl-for__quote-box { padding: 20px; }

  .tpl-svc__frame { border-width: 4px; padding: 36px 20px 40px; }
  .tpl-steps__frame { border-width: 4px; padding: 32px 16px 0; }
  .tpl-steps__grid { grid-template-columns: 1fr; margin: 0 -16px; padding: 0 16px 32px; }

  /* who leads stacks: portrait on top, centred, no overhang */
  .tpl-expert__inner { grid-template-columns: 1fr; gap: 28px; padding: 0 20px 40px; }
  .tpl-expert__photo {
    width: 240px; height: 300px; margin: -28px auto 0;
    border-width: 6px; justify-self: center;
  }
  .tpl-expert__eyebrow + .tpl-rule { width: 180px; }

  .tpl-out__inner { padding: 36px 20px 40px; }

  .tpl-price__frame { padding: 20px; }
  .tpl-price__plate { padding: 36px 20px 40px; }
  .tpl-price__card { padding: 0 16px 32px; }
  .tpl-price__meta { padding: 16px; }

  .tpl-cta { padding: 48px 0 72px; }
  .tpl-cta__frame { padding: 20px; }
  .tpl-cta__plate { padding: 40px 20px; }
}

/* ==========================================================================
   RTL — mirror the bullet dots and the offset portrait for Arabic
   ========================================================================== */
html[dir="rtl"] .tpl-bullets li { padding-left: 0; padding-right: 24px; }
html[dir="rtl"] .tpl-bullets li::before { left: auto; right: 0; }
html[dir="rtl"] .tpl-expert__inner { padding: 56px 0 56px 56px; }
html[dir="rtl"] .tpl-expert__photo { margin: -40px -20px -40px 0; }
@media (max-width: 767px) {
  html[dir="rtl"] .tpl-expert__inner { padding: 0 20px 40px; }
  html[dir="rtl"] .tpl-expert__photo { margin: -28px auto 0; }
}