/* DGM-Inventum media cards: mask_image_card_with_description, layouts 1-3 (template frontend-inventum.html).
   First card featured with the photo beside the text, then a grid of three or four columns. A card left alone in
   the last row widens to a horizontal card; two or three share the row. Phones get a swipeable row. */
.inv-mcards {
  --mc-ink: #161513; --mc-text: #4a463f; --mc-muted: #6b675f; --mc-accent: #08739c;
  --mc-font: "Theme-Font", Inter, system-ui, sans-serif; --mc-heading: "Heading-Font", "Inter Tight", "Theme-Font", Inter, system-ui, sans-serif;
  --mc-ease: cubic-bezier(.23, 1, .32, 1);
  padding: clamp(56px, 7vw, 96px) 20px;
  font-family: var(--mc-font);
}
.inv-mcards__inner { max-width: 1200px; margin: 0 auto; }

.inv-mcards__head { max-width: 780px; margin: 0 0 clamp(28px, 3.6vw, 44px); }
.dgm-inventum.inv-mcards .inv-mcards__head h2 {
  margin: 0; color: var(--mc-ink); font: 800 clamp(1.9rem, 1.35rem + 1.7vw, 2.65rem)/1.07 var(--mc-heading);
  letter-spacing: -.032em; text-wrap: balance; hyphens: manual;
}
.dgm-inventum.inv-mcards .inv-mcards__intro { margin-top: 14px; color: var(--mc-text); font-size: 17px; line-height: 1.6; }
.inv-mcards__intro p { margin: 0; }

.inv-mcards__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.inv-mcards__grid > li { margin: 0; padding: 0; }
.inv-mcards__grid > li::before { content: none; }

.inv-mcard {
  grid-column: span 4; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 20px;
  background: #fff; box-shadow: 0 0 0 1px rgba(22, 21, 19, .07), 0 1px 2px rgba(22, 21, 19, .04);
  transition: box-shadow 220ms ease;
}
.inv-mcards--cols-4 .inv-mcard { grid-column: span 3; }
.inv-mcard:hover { box-shadow: 0 0 0 1px rgba(22, 21, 19, .09), 0 18px 40px -24px rgba(22, 21, 19, .35); }
.inv-mcard__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: #eeeae3; }
.inv-mcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--mc-ease); }
.inv-mcard:hover .inv-mcard__media img { transform: scale(1.035); }

.inv-mcard__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 20px 22px 24px; }
.dgm-inventum .inv-mcard__label {
  display: flex; align-items: center; gap: 9px; margin: 0; color: var(--mc-accent); font: 600 13px/1.35 var(--mc-font); letter-spacing: 0;
}
.dgm-inventum .inv-mcard__label::before { content: ""; flex: none; width: 14px; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; }
.dgm-inventum .inv-mcard__title {
  margin: 0; color: var(--mc-ink); font: 700 19px/1.25 var(--mc-heading); letter-spacing: -.016em; text-wrap: balance; hyphens: auto; overflow-wrap: break-word;
}
.dgm-inventum .inv-mcard__text { color: var(--mc-text); font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.dgm-inventum .inv-mcard__text p { margin: 0; }
.dgm-inventum .inv-mcard__text p + p { margin-top: .6em; }
.inv-mcard__link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; color: var(--mc-accent);
  font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.inv-mcard__link i { font-size: 11px; transition: transform 160ms var(--mc-ease); }
.inv-mcard__link:hover i { transform: translateX(3px); }
.inv-mcard__link:focus-visible { outline: 2px solid #0a7aa6; outline-offset: 3px; border-radius: 4px; }

/* Horizontal cards: the featured first card, and (from 1024px) a card left alone in the last row. */
@media (min-width: 768px) {
  .inv-mcards .inv-mcard--feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); }
  .inv-mcard--feature .inv-mcard__media { aspect-ratio: auto; min-height: 320px; }
  .inv-mcard--feature .inv-mcard__body { justify-content: center; gap: 12px; padding: clamp(28px, 3.6vw, 52px); }
  .dgm-inventum .inv-mcard--feature .inv-mcard__title { font-size: clamp(23px, 1.05rem + 1vw, 30px); letter-spacing: -.024em; }
  .dgm-inventum .inv-mcard--feature .inv-mcard__text { font-size: 16.5px; }
}
@media (min-width: 1024px) {
  .inv-mcards--cols-3 .inv-mcard:last-child:nth-child(3n+2):not(:first-child),
  .inv-mcards--cols-4 .inv-mcard:last-child:nth-child(4n+2):not(:first-child) {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);
  }
  .inv-mcards--cols-3 .inv-mcard:last-child:nth-child(3n+2):not(:first-child) .inv-mcard__media,
  .inv-mcards--cols-4 .inv-mcard:last-child:nth-child(4n+2):not(:first-child) .inv-mcard__media { order: 2; aspect-ratio: auto; min-height: 300px; }
  .inv-mcards--cols-3 .inv-mcard:last-child:nth-child(3n+2):not(:first-child) .inv-mcard__body,
  .inv-mcards--cols-4 .inv-mcard:last-child:nth-child(4n+2):not(:first-child) .inv-mcard__body { justify-content: center; gap: 10px; padding: clamp(28px, 3.2vw, 44px); }
  /* Two or three cards sharing the last row. */
  .inv-mcards--cols-3 .inv-mcard:nth-last-child(2):nth-child(3n+2), .inv-mcards--cols-3 .inv-mcard:last-child:nth-child(3n+3) { grid-column: span 6; }
  .inv-mcards--cols-4 .inv-mcard:nth-last-child(2):nth-child(4n+2), .inv-mcards--cols-4 .inv-mcard:last-child:nth-child(4n+3) { grid-column: span 6; }
  .inv-mcards--cols-4 .inv-mcard:nth-last-child(3):nth-child(4n+2), .inv-mcards--cols-4 .inv-mcard:nth-last-child(2):nth-child(4n+3), .inv-mcards--cols-4 .inv-mcard:last-child:nth-child(4n+4) { grid-column: span 4; }
  .inv-mcards--cols-4 .inv-mcard:not(.inv-mcard--feature) .inv-mcard__body { padding: 18px 18px 22px; }
  .dgm-inventum .inv-mcards--cols-4 .inv-mcard:not(.inv-mcard--feature) .inv-mcard__title { font-size: 17.5px; }
  .dgm-inventum .inv-mcards--cols-4 .inv-mcard:not(.inv-mcard--feature) .inv-mcard__text { font-size: 14.5px; }
}
/* Tablets: two per row; with an odd number after the featured card the last one takes the full row. */
@media (min-width: 640px) and (max-width: 1023px) {
  .inv-mcard, .inv-mcards--cols-4 .inv-mcard { grid-column: span 6; }
  .inv-mcards .inv-mcard:last-child:nth-child(even):not(:first-child) { grid-column: 1 / -1; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .inv-mcards .inv-mcard:last-child:nth-child(even):not(:first-child) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .inv-mcards .inv-mcard:last-child:nth-child(even):not(:first-child) .inv-mcard__media { order: 2; aspect-ratio: auto; min-height: 260px; }
  .inv-mcards .inv-mcard:last-child:nth-child(even):not(:first-child) .inv-mcard__body { justify-content: center; }
}
/* Phones: a swipeable row; the next card peeks in. */
@media (max-width: 639px) {
  .inv-mcards { padding-inline: 16px; }
  .inv-mcards__grid {
    display: flex; gap: 12px; margin: 0 -16px; padding: 2px 16px 10px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none;
  }
  .inv-mcards__grid::-webkit-scrollbar { display: none; }
  .inv-mcard, .inv-mcards--cols-4 .inv-mcard { flex: 0 0 min(84%, 340px); scroll-snap-align: start; }
  .inv-mcard__body { padding: 18px 18px 20px; }
  .dgm-inventum .inv-mcard__title { font-size: 18px; }
  .dgm-inventum .inv-mcard__text { font-size: 14.5px; }
}

/* Layout 3: whole images such as logos or screenshots. */
.inv-mcards--contain .inv-mcard__media { display: grid; place-items: center; background: #f3f1ec; }
.inv-mcards--contain .inv-mcard__media img { width: 100%; height: 100%; padding: 18px; object-fit: contain; }
.inv-mcards--contain .inv-mcard:hover .inv-mcard__media img { transform: none; }

@media (hover: none) { .inv-mcard:hover .inv-mcard__media img { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .inv-mcard, .inv-mcard__media img, .inv-mcard__link i { transition: none; }
  .inv-mcard:hover .inv-mcard__media img, .inv-mcard__link:hover i { transform: none; }
}