/* Scoped, reversible spacing and type refinements for the reviewed public pages. */

/* Homepage: restore a clear hierarchy within the existing hero artwork. */
body.home .hero-h1-col .hero-h1-top {
  font-family: var(--ff-heading);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem) !important;
  font-weight: 600 !important;
}

body.home .hero-h1-col .hero-h1-bridge {
  font-family: var(--ff-heading);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem) !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
}

body.home .hero-h1-col .hero-h1-hero,
body.home .hero-h1-col .hero-h1-hero .ff-display {
  font-family: var(--ff-heading) !important;
  font-size: clamp(2.75rem, 4vw, 3.25rem) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.home .hero-subtitle {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.7;
}

body.home .section {
  padding-top: 64px;
  padding-bottom: 64px;
}

body.home .section-sm {
  padding-top: 40px;
  padding-bottom: 40px;
}

body.home .hp-storybooks-section h2,
body.home .hp-how-section h2,
body.home .hp-parents-section h2 {
  font-family: var(--ff-heading);
  font-size: clamp(1.75rem, 2.8vw, 2.125rem) !important;
  line-height: 1.2;
}

/* Hero profiles, including David: let the content determine the banner height. */
.hero-profile-banner {
  min-height: min(80vh, 700px);
}

.hero-profile-content {
  gap: 40px;
  padding-top: 112px;
  padding-bottom: 64px;
}

.hero-profile-name {
  font-family: var(--ff-heading);
  font-size: clamp(2.75rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
}

.hero-profile-bio,
.hero-story-body {
  max-width: 68ch;
  line-height: 1.7;
}

.hero-story-body {
  font-size: 17px;
}

.hero-profile-portrait img {
  height: min(52vw, 460px);
}

.hero-profile-banner + .hero-profile-gradient-divider + .section {
  padding-top: 64px;
  padding-bottom: 64px;
}

/* Free Downloads: make the resource grid easier to scan without changing its art. */
.ff-refine-downloads .page-header {
  padding-top: 136px;
  padding-bottom: 64px;
}

.ff-refine-downloads .page-header h1 {
  font-family: var(--ff-heading);
  font-size: clamp(2.75rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.14;
}

.ff-refine-downloads .page-header p {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.7;
}

.ff-refine-downloads .ffd-downloads-section,
.ff-refine-downloads .popular-downloads-section {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

.ff-refine-downloads .ffd-downloads-head {
  margin-bottom: 28px !important;
}

.ff-refine-downloads .ffd-downloads-head h2,
.ff-refine-downloads .ffd-why-head h2 {
  font-family: var(--ff-heading);
  font-size: clamp(1.75rem, 2.8vw, 2.125rem) !important;
  line-height: 1.2;
}

.ff-refine-downloads .ffd-search-filter {
  margin-bottom: 36px !important;
}

.ff-refine-downloads .ffd-category-filter {
  margin-bottom: 36px !important;
}

.ff-refine-downloads .ffd-grid {
  gap: 24px;
}

.ff-refine-downloads .ffd-card-image {
  aspect-ratio: 4 / 3;
  max-height: 260px;
}

.ff-refine-downloads .ffd-card-image img {
  object-fit: contain;
}

.ff-refine-downloads .ffd-card-body {
  padding: 20px;
  gap: 14px;
}

.ff-refine-downloads .ffd-btn {
  min-height: 44px;
}

/* Parent Edit: keep the reading type and narrow the measure. */
.pe-archive-header {
  padding-top: 136px;
  padding-bottom: 64px;
}

.pe-archive-header h1 {
  font-family: var(--ff-heading);
  font-size: clamp(2.75rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.14;
}

.pe-archive-header p {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.7;
}

.pe-hero-img {
  min-height: 300px;
}

.pe-hero-body {
  padding: 30px;
}

.pe-hero-excerpt {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.7;
}

.ff-refine-parent-article .cc-single-header {
  padding-top: 136px;
  padding-bottom: 72px;
}

.ff-refine-parent-article .cc-single-header-content h1 {
  font-family: var(--ff-heading);
  font-size: clamp(2.75rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.15;
}

.ff-refine-parent-article .cc-single-layout {
  gap: 40px;
}

.ff-refine-parent-article .cc-single-content {
  max-width: 70ch;
  font-size: 17px;
  line-height: 1.75;
}

.ff-refine-parent-article .cc-content-block {
  margin-bottom: 36px;
  padding-top: 36px;
  padding-bottom: 32px;
}

.ff-refine-parent-article .cc-content-block > h2 {
  font-family: var(--ff-heading);
  font-size: clamp(1.75rem, 2.8vw, 2.125rem);
  font-weight: 700;
}

/* Divine Dispatch: preserve the verse treatment while shortening its reading header. */
.dd-hero {
  min-height: 580px;
  padding-top: 112px;
  padding-bottom: 72px;
}

.dd-hero-inner {
  gap: 40px;
}

.dd-hero h1 {
  font-family: var(--ff-heading);
  font-size: clamp(2.75rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.12;
}

.dd-hero-art {
  width: min(100%, 380px);
  justify-self: center;
}

.dd-content-section {
  padding-top: 64px;
  padding-bottom: 64px;
}

.dd-content {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.7;
}

.dd-content h2 {
  font-family: var(--ff-heading);
  font-size: clamp(1.75rem, 2.8vw, 2.125rem);
  line-height: 1.2;
}

@media (min-width: 1025px) {
  .footer-grid--compact {
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
  }
}

@media (max-width: 768px) {
  body.home .hero-h1-col .hero-h1-hero,
  body.home .hero-h1-col .hero-h1-hero .ff-display {
    font-size: clamp(2rem, 8.8vw, 2.25rem) !important;
  }

  body.home .hero-h1-col .hero-h1-bridge {
    font-size: clamp(1.25rem, 5.5vw, 1.5rem) !important;
  }

  body.home .section,
  .hero-profile-banner + .hero-profile-gradient-divider + .section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  body.home .section-sm {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .hero-profile-banner {
    min-height: 0;
  }

  .hero-profile-content {
    gap: 24px;
    padding-top: 112px;
    padding-bottom: 48px;
  }

  .hero-profile-name {
    font-size: clamp(2rem, 8.8vw, 2.25rem);
  }

  .ff-refine-downloads .page-header,
  .pe-archive-header,
  .ff-refine-parent-article .cc-single-header {
    padding-top: 112px;
    padding-bottom: 48px;
  }

  .ff-refine-downloads .page-header h1,
  .pe-archive-header h1,
  .ff-refine-parent-article .cc-single-header-content h1 {
    font-size: clamp(2rem, 8.8vw, 2.25rem);
  }

  .ff-refine-downloads .ffd-downloads-section,
  .ff-refine-downloads .popular-downloads-section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .ff-refine-downloads .ffd-downloads-head h2,
  .ff-refine-downloads .ffd-why-head h2,
  .ff-refine-parent-article .cc-content-block > h2 {
    font-size: clamp(1.75rem, 7vw, 2rem) !important;
  }

  .ff-refine-downloads .ffd-card-image {
    max-height: 250px;
  }

  .ff-refine-downloads .ffd-card-body {
    padding: 20px;
  }

  .pe-hero-img {
    min-height: 200px;
  }

  .pe-hero-body {
    padding: 22px;
  }

  .ff-refine-parent-article .cc-single-layout {
    gap: 28px;
  }

  .ff-refine-parent-article .cc-content-block {
    margin-bottom: 28px;
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .dd-hero {
    min-height: 0;
    padding-top: 104px;
    padding-bottom: 52px;
  }

  .dd-hero-inner {
    gap: 28px;
  }

  .dd-hero h1 {
    font-size: clamp(2rem, 8.8vw, 2.25rem);
  }

  .dd-hero-art {
    width: min(100%, 340px);
  }

  .dd-content-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .dd-content h2 {
    font-size: clamp(1.75rem, 7vw, 2rem);
  }
}

@media (max-width: 640px) {
  body.home .hero-content .hero-img-wrap {
    width: min(72vw, 220px) !important;
    max-width: 220px !important;
  }

  body.home .hero-content .hero-img-wrap img {
    height: min(62vw, 200px) !important;
    max-height: 200px !important;
  }
}

/* Parent Edit archive: virtue first, search last, equal desktop columns. */
@media (min-width: 1025px) {
  .pe-archive-header + .hm-search-section > .container:has(> .archive-need-start) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: center;
  }
  .pe-archive-header + .hm-search-section > .container > * {
    grid-column: 1 / -1;
  }
  .pe-archive-header + .hm-search-section > .container > .archive-need-start,
  .pe-archive-header + .hm-search-section > .container > .hm-search-form {
    grid-column: auto;
    min-width: 0;
    width: 100%;
    margin: 0;
  }
  .pe-archive-header + .hm-search-section .shop-need-finder {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
  }
  .pe-archive-header + .hm-search-section .shop-need-finder.has-selection {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .pe-archive-header + .hm-search-section .shop-need-finder.has-selection .shop-need-label {
    grid-column: 1 / -1;
  }
  .pe-archive-header + .hm-search-section .shop-need-select-wrap,
  .pe-archive-header + .hm-search-section .hm-search-input-wrap {
    min-width: 0;
  }
  .pe-archive-header + .hm-search-section .shop-need-label {
    padding-left: 0;
  }
  .pe-archive-header + .hm-search-section .shop-need-status {
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  .pe-archive-header + .hm-search-section .shop-need-finder {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .pe-archive-header + .hm-search-section .shop-need-label {
    grid-column: 1 / -1;
  }
}

/* Broader introductions on blog landing pages; article reading widths stay intact. */
.pe-archive-header .container > h1 + p,
.cc-archive-header .container > h1 + p,
.hm-header .container > h1 + p {
  max-width: 880px !important;
}

/* Simplified Parent Edit introduction, approved after the wider-intro trial. */
.pe-archive-header {
  padding-bottom: 40px;
}
.pe-archive-header .container > h1 + .pe-archive-intro {
  max-width: 740px !important;
  margin: 0 auto;
  line-height: 1.65;
  text-wrap: balance;
}
.pe-archive-header .pe-archive-audience {
  margin: 18px auto 0;
  font-size: 14px;
  line-height: 1.6;
}
.pe-archive-header + .hm-search-section {
  padding-top: 24px;
}
@media (max-width: 768px) {
  .pe-archive-header { padding-bottom: 32px; }
}