/*
 * Layout primitives for WP-migrated marketing pages.
 *
 * Pages populated by scripts/populate_empty_pages.py (about, why-dataquest,
 * partnerships, our-partners, etc.) keep their original WP class names. Most
 * of those classes were translated to Tailwind utilities in the populate
 * script, but layout-specific WP classes (.item-container, .post-item-container,
 * .step-container, .choices-wrapper, etc.) don't have direct Tailwind
 * equivalents and need explicit rules to render as grids/flex.
 *
 * Goal here is "looks good, matches the brand" — not pixel-perfect WP parity.
 * Use brand tokens (--c-blue, --c-pink, --c-rule) where possible. Keep the
 * file small and focused on layout, not page-specific accents.
 *
 * This CSS only applies to elements inside <main> on full_width pages — see
 * BaseLayout. Blog/article pages (`prose` mode) are unaffected.
 */

/* ──────────────────────────────────────────────────────────────────
   Grid wrappers — auto-flow into a responsive grid of cards
   ────────────────────────────────────────────────────────────────── */
.wp-page .choices-wrapper,
.wp-page .post-list,
.wp-page .results-list,
.wp-page .steps-wrapper,
.wp-page .teammate-cont,
.wp-page .characters-wrapper,
.wp-page .blocks-wrapper,
.wp-page .cat-post-list-container .post-list,
.wp-page .global-list,
.wp-page .img-list,
.wp-page .video-list,
.wp-page .col-container,
.wp-page .partners_list,
.wp-page .scholarship_list,
.wp-page .companies_list,
.wp-page .item-cont {
  display: grid !important;          /* override `flex` set inline by d-flex */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin: 24px 0;
}

/* ──────────────────────────────────────────────────────────────────
   Card-style children — borders, padding, hover lift
   ────────────────────────────────────────────────────────────────── */
.wp-page .item-container,
.wp-page .post-item-container,
.wp-page .step-container,
.wp-page .teammate-container,
.wp-page .cpt-list-container,
.wp-page .character-container,
.wp-page .block-item,
.wp-page .cat-list-post-container,
.wp-page .partners_list__item,
.wp-page .scholarship_list__item,
.wp-page .companies_list__item {
  border: 1px solid #D9DEE5;          /* brand-rule */
  padding: 24px;
  background: white;

  transition: border-color .15s ease, box-shadow .15s ease;
  display: flex;
  flex-direction: column;
}
.wp-page .item-container:hover,
.wp-page .post-item-container:hover,
.wp-page .step-container:hover,
.wp-page .cat-list-post-container:hover,
.wp-page .partners_list__item:hover,
.wp-page .scholarship_list__item:hover {
  border-color: #1F69FF;              /* brand-blue */
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

/* Partner card structure: logo on top, description in the middle, view link at bottom */
.wp-page .partners_list__item .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  margin-bottom: 16px;
}
.wp-page .partners_list__item .logo img {
  max-height: 50px;
  width: auto;
}
.wp-page .partners_list__item .description {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.wp-page .partners_list__item .description .txt {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(30, 30, 30, 0.75);
  margin-bottom: 12px;
}
.wp-page .partners_list__item .view {
  margin-top: auto;
}

/* ──────────────────────────────────────────────────────────────────
   Big stat numbers — center, brand pink, generous size
   ────────────────────────────────────────────────────────────────── */
.wp-page .results,
.wp-page .stat-number,
.wp-page .num-step {
  font-size: 48px;
  font-weight: 700;
  color: #1F69FF;
  line-height: 1.1;
  margin-bottom: 8px;
}
.wp-page .item-container,
.wp-page .step-container {
  text-align: center;
}

/* ──────────────────────────────────────────────────────────────────
   Section spacing + horizontal flow primitives
   ────────────────────────────────────────────────────────────────── */
.wp-page section {
  padding: 48px 0;
}
.wp-page section + section {
  border-top: 1px solid #E8EBF0;
}
.wp-page .parts {
  gap: 48px;
  align-items: flex-start;
}
.wp-page .titles-part {
  flex: 0 0 100%;
}
.wp-page .text-part {
  flex: 1 1 100%;
}
@media (min-width: 1024px) {
  .wp-page .titles-part { flex: 0 0 33%; }
  .wp-page .text-part   { flex: 1 1 67%; }
}

/* ──────────────────────────────────────────────────────────────────
   Photo grid (team photos, character photos)
   ────────────────────────────────────────────────────────────────── */
.wp-page .teammate-container img,
.wp-page .character-container img,
.wp-page .img-container img,
.wp-page .image-wrapper img {
  display: block;
  width: 100%;
  height: auto;

}

/* ──────────────────────────────────────────────────────────────────
   Buttons — generic primary/secondary that match brand
   ────────────────────────────────────────────────────────────────── */
.wp-page .global-btn,
.wp-page .btn-flex,
.wp-page .classic-btn {
  display: inline-block;
  margin-top: 12px;
}
.wp-page .global-btn a,
.wp-page .btn-flex a,
.wp-page .classic-btn a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background: #1F69FF;                 /* brand-blue */
  color: white !important;
  font-weight: 600;
  text-decoration: none;

  transition: background .15s ease;
}
.wp-page .global-btn a:hover,
.wp-page .btn-flex a:hover,
.wp-page .classic-btn a:hover {
  background: #4987FF;                 /* brand-blue-hover */
}

/* ──────────────────────────────────────────────────────────────────
   Comment / pull-quote
   ────────────────────────────────────────────────────────────────── */
.wp-page .comment-message {
  border-left: 4px solid #9B51E0;     /* brand-pink */
  padding-left: 16px;
  font-style: italic;
  color: rgba(30, 30, 30, 0.85);      /* brand-ink/85 */
  margin: 24px 0;
}
.wp-page .commentator {
  margin-top: 12px;
  font-size: 14px;
  color: rgba(30, 30, 30, 0.6);
}

/* ──────────────────────────────────────────────────────────────────
   Misc utility: keep WP iframe/video embeds responsive
   ────────────────────────────────────────────────────────────────── */
.wp-page .iframe-container,
.wp-page .video_iframe {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 24px 0;
}
.wp-page .iframe-container iframe,
.wp-page .video_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ──────────────────────────────────────────────────────────────────
   Reset oversized H1s in WP body. Live theme had 6+ h1s on a single
   page (one per section). Visually they're section headers, so render
   them at h2 size while keeping the semantic tag.
   ────────────────────────────────────────────────────────────────── */
.wp-page h1 {
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
  margin: 32px 0 16px;
}
.wp-page section:first-of-type h1:first-of-type,
.wp-page > h1:first-of-type {
  font-size: 48px;
  margin-top: 0;
}
@media (min-width: 1024px) {
  .wp-page section:first-of-type h1:first-of-type,
  .wp-page > h1:first-of-type {
    font-size: 56px;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Post / blog cards — used in cat-post-list, tutorial-list, etc.
   ────────────────────────────────────────────────────────────────── */
.wp-page .cat-list,
.wp-page .post-list-section,
.wp-page .tutorial-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 24px 0;
}
.wp-page .post-item,
.wp-page .tutorial-item {
  border: 1px solid #D9DEE5;
  background: white;

  padding: 20px;
  transition: border-color .15s ease, box-shadow .15s ease;
  display: flex;
  flex-direction: column;
}
.wp-page .post-item:hover,
.wp-page .tutorial-item:hover {
  border-color: #1F69FF;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}
.wp-page .post-top {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.wp-page .post-title h2,
.wp-page .post-title h3 {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  color: #1e1e1e;
}
.wp-page .post-title a {
  color: inherit;
  text-decoration: none;
}
.wp-page .post-bottom {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: rgba(30, 30, 30, 0.6);
}

/* ──────────────────────────────────────────────────────────────────
   "View" / button-other / read-more links
   ────────────────────────────────────────────────────────────────── */
.wp-page .view a,
.wp-page .btn-other a,
.wp-page a.view,
.wp-page a.btn-other,
.wp-page .hover-line a {
  color: #1F69FF;
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wp-page .view a:hover,
.wp-page .btn-other a:hover,
.wp-page .hover-line a:hover {
  text-decoration: underline;
}

/* ──────────────────────────────────────────────────────────────────
   Section blocks (teaching/efficiency/learning/overview)
   ────────────────────────────────────────────────────────────────── */
.wp-page .teaching-block,
.wp-page .overview-block,
.wp-page .efficiency-block,
.wp-page .learning-block,
.wp-page .roles_section,
.wp-page .main_section,
.wp-page .partners_section,
.wp-page .scrolled-section {
  padding: 56px 0;
}
.wp-page .teaching-block.bg-gray,
.wp-page .overview-block.bg-gray,
.wp-page .learning-block.bg-gray {
  background: #F7F8FA;
}

/* ──────────────────────────────────────────────────────────────────
   3-column row — when a section has a row of 3 columns
   ────────────────────────────────────────────────────────────────── */
.wp-page .col-72 {
  flex: 1 1 100%;
}
@media (min-width: 1024px) {
  .wp-page .col-72 { flex: 0 0 72%; }
}

/* ──────────────────────────────────────────────────────────────────
   Date / author meta lines
   ────────────────────────────────────────────────────────────────── */
.wp-page .date,
.wp-page .author-name,
.wp-page .courses-count {
  font-size: 13px;
  color: rgba(30, 30, 30, 0.55);
  margin: 4px 0;
}
.wp-page .courses-count {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-size: 12px;
}

/* ──────────────────────────────────────────────────────────────────
   Star ratings (stub — uses text not stars since we don't ship FA icons)
   ────────────────────────────────────────────────────────────────── */
.wp-page .rate-container {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
}
.wp-page .rate-num {
  font-weight: 700;
  color: #1e1e1e;
}

/* ──────────────────────────────────────────────────────────────────
   Hide ornamental Font Awesome icons we don't ship.
   The .fa class triggers Font Awesome rendering; without the font
   loaded, you get an empty rectangle. Hide rather than block.
   ────────────────────────────────────────────────────────────────── */
.wp-page i.fa,
.wp-page i.fas,
.wp-page i.far,
.wp-page i.fab,
.wp-page i.fal,
.wp-page i.fa-play,
.wp-page .video-play-icon,
.wp-page .play-container,
.wp-page .loader,
.wp-page .loader_cont {
  display: none;
}

/* ──────────────────────────────────────────────────────────────────
   Generic content-block padding
   ────────────────────────────────────────────────────────────────── */
.wp-page .content,
.wp-page .item-content {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(30, 30, 30, 0.85);
}

/* ──────────────────────────────────────────────────────────────────
   Anchors / table-of-contents items
   ────────────────────────────────────────────────────────────────── */
.wp-page .anchor-item {
  display: block;
  padding: 6px 12px;
  color: #1F69FF;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .15s ease, border-left-color .15s ease;
}
.wp-page .anchor-item:hover {
  background: rgba(31, 105, 255, 0.05);
  border-left-color: #1F69FF;
}

/* ──────────────────────────────────────────────────────────────────
   Layout helpers / aliases that don't have Tailwind equivalents
   ────────────────────────────────────────────────────────────────── */
.wp-page .pos-rel { position: relative; }
.wp-page .d-block { display: block; }
.wp-page .tr01 { transition: all 0.1s ease; }
.wp-page .tr03 { transition: all 0.3s ease; }

/* ──────────────────────────────────────────────────────────────────
   Step-by-step blocks (How it works, etc.)
   ────────────────────────────────────────────────────────────────── */
.wp-page .step-name {
  font-size: 18px;
  font-weight: 600;
  color: #1e1e1e;
  margin: 8px 0;
}
.wp-page .icon-container,
.wp-page .icon-cont {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: rgba(31, 105, 255, 0.1);

}

/* ──────────────────────────────────────────────────────────────────
   Char-item (likely characters / mascot section)
   ────────────────────────────────────────────────────────────────── */
.wp-page .char-item,
.wp-page .item-cont {
  text-align: center;
  padding: 16px;
}