/* ==========================================================
   FOUNDER BIOGRAPHY + FOUNDER PHILOSOPHY — MERGED SINGLE FILE
   (Design + functionality locked; nothing removed)
========================================================== */

/* ---- Shared Variables (merged from both blocks, identical values) ---- */
:root{
  --secY: 44px;
  --gridGap: 20px;
  --cardB: 1px solid rgba(2,6,23,.08);
  --cardShadow:
    0 22px 40px rgba(0,0,0,.08),
    0 10px 18px rgba(0,0,0,.06),
    0 0 0 1px rgba(255,255,255,.55) inset;
}

/* ==========================================================
   FOUNDER BIOGRAPHY — BETTER VISUAL HIERARCHY (CONSISTENT)
========================================================== */

/* Page rhythm */
.founderBioPage .section{ padding: var(--secY) 0; }

/* Soft spiritual tint like your contact/home */
.founderBioPage .section--tint{
  background:
    radial-gradient(circle at 18% 22%, rgba(255,92,0,.12), transparent 55%),
    radial-gradient(circle at 82% 28%, rgba(0,19,105,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,19,105,.04), rgba(255,92,0,.03));
}

/* Hero */
.pageHero{
  padding: 28px 0 18px;
  background:
    radial-gradient(circle at 12% 30%, rgba(255,92,0,.12), transparent 55%),
    radial-gradient(circle at 86% 20%, rgba(0,19,105,.12), transparent 55%),
    linear-gradient(180deg, rgba(0,19,105,.06), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(2,6,23,.08);
}

.pageHero__title{
  margin:0 0 6px;
  letter-spacing:.3px;
}
.pageHero__sub{
  margin:0;
  max-width:72ch;
}

/* Layout shell */
.contentShell{ display:block; }

.contentGrid{
  display:grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: var(--gridGap);
  align-items:start;
}

/* ---------- LEFT: FIGURE CARD (upgraded) ---------- */
.bioFigure{
  margin:0;
  background:#fff;
  border-radius: 18px;
  border: var(--cardB);
  box-shadow: var(--cardShadow);
  overflow:hidden;

  /* feels premium */
  transform: translateZ(0);
}

/* sticky feels pro on long content */
@media (min-width: 981px){
  .bioFigure{ position:sticky; top: calc(var(--siteHeaderH) + 16px); }
}

/* media area */
.bioFigure__media{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,92,0,.16), transparent 55%),
    radial-gradient(circle at 70% 22%, rgba(0,19,105,.16), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,0));
  display:grid;
  place-items:center;
}

.bioFigure__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* if image missing => still looks elegant */
.bioFigure__media.is-missing::after{
  content:"Portrait";
  font-family:"Cinzel", serif;
  font-weight:700;
  letter-spacing:.7px;
  color: rgba(0,19,105,.75);
  font-size:18px;
}

/* badge */
.bioFigure__badge{
  position:absolute;
  left:12px;
  top:12px;
  padding:8px 12px;
  border-radius:999px;
  background: rgb(255, 255, 255);
  border: 1px solid rgba(255,92,0,.38);
  color: var(--secondary);
  font-weight:800;
  font-size:12px;
  letter-spacing:.3px;
  backdrop-filter: blur(6px);
}

/* caption */
.bioFigure__cap{
  padding:14px 14px 16px;
  border-top: 1px solid rgba(2,6,23,.08);
  background: linear-gradient(180deg, rgba(0,19,105,.02), rgba(255,255,255,0));
}
.bioFigure__name{
  font-family:"Cinzel", serif;
  font-weight:800;
  color: var(--secondary);
  letter-spacing:.4px;
  margin:0 0 4px;
}
.bioFigure__meta{
  margin:0;
  font-size:13px;
}

/* ---------- RIGHT: CONTENT CARD (more premium) ---------- */
.contentCard{
  background:#fff;
  border-radius: 18px;
  border: var(--cardB);
  box-shadow: var(--cardShadow);
  overflow:hidden;
}

/* cap with gradient + subtle inner line */
.contentCard__cap{
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(0,19,105,.98), rgba(0,19,105,.88));
  color:#fff;
  position:relative;
}
.contentCard__cap::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background: rgba(255,255,255,.14);
}
.contentCard__title{
  margin:0;
  font-family:"Cinzel", serif;
  font-weight:800;
  letter-spacing:.7px;
  text-transform:uppercase;
  font-size:16px;
}

/* body */
.contentCard__body{
  font-kerning: normal;
  padding:18px;
  color: var(--text);
  line-height:1.9;
  font-size:14.5px;

  /* ✅ premium readability enhancement (very subtle) */
  background:
    radial-gradient(circle at 20% 0%, rgba(255,92,0,.04), transparent 42%),
    radial-gradient(circle at 90% 10%, rgba(0,19,105,.04), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,1));
}

/* ✅ Full justify for all paragraphs */
.contentCard__body p{
  margin:0 0 12px;
  text-align:justify;
  text-justify:inter-word;

  /* ✅ stop word breaking */
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;

  word-spacing: 0.02em;   /* very subtle */

  /* ✅ keep words intact */
  overflow-wrap: normal;
  word-break: normal;
}

/* ✅ first paragraph gets slightly better visual lead */
.contentCard__body > p:first-of-type{
  padding:12px 14px;
  border-radius:14px;
  background:rgba(0,19,105,.03);
  border:1px solid rgba(0,19,105,.08);
}

/* section headings look like “chapters” */
.contentCard__body h3{
  margin:18px 0 10px;
  font-family:"Cinzel", serif;
  color: var(--secondary);
  font-weight:800;
  letter-spacing:.35px;
  position:relative;

  /* ✅ gap between dot and text */
  padding-left: 18px;
}

.contentCard__body h3::before{
  content:"";
  position:absolute;
  left:0;

  /* ✅ perfect vertical middle */
  top: 50%;
  transform: translateY(-50%);

  width:6px;
  height:6px;
  border-radius:999px;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(255,92,0,.14);
}

/* Nice “note” callout */
.note{
  margin-top:16px;
  padding:14px 14px;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,92,0,.10), rgba(255,255,255,0));
  border:1px solid rgba(255,92,0,.22);
}

/* active submenu style (same as system) */
.founderBioPage .submenu a.is-active{
  background:rgba(0,19,105,.06);
  color:var(--primary);
  font-weight:800;
}

/* Responsive */
@media (max-width: 980px){
  .contentGrid{ grid-template-columns: 1fr; }
  .bioFigure{ max-width: 520px; }
  .contentCard__body{ font-size:14px; }
}

/* ==========================================================
   FOUNDER PHILOSOPHY — SAME PREMIUM LAYOUT + JUSTIFY FIX
========================================================== */

/* Page rhythm */
.founderPhilosophyPage .section{ padding: var(--secY) 0; }

/* Soft spiritual tint like your contact/home */
.founderPhilosophyPage .section--tint{
  background:
    radial-gradient(circle at 18% 22%, rgba(255,92,0,.12), transparent 55%),
    radial-gradient(circle at 82% 28%, rgba(0,19,105,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,19,105,.04), rgba(255,92,0,.03));
}

/* ✅ Numbered list (1,2,3) — clean + readable */
.phList{
  margin: 6px 0 14px;
  padding-left: 22px;
}
.phList li{
  margin: 8px 0;
  line-height: 1.85;
  text-align: justify;
  text-justify: inter-word;

  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;

  overflow-wrap: normal;
  word-break: normal;
}

/* active submenu style */
.founderPhilosophyPage .submenu a.is-active{
  background:rgba(0,19,105,.06);
  color:var(--primary);
  font-weight:800;
}
