/* Our preview treatment of the client's summary box. This file is OURS.
 *
 * It does not exist on salehoo.com and it does not travel with an article. On
 * a real publish the CMS emits the same `section.keypoints` markup this build
 * writes, and the client's own `learn-default.css` styles it: a pale red
 * ground, a 4px red left rule, rounded corners, 24px of padding. That is what
 * Simon would see. Nothing below reaches his site unless his CSS changes.
 *
 * What it changes, and why. The pink slab, the rounded corners and the naked
 * Bootstrap utility classes are the parts of that block Andrew has recorded a
 * dislike of twice (Taste.md, 5 August and 27 August 2026). The red left rule
 * is the part he pointed at and wants kept. So: keep #ff3969 and the rule,
 * drop the ground and the radius, and put a typographic hierarchy inside the
 * box that the utility classes were never going to give it.
 *
 * Both fonts are the client's own, already declared by their
 * `core-optimised.css` and already served from our `/fonts/v5/` mirror. No new
 * asset is introduced and nothing here loads from a remote host.
 *
 * Specificity. The rule this has to beat is
 *   .learn.content .learn-content .post-article article .keypoints
 * which is (0,5,1). Every selector below is at least (0,7,3), so it wins on
 * weight rather than on `!important` or on load order, and it would still win
 * if the client's stylesheet moved after ours.
 *
 * There is one exception, and it is the only `!important` in this file.
 * `.rounded-3` on the client's own markup is `border-radius:var(...)!important`,
 * a Bootstrap utility, so no amount of selector weight squares the corners and
 * the declaration below has to match it. Measured in Chromium before the flag
 * went on: the box computed to an 8px radius with the rest of this file
 * already winning. Square corners are the point of the request, so this one is
 * bought rather than argued for.
 *
 * The spacing utilities are not fought at all. `mt-0`, `mb-3` and `mb-0` are
 * `!important` too, and they set margin-top:0 on the section and the heading
 * and margin-bottom:0 on the paragraph, which is what this treatment wants
 * anyway, plus a 1rem gap under the label, which is the gap it would have
 * asked for.
 */

/* ---------------------------------------------------------------------------
 * Variant A: the one the build applies. White ground, square, red rule.
 * ------------------------------------------------------------------------ */

main.learn.content section.learn-content .post-article
article.article section.keypoints.article-summary {
  background-color: transparent;
  border-radius: 0 !important;
  border-left: 4px solid #ff3969;
  border-top: 1px solid #e8e9ee;
  border-bottom: 1px solid #e8e9ee;
  border-right: 0;
  padding: 30px 34px 32px;
  margin-bottom: 40px;
  line-height: 1.5;
}

/* The label. Small, spaced, in the accent, so it reads as a piece of editorial
 * furniture rather than as another heading in the article's outline. */
main.learn.content section.learn-content .post-article
article.article section.keypoints.article-summary > h2.summary-title {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff3969;
}

/* The answer itself, as a lede: the client's own display serif, a size above
 * body copy, and their dark ink rather than the #666 the body runs in. */
main.learn.content section.learn-content .post-article
article.article section.keypoints.article-summary > p {
  font-family: Bitter, Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.003em;
  color: #222a44;
}

/* Narrow screens: the rule and the type stay, the padding comes in so the
 * measure does not collapse. */
@media (max-width: 575.98px) {
  main.learn.content section.learn-content .post-article
  article.article section.keypoints.article-summary {
    padding: 22px 20px 24px;
    margin-bottom: 32px;
  }

  main.learn.content section.learn-content .post-article
  article.article section.keypoints.article-summary > p {
    font-size: 1.125rem;
  }
}

/* ---------------------------------------------------------------------------
 * Variant B: the same panel keeping a whisper of the client's red ground.
 *
 * Nothing in the build applies `summary-variant-b`. It exists so the two can
 * be photographed side by side and one of them chosen. The tint is a twentieth
 * of the strength of `.bg-light-red`, which is rgba(255,57,105,.05).
 * ------------------------------------------------------------------------ */

main.learn.content section.learn-content .post-article
article.article section.keypoints.article-summary.summary-variant-b {
  background-color: rgba(255, 57, 105, 0.035);
  border-top-color: transparent;
  border-bottom-color: transparent;
}