/* ============================================
   HOMEPAGE - "Meet the Founder"

   A rounded ink panel (indigo to purple, pink and blue glows) holding a
   four-step career timeline and a light profile card. Type comes from
   css/theme.css. Markup: tools/home_founder.py.
   The older .founder__* styles in style.css are still used by founder.html.
   ============================================ */

.fdr { background: #ffffff; }

.fdr-tone--pink  { --tone-a: #f9cad7; }
.fdr-tone--lilac { --tone-a: #d4cef7; }
.fdr-tone--sky   { --tone-a: #d2e7fa; }
.fdr-tone--peach { --tone-a: #fad9bd; }

/* ---------- Panel ---------- */
.fdr__panel {
  padding: 56px 56px 48px;
  border-radius: 32px;
  background:
    radial-gradient(45% 60% at 100% 0%, rgba(255, 102, 141, 0.35) 0%, rgba(255, 102, 141, 0) 70%),
    radial-gradient(40% 60% at 0% 100%, rgba(118, 202, 255, 0.22) 0%, rgba(118, 202, 255, 0) 70%),
    linear-gradient(135deg, #230d4f 0%, #2d1a8a 60%, #3230e0 100%);
}

.fdr__panel .section-eyebrow { color: #ffc6d5; }
.fdr__panel .section-title { color: #ffffff; }
.fdr__panel .section-title em { color: #ffb3c6; }

/* ---------- Timeline ---------- */
.fdr-jr {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.fdr-jr::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, #f9cad7, #d4cef7, #d2e7fa, #fad9bd);
  opacity: 0.55;
}

.fdr-jr__stop { position: relative; padding: 0 6px; text-align: center; }

.fdr-jr__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--tone-a);
  box-shadow: 0 0 0 6px #2a1670;
  font: 600 14px/1 var(--font-body);
  color: var(--heading-strong);
}

.fdr-jr__stop:last-child .fdr-jr__dot { background: #ffab57; color: #230d4f; }

.fdr-jr__kind { margin: 0 0 2px; font: 600 11px/16px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: #c9c0e6; }
.fdr-jr__stop h3 { margin: 0 0 6px; font: 500 var(--fs-h3)/1.3 var(--font-display); color: #ffffff; }
.fdr-jr__stop p:last-child { margin: 0; font-size: 14px; line-height: 22px; color: #ddd6f3; }

/* ---------- Profile card ---------- */
.fdr-jr__card {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 28px;
  background: linear-gradient(135deg, #fdeef3 0%, #f1eeff 55%, #eaf4fe 100%);
  box-shadow: 0 40px 70px -40px rgba(13, 6, 32, 0.7);
}

/* The photo fills its column without making the card taller than its text */
.fdr-jr__photo { position: relative; display: block; min-height: 320px; overflow: hidden; }
.fdr-jr__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }

.fdr-jr__body { padding: 34px 38px; }
.fdr-jr__quote { margin: 0 0 14px; font: 400 28px/1.3 var(--font-display); color: var(--heading-strong); }
.fdr-jr__lead { margin: 0 0 22px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.fdr-jr__lead strong { font-weight: 600; color: var(--heading-strong); }

.fdr-jr__creds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.fdr-jr__creds li { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.85); }
.fdr-jr__creds span { display: block; font: 600 11px/16px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.fdr-jr__creds b { display: block; margin-top: 2px; font: 500 15px/1.3 var(--font-display); color: var(--heading-strong); }

.fdr-jr__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.fdr-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1.5px solid #d9d3f2;
  border-radius: 999px;
  background: #ffffff;
  font: 500 15px/20px var(--font-body);
  color: var(--heading-strong);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.fdr-ghost svg { width: 15px; height: 15px; color: #0a66c2; }
.fdr-ghost:hover { border-color: #3230e0; color: #3230e0; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .fdr__panel { padding: 44px 36px 40px; }
  .fdr-jr__creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .fdr-jr { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .fdr-jr::before { display: none; }
  .fdr-jr__card { grid-template-columns: minmax(0, 1fr); }
  .fdr-jr__photo { height: 340px; }
}

@media (max-width: 640px) {
  .fdr__panel { padding: 30px 18px; border-radius: 24px; }
  .fdr-jr { grid-template-columns: minmax(0, 1fr); }
  .fdr-jr__body { padding: 24px 20px; }
  .fdr-jr__quote { font-size: 22px; }
  .fdr-jr__creds { grid-template-columns: minmax(0, 1fr); }
  .fdr-jr__actions { flex-direction: column; align-items: stretch; }
  .fdr-jr__actions > * { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .fdr-ghost { transition: none; }
}