@import url("spacing-tokens.css?v=2026101204");

/* Section boxes size to content. Their parent owns the external gap.
   Only filled background bands receive half-gap vertical padding. */
:is(.home-page, .about-page, .cr-regular, .contact-page) {
  --public-section-gap: var(--gap-section);
  --public-section-half: calc(var(--public-section-gap) / 2);
  --public-heading-gap: var(--gap-heading);
  --public-intro-gap: var(--gap-copy);
}

main.home-page,
main.about-page {
  gap: var(--public-section-gap);
}

/* Keep the hero exclusion at zero specificity so filled-band padding wins. */
.home-page > section:where(:not(#main-banner-container)),
.about-page > section:where(:not(#about-banner-container)) {
  height: auto;
  min-height: 0;
  max-height: none;
  padding-top: 0;
  padding-bottom: 0;
}

.home-page :is(#main-ai-method, #main-career-container, #main-slogan-container),
.about-page :is(#about-instructor, #about-career-container) {
  padding-top: var(--public-section-half);
  padding-bottom: var(--public-section-half);
}

.home-page #main-slogan-container {
  height: auto;
  min-height: 0;
  max-height: none;
}

/* Hero heights and inner spacing remain owned by main.css?v=2026101211 and about.css?v=2026101211?v=2026101211. */
.home-page #main-intro-container {
  gap: var(--public-section-half);
}

main.contact-page {
  row-gap: var(--public-section-gap);
}

.home-page :is(#main-portfolio-container, #main-learning, #main-career-container),
.contact-page #contacts-titel-area {
  gap: var(--public-heading-gap);
}

.home-page #main-ins-title,
.about-page #about-instructor-title {
  margin-bottom: 0;
}

.home-page #main-ins-text,
.about-page #about-instructor-text {
  gap: var(--public-intro-gap);
}

.home-page #main-ins-text > .home-link {
  margin-top: calc(var(--public-heading-gap) - var(--public-intro-gap));
}

.home-page .home-heading > h2 + p,
.about-page .about-section-heading > h2 + p,
.contact-page #cont-title-text > h1 + p {
  margin-top: calc(var(--public-intro-gap) - var(--space-12));
}

.home-page .method-copy > h2 + p {
  margin-top: var(--public-intro-gap);
}

.about-page :is(.about-section-heading, #about-ob-title-area, #about-career-title-area) {
  margin-bottom: var(--public-heading-gap);
}

.contact-page .con_map {
  margin-top: 0;
}

.contact-page .contact-form-note {
  margin-top: var(--public-intro-gap);
}

/* Keep width wrappers while giving every section a real external gap. */
.cr-regular,
.cr-regular > .cr-wrap,
.cr-regular .cr-planning-band > .cr-wrap,
.cr-regular .cr-classroom {
  display: flex;
  flex-direction: column;
  gap: var(--public-section-gap);
}

.cr-regular {
  padding-top: var(--public-section-half);
  padding-bottom: var(--public-section-gap);
}

.cr-regular > .cr-wrap,
.cr-regular .cr-planning-band > .cr-wrap {
  width: 100%;
  margin: 0 auto;
}

.cr-regular .cr-intro-group {
  display: flex;
  flex-direction: column;
  gap: var(--public-heading-gap);
}

.cr-regular .cr-section-nav {
  margin-top: 0;
}

.cr-regular :is(.cr-hero, .cr-section, .cr-ai, .cr-final),
.cr-regular #project-builder {
  height: auto;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.cr-regular :is(.cr-ai, .cr-facts-clear),
.cr-regular #project-builder {
  padding-top: var(--public-section-half);
  padding-bottom: var(--public-section-half);
}

.cr-regular .cr-classroom > .cr-wrap {
  width: 100%;
  margin: 0 auto;
}

.cr-regular .cr-section-head {
  margin-bottom: var(--public-heading-gap);
}

.cr-regular .cr-section-head > p:not(.cr-eyebrow),
.cr-regular .cr-head-split > p,
.cr-regular #project-builder > .cr-section-head > p:not(.cr-eyebrow) {
  margin-top: var(--public-intro-gap);
}

.cr-regular .cr-learning-grid {
  margin-top: 0;
}

.cr-regular .cr-ai-method {
  margin-top: var(--public-heading-gap);
}

@media (min-width: 768px) and (max-width: 1023px) {
  :is(.home-page, .about-page, .cr-regular, .contact-page) {
    --public-section-gap: var(--gap-section);
  }
}

@media (max-width: 767px) {
  :is(.home-page, .about-page, .cr-regular, .contact-page) {
    --public-section-gap: var(--gap-section);
    --public-heading-gap: var(--gap-heading);
  }
}

/* Title + supporting copy form a compact introduction; content follows after the larger gap. */
.about-page #about-ob-title-area {
  gap: var(--public-intro-gap);
}

.about-page .about-ai-copy h3 {
  margin-bottom: var(--public-intro-gap);
}

.about-page #about-slog .large-text {
  margin-top: var(--public-intro-gap);
}

.home-page #main-slogan-container h2 + p {
  margin-top: calc(var(--public-intro-gap) - var(--space-12));
}

.cr-regular .cr-ai-method-copy > h3 + p,
.cr-regular .cr-process-details-body > h3 + p {
  margin-top: var(--public-intro-gap);
}

.cr-regular .cr-process-details-body > h3 + p {
  margin-bottom: var(--public-heading-gap);
}

.cr-regular .cr-final .cr-button,
.home-page .method-copy .home-link,
.about-page .about-contact-link {
  margin-top: var(--gap-action);
}

.home-page #main-slogan-container .home-cta {
  margin-top: calc(var(--gap-action) - var(--space-12));
}

.home-page .main-bn-con-text {
  gap: var(--public-intro-gap);
}

.home-page .home-hero-actions {
  margin-top: calc(var(--public-heading-gap) - var(--public-intro-gap));
}

/* A shared ruled group owns the spacing at its internal boundary.
   60px below course details + 1px rule + 60px above FAQ on desktop.
   The outer stack still separates this group from other sections by 120px. */
.cr-regular .cr-logistics-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cr-regular .cr-logistics-group > .cr-info {
  border-top: 0;
  padding-bottom: var(--public-section-half);
}

.cr-regular .cr-logistics-group > .cr-faq-section {
  padding-top: var(--public-section-half);
}

/* The preceding filled starting-point band already marks this boundary. */
.cr-regular .cr-fields {
  border-top: 0;
}