/*
|--------------------------------------------------------------------------
| Block: Download App
|--------------------------------------------------------------------------
| Stili dedicati per il blocco downloadApp (varianti device, card, app_login).
| La maggior parte del layout è gestita dalle utility Tailwind direttamente
| nel template; qui finiscono solo le regole non esprimibili comodamente
| con utility (e.g. SVG decorativo, figure responsive).
*/

.block-downloadApp__bg-svg {
  pointer-events: none;
  z-index: 0;
}

.block-downloadApp__device-image > img,
.block-downloadApp__app-login-image > img {
  position: relative;
  z-index: 1;
}

/* Le righe frazionate prendono tutte l'altezza della card con il contenuto
   maggiore, anche quando le card vanno su piu righe. */
.block-downloadApp__cards-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .block-downloadApp__cards-list--few {
    grid-template-columns: repeat(2, minmax(0, 392px));
  }

  .block-downloadApp__cards-list--many {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .block-downloadApp__cards-list--many {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Allinea la struttura del WYSIWYG con le tipografie del design system. */
.block-downloadApp .wysiwyg p {
  margin: 0;
}

.block-downloadApp .wysiwyg p + p {
  margin-top: 16px;
}

.block-downloadApp .wysiwyg a {
  color: var(--color-primary);
  text-decoration: underline;
}

.block-downloadApp .wysiwyg strong {
  font-weight: 600;
}