/*
 * Redesigned program detail page — page layout (SOUTHVILLE-1103 / FE3).
 *
 * Matches the Lovable reference export: a max-w-6xl (72rem) centred container,
 * tailwind-equivalent spacing/typography, translated into plain CSS scoped under
 * `.new-design` and consuming the FE1 design tokens. Data is dynamic, so every
 * section omits/reflows when empty and the whole layout is responsive.
 */

/* --- Container ---------------------------------------------------------- */
.new-design .nd-detail { max-width: 72rem; margin: 0 auto; padding: 0 var(--space-2); }

/* --- Header ------------------------------------------------------------- */
/* White banner (not the off-white page --bg) so white client logos blend in
   (SOUTHVILLE-1103 revision). */
.new-design .nd-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.new-design .nd-header__bar {
  width: 100%; max-width: 72rem; margin: 0 auto; padding: var(--space-2);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.new-design .nd-header__company-logo { height: 96px; width: auto; object-fit: contain; }
/* margin-left:auto keeps this cluster right-aligned even when there's no company
   logo (single child) — the layout doesn't collapse to the left. */
.new-design .nd-header__right { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.new-design .nd-header__brand { height: 96px; width: auto; object-fit: contain; }
.new-design .nd-header__contact { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.new-design .nd-header__phone,
.new-design .nd-header__nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text); text-decoration: none; font-size: 0.875rem; font-weight: 500;
}
.new-design .nd-header__phone .nd-icon { color: var(--brand-accent); }
/* No inter-item gap: the pills' own padding spaces Home/Back, keeping them tight
   and roughly under the phone number above. Negative right margin pulls the last
   pill's text flush to the column edge (aligned with the phone), while the pill
   padding still extends for the hover target. */
.new-design .nd-header__nav { display: flex; gap: 0; margin-right: -8px; }
/* Home/Back: filled red pill on hover. Phone: text turns red. */
.new-design .nd-header__nav-link { padding: 6px 8px; border-radius: var(--radius-md); transition: background-color 0.15s ease, color 0.15s ease; }
.new-design .nd-header__nav-link:hover { background-color: var(--brand-accent); color: #fff; }
.new-design .nd-header__phone { transition: color 0.15s ease; }
.new-design .nd-header__phone:hover { color: var(--brand-accent); }

/* --- Back link ---------------------------------------------------------- */
.new-design .nd-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin: var(--space-2) 0 0; padding: 8px 12px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.875rem;
  border-radius: var(--radius-md); transition: background-color 0.15s ease, color 0.15s ease;
}
.new-design .nd-back:hover { background-color: var(--brand-accent); color: #fff; }

/* --- Icons -------------------------------------------------------------- */
.new-design .nd-icon { width: 1em; height: 1em; flex: none; }

/* --- Hero (section 1) --------------------------------------------------- */
.new-design .nd-hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
  align-items: start; padding: var(--space-6) 0 var(--space-4);
}
.new-design .nd-hero__content:only-child { grid-column: 1 / -1; }
.new-design .nd-hero__title { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; line-height: 1.1; margin: 0 0 12px; }
.new-design .nd-hero__tagline { color: var(--text-muted); margin: 0 0 var(--space-3); }
.new-design .nd-hero__facts {
  list-style: none; margin: 0 0 var(--space-3); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 0.875rem; color: var(--text-muted);
}
.new-design .nd-hero__facts li { display: inline-flex; align-items: center; gap: 4px; }
/* SOUTHVILLE-1121: the standard header text is authored in the back-end rich-text
   editor and renders through .nd-rich-text, so the admin's markup (<strong>, lists,
   …) comes through. The wrapper adds spacing before the sign-up form, and — per
   Daniel's revision — the muted text colour so this header reads as a sub-heading
   matching the tagline above (.nd-hero__tagline) rather than as dark body copy.
   font-family / size / line-height already match the tagline via the base; only the
   colour differed. The compound selector outranks .nd-rich-text's own colour. */
.new-design .nd-hero__ready { margin: 0 0 var(--space-1); }
.new-design .nd-hero__ready.nd-rich-text { color: var(--text-muted); }
.new-design .nd-hero__cta-blurb { color: var(--text-muted); margin: 0 0 var(--space-2); }
/* Fixed 4:3 frame (reference ratio) — any uploaded image fills it at consistent
   dimensions, cropped to cover rather than stretching the layout. */
.new-design .nd-hero__media { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.new-design .nd-hero__image { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Sign-up form ------------------------------------------------------- */
/* SOUTHVILLE-1122: stack the button directly below the input, both full width
   (align-items: stretch), constrained to a matching max-width. */
.new-design .nd-signup { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); max-width: 28rem; }
.new-design .nd-signup__input {
  padding: 10px var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); font-family: var(--font-body); font-size: 0.875rem;
}

/* --- Info cards (section 2): top row of 3, bottom row of 2 -------------- */
/* SOUTHVILLE-1119: the remaining cards fill the row — track count = number of
   cards rendered (--nd-cols, set in the view), so 1 -> full, 2 -> half, 3 -> third. */
.new-design .nd-info-cards { display: grid; grid-template-columns: repeat(var(--nd-cols, 1), 1fr); gap: var(--space-2); }
.new-design .nd-info-cards--primary { padding: var(--space-5) 0; }
.new-design .nd-info-cards--secondary { padding: 0 0 var(--space-5); }
.new-design .nd-info-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px;
  display: flex; align-items: flex-start; gap: var(--space-1);
}
.new-design .nd-info-card .nd-icon { width: 1.25rem; height: 1.25rem; color: var(--green); margin-top: 2px; }
.new-design .nd-info-card__label { font-size: 0.875rem; font-weight: 600; color: var(--text); margin: 0; }
.new-design .nd-info-card__text { font-size: 0.875rem; color: var(--text-muted); margin: 2px 0 0; }

/* --- Two-column rows (sections 3 & 4) ----------------------------------- */
.new-design .nd-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; padding-bottom: var(--space-4); }
.new-design .nd-split__col:only-child { grid-column: 1 / -1; }
.new-design .nd-section-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin: 0 0 var(--space-2); }
/* The title is rich text (SOUTHVILLE-1103): strip the editor's <p> margins so the
   heading sits flush with the top of the video, and keep it heading-styled. */
.new-design .nd-section-title p { margin: 0; }
.new-design .nd-section-title > :last-child { margin-bottom: 0; }

/* --- What you'll get (section 3) ---------------------------------------- */
/* Program long description (rich text from the admin editor): page font, no
   border; the editor decides whether it reads as bullets or paragraphs
   (SOUTHVILLE-1103 revision). */
.new-design .nd-rich-text { font-family: var(--font-body); color: var(--text); line-height: 1.6; }
.new-design .nd-rich-text p { margin: 0 0 var(--space-1); }
.new-design .nd-rich-text ul, .new-design .nd-rich-text ol { margin: 0 0 var(--space-1); padding-left: 1.25rem; }
.new-design .nd-rich-text li { margin-bottom: 4px; }
.new-design .nd-rich-text > :last-child { margin-bottom: 0; }
.new-design .nd-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--text); }
.new-design .nd-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Testimonial + stats (section 4) ------------------------------------ */
.new-design .nd-testimonial { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); height: 100%; }
.new-design .nd-testimonial .nd-icon { width: 1.5rem; height: 1.5rem; color: var(--text-muted); }
.new-design .nd-testimonial__quote { margin: 0; font-size: 1.125rem; font-style: italic; line-height: 1.5; }
.new-design .nd-testimonial__author { color: var(--text-muted); font-weight: 600; }
.new-design .nd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.new-design .nd-stat { padding: var(--space-1); border-radius: var(--radius-md); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.new-design .nd-stat:hover { transform: scale(1.03); box-shadow: var(--shadow-card); }
.new-design .nd-stat :is(h1, h2, h3, h4, strong, b) {
  display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--green); line-height: 1.1;
}
.new-design .nd-stat p { margin: 2px 0 0; font-size: 0.75rem; color: var(--text-muted); line-height: 1.35; }
/* Equal-height testimonial + stats cards (grid stretch; cards fill their column). */
.new-design .nd-social-proof { gap: var(--space-2); align-items: stretch; }
.new-design .nd-social-proof .nd-split__col { display: flex; }
.new-design .nd-social-proof .nd-card { flex: 1; }

/* --- FAQ accordion (section 5, SOUTHVILLE-1109) ------------------------- */
.new-design .nd-faq { max-width: 48rem; margin: 0 auto; padding-bottom: var(--space-4); }
.new-design .nd-faq__box {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface);
}
.new-design .nd-faq__item { border-bottom: 1px solid var(--border); }
.new-design .nd-faq__item:last-child { border-bottom: 0; }
.new-design .nd-faq__question {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-weight: 600; cursor: pointer; list-style: none;
}
.new-design .nd-faq__question::-webkit-details-marker { display: none; }
.new-design .nd-faq__question .nd-icon { flex: none; color: var(--text-muted); transition: transform 0.2s ease; }
.new-design .nd-faq__item[open] .nd-faq__question .nd-icon { transform: rotate(180deg); }
.new-design .nd-faq__answer {
  padding: 0 var(--space-3) var(--space-2);
  color: var(--text-muted); font-size: 0.875rem; line-height: 1.5;
  white-space: pre-line;
}

/* --- Closing CTA band (section 6) --------------------------------------- */
.new-design .nd-closing { padding: var(--space-5) 0; }
.new-design .nd-closing__inner { max-width: 48rem; margin: 0 auto; }
/* SOUTHVILLE-1121: authored rich text — renders through .nd-rich-text, no imposed
   typography (see the hero __ready note above). Wrapper adds spacing only. */
.new-design .nd-closing__heading { margin: 0 0 var(--space-1); }
.new-design .nd-closing__blurb { color: var(--text-muted); margin: 0 0 var(--space-3); }
/* (max-width now on the base .nd-signup — SOUTHVILLE-1122) */
/* Sign-up button: subtle shadow lift on hover (final form styling: SOUTHVILLE-1104). */
.new-design .nd-signup .nd-button--primary:hover { box-shadow: var(--shadow-card-hover); }

/* --- Footer ------------------------------------------------------------- */
.new-design .nd-footer { padding: var(--space-4) var(--space-2); text-align: center; font-size: 0.875rem; color: var(--text-muted); border-top: 1px solid var(--border); }
.new-design .nd-footer a { color: var(--text-muted); }

/* Rich-text fields render their mce HTML; keep inner paragraphs flush. */
.new-design .nd-hero__tagline p,
.new-design .nd-hero__cta-blurb p,
.new-design .nd-closing__blurb p { margin: 0; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 768px) {
  .new-design .nd-hero,
  .new-design .nd-split { grid-template-columns: 1fr; }
  .new-design .nd-info-cards--primary { grid-template-columns: 1fr; }
  .new-design .nd-hero__title { font-size: 1.875rem; }
}
@media (max-width: 640px) {
  .new-design .nd-info-cards--secondary { grid-template-columns: 1fr; }
  .new-design .nd-header__phone-number { display: none; }
  .new-design .nd-header__company-logo,
  .new-design .nd-header__brand { height: 64px; }
}