/* The Materials Show - wrap-up promo card
   Everything is scoped under .tms-promo so it cannot leak into the theme.
   Palette matches the recap page. */

.tms-promo{
  --tms-red:#A72144;
  --tms-ink:#111314;
  --tms-rule:#e3e1dd;
  --tms-soft:#4a4f53;

  display:block;
  max-width:1100px;
  margin:32px auto;
  border:1px solid var(--tms-rule);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  color:var(--tms-ink);
  text-decoration:none;
  font-family:inherit;
  transition:box-shadow .18s ease, transform .18s ease;
}
.tms-promo:hover,
.tms-promo:focus-visible{
  box-shadow:0 10px 34px rgba(17,19,20,.13);
  transform:translateY(-2px);
}
.tms-promo:focus-visible{outline:2px solid var(--tms-red);outline-offset:3px}

/* Inline elements throughout: the whole card is one <a>, so every
   block-level child is a <span> made block by these rules. */
.tms-promo__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}

/* --- photo --- */
.tms-promo__media{position:relative;background:var(--tms-ink);min-height:100%}
/* Scoped to the photo only. The logo is also an <img> in here, and these
   cover rules would stretch and crop it. */
.tms-promo__photo{
  display:block;width:100%;height:100%;
  min-height:230px;
  object-fit:cover;object-position:center 38%;
  opacity:.92;
}
.tms-promo__logo{
  position:absolute;left:50%;top:18px;transform:translateX(-50%);
  width:clamp(96px,26%,132px);height:auto;
  aspect-ratio:351.6/199.7;
  object-fit:contain;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));
}

/* --- copy --- */
.tms-promo__body{padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;justify-content:center}
.tms-promo__eyebrow{
  margin:0 0 10px;
  font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tms-red);
}
.tms-promo__title{
  margin:0;
  font-size:clamp(1.35rem,2.3vw,1.85rem);
  line-height:1.15;letter-spacing:-.02em;font-weight:800;
}
.tms-promo__text{
  margin:11px 0 0;
  font-size:.95rem;line-height:1.6;color:var(--tms-soft);
}

/* --- figures --- */
.tms-promo__stats{
  display:flex;flex-wrap:wrap;gap:20px 26px;
  margin:20px 0 0;padding:18px 0 0;
  border-top:1px solid var(--tms-rule);
}
.tms-promo__stat{display:block}
.tms-promo__stat b{
  display:block;
  font-size:1.4rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;
}
.tms-promo__stat span{
  display:block;margin-top:3px;
  font-size:.72rem;line-height:1.3;color:var(--tms-soft);
}
.tms-promo__stat:nth-child(1) b{color:var(--tms-red)}
.tms-promo__stat:nth-child(2) b{color:#5A82B3}
.tms-promo__stat:nth-child(3) b{color:#F68C50}

.tms-promo__cue{
  margin:20px 0 0;
  font-size:.9rem;font-weight:700;color:var(--tms-red);
}
.tms-promo__cue::after{content:" \2192"}

@media (max-width:720px){
  .tms-promo__grid{grid-template-columns:1fr}
  .tms-promo__photo{min-height:190px}
}
@media (prefers-reduced-motion:reduce){
  .tms-promo{transition:none}
  .tms-promo:hover,.tms-promo:focus-visible{transform:none}
}