/* ==========================================================================
   Applications — 24:1021 · responsive

   PROVVISORIO. Il mockup mobile non esiste: ogni valore qui dentro e una mia
   scelta di riflusso, non una misura di Figma. Quando arriveranno i frame
   mobile questo file si sostituisce in blocco.

   REGOLA INVIOLABILE: nessuna riga fuori da @media. A >= 1512 la sezione
   resta identica al mockup (1747px di altezza, card 708x600).

   Struttura desktop:
     .applications__text  1432 x 131
     .applications__cards 1432 x 1216 — griglia 2x2, gap 16
     .app-card             708 x 600  — immagine di fondo + testo sovrapposto
   ========================================================================== */


/* --------------------------------------------------------------------------
   1280-1511 · Desktop compresso
   Stessa struttura 2x2: si sciolgono solo le larghezze fisse (1432, 708) e le
   altezze fisse (131, 1216, 600). La card resta a due colonne e prende 1fr.
   -------------------------------------------------------------------------- */
@media (max-width: 1511px) {
  /* 1432 -> tutta la larghezza utile della sezione */
  .applications__text,
  .applications__cards {
    width: 100%;
  }

  /* Le altezze di Figma valgono solo al wrapping di 1432: appena il testo si
     riflowa vanno rilasciate (il core lo fa solo sui blocchi di primo livello). */
  .applications__text  { height: auto; }
  .applications__cards { height: auto; grid-template-rows: auto auto; }

  /* 708x600 -> la card riempie la cella di griglia.
     min-height MIA (non Figma): senza un minimo la card collasserebbe
     sull'altezza del testo e l'immagine di fondo sparirebbe quasi del tutto. */
  .app-card {
    width: 100%;
    height: auto;
    min-height: 520px;
  }

  /* 628 = 708 - 40 - 40: larghezze interne derivate, quindi percentuali */
  .app-card__header,
  .app-card__description {
    width: 100%;
  }
  /* header 65px: con il tag che puo andare a capo l'altezza deve seguire */
  .app-card__header,
  .app-card__title-group {
    height: auto;
  }
}


/* --------------------------------------------------------------------------
   1024-1279 · Laptop
   La griglia resta 2x2 (le card sono blocchi editoriali larghi, non tile:
   passare a 1 colonna gia qui allungherebbe la sezione a ~3000px).
   Si riduce solo il minimo verticale.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .app-card { min-height: 470px; }
}


/* --------------------------------------------------------------------------
   <= 1023 · Tablet — la 2x2 diventa colonna singola
   A 1024 la cella e gia sotto i 470px: il titolo 28px + headline 24px + corpo
   16px su ~380px di contenuto renderebbero la card tutta testo. Scelta MIA:
   si scende direttamente a una colonna e le card tornano larghe.
   Le righe passano ad `auto` cosi ogni card hugga il proprio contenuto invece
   di allinearsi alla piu alta (con 4 card in colonna sarebbe spazio sprecato).
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .applications__cards {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }
  .app-card {
    min-height: 440px;
    /* space-between non separa piu nulla quando il testo riempie la card:
       32px MIEI di distanza minima fra header (titolo + tag) e descrizione. */
    gap: var(--space-4);
  }

  /* Il titolo card e nowrap in Figma perche a 628px ci sta sempre.
     Su colonna stretta "Monitoring & Reporting" sfonderebbe: si concede il wrap. */
  .app-card__title { white-space: normal; }
}


/* --------------------------------------------------------------------------
   <= 767 · Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .app-card { min-height: 380px; }
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto
   I 40px di padding della card mangiano il 21% della larghezza: si scende a 24.
   Il tag va sotto il titolo (a 12px maiuscolo "FOR PLANT & OPERATIONS MANAGERS"
   e piu largo della card).
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .app-card {
    padding: 24px;
    min-height: 320px;
  }
  .app-card__header { padding-right: 0; }
  .app-card__tag {
    height: auto;
    white-space: normal;
  }
}