/* ==========================================================================
   NTV — About Nutrient TV
   Alternating full-bleed bands: hero, vision, challenge, mission, pillars,
   focus, broadcast, signup. Fonts are enqueued in functions.php, so no
   @import here.
   ========================================================================== */

.ntv-about {
  --ntv-red: #c8102e;
  --ntv-red-dk: #a50d26;
  --ntv-navy: #0e2a57;
  --ntv-dark: #0a1a33;
  --ntv-ink: #0e2a57;
  --ntv-gray: #5b6472;
  --ntv-soft: #8a92a0;
  --ntv-line: #e6e8ec;
  --ntv-tint: #f4f6fa;
  --ntv-radius: 0px;
  --ntv-wrap: 1120px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ntv-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.ntv-about * { box-sizing: border-box; }
.ntv-about a { text-decoration: none; color: inherit; }
.ntv-about img { display: block; max-width: 100%; }

.ntv-about h1,
.ntv-about h2,
.ntv-about h3 {
  font-family: "Archivo", "Inter", sans-serif;
  margin: 0;
  letter-spacing: -0.015em;
}

.ntv-about p {
  font-size: 15px;
  color: var(--ntv-gray);
  line-height: 1.75;
  margin: 0 0 16px;
}

.ntv-about p:last-child { margin-bottom: 0; }

/* Shared eyebrow + rule */

.ntv-about-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ntv-red);
  margin-bottom: 12px;
}

.ntv-about-rule {
  width: 52px;
  height: 3px;
  background: var(--ntv-red);
  border: 0;
  margin: 18px 0 20px;
}

/* ========== BUTTONS ==========
   Extra .ntv-about scope so these outrank `.ntv-about a { color: inherit }`.
   ============================================================== */

.ntv-about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.ntv-about .ntv-about-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  padding: 15px 24px;
  border-radius: var(--ntv-radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.ntv-about .ntv-about-btn--primary {
  background: var(--ntv-red);
  border-color: var(--ntv-red);
  color: #fff;
}

.ntv-about .ntv-about-btn--primary:hover {
  background: var(--ntv-red-dk);
  border-color: var(--ntv-red-dk);
  color: #fff;
}

.ntv-about .ntv-about-btn--dark {
  background: var(--ntv-navy);
  border-color: var(--ntv-navy);
  color: #fff;
}

.ntv-about .ntv-about-btn--dark:hover {
  background: #fff;
  border-color: var(--ntv-navy);
  color: var(--ntv-navy);
}

.ntv-about .ntv-about-btn:focus-visible {
  outline: 3px solid var(--ntv-red);
  outline-offset: 3px;
}

/* ========== HERO ========== */

.ntv-about-hero {
  background: var(--ntv-tint);
  padding: 64px 26px 68px;
}

.ntv-about-hero__inner {
  max-width: var(--ntv-wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 54px;
  align-items: center;
}

.ntv-about-hero__copy { min-width: 0; }

.ntv-about-hero h1 {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ntv-navy);
  margin: 0;
  max-width: 460px;
}

.ntv-about-hero__copy p {
  font-size: 15.5px;
  max-width: 430px;
}

/* Faith / health / truth panel */

.ntv-about-hero__panel {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 100% at 80% 15%, #16305c 0%, #0a1a33 62%);
  border: 3px solid #2b4d86;
  box-shadow: 0 26px 54px -28px rgba(10, 26, 51, 0.7);
  overflow: hidden;
}

.ntv-about-hero__panel::before,
.ntv-about-hero__panel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.ntv-about-hero__panel::before {
  width: 78%;
  height: 150%;
  right: -34%;
  top: -26%;
  border: 2px solid rgba(43, 77, 134, 0.85);
}

.ntv-about-hero__panel::after {
  width: 62%;
  height: 128%;
  right: -22%;
  top: -12%;
  border: 2px solid rgba(200, 16, 46, 0.5);
}

.ntv-about-hero__panel-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 34px 26px;
  text-align: center;
}

.ntv-about-hero__line {
  font-family: "Archivo", "Inter", sans-serif;
  font-size: clamp(19px, 2.5vw, 30px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  padding: 16px 0;
  width: 100%;
}

.ntv-about-hero__line + .ntv-about-hero__line {
  border-top: 2px solid rgba(200, 16, 46, 0.75);
}

/* ========== THE CHALLENGE ==========
   Sits between Vision and Mission. Tinted like the vision band above it, so
   the white cards read as cards; the white Mission band below provides the
   break. Named .ntv-about-problem rather than .ntv-about-challenge to avoid
   a collision if the old Mission-band card is ever reinstated.
   ============================================================== */

.ntv-about-problem {
  background: var(--ntv-tint);
  border-top: 1px solid #e3e7ef;
  padding: 58px 26px 62px;
}

.ntv-about-problem__inner {
  max-width: var(--ntv-wrap);
  margin: 0 auto;
}

.ntv-about-problem__head {
  max-width: 760px;
  margin-bottom: 34px;
}

.ntv-about-problem__head h2 {
  font-size: 33px;
  font-weight: 800;
  line-height: 1.14;
  color: var(--ntv-navy);
  margin: 0 0 16px;
}

.ntv-about-problem__head p {
  font-size: 15.5px;
  margin: 0;
}

.ntv-about-problem__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.ntv-about-problem__card {
  background: #fff;
  border: 1px solid var(--ntv-line);
  border-radius: var(--ntv-radius);
  padding: 24px 22px 26px;
  min-width: 0;
}

/* Tinted tile rather than the pillars' solid navy, so a problem card doesn't
   read as one of the Core Pillars further down the page. */
.ntv-about-problem__icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ntv-radius);
  margin-bottom: 18px;
}

.ntv-about-problem__icon svg {
  width: 19px;
  height: 19px;
}

.ntv-about-problem__icon--red {
  background: rgba(200, 16, 46, 0.1);
  color: var(--ntv-red);
}

.ntv-about-problem__icon--navy {
  background: rgba(14, 42, 87, 0.1);
  color: var(--ntv-navy);
}

.ntv-about-problem__card h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ntv-navy);
  margin: 0 0 10px;
}

.ntv-about-problem__card p {
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

/* ========== MISSION ==========
   Single full-width column since the Challenge card moved out to its own
   band. Copy is capped at ~78 characters so the lines stay readable across
   the full 1120px shell.
   ============================================================== */

.ntv-about-mission {
  background: #fff;
  padding: 62px 26px;
}

.ntv-about-mission__inner {
  max-width: var(--ntv-wrap);
  margin: 0 auto;
}

.ntv-about-mission__copy { min-width: 0; }

.ntv-about-mission h2 {
  font-size: 33px;
  font-weight: 800;
  line-height: 1.14;
  color: var(--ntv-navy);
  margin: 0 0 18px;
  max-width: 620px;
}

.ntv-about-mission__copy p {
  font-size: 14.5px;
  max-width: 78ch;
}

/* ========== CORE PILLARS ========== */

.ntv-about-pillars {
  background: #fff;
  padding: 20px 26px 66px;
}

.ntv-about-pillars__head {
  max-width: var(--ntv-wrap);
  margin: 0 auto 34px;
  text-align: center;
}

.ntv-about-pillars__head h2 {
  font-size: 30px;
  font-weight: 800;
  color: var(--ntv-navy);
  margin: 0;
}

.ntv-about-pillars__grid {
  max-width: var(--ntv-wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.ntv-about-pillar {
  background: #fff;
  border: 1px solid var(--ntv-line);
  border-radius: var(--ntv-radius);
  padding: 24px 22px 26px;
  min-width: 0;
}

.ntv-about-pillar__icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ntv-navy);
  color: #fff;
  border-radius: var(--ntv-radius);
  margin-bottom: 18px;
}

.ntv-about-pillar__icon svg {
  width: 19px;
  height: 19px;
}

.ntv-about-pillar h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ntv-navy);
  margin: 0 0 10px;
}

.ntv-about-pillar p {
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

/* ========== CONTENT FOCUS ========== */

.ntv-about-focus {
  background: var(--ntv-tint);
  padding: 62px 26px;
}

.ntv-about-focus__inner {
  max-width: var(--ntv-wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 52px;
  align-items: start;
}

.ntv-about-focus__col { min-width: 0; }

.ntv-about-focus h2 {
  font-size: 27px;
  font-weight: 800;
  color: var(--ntv-navy);
  margin: 0 0 16px;
}

.ntv-about-focus p { font-size: 14px; }

.ntv-about-focus__list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.ntv-about-focus__list li {
  display: flex;
  gap: 11px;
  align-items: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ntv-navy);
  line-height: 1.5;
}

.ntv-about-focus__list li + li { margin-top: 14px; }

.ntv-about-focus__list svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--ntv-navy);
}

/* Scripture quote */

.ntv-about-quote {
  background: #fff;
  border-left: 3px solid var(--ntv-red);
  margin: 24px 0 0;
  padding: 22px 26px;
}

.ntv-about-quote p {
  font-size: 14px;
  font-style: italic;
  color: #44506a;
  line-height: 1.7;
  margin: 0 0 10px;
}

.ntv-about-quote cite {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ntv-navy);
}

/* ========== BROADCAST ========== */

.ntv-about-broadcast {
  background: #fff;
  padding: 58px 26px 54px;
  text-align: center;
}

.ntv-about-broadcast h2 {
  font-size: 29px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ntv-navy);
  margin: 0 0 14px;
}

.ntv-about-broadcast p {
  font-size: 14.5px;
  max-width: 560px;
  margin: 0 auto 28px;
}

.ntv-about-broadcast__platforms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 34px;
}

.ntv-about-broadcast__platforms li {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ntv-soft);
}

/* ========== SIGNUP ==========
   Centered box, matched to the content width — not a full-bleed band.
   ============================================================== */

.ntv-about-signup {
  background: #fff;
  padding: 0 26px 70px;
}

.ntv-about-signup__box {
  max-width: var(--ntv-wrap);
  margin: 0 auto;
  background: var(--ntv-dark);
  border-radius: var(--ntv-radius);
  padding: 48px 40px 52px;
  text-align: center;
}

.ntv-about-signup h2 {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 18px;
}

.ntv-about-signup p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto 26px;
}

/* Uses .ntv-signup__form so the existing mailer JS picks it up. */
.ntv-about-signup .ntv-signup__form {
  display: flex;
  gap: 10px;
  max-width: 470px;
  margin: 0 auto;
}

.ntv-about-signup .ntv-signup__form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 13px 15px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ntv-ink);
  background: #fff;
  border: 2px solid #fff;
  border-radius: var(--ntv-radius);
  outline: none;
}

.ntv-about-signup .ntv-signup__form input[type="email"]::placeholder {
  color: var(--ntv-soft);
}

.ntv-about-signup .ntv-signup__form input[type="email"]:focus {
  border-color: var(--ntv-red);
}

.ntv-about-signup .ntv-signup__form button {
  flex: 0 0 auto;
  padding: 13px 26px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ntv-red);
  border: 2px solid var(--ntv-red);
  border-radius: var(--ntv-radius);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.ntv-about-signup .ntv-signup__form button:hover {
  background: var(--ntv-red-dk);
  border-color: var(--ntv-red-dk);
}

.ntv-about-signup .ntv-signup__form button:disabled {
  opacity: 0.6;
  cursor: default;
}

.ntv-about-signup .ntv-signup__form button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.ntv-about-signup .ntv-signup__msg {
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 600;
  min-height: 18px;
  line-height: 1.4;
}

.ntv-about-signup .ntv-signup__msg.success { color: #6fcf7f; }
.ntv-about-signup .ntv-signup__msg.error { color: #ff8195; }

/* ========== VISION ==========
   Sits between the hero and the challenge band. Tinted like the hero so the
   white founder / philosophy cards read as cards, with a hairline at the top
   to separate it from the hero band above.
   ============================================================== */

.ntv-about-vision {
  background: var(--ntv-tint);
  border-top: 1px solid #e3e7ef;
  padding: 58px 26px 62px;
}

.ntv-about-vision__inner {
  max-width: var(--ntv-wrap);
  margin: 0 auto;
}

.ntv-about-vision__grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 48px;
  align-items: start;
}

.ntv-about-vision__copy { min-width: 0; }

.ntv-about-vision h2 {
  font-size: 33px;
  font-weight: 800;
  line-height: 1.14;
  color: var(--ntv-navy);
  margin: 0;
}

.ntv-about-vision .ntv-about-rule { margin: 16px 0 22px; }

.ntv-about-vision__copy p { font-size: 14.5px; }

.ntv-about-vision__lede {
  font-size: 16px !important;
  font-weight: 600;
  color: var(--ntv-navy) !important;
  line-height: 1.6 !important;
}

/* ---------- Core philosophy card ---------- */

.ntv-about-philosophy {
  background: #fff;
  border: 1px solid var(--ntv-line);
  border-radius: var(--ntv-radius);
  padding: 26px 28px 28px;
}

.ntv-about-philosophy__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ntv-line);
}

.ntv-about-philosophy__head svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--ntv-red);
}

.ntv-about-philosophy__head h3 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ntv-navy);
  margin: 0;
}

.ntv-about-philosophy__list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.ntv-about-philosophy__list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.ntv-about-philosophy__list li + li { margin-top: 20px; }

.ntv-about-philosophy__list svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--ntv-soft);
}

.ntv-about-philosophy__list strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ntv-navy);
  margin-bottom: 4px;
}

.ntv-about-philosophy__list p {
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0;
}

/* ---------- Founder card ---------- */

.ntv-about-founder {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 34px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--ntv-line);
  border-radius: var(--ntv-radius);
  padding: 30px 34px;
  margin-top: 34px;
}

.ntv-about-founder__media {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--ntv-line);
}

.ntv-about-founder__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.ntv-about-founder__body { min-width: 0; }

.ntv-about-founder__body h3 {
  font-size: 27px;
  font-weight: 800;
  color: var(--ntv-navy);
  margin: 0 0 6px;
}

.ntv-about-founder__role {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ntv-red);
  margin-bottom: 14px;
}

.ntv-about-founder__body p {
  font-size: 14.5px;
  max-width: 62ch;
  margin: 0 0 20px;
}

.ntv-about .ntv-about-founder__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ntv-navy);
  transition: color 0.18s ease;
}

.ntv-about .ntv-about-founder__link:hover { color: var(--ntv-red); }

.ntv-about-founder__link svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.ntv-about .ntv-about-founder__link:focus-visible {
  outline: 3px solid var(--ntv-red);
  outline-offset: 3px;
}

/* ---------- Vision responsive ---------- */

@media (max-width: 900px) {
  .ntv-about-vision__grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 620px) {
  .ntv-about-vision { padding: 44px 18px 48px; }
  .ntv-about-vision h2 { font-size: 26px; }
  .ntv-about-philosophy { padding: 22px 22px 24px; }
  .ntv-about-founder {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px 22px;
  }
  .ntv-about-founder__media { max-width: 240px; }
  .ntv-about-founder__body h3 { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .ntv-about .ntv-about-founder__link { transition: none; }
}

/* ========== RESPONSIVE ========== */

@media (max-width: 1080px) {
  .ntv-about-pillars__grid { grid-template-columns: repeat(2, 1fr); }
  .ntv-about-problem__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .ntv-about-hero__inner,
  .ntv-about-focus__inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .ntv-about-hero h1 { font-size: 34px; max-width: none; }
  .ntv-about-hero__copy p { max-width: none; }
  .ntv-about-mission h2 { max-width: none; }
}

@media (max-width: 620px) {
  .ntv-about-hero { padding: 44px 18px 48px; }
  .ntv-about-mission,
  .ntv-about-focus { padding: 44px 18px; }
  .ntv-about-problem { padding: 44px 18px 48px; }
  .ntv-about-pillars { padding: 14px 18px 46px; }
  .ntv-about-broadcast { padding: 42px 18px 40px; }
  .ntv-about-signup { padding: 0 18px 50px; }

  .ntv-about-hero h1 { font-size: 28px; }
  .ntv-about-mission h2 { font-size: 26px; }
  .ntv-about-problem__head h2 { font-size: 26px; }
  .ntv-about-pillars__head h2,
  .ntv-about-broadcast h2 { font-size: 24px; }
  .ntv-about-focus h2 { font-size: 22px; }
  .ntv-about-signup h2 { font-size: 26px; }

  .ntv-about-pillars__grid { grid-template-columns: 1fr; }
  .ntv-about-problem__grid { grid-template-columns: 1fr; }
  .ntv-about-signup__box { padding: 36px 22px 40px; }

  .ntv-about-broadcast__platforms { gap: 18px 22px; }
  .ntv-about-broadcast__platforms li { font-size: 12.5px; }

  .ntv-about-actions .ntv-about-btn { width: 100%; }
  .ntv-about-signup .ntv-signup__form { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .ntv-about .ntv-about-btn,
  .ntv-about-signup .ntv-signup__form button { transition: none; }
}