/* ================================================================
  SELL / INDUSTRY PAGES (shared)
  Common blocks for the sell/* industry pages (sell/beer, ...).
  sell/digital keeps its own sell-digital.css.
================================================================ */

/* Media card: full-bleed photo with the title and text over a fade to
   the section background at the bottom. Title/text reuse .js-cards__title
   and .js-cards__text from base.css. The fade uses --color-background, so
   it follows the surrounding [data-bundle-color] (light on bright/light,
   dark on onyx/carbon). Informative only: no hover, it is not a link. */
.sell-card {
  position: relative;
  isolation: isolate;
  height: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--js-radius-xl);
  background: var(--color-background);
}

.sell-card__image {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  width: 100%;
  /* stops short of the bottom edge, which the fade covers anyway, so the
     photo can't bleed through the rounded corners */
  height: 85%;
  object-fit: cover;
}

.sell-card__content {
  display: flex;
  flex-direction: column;
  gap: calc(var(--js-padding) * 0.75);
  padding: calc(var(--js-padding) * 6) calc(var(--js-padding) * 1.5) calc(var(--js-padding) * 1.5);
  background: linear-gradient(to top, var(--color-background) 55%, transparent);
}

.sell-card__content .js-cards__text {
  opacity: 0.8;
}