/* =========================================================
   JMU CARDS (YUI-safe), one file: part 1 components, part 2 equal
   height rows (search "PART 2").
   Shared stylesheet for all card types.

   ONE MARKUP PATTERN for every card. Optional parts are marked (opt):
     <div class="jmu-card [color] [layout]">
       <div class="jmu-card-media">                  (opt) image
         <img class="jmu-card-image" alt="">
       </div>
       <div class="jmu-card-body">
         <p class="jmu-card-category">...</p>        (opt) eyebrow
         <p class="jmu-card-source">...</p>          (opt) source
         <h3 class="jmu-card-title"><a class="jmu-card-link">...</a></h3>
         <p class="jmu-card-summary">...</p>         (opt) summary
       </div>
       <div class="jmu-card-rule" aria-hidden="true"></div>
     </div>
   Leave out .jmu-card-media and the card becomes a text only card
   automatically (:has).
   Color:  .jmu-card-purple
   Layout: .jmu-card-full-width, or .jmu-card-side-by-side
   Image:  .jmu-card-image-left or .jmu-card-image-right, for either
           layout (image left is also the default when neither is
           given; on other cards these classes do nothing)

   How height works: height is DETERMINISTIC (fixed media aspect +
   fixed line reservation on .jmu-card-body), not grid stretch, so
   equal-width cards in separate floated .yui-u units produce
   identical heights and the bottom bars line up.

   No CSS custom properties are used: every value is written out.
   The reserved min-height on .jmu-card-body is precomputed as:
     (title lines x title line-height x title size)
   + (summary lines x summary line-height x summary size)
   + (source lines x source line-height x source size)
   + gap (+ one more gap when there is a source row)
   + top padding + bottom padding
   If you change any type size, line-height, line count, gap or
   padding, recompute the matching min-height values below.

   Type and padding scale to the CARD's width via a container
   query. Base values are narrow-safe, so browsers without
   container-query support still render fine.
   ========================================================= */

/* START COMPONENT CSS */

.jmu-card {
  /* The card is its own container, so it can size its type to the
     column it lands in rather than to the viewport. */
  container: jmucard / inline-size;

  box-sizing: border-box;
  position: relative;              /* anchor for the stretched link */
  display: flex;
  flex-direction: column;
  width: auto;                     /* fills its unit, less the side margins */
  min-width: 0;                    /* never force the column wider */
  max-width: 100%;
  margin: 0 10px 1.75rem 10px;     /* 10px on each side of EVERY card, set
                                      on the card itself so it does not
                                      depend on any row wrapper or class */
  background: #f5f5f5;
  overflow: hidden;                /* clips the image zoom on hover */
  transition: transform 200ms ease, box-shadow 200ms ease;
}

/* YUI-era stylesheets frequently leave box-sizing at content-box. */
.jmu-card,
.jmu-card *,
.jmu-card *::before,
.jmu-card *::after {
  box-sizing: border-box;
}

/* Site typography override. On jmu.edu, responsive-styles-tabular.css
   styles #maincontentarea h3, p and a:link (headline 26px/30px at
   normal weight, eyebrow and summary 16px/24px, links purple and
   underlined). An ID beats any number of classes, so every font-size,
   line-height and font-weight on the headline, eyebrow, source and
   summary, and the link's color and underline, carry !important in
   this file. Among !important rules the usual order and specificity
   still apply, so the width tiers and variants below work as before. */

/* JMU's responsive-styles-tabular.css sets h1 to h6 and p to
   padding: 5px 10px. That adds 10px to every text row and throws
   off the height reservations, so zero it on card text. */
.jmu-card .jmu-card-source,
.jmu-card .jmu-card-title,
.jmu-card .jmu-card-summary {
  padding: 0;
}

.jmu-card:has(.jmu-card-link):hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

/* Hover effects (lift, shadow, image zoom, underline, arrow nudge,
   taller bar) only apply to cards that contain a .jmu-card-link.
   Every hover rule is written as :has(.jmu-card-link):hover, so a
   card with no link stays still and does not look clickable. */

/* Focus ring lives on the card, not the invisible overlay, so
   keyboard users see the whole target highlighted. Offset is small
   because a .yui-u may clip anything drawn outside its box. */
.jmu-card:focus-within {
  outline: 3px solid #450084;
  outline-offset: 2px;
}

.jmu-card:focus-within .jmu-card-link:focus-visible {
  outline: none; /* card already shows the ring */
}

/* Image + category ribbon */

.jmu-card-media {
  position: relative;
  background: #d8d8d8;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

/* Fallback for browsers without aspect-ratio: same 16:10 box. */
@supports not (aspect-ratio: 1 / 1) {
  .jmu-card-media {
    height: 0;
    padding-top: 62.5%;
  }
  .jmu-card-image {
    position: absolute;
    top: 0;
    left: 0;
  }
}

.jmu-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

/* cssgrids-responsive-min.css (YUI) sets .yui3-g-r img { height: auto; }
   which outranks one class and leaves a gray gap under any photo
   whose shape differs from its box. Two classes win it back. */
.jmu-card .jmu-card-image {
  height: 100%;
}

.jmu-card:has(.jmu-card-link):hover .jmu-card-image {
  transform: scale(1.04);
}

.jmu-card-category {
  position: absolute;
  bottom: 0;                       /* sits on the image's bottom edge */
  left: 0;
  z-index: 1;
  max-width: 92%;
  margin: 0;
  padding: 0.5rem calc(16px + 0.75rem) 0.5rem 1rem;  /* 16px = ribbon notch */
  background: #450084;                     /* fallback: no rgba support */
  background: rgba(69, 0, 132, 0.85);      /* ribbon opacity over the photo */

  /* Blurs the photo behind the ribbon so busy images don't fight the
     type. Degrades to plain translucency where unsupported. */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);

  /* Notch slants down to the right. The top and bottom edges of the
     shape sit 2px OUTSIDE the box: a clip-path edge that falls exactly
     on the box edge is antialiased on its own, often on a fraction of
     a pixel, and leaves a faint 1px strip of the photo or card showing
     between the eyebrow and whatever it rests on. Pushed outside, the
     box's own (pixel-snapped) edge is the visible edge instead. */
  clip-path: polygon(0 -2px, calc(100% - 16px) -2px, 100% 100%, 100% calc(100% + 2px), 0 calc(100% + 2px));
  color: #ffffff;
  font-size: 0.75rem !important;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25 !important;
  text-transform: uppercase;

  /* Long category names wrap in a narrow column; cap them at two
     lines so they can't run past the bottom of the image. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Eyebrow position. The category sits FIRST inside .jmu-card-body in
   the markup, so it is in the same place whether or not the card has
   a photo. On a photo card it is lifted out of the text and laid over
   the photo's bottom left corner. It is absolutely positioned against
   the card, with its bottom edge placed exactly on the photo's bottom
   edge. The photo fills the card's width at 16:10, so its bottom edge
   is 62.5% of the CARD'S WIDTH down from the top; 62.5cqw is that
   distance (cqw = 1% of the width of the card, which is a size
   container). So: bottom = card height minus 62.5cqw.
   No transform is used, and the eyebrow's height is always a whole
   number of pixels (line heights and paddings in the width tiers are
   chosen for that: 31px, 36px or 40px for one line). The browser
   rounds a box's top and its height separately, so a box with a
   fractional height can end up 1px short of, or past, the photo edge
   it is meant to meet. A transform does the same.
   The extra 0.015625px (1/64px, the browser's layout unit) matches the
   photo's own rounding: the browser rounds the photo's 16:10 height
   DOWN to that unit, so without it the eyebrow can sit 1/64px lower
   and, near a half pixel, be drawn 1px past the photo.
   Being absolute, it takes no space in the body. Layouts that put
   text beside the photo, and cards with no photo, override this;
   see below. */
.jmu-card-body > .jmu-card-category {
  top: auto;
  bottom: calc(100% - 62.5cqw + 0.015625px);  /* see below */
  margin: 0;
}

/* Text */

.jmu-card-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 1.5rem;

  /* Reserve the tallest possible text block ONCE, on the container.
     Children stack from the top, so the summary always sits directly
     under the headline and the slack collects below it.
     3 x 1.25 x 1.125rem + 4 x 1.45 x 1rem + 0.75rem + 1.25rem + 1.5rem */
  min-height: 13.51875rem;
}

.jmu-card-title {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  color: #1a1a1a;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  overflow-wrap: break-word;       /* long words can't widen the column */
}

/* The link itself carries no decoration until hover: the card is
   the affordance. */
.jmu-card-link {
  min-width: 0;                    /* shrink beside the arrow */
  color: inherit !important;
  text-decoration: none !important;
  /* Not line clamped: the headline is the link's text, so it always
     shows in full (WCAG 1.4.4, 1.4.10, 1.4.12). Its reserved lines
     below are a minimum, not a limit; a longer headline grows the
     card, and the row rule at the end of part 1 keeps the row level. */
}

/* The link must stay unpositioned so its ::after overlay stretches
   to .jmu-card, the nearest positioned ancestor. JMU's
   responsive-styles-tabular.css sets #maincontentarea a:link to
   position: relative, which would shrink the overlay to the headline
   text. That selector includes an ID, which no number of classes can
   beat, so !important is the one reliable override. */
.jmu-card .jmu-card-title .jmu-card-link {
  position: static !important;
}

/* responsive-styles-tabular.css sets #maincontentarea p (and
   #defaultregion p, .skinpage p) to margin: 6px 0. On the live site
   that lifts the eyebrow off the photo's bottom edge and adds space
   around the summary, throwing off the height reservations. The ID
   beats any class, so !important is the one reliable override. */
.jmu-card .jmu-card-category,
.jmu-card .jmu-card-source,
.jmu-card .jmu-card-summary {
  margin: 0 !important;
}

/* THE STRETCHED LINK: this pseudo-element covers the entire card,
   so every pixel is clickable, while the accessible name stays as
   just the headline text. It escapes the anchor's own overflow
   because its containing block is .jmu-card. */
.jmu-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.jmu-card:has(.jmu-card-link):hover .jmu-card-link {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

/* Source / outlet name (external news cards). One line, truncated. */
.jmu-card-source {
  margin: 0;
  color: #450084;
  font-size: 0.875rem !important;
  font-weight: 700;
  line-height: 1.3 !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jmu-card-summary {
  margin: 0;
  color: #333333;
  font-size: 1rem !important;
  line-height: 1.45 !important;
  overflow-wrap: break-word;

  /* clamp the summary at 4 lines */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

/* Arrow
   A text arrow drawn by CSS on the HEADLINE (.jmu-card-title::after),
   not on the link. Two reasons it cannot sit on the link:
   1. .jmu-card-link::after is already the stretched link overlay
      that makes the whole card clickable.
   2. An arrow inside the link would sit at the end of the headline's
      last line instead of pinned to the right of the first.
   The title is a flex row, so the arrow becomes a flex item pinned
   to the right edge of the headline's first line, as the SVG was.
   \2192 is the right arrow character, escaped so no CMS or XML
   step can mangle it.
   Decorative only: the second content value gives it empty alt
   text, so screen readers announce just the headline. Browsers
   without that syntax use the first value and still show it. */
.jmu-card-title::after {
  content: "\2192";
  content: "\2192" / "";
  flex: 0 0 auto;
  margin-left: auto;         /* pins to the right edge of the headline row */
  color: #450084;
  font-weight: 700;
  line-height: inherit;      /* sits in the headline's first line box */
  transition: transform 200ms ease;
}

.jmu-card:has(.jmu-card-link):hover .jmu-card-title::after {
  transform: translateX(4px);
}

/* No arrow when the headline has no link (a title with plain text
   only). The arrow promises a destination, so it only shows when
   there is one to go to. */
.jmu-card-title:not(:has(a))::after {
  content: none;
}

/* Bottom bar */

.jmu-card-rule {
  margin-top: auto;               /* pins the bar to the bottom */
  height: 5px;
  background: #cbb677;
  transition: height 200ms ease;
}

.jmu-card:has(.jmu-card-link):hover .jmu-card-rule {
  height: 9px;
}

/* Variant: text only card
   Any card WITHOUT a .jmu-card-media block (matched automatically with
   :has). Reserves 4
   headline lines. The reservation includes one eyebrow row plus its gap
   (0.75 x 1.25 + 0.5 x 2 = 1.9375, + 0.75), whether or not the card
   has a category, so text cards line up either way.
   :where() adds no specificity, so the selector weighs the same as
   two plain classes. */

.jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
  min-height: 17.6125rem;     /* 14.925 + 1.9375 + 0.75 */
}

/* Category on a text only card. With no photo to sit on, the eyebrow
   stays in the normal flow at the top of the text. It is held to ONE
   line (truncated with an ellipsis) so its height is fixed and bottom
   bars still line up across a row. */
.jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body > .jmu-card-category {
  position: static;
  align-self: flex-start;          /* hugs its text, not full width */
  margin: 0;
  transform: none;
  background: #450084;             /* solid: no photo behind it */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  display: block;                  /* replaces the 2-line clamp */
  white-space: nowrap;             /* ONE line, so its height is fixed */
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Color modifier: purple (.jmu-card-purple)
   Add to any card to swap the gold accent for purple: white
   background, 1px purple outline and a purple bottom bar. Markup is
   unchanged, so a text only card becomes a purple text only card by
   adding one class.
   The outline is drawn by a pseudo-element laid over the card rather
   than a border, so it adds no height: a purple card and a gold card
   of the same variant still line up in one row. pointer-events: none
   lets clicks pass through to the stretched link underneath. */

.jmu-card.jmu-card-purple {
  background: #ffffff;
}

.jmu-card.jmu-card-purple::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  border: 1px solid #450084;
  pointer-events: none;
}

.jmu-card.jmu-card-purple .jmu-card-rule {
  background: #450084;
}

/* Width-based scaling (the card's own width, not the screen)
   Rules target children of .jmu-card, never .jmu-card itself: an
   element is not its own container. Variant rules are repeated in
   each block so they keep winning on specificity. */

@container jmucard (min-width: 20rem) {
  .jmu-card-body {
    padding: 1.5rem 1.5rem 1.75rem;
    min-height: 14.4875rem;
  }
  .jmu-card-title {
    font-size: 1.25rem !important;
  }
  .jmu-card-category {
    font-size: 0.8125rem !important;
    line-height: 1rem !important;             /* 16px: whole pixels, see the eyebrow note */
    padding: 0.625rem calc(16px + 1rem) 0.625rem 1.25rem;   /* 10px */
  }
  .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
    min-height: 19.05rem;          /* 16.05 + 2.25 + 0.75 */
  }

}

@container jmucard (min-width: 28rem) {
  .jmu-card-body {
    min-height: 15.1125rem;
  }
  .jmu-card-title {
    font-size: 1.375rem !important;
    line-height: 1.2 !important;
  }
  .jmu-card-summary {
    font-size: 1.0625rem !important;
  }
  .jmu-card-category {
    padding: 0.625rem calc(20px + 1rem) 0.625rem 1.25rem;   /* 20px notch */
    clip-path: polygon(0 -2px, calc(100% - 20px) -2px, 100% 100%, 100% calc(100% + 2px), 0 calc(100% + 2px));
  }
  .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
    min-height: 19.7625rem;        /* 16.7625 + 2.25 + 0.75 */
  }

}

/* Variant: full width card, photo forward (.jmu-card-full-width)
   For the page's lead story in a full width region: a 1000 x 600
   (5:3) photo takes 64% of the width and the text sits in a 36%
   column beside it, with larger type and a thicker gold bar, so the
   card reads as the lead rather than as one more card. (This used to
   need a separate -lead class; it is now built in.)

   How the fold works: the card becomes a WRAPPING flex row. The media
   and the body each carry a percentage flex-basis plus a rem
   min-width. Flexbox decides whether to wrap from each item's basis
   clamped by its min-width, so the row holds only while the 36% text
   column is at least its 17rem minimum: 17 / 0.36 = 47.22rem.
   Narrower than that the row wraps and the card falls back to the
   stacked layout. No viewport breakpoint is involved, so the same
   markup works in a full width region, a two-thirds region or a
   sidebar.

   How height works: the photo governs, so no reserved line math is
   needed. If the text ever runs taller than the photo, the photo
   stretches to fill (object-fit keeps it undistorted) instead of the
   text being clipped.

   Inner selectors carry three classes so they beat both the base
   rules and the container query rules above, whatever the order. */

.jmu-card.jmu-card-full-width {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  padding-bottom: 8px;           /* room for the gold bar, see below */
}

/* The gold bar spans the card's bottom edge. It is positioned, not
   wrapped onto its own flex line: the row safety net gives the card a
   fixed height, so a bar in the flow that grew on hover would be
   pushed past the bottom and clipped, leaving a gap under the
   eyebrow. Positioned, it grows upward over the padding reserved for
   it, the card never changes height, and the eyebrow (pinned at
   bottom = bar height) stays on top of it. Same as the side by side
   card. */
.jmu-card.jmu-card-full-width .jmu-card-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 0;
  height: 8px;
}

.jmu-card.jmu-card-full-width:has(.jmu-card-link):hover .jmu-card-rule {
  height: 13px;
}

.jmu-card.jmu-card-full-width .jmu-card-media {
  flex: 1 1 64%;
  min-width: min(20rem, 100%);   /* never wider than the card itself */
  aspect-ratio: 5 / 3;           /* 1000 x 600 */
  align-self: flex-start;        /* stacked: keep 5:3, as on side by side */
}

/* Fallback for browsers without aspect-ratio: the same 5:3 box. */
@supports not (aspect-ratio: 1 / 1) {
  .jmu-card.jmu-card-full-width .jmu-card-media {
    height: 0;
    padding-top: 60%;
  }
}

.jmu-card.jmu-card-full-width .jmu-card-body {
  flex: 1 1 36%;                 /* see the fold note above */
  min-width: min(17rem, 100%);   /* never wider than the card itself, or
                                    the text (and the arrow at its right
                                    edge) is clipped by the card */
  min-height: 0;                 /* the photo sets the height here */
  padding: 2rem 2.25rem 2.25rem;
}

.jmu-card.jmu-card-full-width .jmu-card-title {
  font-size: 1.75rem !important;
  line-height: 1.18 !important;
}

.jmu-card.jmu-card-full-width .jmu-card-summary {
  font-size: 1.125rem !important;
  line-height: 1.5 !important;
}

.jmu-card.jmu-card-full-width .jmu-card-category {
  font-size: 0.875rem !important;
  line-height: 1.125rem !important;         /* 18px: whole pixels, see the eyebrow note */
  padding: 0.6875rem calc(20px + 1.25rem) 0.6875rem 1.5rem;   /* 11px */
}

.jmu-card-set-title-black, .jmu-card-set-title-white {
  padding:10px 30px 20px 20px !important;
}

.jmu-card-set-title-black {
  color:black;
}

.jmu-card-set-title-white {
  color:white;
}

/* Eyebrow on full width cards.
   Stacked: laid over the photo like a standard card. The photo fills
   the card's width at 5:3 (its minimum width is capped at the card's
   width), so its bottom edge is 60% of the card's width down (60cqw).
   Side by side (from 47.22rem; see the fold note above): the photo
   and text share one line and stretch to the same height, and the
   gold bar sits alone on the line below. So the photo's bottom edge
   is always exactly one bar height above the card's bottom: the
   eyebrow is pinned there (bottom = bar height) and follows the bar
   when it grows on hover. The photo starts at the card's left edge,
   or, with .jmu-card-image-right, right after the text column, which
   side by side is exactly 36%. The text is centered against the
   photo in this layout. */
.jmu-card.jmu-card-full-width .jmu-card-body {
  justify-content: flex-start;
}

.jmu-card.jmu-card-full-width .jmu-card-body > .jmu-card-category {
  bottom: calc(100% - 60cqw + 0.015625px);  /* 1/64px, see the eyebrow note */
}

@container jmucard (min-width: 47.2223rem) {
  .jmu-card.jmu-card-full-width .jmu-card-body {
    justify-content: center;
  }
  .jmu-card.jmu-card-full-width .jmu-card-media {
    align-self: stretch;         /* side by side: fill the line */
  }
  .jmu-card.jmu-card-full-width .jmu-card-body > .jmu-card-category {
    top: auto;
    bottom: 8px;                   /* = gold bar height */
    left: 0;
    margin: 0;
    transform: none;
    max-width: 59%;                /* 92% of the 64% photo */
    transition: bottom 200ms ease; /* same timing as the bar */
  }
  .jmu-card.jmu-card-full-width:has(.jmu-card-link):hover .jmu-card-body > .jmu-card-category {
    bottom: 13px;
  }
  .jmu-card.jmu-card-full-width.jmu-card-image-right .jmu-card-body > .jmu-card-category {
    left: 36%;                     /* photo starts after the text */
  }
}

/* Full width card in a narrow container
   The lead story type (28px headline, 36px side padding) is sized
   for a wide region. When the card itself is narrower than 28rem
   (448px), as in a 1/3 or 1/2 column, it uses the same type and
   padding as a standard card at that width instead. Wide cards are
   unaffected, so the same markup works in a small or large region. */
@container jmucard (width < 28rem) {
  .jmu-card.jmu-card-full-width .jmu-card-body {
    padding: 1.5rem 1.5rem 1.75rem;
  }
  .jmu-card.jmu-card-full-width .jmu-card-title {
    font-size: 1.25rem !important;
    line-height: 1.25 !important;
  }
  .jmu-card.jmu-card-full-width .jmu-card-summary {
    font-size: 1rem !important;
    line-height: 1.45 !important;
  }
  .jmu-card.jmu-card-full-width .jmu-card-category {
    font-size: 0.8125rem !important;
    line-height: 1rem !important;             /* 16px: whole pixels, see the eyebrow note */
    padding: 0.625rem calc(16px + 1rem) 0.625rem 1.25rem;   /* 10px */
  }
}

@container jmucard (width < 20rem) {
  .jmu-card.jmu-card-full-width .jmu-card-body {
    padding: 1.25rem 1.25rem 1.5rem;
  }
  .jmu-card.jmu-card-full-width .jmu-card-title {
    font-size: 1.125rem !important;
  }
}

/* Variant: horizontal card, photo left and text right
   (.jmu-card-side-by-side)
   Made for 1/2 columns. The card is a wrapping flex row:
   - Narrower than 24rem (phones, or a 1/2 column squeezed by the
     481 to 768px YUI tier) it looks like a standard card: 16:10
     photo on top, text below.
   - 24rem and wider (a container query on the card itself) the
     photo takes 40% of the width on the left and stretches to the
     height of the text, cropped by object-fit.
   Type sizes and the height reservation are set here with three
   classes, so they ignore the width tier rules and every card of
   this variant lands at the same height in either layout.
   Reserved body height, maximum composition (source + 3 headline
   lines + 3 summary lines):
     1.3 x 0.875 + 3 x 1.25 x 1.125 + 3 x 1.45 x 0.9375
     + 0.75 x 2 gaps + 1.25 + 1.5 padding  =  13.684375rem
   The eyebrow is laid over the photo in both layouts, so it takes no
   space in the text and needs no reservation. Side by side it is
   pinned to the photo's bottom left corner the same way as on the
   full width cards: bottom = gold bar height, left = 0 (or 60% with
   .jmu-card-image-right, since the photo is exactly 40% wide). */

.jmu-card.jmu-card-side-by-side {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  padding-bottom: 5px;           /* room for the gold bar, see below */
}

.jmu-card.jmu-card-side-by-side .jmu-card-media {
  flex: 0 0 100%;                /* stacked by default */
  align-self: flex-start;        /* keep 16:10 even if the row safety net
                                    makes the card taller; the extra space
                                    falls below the photo, in the card's
                                    own background, and the eyebrow stays
                                    on the photo's edge */
}

.jmu-card.jmu-card-side-by-side .jmu-card-body {
  flex: 1 1 0;
  min-width: 0;
  padding: 1.25rem 1.25rem 1.5rem;
  min-height: 13.684375rem;
}

.jmu-card.jmu-card-side-by-side .jmu-card-title {
  font-size: 1.125rem !important;
  line-height: 1.25 !important;
}

.jmu-card.jmu-card-side-by-side .jmu-card-summary {
  font-size: 0.9375rem !important;
  line-height: 1.45 !important;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* The gold bar spans photo and text along the card's bottom edge.
   It is positioned rather than wrapped onto its own flex line: when
   the row safety net stretches a card taller than its content, a
   wrapped line would take a share of the extra height and float the
   bar up off the bottom. It grows upward on hover, over the padding
   reserved for it, so the card itself never changes height. */
.jmu-card.jmu-card-side-by-side .jmu-card-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 0;
}

/* Stacked: the photo is 16:10 across the full card, the same as a
   standard card, so the standard eyebrow placement applies. */

@container jmucard (min-width: 24rem) {
  .jmu-card.jmu-card-side-by-side .jmu-card-media {
    flex: 0 0 40%;
    aspect-ratio: auto;          /* height comes from the text column */
    align-self: stretch;
  }
  .jmu-card.jmu-card-side-by-side .jmu-card-image {
    position: absolute;
    top: 0;
    left: 0;
  }
  .jmu-card.jmu-card-side-by-side .jmu-card-body > .jmu-card-category {
    top: auto;
    bottom: 5px;                   /* = gold bar height */
    left: 0;
    margin: 0;
    transform: none;
    max-width: 36.8%;              /* 92% of the 40% photo */
    transition: bottom 200ms ease;
  }
  .jmu-card.jmu-card-side-by-side:has(.jmu-card-link):hover .jmu-card-body > .jmu-card-category {
    bottom: 9px;
  }
}

/* Image position, shared by both side by side layouts:
   .jmu-card-image-left / .jmu-card-image-right
   Works with .jmu-card-full-width and .jmu-card-side-by-side; on any other
   card the classes do nothing (they are scoped to those two layouts,
   so they can never turn a standard card sideways). Image left is the
   default, so .jmu-card-image-left only states it.
   .jmu-card-image-right uses row-reverse, which mirrors the layout
   visually only: the markup order, and so the reading and tab order,
   stays photo then text. Because row-reverse still wraps in markup
   order, the photo stays ON TOP whenever the card stacks, in both
   positions. If both classes are present, image right wins. These
   rules sit after both layouts' base rules so they win at equal
   specificity. The eyebrow offsets for image right are with each
   layout's eyebrow rules. */

.jmu-card.jmu-card-full-width.jmu-card-image-left,
.jmu-card.jmu-card-side-by-side.jmu-card-image-left {
  flex-direction: row;
}

.jmu-card.jmu-card-full-width.jmu-card-image-right,
.jmu-card.jmu-card-side-by-side.jmu-card-image-right {
  flex-direction: row-reverse;
}

@container jmucard (min-width: 24rem) {
  .jmu-card.jmu-card-side-by-side.jmu-card-image-right .jmu-card-body > .jmu-card-category {
    left: 60%;                     /* photo is the right 40% */
  }
}

/* Row gutter
   Every card carries 10px margins left and right (see .jmu-card
   above), so neighbouring cards are 20px apart. It works whether or
   not the units sit in a .yui3-g-r.card-gutter row, which matters
   because Cascade output does not always include that wrapper. The
   old split inset rules (16/8/8/16 and 12/12) were removed;
   .card-gutter is now harmless and can stay in markup. */

/* Card rows choose their own column count
   YUI switches its units by SCREEN width: from 481px a .yui3-u-1-3
   is a third of the row whatever that row's width, so in a narrow
   region (or a phone held sideways) cards end up about 130px wide.
   Here a YUI row that holds cards becomes a size container, and its
   units are resized by the ROW'S OWN WIDTH instead, so no card is
   drawn narrower than about 236px:
     1/3 units   row under 48rem (768px): 2 across
     1/4 units   row under 64rem (1024px): 2 across
     all units   row under 32rem (512px): 1 across (stacked)
   Only rows with a .jmu-card directly in a unit are touched (:has),
   and only their units' widths change. Every other YUI row, unit and
   grid rule on the page is left exactly as it is. Wider rows keep
   YUI's own widths. The row is a wrapping flex row, so 50% + 50%
   fits on one line with no whitespace gap, and the cards' 10px side
   margins keep the 20px gutter at any column count.
   Browsers without :has() or container queries keep YUI's widths. */

.yui3-g-r:has(> [class*="yui3-u"] > .jmu-card) {
  container: jmucardrow / inline-size;
}

@container jmucardrow (width < 64rem) {
  .yui3-g-r:has(> [class*="yui3-u"] > .jmu-card) > .yui3-u-1-4 {
    width: 50%;
  }
}

@container jmucardrow (width < 48rem) {
  .yui3-g-r:has(> [class*="yui3-u"] > .jmu-card) > .yui3-u-1-3 {
    width: 50%;
  }
}

@container jmucardrow (width < 32rem) {
  .yui3-g-r:has(> [class*="yui3-u"] > .jmu-card) > [class*="yui3-u"] {
    width: 100%;
  }
}

/* Preferences */

@media (prefers-reduced-motion: reduce) {
  .jmu-card,
  .jmu-card-image,
  .jmu-card-title::after,
  .jmu-card-rule,
  .jmu-card-category {
    transition: none;
  }
  .jmu-card:has(.jmu-card-link):hover {
    transform: none;
  }
  .jmu-card:has(.jmu-card-link):hover .jmu-card-image {
    transform: none;
  }
  .jmu-card:has(.jmu-card-link):hover .jmu-card-title::after {
    transform: none;
  }
}

@media (prefers-contrast: more) {
  .jmu-card-category {
    background: #450084;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  .jmu-card {
    border: 1px solid CanvasText;
  }
}

/* Row level safety net. Headlines are not clamped, so a headline
   longer than its reserved lines makes its card taller than its
   neighbours. The YUI row lays its units out as a stretched flex row,
   so every unit in a row is already as tall as the tallest card
   (plus that card's bottom margin). Each card fills its unit, less
   that margin, so all bottom bars stay level even then. Only the card
   is styled; the YUI units and grid are untouched. */
.yui3-g-r > [class*="yui3-u"] > .jmu-card {
  height: calc(100% - 1.75rem);    /* 1.75rem = the card's margin-bottom */
}

/* =========================================================
   PART 2: EQUAL HEIGHT ROWS
   (Formerly a separate add on file. It must stay BELOW part 1: many
   rules here win only because they come later.)

   WHAT THIS FIXES
   jmu-cards.css reserves a fixed text block on .jmu-card-body so
   cards of different LENGTHS come out the same height. It does not
   account for parts that are present on one card and absent on the
   next: a source line, an eyebrow, a summary, a photo. A card
   carrying an extra row grows past the reservation and its gold bar
   drops below its neighbours' — visible right now in NewsCenter,
   where only the first Featured card has a source.

   HOW IT WORKS
   Every reservation below is computed for the card's MAXIMUM
   composition — eyebrow + source + headline + summary — whether or
   not those parts are in the markup. Children stack from the top of
   the body, so a card missing a part simply collects the slack above
   its gold bar, and the bars stay level across the row. Because the
   height is fixed by the card itself, it holds across separate
   floated .yui-u columns that share no layout context.

   No custom properties, no double hyphens, all values written out.

   THE MATH (rewrite these if you change a type size, line height,
   line count, gap or padding)
     body min-height =
         source lines x source line-height x source size
       + title lines x title line-height x title size
       + summary lines x summary line-height x summary size
       + gap x (rows minus 1)
       + top padding + bottom padding
   Base tier (card narrower than 20rem):
     source 1.3 x 0.875   = 1.1375
     title  3 x 1.25 x 1.125 = 4.21875 (text only card: 4 lines = 5.625)
     summ.  4 x 1.45 x 1    = 5.8
     gaps   0.75 x 2        = 1.5
     pad    1.25 + 1.5      = 2.75
     eyebrow in flow (text only cards, first row of the body):
       1.25 x 0.75 + 0.5 x 2 = 1.9375, plus one more 0.75 gap
   20rem tier: pad 1.5 + 1.75 = 3.25, title 1.25, eyebrow 2.25 (36px)
   On photo cards the eyebrow is laid over the photo and takes no
   space in the body, so photo card reservations do not include it.
   28rem tier: title 1.375 at 1.2 line-height, summary 1.0625
   ========================================================= */

/* =========================================================
   1. Standard article card: reserve the source row
   1.1375 + 4.21875 + 5.8 + 1.5 + 2.75
   ========================================================= */

.jmu-card .jmu-card-body {
  min-height: 15.40625rem;
}

/* =========================================================
   2. Text only card (no .jmu-card-media):
   reserve eyebrow + source rows
   1.9375 eyebrow + 1.1375 + 5.625 + 5.8 + 0.75 x 3 gaps + 2.75
   The eyebrow is inside the body, so the same reservation covers
   cards with and without one; no separate rule is needed.
   ========================================================= */

.jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
  min-height: 19.5rem;
}

/* (Section 4, a gray placeholder for a card missing its photo, was
   removed: a card without .jmu-card-media is now a text only card by
   design.) */

/* =========================================================
   5. Same reservations at the wider type tiers
   ========================================================= */

@container jmucard (min-width: 20rem) {

  /* 1.1375 + 4.6875 + 5.8 + 1.5 + 3.25 */
  .jmu-card .jmu-card-body {
    min-height: 16.375rem;
  }

  /* 2.25 + 1.1375 + 6.25 + 5.8 + 2.25 + 3.25 */
  .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
    min-height: 20.9375rem;
  }

}

@container jmucard (min-width: 28rem) {

  /* 1.1375 + 4.95 + 6.1625 + 1.5 + 3.25 */
  .jmu-card .jmu-card-body {
    min-height: 17rem;
  }

  /* 2.25 + 1.1375 + 6.6 + 6.1625 + 2.25 + 3.25 */
  .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
    min-height: 21.65rem;
  }

}

/* =========================================================
   5b. Text only card with NO summary: a shorter card
   When a text only card has no .jmu-card-summary in its markup, the
   summary lines and one gap are dropped from the reservation, so the
   card shrinks to fit source + headline. Browsers without :has() keep
   the full size.
   Row rule: every card in a row should either have a summary or not.
   A row mixing the two will not line up (the ones without shrink).
     base  1.9375 + 1.1375 + 5.625 + 1.5 + 2.75 = 12.95
     20rem 2.25 + 1.1375 + 6.25 + 1.5 + 3.25 = 14.3875
     28rem 2.25 + 1.1375 + 6.6  + 1.5 + 3.25 = 14.7375
   (eyebrow row + source + 4 headline lines + 2 gaps + padding)
   Placed after sections 2 and 5 so that, at equal specificity, these
   rules win.
   ========================================================= */

.jmu-card:where(:not(:has(.jmu-card-media))):not(:has(.jmu-card-summary)) .jmu-card-body {
  min-height: 12.95rem;
}

@container jmucard (min-width: 20rem) {
  .jmu-card:where(:not(:has(.jmu-card-media))):not(:has(.jmu-card-summary)) .jmu-card-body {
    min-height: 14.3875rem;
  }
}

@container jmucard (min-width: 28rem) {
  .jmu-card:where(:not(:has(.jmu-card-media))):not(:has(.jmu-card-summary)) .jmu-card-body {
    min-height: 14.7375rem;
  }
}

/* =========================================================
   6. Full width cards opt out
   .jmu-card-full-width sizes itself from its photo and is not part of a
   row, so it keeps min-height 0. Its rules in jmu-cards.css carry
   three classes and already win; this is here as a guard in case
   this file is ever loaded first.
   ========================================================= */

.jmu-card.jmu-card-full-width .jmu-card-body {
  min-height: 0;
}

/* =========================================================
   7. Row aware reservations
   Sections 1, 2 and 5 reserve room for EVERY optional part, so a
   row of cards that lack a part carries empty space for it. Here the
   YUI row (.yui3-g-r) is
   checked with :has(): a part is reserved only when at least one card
   in the SAME row has it. Rows still line up, because every card in
   a row gets the same reservation; rows simply stop holding space for
   parts none of their cards use.
   The YUI grid is only read here (as a selector), never restyled.
   Cards outside such a row, and browsers without :has(), keep the
   full reservations above.
   Parts (rem, base / 20rem / 28rem tiers), each including its gap:
     padding           2.75     / 3.25     / 3.25
     headline, text    5.625    / 6.25     / 6.6     (4 lines)
     headline, photo   4.21875  / 4.6875   / 4.95    (3 lines)
     eyebrow row       2.6875   / 3        / 3        (text cards only;
                                  on photo cards it sits on the photo)
     source row        1.8875   / 1.8875   / 1.8875
     summary           6.55     / 6.55     / 6.9125
   All selectors here weigh the same, and each matches exactly one
   combination, so order does not matter between them. Horizontal and
   full width cards keep their own sizing.
   ========================================================= */

/* Text only cards: eyebrow / source / summary */

.yui3-g-r:has(.jmu-card-category):has(.jmu-card-source):has(.jmu-card-summary) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
  min-height: 19.5rem;   /* eyebrow + source + summary */
}

.yui3-g-r:has(.jmu-card-category):has(.jmu-card-source):not(:has(.jmu-card-summary)) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
  min-height: 12.95rem;   /* eyebrow + source */
}

.yui3-g-r:has(.jmu-card-category):not(:has(.jmu-card-source)):has(.jmu-card-summary) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
  min-height: 17.6125rem;   /* eyebrow + summary */
}

.yui3-g-r:has(.jmu-card-category):not(:has(.jmu-card-source)):not(:has(.jmu-card-summary)) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
  min-height: 11.0625rem;   /* eyebrow */
}

.yui3-g-r:not(:has(.jmu-card-category)):has(.jmu-card-source):has(.jmu-card-summary) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
  min-height: 16.8125rem;   /* source + summary */
}

.yui3-g-r:not(:has(.jmu-card-category)):has(.jmu-card-source):not(:has(.jmu-card-summary)) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
  min-height: 10.2625rem;   /* source */
}

.yui3-g-r:not(:has(.jmu-card-category)):not(:has(.jmu-card-source)):has(.jmu-card-summary) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
  min-height: 14.925rem;   /* summary */
}

.yui3-g-r:not(:has(.jmu-card-category)):not(:has(.jmu-card-source)):not(:has(.jmu-card-summary)) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
  min-height: 8.375rem;   /* headline only */
}

/* Photo cards (standard): source / summary */

.yui3-g-r:where(*):has(.jmu-card-source):has(.jmu-card-summary) .jmu-card:where(:has(.jmu-card-media):not(.jmu-card-full-width):not(.jmu-card-side-by-side)) .jmu-card-body {
  min-height: 15.40625rem;   /* source + summary */
}

.yui3-g-r:where(*):has(.jmu-card-source):not(:has(.jmu-card-summary)) .jmu-card:where(:has(.jmu-card-media):not(.jmu-card-full-width):not(.jmu-card-side-by-side)) .jmu-card-body {
  min-height: 8.85625rem;   /* source */
}

.yui3-g-r:where(*):not(:has(.jmu-card-source)):has(.jmu-card-summary) .jmu-card:where(:has(.jmu-card-media):not(.jmu-card-full-width):not(.jmu-card-side-by-side)) .jmu-card-body {
  min-height: 13.51875rem;   /* summary */
}

.yui3-g-r:where(*):not(:has(.jmu-card-source)):not(:has(.jmu-card-summary)) .jmu-card:where(:has(.jmu-card-media):not(.jmu-card-full-width):not(.jmu-card-side-by-side)) .jmu-card-body {
  min-height: 6.96875rem;   /* headline only */
}

@container jmucard (min-width: 20rem) {

  /* Text only cards: eyebrow / source / summary */

  .yui3-g-r:has(.jmu-card-category):has(.jmu-card-source):has(.jmu-card-summary) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
    min-height: 20.9375rem;   /* eyebrow + source + summary */
  }

  .yui3-g-r:has(.jmu-card-category):has(.jmu-card-source):not(:has(.jmu-card-summary)) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
    min-height: 14.3875rem;   /* eyebrow + source */
  }

  .yui3-g-r:has(.jmu-card-category):not(:has(.jmu-card-source)):has(.jmu-card-summary) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
    min-height: 19.05rem;   /* eyebrow + summary */
  }

  .yui3-g-r:has(.jmu-card-category):not(:has(.jmu-card-source)):not(:has(.jmu-card-summary)) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
    min-height: 12.5rem;   /* eyebrow */
  }

  .yui3-g-r:not(:has(.jmu-card-category)):has(.jmu-card-source):has(.jmu-card-summary) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
    min-height: 17.9375rem;   /* source + summary */
  }

  .yui3-g-r:not(:has(.jmu-card-category)):has(.jmu-card-source):not(:has(.jmu-card-summary)) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
    min-height: 11.3875rem;   /* source */
  }

  .yui3-g-r:not(:has(.jmu-card-category)):not(:has(.jmu-card-source)):has(.jmu-card-summary) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
    min-height: 16.05rem;   /* summary */
  }

  .yui3-g-r:not(:has(.jmu-card-category)):not(:has(.jmu-card-source)):not(:has(.jmu-card-summary)) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
    min-height: 9.5rem;   /* headline only */
  }

  /* Photo cards (standard): source / summary */

  .yui3-g-r:where(*):has(.jmu-card-source):has(.jmu-card-summary) .jmu-card:where(:has(.jmu-card-media):not(.jmu-card-full-width):not(.jmu-card-side-by-side)) .jmu-card-body {
    min-height: 16.375rem;   /* source + summary */
  }

  .yui3-g-r:where(*):has(.jmu-card-source):not(:has(.jmu-card-summary)) .jmu-card:where(:has(.jmu-card-media):not(.jmu-card-full-width):not(.jmu-card-side-by-side)) .jmu-card-body {
    min-height: 9.825rem;   /* source */
  }

  .yui3-g-r:where(*):not(:has(.jmu-card-source)):has(.jmu-card-summary) .jmu-card:where(:has(.jmu-card-media):not(.jmu-card-full-width):not(.jmu-card-side-by-side)) .jmu-card-body {
    min-height: 14.4875rem;   /* summary */
  }

  .yui3-g-r:where(*):not(:has(.jmu-card-source)):not(:has(.jmu-card-summary)) .jmu-card:where(:has(.jmu-card-media):not(.jmu-card-full-width):not(.jmu-card-side-by-side)) .jmu-card-body {
    min-height: 7.9375rem;   /* headline only */
  }
}

@container jmucard (min-width: 28rem) {

  /* Text only cards: eyebrow / source / summary */

  .yui3-g-r:has(.jmu-card-category):has(.jmu-card-source):has(.jmu-card-summary) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
    min-height: 21.65rem;   /* eyebrow + source + summary */
  }

  .yui3-g-r:has(.jmu-card-category):has(.jmu-card-source):not(:has(.jmu-card-summary)) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
    min-height: 14.7375rem;   /* eyebrow + source */
  }

  .yui3-g-r:has(.jmu-card-category):not(:has(.jmu-card-source)):has(.jmu-card-summary) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
    min-height: 19.7625rem;   /* eyebrow + summary */
  }

  .yui3-g-r:has(.jmu-card-category):not(:has(.jmu-card-source)):not(:has(.jmu-card-summary)) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
    min-height: 12.85rem;   /* eyebrow */
  }

  .yui3-g-r:not(:has(.jmu-card-category)):has(.jmu-card-source):has(.jmu-card-summary) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
    min-height: 18.65rem;   /* source + summary */
  }

  .yui3-g-r:not(:has(.jmu-card-category)):has(.jmu-card-source):not(:has(.jmu-card-summary)) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
    min-height: 11.7375rem;   /* source */
  }

  .yui3-g-r:not(:has(.jmu-card-category)):not(:has(.jmu-card-source)):has(.jmu-card-summary) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
    min-height: 16.7625rem;   /* summary */
  }

  .yui3-g-r:not(:has(.jmu-card-category)):not(:has(.jmu-card-source)):not(:has(.jmu-card-summary)) .jmu-card:where(:not(:has(.jmu-card-media))) .jmu-card-body {
    min-height: 9.85rem;   /* headline only */
  }

  /* Photo cards (standard): source / summary */

  .yui3-g-r:where(*):has(.jmu-card-source):has(.jmu-card-summary) .jmu-card:where(:has(.jmu-card-media):not(.jmu-card-full-width):not(.jmu-card-side-by-side)) .jmu-card-body {
    min-height: 17rem;   /* source + summary */
  }

  .yui3-g-r:where(*):has(.jmu-card-source):not(:has(.jmu-card-summary)) .jmu-card:where(:has(.jmu-card-media):not(.jmu-card-full-width):not(.jmu-card-side-by-side)) .jmu-card-body {
    min-height: 10.0875rem;   /* source */
  }

  .yui3-g-r:where(*):not(:has(.jmu-card-source)):has(.jmu-card-summary) .jmu-card:where(:has(.jmu-card-media):not(.jmu-card-full-width):not(.jmu-card-side-by-side)) .jmu-card-body {
    min-height: 15.1125rem;   /* summary */
  }

  .yui3-g-r:where(*):not(:has(.jmu-card-source)):not(:has(.jmu-card-summary)) .jmu-card:where(:has(.jmu-card-media):not(.jmu-card-full-width):not(.jmu-card-side-by-side)) .jmu-card-body {
    min-height: 8.2rem;   /* headline only */
  }
}

/* =========================================================
   8. Compact cards inside a YUI row
   Inside a .yui3-g-r row the units are a stretched flex row, and the
   row safety net (end of part 1) makes every card fill its unit. So
   the cards in a row already match the tallest card, and the bottom
   bars line up without any reserved height. Here the reservations
   above are switched off for those cards: a card is only as tall as
   the tallest content in its row, with no empty space held for text
   that is not there.
   Cards NOT directly in a .yui3-g-r unit (floated .yui-u columns, or
   any other wrapper) keep the reservations, which is what lines them
   up there.
   !important because the row aware selectors in section 7 carry up
   to six classes; this one rule has to beat all of them and every
   width tier.
   ========================================================= */

.yui3-g-r > [class*="yui3-u"] > .jmu-card .jmu-card-body {
  min-height: 0 !important;
}

/* END COMPONENT CSS */

/* NOT COVERED, by design: mixing card VARIANTS in one row. A card
   with a photo and a text only card have different anatomies, so no
   reservation can make them match; give the row one variant, or set
   an explicit height on every card in it. */