/* ==========================================================================
   /become-a-partner/corporate: page CSS (asset injector)

   HOW THIS FILE IS ORGANIZED
   One block per page section, in page order. Each block is scoped by a
   custom class added to that block in Layout Builder, so nothing here leaks
   to other pages:

     .industry-partnerships  Industry Partnerships (logos)
     .tiles-heading          "Why More Organizations Choose Becker" heading
     .strengthen-pipeline    Navy section with 3 white cards
     .exam-reviews           Two-column Exam Reviews section
     .exam-review-tiles      Row of colored exam tiles (rich text block)
     .cpe-training           CPE & Training (image right)
     .ai-section             AI Training card (gray, rounded)
     .value-props            3 cards: Content Licensing / Custom Content / LMS
     .learning-compass       Magenta Learning Compass banner
     #form                   Blue "Get Started" form section

   CONVENTIONS
   - Breakpoints are the site's: 48em (tablet) and 64em (desktop).
     Rules outside a media query apply to mobile and up.
   - Selectors are often long on purpose. The site's own grid CSS is very
     specific, so shorter selectors silently lose. Where a long selector
     exists only to beat one site rule, it has a comment saying which.
   - The one !important (.learning-compass image) is there because the site
     writes width/height inline on that wrapper.
   ========================================================================== */


/* ==========================================================================
   Shared
   ========================================================================== */

/* Regions that contain a .p-banner-copy block: center the copy vertically */
.layout__region:has(.p-banner-copy) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.layout__region:has(.p-banner-copy) .c-richtext__content {
  margin-bottom: 0;
}


/* ==========================================================================
   Industry Partnerships
   ========================================================================== */

.industry-partnerships {
  background-color: #E9F3FA;
}

/* Tablet: the site sets the text column to height:100%, which leaves a big
   gap above the logos once the layout stacks */
@media screen and (min-width: 48em) and (max-width: 63.99em) {
  .industry-partnerships .c-grid-standard--text-col {
    height: auto;
    margin-bottom: 24px;
  }
}

/* Desktop: vertically centered text, with a gap before the logos (Figma) */
@media screen and (min-width: 64em) {
  .industry-partnerships .c-grid__item.c-grid__media_position--right .c-grid-standard--text-col {
    justify-content: center;
    width: 47.7%;
  }
  .industry-partnerships .c-grid__item.c-grid__media_position--right .c-grid-standard--media-col {
    width: 46.3%;
    margin-left: 6%;
  }
}


/* ==========================================================================
   "Why More Organizations Choose Becker" heading
   ========================================================================== */

.tiles-heading {
  padding-top: 72px;
}


/* ==========================================================================
   Strengthen Your Organizational Pipeline (navy, 3 white cards)
   ========================================================================== */

.strengthen-pipeline {
  background-color: #122048;
}

/* Card look */
.strengthen-pipeline .c-grid__item.c-bkr-grid__item.c-grid__item--standard.c-bkr-grid__item--standard {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 1px 4px 0 rgba(21, 34, 50, 0.24);
}

/* Card type */
.strengthen-pipeline .c-grid__item.c-bkr-grid__item.c-grid__item--standard.c-bkr-grid__item--standard h3 {
  font-size: 20px;
  line-height: 28px;
}
.strengthen-pipeline .c-grid__item.c-bkr-grid__item.c-grid__item--standard.c-bkr-grid__item--standard p {
  font-size: 16px;
  line-height: 24px;
}

/* Card spacing (all widths) */
.strengthen-pipeline .c-grid__items.c-bkr-grid__items { gap: 24px; padding-bottom: 0; }
.strengthen-pipeline .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard { padding: 24px; border: 0; }
.strengthen-pipeline .c-grid-standard--copy { padding: 0; }
.strengthen-pipeline .c-grid__item h3 { margin: 0 0 8px; }
.strengthen-pipeline .c-grid__item p { margin: 0; }

/* Tablet and up: stacked cards, section header and footer spacing */
@media screen and (min-width: 48em) {
  .strengthen-pipeline .c-bkr-grid__content.p-banner__bg-color--none { padding: 48px 32px; }
  .strengthen-pipeline .c-grid__content--inner { max-width: 1296px; }
  .strengthen-pipeline .c-grid__header--copy { margin: 0 0 48px; }
  .strengthen-pipeline .c-grid__header--copy h2 { font-size: 34px; line-height: 42px; margin: 0 0 16px; }
  .strengthen-pipeline .c-grid__header--copy p { font-size: 18px; line-height: 26px; max-width: 685px; margin: 0 auto; }
  .strengthen-pipeline .c-grid__items.c-bkr-grid__items { flex-direction: column; }
  .strengthen-pipeline .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard { width: 100%; }
  .strengthen-pipeline .c-grid__footer { margin-top: 48px; }
}

/* Desktop: 3 cards in a row (Figma) */
@media screen and (min-width: 64em) {
  .strengthen-pipeline .c-bkr-grid__content.p-banner__bg-color--none { padding: 72px; }
  .strengthen-pipeline .c-grid__items.c-bkr-grid__items { flex-direction: row; gap: 40px; }
  .strengthen-pipeline .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard { flex: 1 1 0; width: auto; min-width: 0; }
}


/* ==========================================================================
   Exam Reviews (two columns: text + card with a + list)
   ========================================================================== */

/* All widths: text column */
.exam-reviews .c-grid__items.c-bkr-grid__items { gap: 40px; padding-bottom: 0; }
.exam-reviews .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard { padding: 0; border: 0; }
.exam-reviews .c-grid-standard--text-col { height: auto; }
.exam-reviews .c-grid-standard--copy { padding: 0; }
.exam-reviews .c-grid-standard--title { font-size: 34px; line-height: 42px; margin: 0 0 16px; }
.exam-reviews .c-grid-standard--copy p { font-size: 18px; line-height: 26px; margin: 0; }

/* All widths: right-hand card with the + list */
.exam-reviews .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard:last-child {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(21, 34, 50, 0.24);
  padding: 24px;
}
.exam-reviews .c-grid__item:last-child ul { list-style: none; margin: 0; padding: 0; }
.exam-reviews .c-grid__item:last-child li { position: relative; margin: 0 0 8px; padding-left: 26px; font-size: 16px; line-height: 24px; }
.exam-reviews .c-grid__item:last-child li:last-child { margin-bottom: 0; }
.exam-reviews .c-grid__item:last-child li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px;
  background: #4a4a4a; /* icon color; change here */
  -webkit-mask: url("/themes/custom/bkr_subtheme/images/svg/becker-plus.svg") center / contain no-repeat;
          mask: url("/themes/custom/bkr_subtheme/images/svg/becker-plus.svg") center / contain no-repeat;
}

/* Tablet: stacked, bigger card padding */
@media screen and (min-width: 48em) {
  .exam-reviews .c-grid__items.c-bkr-grid__items { flex-direction: column; }
  .exam-reviews .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard { width: 100%; }
  .exam-reviews .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard:last-child { padding: 32px; }
}

/* Desktop: text left, card right (Figma) */
@media screen and (min-width: 64em) {
  .exam-reviews .c-bkr-grid__content.p-banner__bg-color--none { padding: 48px 72px 72px; }
  .exam-reviews .c-grid__content--inner { max-width: 1296px; }
  .exam-reviews .c-grid__items.c-bkr-grid__items { flex-direction: row; align-items: center; gap: 96px; }
  .exam-reviews .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard:first-child {
    flex: 1 1 0; width: auto; min-width: 0; max-width: 640px; align-self: center;
  }
  .exam-reviews .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard:last-child {
    flex: 0 0 500px; width: 500px; align-self: center; margin-left: auto;
  }
}


/* ==========================================================================
   Exam review tiles (rich text block: <ul> of 5 linked tiles)
   Tile colors follow the list order: CPA, CMA, CIA, CIA Challenge, EA.
   ========================================================================== */

.exam-review-tiles .c-richtext__content { margin: 0; padding: 0 16px; }
.exam-review-tiles .c-richtext__content--inner { max-width: 1296px; margin: 0 auto; }

.exam-review-tiles ul { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; margin: 0; padding: 0; }

.exam-review-tiles li {
  position: relative; flex: 1 1 200px; margin: 0; min-height: 80px; padding: 24px; border-radius: 8px;
  background: #152047; color: #fff; text-align: center;
  font-family: "Euclid Circular A Bold", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.exam-review-tiles li::first-line { font-size: 25px; line-height: 37px; } /* the exam name line */

.exam-review-tiles li a { color: inherit; text-decoration: none; }
.exam-review-tiles li a:first-of-type::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole tile clickable */
.exam-review-tiles li:focus-within { outline: 2px solid #122048; outline-offset: 2px; }

.exam-review-tiles li:nth-child(2) { background: #9ac6c7; color: #122048; }
.exam-review-tiles li:nth-child(3) { background: #064c77; }
.exam-review-tiles li:nth-child(4) { background: #fbc214; color: #122048; }
.exam-review-tiles li:nth-child(5) { background: #b11f5c; }

/* Hover: lift */
.exam-review-tiles li:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(21, 34, 50, 0.24); }
@media (prefers-reduced-motion: reduce) {
  .exam-review-tiles li { transition: none; }
  .exam-review-tiles li:hover { transform: none; }
}

/* Divider block directly under the tiles. The adjacent-sibling selector keeps
   the shared divider block from being restyled anywhere else on the site. */
.exam-review-tiles + .c-richtext .c-richtext__content { margin: 0; padding: 48px 16px 28px; }
.exam-review-tiles + .c-richtext .c-richtext__content--inner { max-width: 1296px; margin: 0 auto; }
.exam-review-tiles + .c-richtext hr { margin: 0; }

@media screen and (min-width: 48em) {
  .exam-review-tiles + .c-richtext .c-richtext__content { padding: 72px 32px 22px; }
}
@media screen and (min-width: 64em) {
  .exam-review-tiles .c-richtext__content { padding: 0 72px; }
  .exam-review-tiles + .c-richtext .c-richtext__content { padding: 72px 72px 22px; }
}


/* ==========================================================================
   CPE & Training (image right)
   ========================================================================== */

/* Tablet: same height:100% issue as Industry Partnerships. Without this the
   image drops out of the bottom of the section. */
@media screen and (min-width: 48em) and (max-width: 63.99em) {
  .cpe-training .c-grid-standard--text-col { height: auto; margin-bottom: 24px; }
}


/* ==========================================================================
   AI Training (gray rounded card)
   ========================================================================== */

.ai-section {
  background-color: #F4F4F4;
  border-radius: 16px;
}
.ai-section .c-bkr-button a {
  border: 2px solid #122048;
}

/* Tablet: same height:100% issue. Also replaces the site's margin:auto on the
   button, which pushed it out of the bottom of the section. */
@media screen and (min-width: 48em) and (max-width: 63.99em) {
  .ai-section .c-grid-standard--text-col { height: auto; }
  .ai-section .c-grid__item .c-grid-standard--text-col .c-button { margin: 24px 0 0; }
}


/* ==========================================================================
   Value props: 3 cards (Content Licensing / Custom Content / LMS)
   ========================================================================== */

/* Section spacing. The base padding-bottom only applies below 48em; the
   media queries at the end of this block set the full padding. */
.value-props .c-bkr-grid__content.p-banner__bg-color--none { padding-bottom: 48px; }
.value-props .c-grid__items.c-bkr-grid__items { gap: 24px; padding-bottom: 0; }

/* Card */
.value-props .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 32px 24px; border: 0; border-radius: 8px; background: #fff;
  box-shadow: 0 1px 4px rgba(21, 34, 50, 0.24);
}

/* 12px top bar, one color per card */
.value-props .c-grid__item::before {
  content: ""; display: block; /* the site sets display:table, which collapses the bar to 0 width */
  position: absolute; top: 0; left: 0; right: 0; height: 12px; background: #064c77;
}
.value-props .c-grid__item:nth-child(2)::before { background: #4896a2; }
.value-props .c-grid__item:nth-child(3)::before { background: #122048; }

.value-props .c-grid-standard--text-col { flex: 1 1 auto; height: auto; }

/* Icon (left aligned, 90px tall slot) */
.value-props .c-grid-standard--media { margin: 0 0 16px; }
.value-props .c-grid-standard--media .c-image > div { display: flex; align-items: center; justify-content: flex-start; height: 90px; }
/* must match the site's selector length or its margin:auto (centering) wins */
.value-props .c-bkr-grid__content .c-bkr-grid__item--standard .c-grid-standard--text-col .c-grid-standard--media:first-child img { margin: 0; }

/* Text (the title is the first <p>) */
.value-props .c-grid-standard--copy { flex: none; padding: 0 0 24px; color: #4a4a4a; }
.value-props .c-grid-standard--copy p { margin: 0; font-size: 16px; line-height: 24px; }
.value-props .c-grid-standard--copy p:first-child { margin-bottom: 8px; font-size: 20px; line-height: 28px; }

/* "Request More Info": underlined text with a chevron outside the underline.
   The long selector beats the site's .c-button { margin: auto }. The auto top
   margin pins the link to the bottom of the card so all three line up. */
.value-props .c-grid__item .c-grid-standard--text-col .c-button { margin: auto 0 0; }
.value-props .c-button .align-cta { display: inline-flex; align-items: center; }
.value-props .c-button a.e-btn--plain {
  display: inline-block; margin: 0; padding-bottom: 1px; border-bottom: 2px solid #122048;
  color: #122048; font-size: 16px; line-height: 24px; text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.value-props .c-button a.e-btn--plain::after { content: none; } /* hide the site's built-in chevron */
.value-props .c-button .align-cta::after {
  content: ""; box-sizing: border-box; width: 7px; height: 7px;
  margin-left: 5.5px; /* visible gap to the text is about 9px, matching Figma */
  border-top: 2px solid #122048; border-right: 2px solid #122048; transform: rotate(45deg);
  transition: transform .2s ease;
}

/* Link hover/focus: darker color, chevron slides right */
.value-props .c-button .align-cta:hover a.e-btn--plain,
.value-props .c-button a.e-btn--plain:focus-visible { color: #064c77; border-bottom-color: #064c77; }
.value-props .c-button .align-cta:hover::after { transform: translateX(4px) rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .value-props .c-button a.e-btn--plain, .value-props .c-button .align-cta::after { transition: none; }
}

/* Tablet: stacked cards */
@media screen and (min-width: 48em) {
  .value-props .c-bkr-grid__content.p-banner__bg-color--none { padding: 50px 32px 72px; }
  .value-props .c-grid__items.c-bkr-grid__items { flex-direction: column; }
  .value-props .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard { width: 100%; }
}
/* Desktop: 3 across */
@media screen and (min-width: 64em) {
  .value-props .c-bkr-grid__content.p-banner__bg-color--none { padding: 50px 72px 72px; }
  .value-props .c-grid__content--inner { max-width: 1296px; }
  .value-props .c-grid__items.c-bkr-grid__items { flex-direction: row; }
  .value-props .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard { flex: 1 1 0; width: auto; min-width: 0; }
}


/* ==========================================================================
   Learning Compass banner (magenta, book image right)
   ========================================================================== */

.learning-compass {
  background-color: #B01F5D;
}

/* Layout (mobile): content has no side padding because .c-grid__content--inner
   already adds a 16px gutter below 48em */
.learning-compass .c-bkr-grid__content.p-banner__bg-color--none { padding: 40px 0; }
.learning-compass .c-grid__items.c-bkr-grid__items { padding-bottom: 0; }
.learning-compass .c-grid__content--inner { max-width: 1296px; }
.learning-compass .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard { padding: 0; }
.learning-compass .c-grid__items .c-grid__item .c-grid-standard--text-col { height: auto; }

/* Text */
.learning-compass .c-grid-standard--title { margin: 0 0 16px; color: #fff; }
.learning-compass .c-grid-standard--copy { padding: 0; color: #fff; }
.learning-compass .c-grid-standard--copy p { margin: 0; font-size: 18px; line-height: 26px; }

/* Button: white with navy border. The long selector beats the site's
   .c-button { margin: auto }. */
.learning-compass .c-grid__item .c-grid-standard--text-col .c-button { margin: 32px 0 0; }
.learning-compass .c-button .align-cta { display: inline-block; }
.learning-compass .c-button a.e-btn--secondary {
  display: inline-block; box-sizing: border-box; padding: 10px 22px;
  border: 2px solid #122048; border-radius: 4px; background: #fff;
  color: #122048; font-size: 16px; line-height: 24px; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.learning-compass .c-button a.e-btn--secondary:hover,
.learning-compass .c-button a.e-btn--secondary:focus-visible { background: #122048; color: #fff; }
@media (prefers-reduced-motion: reduce) { .learning-compass .c-button a.e-btn--secondary { transition: none; } }

/* Image: the wrapper has inline width/height, so !important is needed.
   The PNG already has its shadow baked in. */
.learning-compass .img--right { width: 275px !important; max-width: 100% !important; height: auto !important; }
.learning-compass .img--right img { width: 100%; height: auto; }
.learning-compass .c-grid__items .c-grid__item .c-grid-standard--media-col { display: flex; justify-content: center; width: auto; }
.learning-compass .c-grid-standard--media { margin: 32px 0 0; }

/* Tablet */
@media screen and (min-width: 48em) {
  .learning-compass .c-bkr-grid__content.p-banner__bg-color--none { padding: 40px 32px; }
  .learning-compass .c-grid-standard--title { font-size: 34px; line-height: 42px; }
}
/* Desktop: text left (750px max), book right in a 353px-tall row (Figma) */
@media screen and (min-width: 64em) {
  .learning-compass .c-bkr-grid__content.p-banner__bg-color--none { padding: 40px 72px; }
  .learning-compass .c-grid__items .c-grid__item.c-bkr-grid__item.c-grid__item--standard { display: flex; align-items: center; gap: 24px; width: 100%; min-height: 353px; }
  .learning-compass .c-grid__items .c-grid__item .c-grid-standard--text-col { flex: 0 1 750px; width: auto; }
  .learning-compass .c-grid__items .c-grid__item .c-grid-standard--media-col { flex: 0 0 auto; justify-content: flex-start; height: 353px; align-items: center; margin: 0 45px 0 auto; }
  .learning-compass .c-grid-standard--media { margin: 20px 0 0; } /* nudges the book 10px down to match Figma */
}


/* ==========================================================================
   Form section ("Get Started with Becker") and spacing around it
   ========================================================================== */

#form {
  background-color: #064C77;
}

/* No white gap under the Learning Compass banner */
.grid__container:has(> .layout__regions .learning-compass) { margin-bottom: 0; }

/* 72px top and bottom padding on the section right after the banner
   (the blue form section). If another section is ever inserted between
   them, this selector will miss. */
.layout:has(.learning-compass) + .layout { padding: 72px 0; }
.layout:has(.learning-compass) + .layout > .grid__container { margin-bottom: 0; }