/* ==========================================================================
   Page: blog post (/bkc-sponsorship-2024/) — loaded after site.css
   ========================================================================== */

/* Photo hero; it slides under the header on phones, like the live page */
.post-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 55vh;
  margin-top: -99px;
  padding: 130px 0 109px;
  overflow: hidden;
  background: var(--c-purple) url("/assets/img/Matthew-Higgins_8087-scaled-1.jpg") no-repeat center / cover;
  text-align: center;
}
.post-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(33, 18, 97, .37) url("/assets/img/MRLIdentifierBW.webp") no-repeat 0 0 / 48% auto;
}
.post-hero > * { position: relative; }

.post-hero__title {
  width: 100%;
  font-family: var(--font-head);
  /* live: 60px, which pushes "Championship" (9.05em wide) off phones */
  font-size: min(60px, 11vw - 1px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-white);
}

.post-hero__badges { margin-top: 20px; }

/* Article text */
.post-intro { margin-top: 75px; }

.post-intro p,
.post-quote p,
.post-text p { margin: 0 0 14.4px; }

.post-quote {
  margin: 0;
  padding: 30px 50px;
  border-radius: 7px;
  background: var(--c-light);
}

.post-text { margin-top: 20px; }

/* "Why use MyRaceLab?" */
.post-why { margin-top: 30px; }

.post-why__title {
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 600;
  line-height: 30px;
  color: var(--c-text);
}

.post-why__list {
  margin-top: 50px;
  list-style: none;
}
.post-why__list li {
  display: flex;
  align-items: center;
  gap: 9px;
}
.post-why__list li + li { margin-top: 15px; }
/* Font Awesome "dot-circle" look: black disc with a small white centre */
.post-why__list li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-white) 0 2.2px, var(--c-text) 2.6px);
}

.post-closing { margin-top: 30px; }

.post-closing__text {
  font-size: 26px;
  font-weight: 600;
  line-height: 28px;
}

@media (min-width: 768px) {
  .post-hero {
    min-height: 23vh;
    margin-top: -3px;
    padding-top: 100px;
  }
  .post-hero::before { background-position: -22px 412px; }
  .post-hero__title { font-size: 60px; line-height: 60px; }
  .post-hero__badges { padding: 10px 0; }

  .post-intro,
  .post-story,
  .post-why,
  .post-closing { padding: 10px 0; }

  .post-why__title { font-size: 45px; line-height: 40px; }
}

@media (min-width: 1025px) {
  .post-hero { background-attachment: fixed; }
  .post-hero::before { background-position: -105px 189px; }
  .post-hero__title { font-size: 75px; line-height: 81px; }
}