/* Voxxy — single post (editorial layout). Structure references the shared
   mockup; fonts / colours / spacing come from the theme tokens. The whole page
   sits on the theme dark background with white text (optional gradient). */

.vpost {
  background: var(--black, #1B1B1E);
  color: #fff;
  font-family: HelveticaL, "Inter", sans-serif;
}
/* Optional on-brand gradient (toggle "Gradient background" on the Post Hero). */
.vpost.vpost--grad {
  background: linear-gradient(160deg, #1B1B1E 0%, #14161f 55%, #0b1020 100%);
}

/* ── 1 · HERO: B&W background + title + featured portrait ── */
.vpost-hero { position: relative; text-align: center; padding-bottom: clamp(40px, 6vw, 80px); }
.vpost-hero__bg { position: absolute; top: 0; left: 0; right: 0; height: 62%; overflow: hidden; }
.vpost-hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.vpost-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,27,30,.25), var(--black, #1B1B1E)); }
.vpost-hero__title {
  position: relative; z-index: 2;
  font-family: "Cal Sans", sans-serif; font-weight: 400;
  font-size: clamp(30px, 5vw, 62px); line-height: 1.02; letter-spacing: 1px;
  color: #fff; margin: 0; padding-top: clamp(24px, 4vw, 48px);
}
.vpost-hero__portrait { position: relative; z-index: 1; width: min(560px, 84%); margin: clamp(-8px,-1vw,-20px) auto 0; }
.vpost-hero__portrait img { width: 100%; height: auto; display: block; }

/* ── 2 · INTRO: label + big heading ── */
.vpost-intro { max-width: 820px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) 24px clamp(24px, 4vw, 48px); text-align: center; }
.vpost-intro__label {
  font-family: HelveticaL, sans-serif; font-size: 13px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--green-bright, #b8ff47); margin: 0 0 22px;
}
.vpost-intro__heading {
  font-family: "Cal Sans", sans-serif; font-weight: 400;
  font-size: clamp(24px, 3.4vw, 40px); line-height: 1.22; letter-spacing: -.5px; margin: 0; color: #fff;
}

/* ── 3 · TWO-COLUMN: text + media with captions ── */
.vpost-cols {
  max-width: 1120px; margin: 0 auto; padding: clamp(24px, 4vw, 56px) 24px clamp(56px, 8vw, 96px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start;
}
.vpost-cols__text { font-size: 15px; line-height: 1.9; color: rgba(255,255,255,.82); }
.vpost-cols__text p { margin: 0 0 1.5em; }
.vpost-cols__quote {
  font-family: "Cal Sans", sans-serif; font-style: italic; font-size: clamp(19px, 2.4vw, 26px);
  line-height: 1.35; margin: 0 0 1.2em; color: #fff;
}
.vpost-cols__media img { width: 100%; height: auto; display: block; }
.vpost-cols__cap-label {
  font-family: HelveticaL, sans-serif; font-size: 12px; letter-spacing: 2.5px; text-transform: uppercase;
  margin: 26px 0 12px; color: var(--green-bright, #b8ff47);
}
.vpost-cols__cap {
  font-family: "Cal Sans", sans-serif; font-weight: 400; font-size: clamp(19px, 2.4vw, 26px);
  line-height: 1.3; margin: 0; color: #fff;
}

/* ── 4 · FOUNDER: dark split section ── */
.vpost-founder { display: grid; grid-template-columns: 1fr 1fr; background: rgba(255,255,255,.03); border-top: 1px solid rgba(255,255,255,.08); color: #fff; }
.vpost-founder__img { position: relative; min-height: 420px; }
.vpost-founder__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.vpost-founder__body { padding: clamp(48px, 6vw, 88px) clamp(28px, 5vw, 72px); text-align: center; align-self: center; }
.vpost-founder__script { font-family: "Cal Sans", sans-serif; font-style: italic; font-size: clamp(22px, 3vw, 30px); color: var(--green-bright, #b8ff47); margin: 0 0 6px; }
.vpost-founder__name { font-family: "Cal Sans", sans-serif; font-weight: 400; font-size: clamp(30px, 4.4vw, 56px); letter-spacing: 3px; line-height: 1; margin: 0 0 22px; color: #fff; }
.vpost-founder__intro { font-family: "Cal Sans", sans-serif; font-style: italic; font-size: clamp(17px, 2vw, 22px); line-height: 1.45; margin: 0 auto 22px; max-width: 460px; color: var(--cream, #D8D5C7); }
.vpost-founder__text { font-size: 14px; line-height: 1.9; max-width: 460px; margin: 0 auto; color: rgba(255,255,255,.72); }

@media (max-width: 820px) {
  .vpost-cols { grid-template-columns: 1fr; }
  .vpost-founder { grid-template-columns: 1fr; }
  .vpost-founder__img { min-height: 320px; }
}