/* ==========================================================================
   DEI series — Diversity in Filmmaking, Hispanic Heritage Month, Women's History Month
   --------------------------------------------------------------------------
   These pages are built from NATIVE Builder elements, so almost all of their appearance comes from
   kf-about.css: `.kf-range__grid .el-item` is already aliased onto `.kf-card`, which is why the
   profile grid looks like every other card on the site without a line of new CSS.

   Only two things are genuinely specific to this series and live here.
   ========================================================================== */

/* The interview cards carry a portrait, not a product shot, so the 16/9 well the range grid uses
   crops heads. A portrait ratio is the whole reason this override exists.

   `height: auto` is the load-bearing line. The aliased rule
   `.kf-card__img, .kf-range__grid .el-image` sets `height: 100%`, and an explicit height always
   beats `aspect-ratio` — without resetting it the ratio is declared, computes, and does nothing
   while the portrait stretches to whatever height the card happens to be. */
.kf-dei__grid .el-image {
    aspect-ratio: 4 / 5;
    height: auto;
    width: 100%;
    object-fit: cover;
    display: block;
}

/* The intro deliberately does NOT use .kf-lede. That component is `color: var(--kf-on-dark)` —
   it belongs to the dark bands on the About page, and on this white section it renders as pale grey
   on white at roughly 1.4:1. Same measure, on-light ink. */
.kf-dei__intro {
    font-size: 17px;
    line-height: 27px;
    max-width: 34em;
    color: var(--kf-ink-2, #4A4843);
}

/* The films list is deliberately typographic — the source presented each film as cover artwork,
   and that artwork is not ours to republish on this site. Title, year, director and where to watch
   is the information the section actually carries, so it is set as text and given enough room to
   read as a considered list rather than a table that lost its images. */
.kf-dei__films-grid .el-item {
    border-left: 2px solid var(--kf-yellow, #FED208);
    padding: 2px 0 2px 14px;
}
.kf-dei__films-grid .el-title {
    font-size: 17px;
    line-height: 24px;
}
.kf-dei__films-grid .el-meta {
    letter-spacing: normal;
    text-transform: none;
}