/* =========================================================
   Gospel Reclaimed — Voices Worth Hearing Page
   File: gr-voices-page.css

   Page:
   /voices-worth-hearing/

   Elementor classes expected:
   .gr-voices-page
   .gr-voices-hero
   .gr-voices-hero-inner
   .gr-voices-eyebrow
   .gr-voices-library
   .gr-voices-library-inner
   .gr-voices-closing
   ========================================================= */

:root {
  --gr-voices-navy: #16222d;
  --gr-voices-navy-soft: #1d2b38;
  --gr-voices-navy-dark: #0b141d;
  --gr-voices-gold: #c09a00;
  --gr-voices-gold-bright: #e8b400;
  --gr-voices-cream: #fffdf8;
  --gr-voices-cream-2: #f7f3ea;
  --gr-voices-white: #ffffff;
  --gr-voices-text: #1a2530;
  --gr-voices-muted: #5e6872;
  --gr-voices-border: rgba(22, 34, 45, 0.13);
}

/* =========================================================
   Page shell
   ========================================================= */

.gr-voices-page {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  background: var(--gr-voices-cream) !important;
  color: var(--gr-voices-text) !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

.gr-voices-page * {
  box-sizing: border-box !important;
}

/* Hide old intro section if an empty leftover container still exists */
.gr-voices-intro,
.gr-voices-intro-inner {
  display: none !important;
}

/* =========================================================
   Hero
   ========================================================= */

.gr-voices-hero {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 78px 28px 70px !important;

  background:
    radial-gradient(circle at 50% 8%, rgba(232, 180, 0, 0.13), transparent 34%),
    linear-gradient(180deg, #fffdf8 0%, #f8f1e8 100%) !important;

  border-bottom: 1px solid rgba(22, 34, 45, 0.09) !important;

  text-align: center !important;
}

.gr-voices-hero-inner {
  width: 100% !important;
  max-width: 960px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  text-align: center !important;

  --width: 100% !important;
  --content-width: 100% !important;
  --max-width: 960px !important;
}

/* Eyebrow */

.gr-voices-eyebrow,
.gr-voices-eyebrow .elementor-widget-container {
  margin: 0 0 20px !important;
  padding: 0 !important;
}

.gr-voices-eyebrow .elementor-heading-title,
.gr-voices-eyebrow h1,
.gr-voices-eyebrow h2,
.gr-voices-eyebrow h3 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 8px 13px !important;

  background: rgba(232, 180, 0, 0.12) !important;
  color: #8a6c00 !important;

  border: 1px solid rgba(232, 180, 0, 0.30) !important;
  border-radius: 999px !important;

  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}

/* Hero title */

.gr-voices-hero-inner > .elementor-widget-heading:not(.gr-voices-eyebrow),
.gr-voices-hero-inner > .elementor-widget-heading:not(.gr-voices-eyebrow) .elementor-widget-container {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}

.gr-voices-hero-inner > .elementor-widget-heading:not(.gr-voices-eyebrow) .elementor-heading-title,
.gr-voices-hero-inner > .elementor-widget-heading:not(.gr-voices-eyebrow) h1,
.gr-voices-hero-inner > .elementor-widget-heading:not(.gr-voices-eyebrow) h2 {
  color: var(--gr-voices-navy) !important;

  max-width: 880px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  font-size: clamp(48px, 6vw, 78px) !important;
  line-height: 0.98 !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;

  text-align: center !important;
}

/* Hero intro */

.gr-voices-hero-inner > .elementor-widget-text-editor,
.gr-voices-hero-inner > .elementor-widget-text-editor .elementor-widget-container {
  width: 100% !important;
  max-width: 800px !important;

  margin: 28px auto 0 !important;
  padding: 0 !important;

  text-align: center !important;
}

.gr-voices-hero-inner > .elementor-widget-text-editor p {
  color: #3a4651 !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 21px !important;
  line-height: 1.66 !important;
  font-weight: 430 !important;

  text-align: center !important;
}

/* =========================================================
   Library section
   ========================================================= */

.gr-voices-library {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 64px 28px 78px !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(232, 180, 0, 0.045), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #fffaf2 100%) !important;

  border-bottom: 1px solid rgba(22, 34, 45, 0.08) !important;
}

.gr-voices-library-inner {
  width: 100% !important;
  max-width: 1220px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  text-align: center !important;

  --width: 100% !important;
  --content-width: 100% !important;
  --max-width: 1220px !important;
}

.gr-voices-library-inner > .elementor-widget-heading,
.gr-voices-library-inner > .elementor-widget-heading .elementor-widget-container {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}

.gr-voices-library-inner > .elementor-widget-heading .elementor-heading-title,
.gr-voices-library-inner > .elementor-widget-heading h2,
.gr-voices-library-inner > .elementor-widget-heading h3 {
  color: var(--gr-voices-navy) !important;

  max-width: 820px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  font-size: clamp(34px, 4vw, 54px) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;

  text-align: center !important;
}

.gr-voices-library-inner > .elementor-widget-text-editor,
.gr-voices-library-inner > .elementor-widget-text-editor .elementor-widget-container {
  width: 100% !important;
  max-width: 780px !important;

  margin: 22px auto 0 !important;
  padding: 0 !important;

  text-align: center !important;
}

.gr-voices-library-inner > .elementor-widget-text-editor p {
  color: var(--gr-voices-muted) !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 19px !important;
  line-height: 1.7 !important;
  font-weight: 430 !important;

  text-align: center !important;
}

/* =========================================================
   Elementor Posts widget
   ========================================================= */

.gr-voices-library .elementor-widget-posts,
.gr-voices-library .elementor-widget-posts .elementor-widget-container {
  width: 100% !important;
  max-width: 1220px !important;

  margin: 42px auto 0 !important;
  padding: 0 !important;
}

/* Grid layout */

.gr-voices-library .elementor-posts-container,
.gr-voices-library .elementor-posts {
  width: 100% !important;
  max-width: 1220px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;

  align-items: stretch !important;
}

/* When there is only one guest article, make it look intentional */

.gr-voices-library .elementor-posts-container:not(:has(.elementor-post:nth-child(2))),
.gr-voices-library .elementor-posts:not(:has(.elementor-post:nth-child(2))) {
  grid-template-columns: minmax(0, 760px) !important;
  justify-content: center !important;
}

/* Individual post card */

.gr-voices-library .elementor-post {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  background: rgba(255, 255, 255, 0.92) !important;

  border: 1px solid var(--gr-voices-border) !important;
  border-radius: 24px !important;

  box-shadow:
    0 24px 70px rgba(22, 34, 45, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;

  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  text-align: left !important;
}

.gr-voices-library .elementor-post * {
  min-width: 0 !important;
}

/* Hide metadata for a cleaner evergreen guest-library feel */

.gr-voices-library .elementor-post__meta-data {
  display: none !important;
}

/* Post image */

.gr-voices-library .elementor-post__thumbnail__link {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  border: 0 !important;
  text-decoration: none !important;
}

.gr-voices-library .elementor-post__thumbnail {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: 330px !important;

  margin: 0 !important;
  padding: 0 !important;
  padding-bottom: 0 !important;

  position: relative !important;
  overflow: hidden !important;

  background: rgba(22, 34, 45, 0.06) !important;
}

.gr-voices-library .elementor-post__thumbnail img {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  height: 100% !important;
  min-height: 100% !important;

  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;

  object-fit: cover !important;
  object-position: center center !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  transform: none !important;
  transform-origin: center center !important;

  transition: transform 0.28s ease !important;
}

.gr-voices-library .elementor-post:hover .elementor-post__thumbnail img {
  transform: scale(1.035) !important;
}

/* Post text spacing */

.gr-voices-library .elementor-post__text {
  width: 100% !important;

  padding: 30px 32px 32px !important;

  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;

  text-align: left !important;
}

/* Title */

.gr-voices-library .elementor-post__title {
  margin: 0 !important;
  padding: 0 !important;
}

.gr-voices-library .elementor-post__title,
.gr-voices-library .elementor-post__title a {
  color: var(--gr-voices-navy) !important;

  font-size: 29px !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;

  text-align: left !important;
  text-decoration: none !important;
}

.gr-voices-library .elementor-post__title a:hover,
.gr-voices-library .elementor-post__title a:focus {
  color: #8a6c00 !important;
}

/* Excerpt */

.gr-voices-library .elementor-post__excerpt {
  margin: 17px 0 0 !important;
  padding: 0 !important;
}

.gr-voices-library .elementor-post__excerpt p {
  color: #46525d !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 16.5px !important;
  line-height: 1.66 !important;
  font-weight: 430 !important;

  text-align: left !important;
}

/* Read more */

.gr-voices-library .elementor-post__read-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 50px !important;

  margin: 28px 0 0 !important;
  padding: 15px 22px !important;

  background: var(--gr-voices-navy) !important;
  color: var(--gr-voices-white) !important;

  border: 1px solid var(--gr-voices-navy) !important;
  border-radius: 11px !important;

  font-size: 15.5px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;

  text-align: center !important;
  text-decoration: none !important;

  box-shadow: 0 14px 30px rgba(22, 34, 45, 0.14) !important;

  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease !important;
}

.gr-voices-library .elementor-post__read-more:hover,
.gr-voices-library .elementor-post__read-more:focus {
  background: var(--gr-voices-gold-bright) !important;
  color: var(--gr-voices-navy) !important;
  border-color: var(--gr-voices-gold-bright) !important;

  transform: translateY(-1px) !important;

  box-shadow: 0 18px 36px rgba(192, 154, 0, 0.22) !important;
}

/* Pagination, if enabled later */

.gr-voices-library .elementor-pagination {
  margin: 44px 0 0 !important;
  padding: 0 !important;

  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
}

.gr-voices-library .elementor-pagination a,
.gr-voices-library .elementor-pagination span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 42px !important;
  min-height: 42px !important;

  padding: 10px 13px !important;

  border-radius: 10px !important;
  border: 1px solid rgba(22, 34, 45, 0.13) !important;

  color: var(--gr-voices-navy) !important;
  background: rgba(255, 255, 255, 0.72) !important;

  font-weight: 850 !important;
  text-decoration: none !important;
}

.gr-voices-library .elementor-pagination .current {
  color: var(--gr-voices-navy) !important;
  background: var(--gr-voices-gold-bright) !important;
  border-color: var(--gr-voices-gold-bright) !important;
}

/* =========================================================
   Closing section
   ========================================================= */

.gr-voices-closing {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 82px 28px 88px !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(232, 180, 0, 0.16), transparent 32%),
    linear-gradient(180deg, #101b26 0%, #0b141d 100%) !important;

  color: var(--gr-voices-white) !important;

  border-top: 2px solid rgba(232, 180, 0, 0.46) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  text-align: center !important;
}

.gr-voices-closing .elementor-widget-heading,
.gr-voices-closing .elementor-widget-text-editor,
.gr-voices-closing .elementor-widget-button,
.gr-voices-closing .elementor-widget-heading .elementor-widget-container,
.gr-voices-closing .elementor-widget-text-editor .elementor-widget-container,
.gr-voices-closing .elementor-widget-button .elementor-widget-container {
  width: 100% !important;
  max-width: 860px !important;

  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;

  text-align: center !important;
}

.gr-voices-closing .elementor-heading-title,
.gr-voices-closing h1,
.gr-voices-closing h2,
.gr-voices-closing h3 {
  color: var(--gr-voices-white) !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: clamp(38px, 5vw, 62px) !important;
  line-height: 1.04 !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;

  text-align: center !important;
}

.gr-voices-closing .elementor-widget-text-editor {
  margin-top: 26px !important;
}

.gr-voices-closing p {
  color: rgba(255, 255, 255, 0.80) !important;

  max-width: 720px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  font-size: 21px !important;
  line-height: 1.62 !important;
  font-weight: 430 !important;

  text-align: center !important;
}

.gr-voices-closing .elementor-widget-button {
  margin-top: 34px !important;
}

.gr-voices-closing .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 54px !important;

  padding: 17px 30px !important;

  background: var(--gr-voices-gold-bright) !important;
  color: var(--gr-voices-navy) !important;

  border: 1px solid var(--gr-voices-gold-bright) !important;
  border-radius: 11px !important;

  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;

  text-decoration: none !important;

  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24) !important;

  transition:
    background-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease !important;
}

.gr-voices-closing .elementor-button:hover,
.gr-voices-closing .elementor-button:focus {
  background: #f3c832 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.30) !important;
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1024px) {
  .gr-voices-hero {
    padding: 68px 26px 60px !important;
  }

  .gr-voices-library {
    padding: 60px 26px 72px !important;
  }

  .gr-voices-library .elementor-posts-container,
  .gr-voices-library .elementor-posts {
    max-width: 820px !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .gr-voices-library .elementor-post__thumbnail {
    height: 360px !important;
  }

  .gr-voices-closing {
    padding: 72px 26px 78px !important;
  }
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {
  .gr-voices-hero {
    padding: 54px 20px 48px !important;
  }

  .gr-voices-eyebrow .elementor-heading-title,
  .gr-voices-eyebrow h1,
  .gr-voices-eyebrow h2,
  .gr-voices-eyebrow h3 {
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
  }

  .gr-voices-hero-inner > .elementor-widget-heading:not(.gr-voices-eyebrow) .elementor-heading-title,
  .gr-voices-hero-inner > .elementor-widget-heading:not(.gr-voices-eyebrow) h1,
  .gr-voices-hero-inner > .elementor-widget-heading:not(.gr-voices-eyebrow) h2 {
    font-size: 40px !important;
    line-height: 1.04 !important;
  }

  .gr-voices-hero-inner > .elementor-widget-text-editor p {
    font-size: 18px !important;
    line-height: 1.62 !important;
  }

  .gr-voices-library {
    padding: 48px 20px 64px !important;
  }

  .gr-voices-library-inner > .elementor-widget-heading .elementor-heading-title,
  .gr-voices-library-inner > .elementor-widget-heading h2,
  .gr-voices-library-inner > .elementor-widget-heading h3 {
    font-size: 32px !important;
    line-height: 1.12 !important;
  }

  .gr-voices-library-inner > .elementor-widget-text-editor p {
    font-size: 17px !important;
    line-height: 1.68 !important;
  }

  .gr-voices-library .elementor-widget-posts,
  .gr-voices-library .elementor-widget-posts .elementor-widget-container {
    margin-top: 36px !important;
  }

  .gr-voices-library .elementor-post {
    border-radius: 21px !important;
  }

  .gr-voices-library .elementor-post__thumbnail {
    height: 245px !important;
  }

  .gr-voices-library .elementor-post__text {
    padding: 26px 24px 26px !important;
  }

  .gr-voices-library .elementor-post__title,
  .gr-voices-library .elementor-post__title a {
    font-size: 24px !important;
  }

  .gr-voices-library .elementor-post__excerpt p {
    font-size: 16px !important;
  }

  .gr-voices-closing {
    padding: 62px 20px 68px !important;
  }

  .gr-voices-closing .elementor-heading-title,
  .gr-voices-closing h1,
  .gr-voices-closing h2,
  .gr-voices-closing h3 {
    font-size: 35px !important;
    line-height: 1.08 !important;
  }

  .gr-voices-closing p {
    font-size: 18px !important;
    line-height: 1.62 !important;
  }

  .gr-voices-closing .elementor-widget-button,
  .gr-voices-closing .elementor-button {
    width: 100% !important;
  }
}

/* =========================================================
   Extra-small mobile
   ========================================================= */

@media (max-width: 420px) {
  .gr-voices-hero,
  .gr-voices-library,
  .gr-voices-closing {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .gr-voices-hero-inner > .elementor-widget-heading:not(.gr-voices-eyebrow) .elementor-heading-title,
  .gr-voices-hero-inner > .elementor-widget-heading:not(.gr-voices-eyebrow) h1,
  .gr-voices-hero-inner > .elementor-widget-heading:not(.gr-voices-eyebrow) h2 {
    font-size: 36px !important;
  }

  .gr-voices-library .elementor-post__thumbnail {
    height: 220px !important;
  }

  .gr-voices-library .elementor-post__text {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  .gr-voices-closing .elementor-heading-title,
  .gr-voices-closing h1,
  .gr-voices-closing h2,
  .gr-voices-closing h3 {
    font-size: 32px !important;
  }
}