/* features-grid — a responsive grid of short feature entries. Entry anatomy
 * rides the kit registers; this sheet is grid and entry geometry. */

/* x-body per the ratio rule, never raw px. */
.sk-features-grid {
  --sk-avatar-size: calc(var(--kit-type-base) * 5.5);
  --sk-ordinal-size: calc(var(--kit-type-base) * 2.5);
}

/* entryTitleStyle=body switches entry titles to the sans body face. */
.sk-features-grid[data-entry-title-style="body"] .sk-feature-entry .sk-feature-title {
  font-family: var(--kit-font-body);
  font-style: var(--kit-slant-body);
  text-transform: var(--kit-caps-body);
  font-size: var(--kit-type-base);
  line-height: var(--kit-lead-body);
  font-weight: calc(var(--kit-weight-body) + 200);
  letter-spacing: calc(var(--kit-track-body) * 1em);
}

/* `below` re-seats the eyebrow marker UNDER the title, by the same mechanism
 * content-order uses. */
.sk-features-grid[data-marker-placement="below"]
  .sk-feature-entry
  .sk-feature-copy
  > .sk-feature-title {
  order: -1;
  margin-bottom: calc(var(--sk-feature-gap) * (var(--sk-rhythm-label, 0.5) - 1));
}
.sk-features-grid[data-marker-placement="below"]
  .sk-feature-entry
  .sk-feature-copy
  > :is(.sk-eyebrow, .sk-detail) {
  margin-bottom: calc(var(--sk-feature-gap) * (var(--sk-rhythm-title, 1) - 1));
}

/* data-ordinals numbers the entries with a CSS counter in the title voice, so
 * the numeral is design-owned rather than authored. */
.sk-features-grid[data-ordinals="true"] .sk-features-grid-entries {
  counter-reset: sk-ordinal;
}
.sk-features-grid[data-ordinals="true"] .sk-feature-entry .sk-feature-copy::before {
  counter-increment: sk-ordinal;
  content: counter(sk-ordinal, decimal-leading-zero);
  font-family: var(--kit-font-title);
  font-style: var(--kit-slant-title);
  font-size: var(--sk-ordinal-size);
  font-weight: var(--kit-weight-title);
  letter-spacing: calc(var(--kit-track-title) * 1em);
  line-height: 1;
  color: var(--sk-ink-muted);
  margin-bottom: calc(var(--sk-feature-gap) * (var(--sk-rhythm-label, 0.5) - 1));
}
.sk-features-grid[data-ordinals="true"] .sk-feature-entry .sk-eyebrow[data-sk-field="marker"] {
  display: none;
}
.sk-features-grid[data-ordinals="true"][data-marker-placement="below"]
  .sk-feature-entry
  .sk-feature-copy
  > .sk-feature-title {
  order: 0;
  margin-bottom: calc(var(--sk-feature-gap) * (var(--sk-rhythm-title, 1) - 1));
}

/* Entry title links — quiet underline on hover, glyph trails the label. */
.sk-features-grid .sk-feature-entry-link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  padding-bottom: 2px;
  transition: background-size 0.35s var(--sk-ease-out);
}
.sk-features-grid .sk-feature-entry-link:hover {
  background-size: 100% 1px;
}
.sk-features-grid .sk-feature-entry-glyph {
  margin-inline-start: 0.2em;
}

/* --sk-columns is stamped inline per instance, --sk-cell-count from the list
 * length at compose time. */

/* The wrapper owns POSITION and clipping only; the ratio rides the art atom's
 * own --sk-image-aspect, inherited to the media element so the shared
 * :is(img, video).sk-art keeps owning width, object-fit and radius. Authoring
 * aspect-ratio on the img here would win over its own data-aspect. */
.sk-features-grid .sk-feature-media {
  display: block;
  width: 100%;
  overflow: hidden;
}
/* A .sk-crop box, so the pane must be extrinsically sized: the img inside is an
 * absolute fill. The monogram pane is not a crop window and sizes from its own
 * mark rules. */
.sk-features-grid .sk-crop.sk-feature-media {
  aspect-ratio: var(--sk-image-aspect, 3 / 2);
}
.sk-features-grid .sk-feature-media:has(.sk-art[src=""]) {
  display: none;
}

/* Under a drawn grid, cells in one row have DIFFERENT widths, so a spanning
 * cell's photo would grow taller and break the row. Height comes from the
 * one-track measure instead. */
@media (min-width: 900px) {
  .sk-features-grid .sk-features-grid-entries[data-grid] {
    container-type: inline-size;
  }
  .sk-features-grid:not([data-image-style="avatar"])
    .sk-features-grid-entries[data-grid]
    .sk-feature-entry:not([data-image-fill="true"])
    .sk-crop.sk-feature-media {
    height: calc(
      (100cqw - (var(--sk-grid-cols, var(--sk-active-columns, 1)) - 1) * var(--kit-space-4)) /
        var(--sk-grid-cols, var(--sk-active-columns, 1)) / (var(--sk-image-aspect, 3 / 2))
    );
  }
}

.sk-features-grid[data-content-order="media-first"] .sk-feature-media {
  order: -1;
}
/* Pinned to the BOTTOM so images line up across a row even when entries carry
 * different amounts of copy. */
.sk-features-grid[data-content-order="content-first"] .sk-feature-entry {
  display: flex;
  flex-direction: column;
}
.sk-features-grid[data-content-order="content-first"] .sk-feature-entry .sk-feature-copy {
  flex: 1;
}
.sk-features-grid[data-content-order="content-first"] .sk-feature-entry .sk-feature-media {
  order: 1;
  margin-top: auto;
}
/* Ranked BEFORE the avatar rule below, whose source order must win. */
.sk-features-grid[data-image-crop] .sk-feature-media {
  --sk-image-aspect: var(--sk-aspect);
}

/* `avatar` reads the entry media as a MARK, not content photography — the
 * image atom's documented mark exemption. */
.sk-features-grid[data-image-style="avatar"] .sk-feature-media {
  --sk-image-aspect: 1 / 1;
  --sk-media-radius: 50%;
  width: var(--sk-avatar-size);
}

/* The imageless entry's mark, rendered only when the row has no image. It
 * rides .sk-feature-media so content-order still places it. */
.sk-features-grid .sk-feature-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sk-avatar-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: var(--sk-border-width) solid var(--sk-stroke);
  font-family: var(--kit-font-title);
  font-style: var(--kit-slant-title);
  font-size: calc(var(--kit-type-base) * 1.15);
  font-weight: var(--kit-weight-title);
  letter-spacing: calc(var(--kit-track-title) * 1em + 0.04em);
  color: var(--sk-ink-muted);
}

.sk-features-grid .sk-feature-entry[data-image-fill="true"] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* A carded entry owns its own inset. */
.sk-features-grid .sk-feature-entry[data-image-fill="true"]:not(.sk-card) {
  padding: 0;
}
.sk-features-grid .sk-feature-entry[data-image-fill="true"] .sk-feature-copy {
  height: 100%;
  gap: 0;
}
.sk-features-grid .sk-feature-entry[data-image-fill="true"] .sk-feature-media {
  height: 100%;
  flex: 1;
}
/* Clearing the atom's ratio var lets the photo take the cell's height; cover
 * is already the atom's default. */
.sk-features-grid .sk-feature-entry[data-image-fill="true"] .sk-feature-media {
  --sk-image-aspect: auto;
}
.sk-features-grid .sk-feature-entry[data-image-fill="true"] .sk-feature-media .sk-art {
  height: 100%;
}

/* Centering the entry's copy box centers the flex items with it. */
.sk-features-grid[data-align="center"] .sk-feature-entry {
  text-align: center;
}
.sk-features-grid[data-align="center"] .sk-feature-entry .sk-feature-copy {
  align-items: center;
}
.sk-features-grid[data-align="center"] .sk-feature-entry .sk-feature-desc {
  margin-inline: auto;
}

/* The xs register: the beat derives from the heading-4 step. */
.sk-feature-entry {
  position: relative;
  --sk-feature-step: var(--sk-text-h4-size);
  --sk-feature-gap: calc(var(--kit-type-base) * 0.4 + var(--sk-feature-step) * 0.23);
}
.sk-feature-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sk-feature-gap);
  min-width: 0;
}
.sk-feature-copy > * {
  margin: 0;
}
.sk-feature-copy > .sk-badge {
  margin-bottom: calc(var(--sk-feature-gap) * (var(--sk-rhythm-badge, 1) - 1));
}
.sk-feature-copy > :is(.sk-eyebrow, .sk-detail) {
  margin-bottom: calc(var(--sk-feature-gap) * (var(--sk-rhythm-label, 0.5) - 1));
}
.sk-feature-copy > .sk-feature-title {
  margin-bottom: calc(var(--sk-feature-gap) * (var(--sk-rhythm-title, 1) - 1));
}
.sk-feature-copy > .sk-feature-actions {
  margin-top: calc(var(--sk-feature-gap) * (var(--sk-rhythm-departure, 1.5) - 1));
}
/* A card's description trails off at three lines, never ballooning the row. */
.sk-feature-title {
  text-wrap: balance;
  border-width: var(--kit-edge-title);
  border-style: var(--kit-edge-style-title);
  border-color: currentcolor;
  border-radius: var(--kit-round-title);
  padding: var(--kit-pad-title);
}
.sk-feature-desc {
  color: var(--sk-ink-muted);
  text-wrap: pretty;
  border-width: var(--kit-edge-body);
  border-style: var(--kit-edge-style-body);
  border-color: currentcolor;
  border-radius: var(--kit-round-body);
  padding: var(--kit-pad-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sk-feature-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sk-actions-gap);
}
.sk-feature-actions:has(> .sk-btn-link),
.sk-feature-actions:has(> .sk-link) {
  gap: calc(var(--sk-actions-gap) * 2.3);
}