/* ============================================================
   Club JKB — page components
   Timeline, badges, coach profile, contact form, insight cards.
   Depends on the tokens in style.css.
   ============================================================ */

/* ---- Stepped process (Dynamic Business Plan) ---- */
.timeline{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  counter-reset: step;
}
.tstep{
  background: var(--paper);
  padding: clamp(24px, 2.6vw, 36px);
  position: relative;
  transition: background-color .45s var(--ease);
}
section.alt .timeline{ background: var(--line); }
section.alt .tstep{ background: var(--paper-2); }
.tstep:hover{ background: #fff; }
.tstep .num{
  display: block;
  font-family: 'Archivo', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--brass-deep);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.tstep h3{ margin: 0 0 .5em; }
.tstep p{ margin: 0; font-size: .95rem; }

/* ---- Badge list (deliverables, sectors) ---- */
.badge-list{
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.badge{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--text-soft);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 9px 17px;
  margin: 0;
  transition: border-color .35s var(--ease), color .35s var(--ease), background-color .35s var(--ease);
}
.badge::before{
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brass);
  flex: none;
}
.badge:hover{ border-color: var(--text); color: var(--text); }
section.ink .badge{ color: var(--on-ink-soft); border-color: var(--line-ink-strong); }
section.ink .badge:hover{ color: var(--on-ink); border-color: var(--on-ink); }

/* ---- Coach profile ---- */
.profile{
  display: grid;
  grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}
.profile .portrait{
  position: relative;
  overflow: hidden;
}
.profile .portrait img{
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(1) contrast(1.05);
  transition: filter .6s var(--ease), transform 1.1s var(--ease-out);
}
.profile .portrait:hover img{ filter: none; transform: scale(1.03); }
.profile .portrait figcaption{
  padding: 16px 0 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.creds{
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.creds li{
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 16px 0;
  margin: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-soft);
  font-size: .96rem;
}
.creds li b{
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-deep);
  padding-top: .3em;
}
@media (max-width: 860px){
  .profile{ grid-template-columns: 1fr; }
  .creds li{ grid-template-columns: 1fr; gap: 4px; }
}

/* ---- Quote ---- */
.quote{
  margin: clamp(30px, 4vw, 52px) 0 0;
  padding: clamp(26px, 3vw, 40px) 0 0;
  border-top: 1px solid var(--line);
}
.quote blockquote{
  margin: 0 0 16px;
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.25rem, 2.3vw, 1.85rem);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.025em;
  color: var(--text);
  max-width: 34ch;
}
.quote cite{
  font-style: normal;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
section.ink .quote{ border-color: var(--line-ink); }
section.ink .quote blockquote{ color: var(--on-ink); }

/* ---- Contact ---- */
.contact-grid{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; } }

.form{ display: grid; gap: 20px; }
.field{ display: grid; gap: 8px; }
.field label{
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.field input,
.field textarea,
.field select{
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  padding: 12px 2px;
  width: 100%;
  transition: border-color .35s var(--ease);
}
.field textarea{ min-height: 128px; resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline: none;
  border-bottom-color: var(--brass);
}
.field input::placeholder,
.field textarea::placeholder{ color: var(--text-faint); }
.form .hp{ position: absolute; left: -9999px; }
.form-note{
  font-size: .84rem;
  color: var(--text-faint);
  margin: 0;
}
.form-note a{ border-bottom: 1px solid var(--line-strong); }
.form-note a:hover{ border-bottom-color: var(--brass); color: var(--text); }

.office-list{ border-top: 1px solid var(--line); }
.office{
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.office .name{
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-deep);
  padding-top: .25em;
}
.office p{ margin: 0 0 .3em; color: var(--text-soft); }
.office a:hover{ color: var(--text); }
@media (max-width: 620px){
  .office{ grid-template-columns: 1fr; gap: 6px; }
}

/* ---- Insight / editorial cards ---- */
.insights{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}
.insight{
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: inherit;
}
.insight .thumb{
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
.insight .thumb img{
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: transform 1s var(--ease-out), filter .6s var(--ease);
}
.insight:hover .thumb img{ transform: scale(1.05); filter: none; }
.insight .k{
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.insight h3{ margin: 0; }
.insight p{ margin: 0; font-size: .95rem; }
section.ink .insight .k{ color: var(--brass); }

/* ---- Root language chooser ---- */
.chooser{
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--on-ink);
  text-align: center;
  padding: 40px;
}
.chooser h1{ color: var(--on-ink); font-size: clamp(2rem, 6vw, 4rem); }
.chooser .actions{ justify-content: center; }