/* Sponsor card styles, extracted from the approved design canvas.
 *
 * Served once at /v1/slot.css. Nothing here is inlined per card, and no card
 * carries a style attribute except the placeholder's fallback min-height.
 *
 * SCOPING. Every selector is under .u-card or .u-slot, both of which are
 * unique to this system. No bare element selectors, so nothing here can reach
 * site markup.
 *
 * NEUTRAL NAMING. No class contains "ad", "ads", "advert", "banner" or
 * "sponsor". Watch the substring trap: head, lead, padding, gradient and
 * shadow all contain "ad" and are therefore banned as class names. CSS
 * PROPERTY names are not matched by filter lists, only selectors and URLs, so
 * `padding: 20px` is fine while `.u-card__padding` would not be.
 *
 * Palette is the canvas palette as specified: #F2827F coral, #463F3A ink.
 * That is one hue step off the site's own #f2817d / #3f322b.
 */

.u-card,
.u-slot {
  --u-coral: #F2827F;
  --u-coral-press: #D86F66;
  --u-ink: #463F3A;
  --u-soft: rgba(70, 63, 58, 0.6);
  --u-line: #E6E6E6;
  --u-field: #F7F6F4;
  --u-skeleton: #F1F1F1;
}

/* ── placeholder ───────────────────────────────────────────────────────────
 * Creative-agnostic. The Worker emits this empty; the client script fills it.
 * min-height is what buys zero layout shift, and it is set per variant below
 * from measured card heights. The inline style on the element is a fallback
 * for the window before this sheet lands. */

.u-slot {
  display: block;
  box-sizing: border-box;
}

/* ── placement geometry ────────────────────────────────────────────────────
 * The slot sits as a sibling of markup it does not control, so it has to supply
 * its own box. These mirror the site's own classes; change them together. */

/* page_footer sits at the end of a page's content, inside <Footer /> and above
 * the footer proper. The host page is full-bleed, so the slot supplies its own
 * centred column, matching the width the heights below were measured at. */
.u-slot[data-slot="page_footer"] {
  max-width: 1000px;
  margin: 48px auto;
  padding: 0 24px;
}

/* home_feature is a child of the homepage story grid, a flex-wrap row whose
 * cards are w-full md:w-[calc(33.333%-15px)]. */
.u-slot[data-slot="home_feature"] {
  width: 100%;
}

@media (min-width: 768px) {
  .u-slot[data-slot="page_footer"] {
    padding: 0;
  }

  .u-slot[data-slot="home_feature"] {
    width: calc(33.333% - 15px);
  }
}

/* The canvas specifies a breathing skeleton for the empty state. The spec for
 * this build wants the placeholder to be an empty div, so the skeleton is a
 * background on :empty rather than child markup. It disappears the instant a
 * card is injected, and never appears at all if the fetch resolves first. */
.u-slot:empty {
  border-radius: 8px;
  background: var(--u-skeleton);
  opacity: 0.5;
  animation: u-breathe 2.4s ease-in-out infinite;
}

@keyframes u-breathe {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.28; }
}

@media (prefers-reduced-motion: reduce) {
  .u-slot:empty { animation: none; }
}

/* A slot whose fetch failed stays empty but must not keep pulsing or hold
 * open a gap. The client script sets this after a failure. */
.u-slot[data-state="off"] {
  display: none;
}

/* ── defence against the host page's own CSS ───────────────────────────────
 * The inline slot is a child of .prose-tpo, the article body wrapper, and that
 * has around twenty descendant rules that reach straight into anything nested
 * inside it. Left alone they win, because `.prose-tpo a` (0,1,1) out-specifies
 * `.u-card__cta` (0,1,0). Observed live: the CTA turned coral, the headline
 * became 32px/300, and every <p> in the card picked up 24px of padding.
 *
 * So this is not just about not colliding outward. It is about not being
 * reached inward. Two measures:
 *
 *  1. This reset, which zeroes the inherited box and colour on every element
 *     the card actually uses.
 *  2. Every component rule below is written `.u-card .u-card__x` (0,2,0)
 *     rather than `.u-card__x` (0,1,0), so it beats any `.host tag` rule.
 *
 * `.u-card.u-card` doubles the class to reach (0,2,0) on the root itself, and
 * `:where(...)` adds no specificity, so the reset lands at exactly (0,2,0).
 * Do not "simplify" these selectors: the extra specificity is the point. */

.u-card.u-card :where(p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
img,
span,
div,
i,
em,
strong,
ul,
ol,
li) {
  margin: 0;
  padding: 0;
  font-style: normal;
  list-style: none;
}

.u-card.u-card :where(a) {
  color: inherit;
  text-decoration: none;
}

.u-card.u-card :where(a:hover) {
  text-decoration: none;
}

/* ── frame ─────────────────────────────────────────────────────────────── */

.u-card {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid var(--u-line);
  border-radius: 8px;
  color: var(--u-ink);
  font-family: var(--font-sans, 'Poppins', -apple-system, 'Segoe UI', sans-serif);
}

.u-card *,
.u-card *::before,
.u-card *::after {
  box-sizing: border-box;
}

.u-card .u-card__bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--u-coral);
}

/* ── media ─────────────────────────────────────────────────────────────── */

.u-card .u-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.u-card .u-card__media--round {
  border-radius: 6px;
}

/* House art is a cut-out, so it is contained in a warm field and allowed to
 * overflow top and bottom rather than being cropped to a 16:9 photo. */
.u-card .u-card__media--fit {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--u-field);
  aspect-ratio: 16 / 9;
  object-fit: initial;
}

.u-card .u-card__media--fit img {
  height: 150%;
  width: auto;
  object-fit: contain;
  transform: translateY(14%);
}

/* ── body ──────────────────────────────────────────────────────────────── */

.u-card .u-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.u-card .u-card__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--u-soft);
}

.u-card.u-card--house .u-card__label {
  color: var(--u-coral);
}

.u-card .u-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--u-coral);
  flex: none;
}

.u-card .u-card__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--u-ink);
}

.u-card .u-card__text {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--u-ink);
}

/* ── call to action ────────────────────────────────────────────────────── */

.u-card .u-card__cta {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  height: 48px;
  padding: 0 24px;
  border: 1.5px solid var(--u-ink);
  border-radius: 8px;
  background: transparent;
  color: var(--u-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease,
    border-color 160ms ease, transform 120ms ease;
}

.u-card .u-card__cta:hover {
  background: var(--u-ink);
  color: #FFFFFF;
  text-decoration: none;
}

.u-card .u-card__cta:active {
  transform: scale(0.98);
}

/* Coral fill is reserved for the house promo, where the destination is ours.
 * Driven by the campaign, never by a field on the creative. */
.u-card.u-card--house .u-card__cta {
  background: var(--u-coral);
  border-color: var(--u-coral);
  color: #FFFFFF;
}

.u-card.u-card--house .u-card__cta:hover {
  background: var(--u-coral-press);
  border-color: var(--u-coral-press);
  color: #FFFFFF;
}

/* ── note and mark ─────────────────────────────────────────────────────── */

.u-card .u-card__note {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--u-soft);
}

.u-card .u-card__code {
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--u-ink);
}

.u-card .u-card__mark {
  display: flex;
  align-items: center;
  margin: 2px 0 0;
  height: 24px;
  opacity: 0.6;
}

.u-card .u-card__mark img {
  display: block;
  height: 20px;
  width: auto;
}

/* ── 1. inline ─────────────────────────────────────────────────────────── */

.u-card.u-card--inline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 20px 24px;
}

.u-card.u-card--inline .u-card__title {
  font-size: 19px;
}

/* ── 2. footer ─────────────────────────────────────────────────────────── */

/* The rule is a SIBLING of .u-card, not a descendant, so it doubles its own
 * class to reach (0,2,0) instead of borrowing the root's. */
.u-card__rule.u-card__rule {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--u-soft);
}

.u-card__rule.u-card__rule i {
  height: 1px;
  flex: 1;
  background: var(--u-line);
}

.u-card.u-card--footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 24px 24px 27px;
}

.u-card.u-card--footer .u-card__body {
  gap: 12px;
}

.u-card.u-card--footer .u-card__title {
  font-size: 22px;
  line-height: 1.28;
  letter-spacing: -0.02em;
}

.u-card.u-card--footer .u-card__text {
  font-size: 15px;
}

/* ── 3. feature ────────────────────────────────────────────────────────── */

.u-card.u-card--feature {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FFFDFC;
}

.u-card.u-card--feature .u-card__body {
  flex: 1;
  padding: 20px;
}

/* ── desktop ───────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .u-card.u-card--inline {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }

  .u-card.u-card--inline .u-card__title {
    font-size: 20px;
  }

  .u-card.u-card--footer {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 32px;
    padding: 32px 32px 32px 36px;
    align-items: start;
  }

  .u-card.u-card--footer .u-card__title {
    font-size: 26px;
    line-height: 1.25;
  }

  .u-card.u-card--footer .u-card__text {
    font-size: 16px;
  }

  .u-card.u-card--footer .u-card__note {
    font-size: 13px;
  }
}

/* ── reserved height ───────────────────────────────────────────────────────
 * Every number MEASURED, not estimated: each variant rendered at the container
 * width it actually gets in this repo, swept across 13 viewports from 320 to
 * 2560, taking the tallest of the two live creatives and a synthetic creative
 * at the content-contract limits. Re-run the sweep whenever creative copy or
 * the type scale changes: these were re-measured when World Concern's label
 * became "Sponsored by World Concern" and its CTA "Give Where Most Needed",
 * both of which are longer than what they replaced.
 *
 * The synthetic creative uses REAL WORDS at the limits, not a run of one
 * letter. An unbreakable 45-character token cannot wrap, overflows every card
 * and inflates the reserve by hundreds of pixels for a case no sponsor will
 * ever submit.
 *
 * Two things drive the ladder:
 *
 *  - Below 768px the card is STACKED, so the 16:9 image grows with the column
 *    and the card gets TALLER as the phone gets wider. A single mobile value
 *    would under-reserve badly on a large phone. This is the opposite of the
 *    usual intuition and is why the sweep is necessary.
 *  - The feature card sits in a 3-up grid, so its column is narrow at 768 and
 *    wide at 2560. It dips through the middle of the range and climbs again.
 *
 * min-height is kept after the card lands rather than cleared, because
 * clearing it would shift the page whenever a creative is shorter than the
 * contract maximum. The cost is some trailing space under a short creative.
 * That is the deliberate trade for zero CLS. */

.u-slot[data-slot="page_footer"]  { min-height: 609px; }
.u-slot[data-slot="home_feature"] { min-height: 546px; }

@media (min-width: 415px) {
  .u-slot[data-slot="page_footer"]  { min-height: 658px; }
  .u-slot[data-slot="home_feature"] { min-height: 603px; }
}

@media (min-width: 601px) {
  .u-slot[data-slot="page_footer"]  { min-height: 724px; }
  .u-slot[data-slot="home_feature"] { min-height: 631px; }
}

/* At 768 the cards switch to their side-by-side layout, and the feature card's
 * grid column collapses to its narrowest, so the two move in opposite
 * directions here. */
@media (min-width: 768px) {
  .u-slot[data-slot="page_footer"]  { min-height: 480px; }
  .u-slot[data-slot="home_feature"] { min-height: 614px; }
}

@media (min-width: 900px) {
  .u-slot[data-slot="page_footer"]  { min-height: 421px; }
  .u-slot[data-slot="home_feature"] { min-height: 585px; }
}

/* The page column caps at 1000px, so page_footer stops changing here. */
@media (min-width: 1024px) {
  .u-slot[data-slot="home_feature"] { min-height: 547px; }
}

/* The feature column keeps widening past 1600, so its 16:9 image does too. */
@media (min-width: 1600px) {
  .u-slot[data-slot="home_feature"] { min-height: 600px; }
}

@media (min-width: 2200px) {
  .u-slot[data-slot="home_feature"] { min-height: 670px; }
}