/* Independent cards: disclosure height never becomes a shared grid track.
   Without JavaScript, each card keeps its natural text and disclosure flow. */
.formats {
  align-items: start;
}

.formats > .format {
  grid-row: auto;
  grid-template-rows: repeat(4, auto);
  align-self: start;
}

.formats > .format > h3 {
  min-height: var(--format-title-height, 0px);
}

.formats > .format > p:not(.price) {
  min-height: var(--format-description-height, 0px);
}

@media (max-width: 900px) {
  .formats > .format > h3,
  .formats > .format > p:not(.price) {
    min-height: 0;
  }
}

/* Outline and shadow stay outside layout. Keep every card's own surface. */
[data-dari-ui="soft-v1"] .formats > .format.du-surface {
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: outline-color 160ms ease, box-shadow 160ms ease;
}

[data-dari-ui="soft-v1"] .formats > .format.du-surface:focus-within {
  outline-color: var(--du-accent-strong);
  box-shadow: inset 0 1px 0 var(--du-rim),
    0 0 0 7px color-mix(in srgb, var(--du-accent-strong) 10%, transparent),
    var(--du-e2);
}

@media (hover: hover) and (pointer: fine) {
  [data-dari-ui="soft-v1"] .formats > .format.du-surface:hover {
    outline-color: var(--du-accent-strong);
    box-shadow: inset 0 1px 0 var(--du-rim),
      0 0 0 7px color-mix(in srgb, var(--du-accent-strong) 10%, transparent),
      var(--du-e2);
  }
}