/* ===== RC - Latest Content (comp: DS LatestContent component) =====
   Type/card-shell/button classes come from child.css .rc-f7-* — this file
   only owns the layout the DS component doesn't hand off to a shared class
   (grid, media band, foot row, spacing). */
.rc-latest {
  margin: var(--rc-latest-mar-top, 0) auto var(--rc-latest-mar-bottom, 0);
  padding: var(--rc-latest-pad-top, 64px) 0 var(--rc-latest-pad-bottom, 72px);
  background: #fff;
}
.rc-latest__inner { max-width: var(--rc-maxw, 1200px); margin: 0 auto; padding: 0 var(--rc-pad-x, 40px); }

/* .rc-f7-h2 supplies family/size/weight/line-height/letter-spacing/color;
   DS still wants the max-width clamp + balanced wrap on this heading. */
.rc-latest__title { margin: 0 0 34px; max-width: 24ch; text-wrap: balance; }

.rc-latest__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch;
}
/* Cards share the grid's row tracks, so head / media / foot line up across
   the row: the media band starts at the same y and is the same height in
   every card, however many lines the headline above it runs to. Without
   this each card is its own flex column and a two-line headline pushes its
   image down. Flex column stays as the pre-subgrid fallback. */
@supports (grid-template-rows: subgrid) {
  .rc-latest__grid { grid-template-rows: auto auto auto; }
  .rc-latest__card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
}

/* .rc-f7-card supplies background/border-radius/box-shadow. */
.rc-latest__card { overflow: hidden; display: flex; flex-direction: column; }
.rc-latest__head { padding: 24px 24px 0; order: 1; }
/* .rc-f7-eyebrow's own margin (0 0 14px) differs slightly from the DS
   component's kicker margin (0 0 12px) — kept local. */
.rc-latest__kick { margin: 0 0 12px; }
.rc-latest__ch { margin: 0 0 18px; }
.rc-latest__excerpt { margin: 0 0 18px; }

.rc-latest__media {
  order: 2; position: relative; overflow: hidden; aspect-ratio: 16/9;
}
.rc-latest__media--band {
  background: repeating-linear-gradient(45deg, #E9E3EE, #E9E3EE 10px, #F3EFF6 10px, #F3EFF6 20px);
}
.rc-latest__media--video { background: var(--rc-grape-deep, #301B45); }
.rc-latest__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-latest__media--video::after {
  content: ""; position: absolute; inset: 0;
  background: var(--rc-grape-deep, #301B45); opacity: .5; pointer-events: none;
}

.rc-latest__foot {
  order: 3; margin-top: auto; display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  padding: 18px 24px 24px;
}
/* .rc-f7-btn/.rc-f7-btn--outline supply the pill shell; DS overrides the
   default text/hover link color to CTA red via .rc-f7-meta (default grape).
   .rc-f7-meta doesn't declare text-decoration, so it's local — DS source
   (LatestContent.jsx link style) specifies textDecoration: "none". */
.rc-latest__link { color: var(--rc-cta); text-decoration: none; }
.rc-latest__link:hover,
.rc-latest__link:focus { color: var(--rc-cta-hover); text-decoration: none; }

@media (max-width: 960px) {
  .rc-latest__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Cascade fence (2026-08-10 audit) — pins properties the Clean Pro parent
   theme sets on bare elements (see docs/plans/module-cascade-audit-report.md).
   -------------------------------------------------------------------------- */
/* Parent img{height:auto!important} beat the plain height:100%, breaking the
   16/9 media crop (and 0-height lazy images never load). */
.rc-latest__media img { height: 100% !important; }