/* ==========================================================================
   Applications — 24:1021 · 1512 x 1747
   Flusso verticale: 160 (pad-top) + 131 (Text) + 80 (gap) + 1216 (Cards)
                     + 160 (pad-bottom) = 1747
   ========================================================================== */

.applications {
  height: 1747px;
  gap: var(--space-6);            /* 80px, gap dell'auto-layout column 24:1021 */
  justify-content: flex-start;
}
/* background (--gradient-section-dark), padding 160/40 e align-items:center
   arrivano da .section--dark + .section--narrative in base.css */

/* --- Text 24:1023 — 1432 x 131, column, items-center, gap 16 -------------- */
.applications__text {
  width: var(--container-width);
  height: 131px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

/* Titolo 24:1025 — 48/58, #ffffff, box 1432 x 58 */
.applications__title {
  width: 100%;
  color: var(--color-white);
}

/* Paragrafo 24:1026 — 16/19, #d2d2d2, box 1432 x 57 (3 righe) */
.applications__lead {
  width: 100%;
  color: var(--color-neutral-300);
}

/* --- Cards 24:1027 — 1432 x 1216, griglia 2x2, gap 16 --------------------- */
.applications__cards {
  width: var(--container-width);
  height: 1216px;               /* 600 + 16 + 600 */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--grid-gap);
  cursor: pointer;              /* dichiarato sul container in Figma */
}

/* ==========================================================================
   Application Card — component set, master 41:2004 · 708 x 600
   Istanze: 42:2354 / 42:2364 / 42:2382 / 42:2400
   ========================================================================== */
.app-card {
  position: relative;
  width: 708px;
  height: 600px;
  padding: var(--space-5);      /* 40px su tutti i lati -> contenuto 628px */
  border-radius: var(--radius-lg);
  overflow: hidden;             /* clippa image fill e overlay a 16px */
  background: var(--color-tertiary);  /* fondo in attesa dell'immagine (non e un fill Figma) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  cursor: pointer;
}

/* --- Image fill + overlay (§2.2) ------------------------------------------
   In Figma NON esiste un layer immagine: e un image fill sul frame root con
   sopra un secondo fill gradiente. Qui: wrapper decorativo assoluto sotto
   Header e Description. */
.app-card__media {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.app-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.app-card__overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-card-app);
}

/* Header e Description stanno sopra il wrapper decorativo */
.app-card__header,
.app-card__description { position: relative; z-index: 1; }

/* --- Header 41:2005 — 628 x 65, row, items-center, space-between ---------- */
.app-card__header {
  width: 628px;
  height: 65px;
  padding-right: var(--space-3);   /* 16px, unico padding del frame */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/* Title 41:2038 — larghezza hug, altezza 65: 34 + 8 + 23 */
.app-card__title-group {
  height: 65px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-2);
}

/* Titolo card 41:2008 — 28/34, #ffffff, nowrap */
.app-card__title {
  color: var(--color-white);
  white-space: nowrap;
}

/* Tag 41:2009 — fill #ffffff, radius 4, padding 4/8, altezza 23 ------------
   Testo 41:2010 — 12/15, #29384d, maiuscolo nel contenuto, nowrap */
.app-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 23px;                 /* 4 + 15 + 4 */
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--color-white);
  color: var(--color-tertiary-400);
  white-space: nowrap;
}

/* --- Description 41:2011 — 628 (fill) x hug, column, gap 8 ---------------- */
.app-card__description {
  width: 628px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-neutral-300);
}

/* Headline 41:2012 — 24/29 Bold, #d2d2d2 */
.app-card__headline { color: inherit; }

/* Corpo 41:2013 — 16/19 Regular, #d2d2d2.
   Un unico layer di testo con due paragrafi separati da un a-capo. */
.app-card__body { color: inherit; }