/* ===========================================================================
   In-article app promos, restyled to match the end-of-article app card.
   Loaded last, after ac-blog-mobile.css. Delete this file and its <link> in
   header.php to revert; nothing else is touched.

   Why this file exists
   --------------------
   A post carries three app blocks: the compact .ac-mid-promo-compact at ~20%,
   the .ac-mid-promo at ~40% (both from ac_mid_article_promo_html() in
   functions.php) and .ac-appcard at the end (inc/ac-post-footer.php). Since
   2026-09-16 all three sit on a blue gradient, but only the end card was ever
   given a real type scale: ac-post-footer.css states its sizes in absolute px
   (24px title, 16px body, 140px badges) and pins the font family, so it is
   immune to the theme's shrinking rem base.

   The two mid-article promos were left in rem and in Bitter, so they inherited
   the theme's root-font scaling and rendered far smaller than both the end card
   and the body text around them. Measured live before this file:

                          promo title   promo body   article body   end card title
       phone   393px        15.2px        12.8px       14.4px          21px
       laptop 1280px        10.2px         9.0px       13.2px          24px
       desktop 1920px       17.0px        15.0px         ~21px         24px

   A 10px heading under 13px body copy on a laptop is the worst of it: the promo
   reads as a caption rather than as the card it is meant to be.

   So this file gives the two promos the end card's own values - font family,
   sizes, colours, padding, surface, badge width - in absolute px, at every
   width rather than only on phones, since the mismatch is worst on desktop.
   Layout is left alone: the promos stay a row on desktop and a centred column
   on phones (ac-blog-mobile.css), and the end card keeps its phone image.
   =========================================================================== */

/* --- Surface: the end card's exact gradient, shadow, radius and base type --- */
/* ac-post-footer.css: .ac-appcard + the .ac-appcard/.ac-pn/.ac-uni base rule.
   Both selectors are repeated so the compact variant is matched at equal
   specificity to blog-modern.css's own .ac-mid-promo.ac-mid-promo-compact. */
.ac-article-body .ac-mid-promo,
.ac-article-body .ac-mid-promo.ac-mid-promo-compact {
  padding: 28px 32px;
  border: 0;
  border-radius: 24px;
  color: #ffffff;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(95, 175, 255, 0.55) 0%, rgba(95, 175, 255, 0) 60%),
    linear-gradient(160deg, #1d63d8 0%, #0d50b5 55%, #0a3f93 100%);
  box-shadow: 0 20px 40px rgba(13, 80, 181, 0.2);
  /* Absolute, so the theme's shrinking rem base cannot reach the children. */
  font-family: var(--font-secondary, "Instrument Sans", sans-serif);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
}

/* --- Type scale: .ac-appcard-title / -text / -note ------------------------- */
.ac-article-body .ac-mid-promo .ac-mid-promo-title,
.ac-article-body .ac-mid-promo.ac-mid-promo-compact .ac-mid-promo-title {
  margin-bottom: 6px;
  font-family: inherit; /* was var(--font-Bitter); the end card uses the body face */
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  text-wrap: balance;
}

.ac-article-body .ac-mid-promo .ac-mid-promo-body,
.ac-article-body .ac-mid-promo.ac-mid-promo-compact .ac-mid-promo-body {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

.ac-article-body .ac-mid-promo.ac-mid-promo-compact .ac-mid-promo-note {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.85);
}

/* --- Badges: the end card's 140px, side by side in both variants ----------- */
/* blog-modern.css stacks the compact variant's two badges in a column to keep
   that card short; at the end card's badge size a column is taller than the
   copy beside it, so both variants use a row now. */
.ac-article-body .ac-mid-promo .ac-mid-promo-badges,
.ac-article-body .ac-mid-promo-compact .ac-mid-promo-badges {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ac-article-body .ac-mid-promo .ac-badge,
.ac-article-body .ac-mid-promo.ac-mid-promo-compact .ac-badge {
  width: 140px;
  border-radius: 8px;
}

.ac-article-body .ac-mid-promo .ac-mid-promo-badges a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* --- Let the row break rather than squeeze the copy ------------------------ */
/* The article column is itself rem-scaled, so the card is only ~590px wide on a
   1280px laptop however wide the window is - a media query cannot tell whether
   there is room. At the end card's 140px the two badges take 290px of that, which
   left the copy in a 222px ribbon down the left. Wrapping solves it at every
   width without a breakpoint: the copy asks for 320px, and when copy plus badges
   will not fit the badge row drops onto its own line underneath, which is exactly
   how the end card is laid out on the same screen. */
/* Both media queries are min-width, and each names the width at which its own
   variant is still a row - the big box above 767.98px, the compact one above
   479.98px. That scoping is load-bearing, not tidiness: `flex-basis` follows the
   main axis, so a bare `flex: 1 1 320px` becomes a 320px MINIMUM HEIGHT once
   blog-modern.css turns the box into a column on a phone, and leaves a 320px
   void between the copy and the badges. */
@media (min-width: 768px) {
  .ac-article-body .ac-mid-promo:not(.ac-mid-promo-compact) {
    flex-wrap: wrap;
    row-gap: 18px;
  }

  .ac-article-body .ac-mid-promo:not(.ac-mid-promo-compact) .ac-mid-promo-text {
    flex: 1 1 320px;
    min-width: 0;
  }

  .ac-article-body .ac-mid-promo:not(.ac-mid-promo-compact) .ac-mid-promo-badges {
    flex: 0 0 auto;
  }
}

@media (min-width: 480px) {
  .ac-article-body .ac-mid-promo.ac-mid-promo-compact {
    flex-wrap: wrap;
    row-gap: 18px;
  }

  .ac-article-body .ac-mid-promo.ac-mid-promo-compact .ac-mid-promo-text {
    flex: 1 1 320px;
    min-width: 0;
  }

  .ac-article-body .ac-mid-promo.ac-mid-promo-compact .ac-mid-promo-badges {
    flex: 0 0 auto;
  }
}

/* --- Phones: the end card's phone values ---------------------------------- */
/* ac-post-footer.css @media (max-width: 575.98px): 21px title, and badges that
   share the row half and half up to 150px. ac-blog-mobile.css has already
   stacked and centred the promos by here, so the badge row is the full width of
   the card and the two badges fill it exactly as they do on the end card. */
@media (max-width: 575.98px) {
  .ac-article-body .ac-mid-promo,
  .ac-article-body .ac-mid-promo.ac-mid-promo-compact {
    padding: 24px 20px;
  }

  .ac-article-body .ac-mid-promo .ac-mid-promo-title,
  .ac-article-body .ac-mid-promo.ac-mid-promo-compact .ac-mid-promo-title {
    font-size: 21px;
  }

  .ac-article-body .ac-mid-promo .ac-badge,
  .ac-article-body .ac-mid-promo.ac-mid-promo-compact .ac-badge {
    width: calc(50% - 5px);
    max-width: 150px;
  }
}