/* =========================================================================
   SEZIONE — Card (servizi, articoli, case study, aree)
   Un'unica base .ex-card con varianti: stessa resa in ogni elenco.
   ========================================================================= */

/* Testata degli elenchi di card: titolo a sinistra, link "vedi tutti"
   allineato a destra. Vive qui perche' accompagna sempre una griglia. */
.ex-posts__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ex-space-lg);
    margin-bottom: var(--ex-space-2xl);
}

.ex-posts__head .ex-section__head {
    margin-bottom: 0;
}

.ex-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ex-surface);
    border: 1px solid transparent;
    border-radius: var(--ex-radius-lg);
    overflow: hidden;
    transition: background var(--ex-t) var(--ex-ease),
                border-color var(--ex-t) var(--ex-ease),
                transform var(--ex-t) var(--ex-ease);
}

.ex-card:hover {
    background: rgba(26, 26, 26, 0.55);
    border-color: var(--ex-border);
    transform: translateY(-4px);
}

.ex-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ex-space-md);
    margin-bottom: var(--ex-space-xl);
}

.ex-card__icon {
    display: inline-flex;
}

.ex-card__title {
    margin-bottom: var(--ex-space-md);
}

/* Il link del titolo copre tutta la card: area di clic ampia senza
   annidare interattivi dentro interattivi. */
.ex-card__title a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.ex-card__title a:hover {
    color: var(--ex-gold);
}

.ex-card__text {
    margin-bottom: var(--ex-space-lg);
    color: var(--ex-text-muted);
    line-height: 1.7;
}

.ex-card__cta {
    margin-top: auto;
    font-size: var(--ex-fs-sm);
}

/* --- Card con padding (servizi, aree, blocchi semplici) ----------------- */

.ex-card--servizio,
.ex-card--area,
.ex-card--plain {
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.ex-card--plain .ex-card__icon {
    display: inline-flex;
    margin-bottom: var(--ex-space-lg);
}

/* --- Card area: elenco dei servizi collegati ---------------------------- */

.ex-card__links {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: var(--ex-space-xl);
    padding-top: var(--ex-space-md);
    border-top: 1px solid var(--ex-border);
}

.ex-card__links a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    position: relative;
    z-index: 1;
    font-family: var(--ex-font-label);
    font-size: var(--ex-fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ex-text-muted);
}

.ex-card__links a:hover {
    color: var(--ex-gold);
}

.ex-card--area .ex-card__icon {
    display: inline-flex;
    margin-bottom: var(--ex-space-lg);
}

/* --- Card con immagine (articoli, case study) --------------------------- */

.ex-card--post .ex-card__body,
.ex-card--case .ex-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--ex-space-lg) clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.5rem, 1rem + 1vw, 2rem);
}

.ex-card__media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--ex-surface-2);
}

.ex-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ex-ease);
}

.ex-card:hover .ex-card__media img {
    transform: scale(1.04);
}

.ex-media__img--placeholder {
    object-fit: contain;
    padding: 22%;
    opacity: 0.35;
}

.ex-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--ex-space-md);
    font-family: var(--ex-font-label);
    font-size: var(--ex-fs-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ex-text-dim);
}

.ex-card__term {
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--ex-border);
    border-radius: var(--ex-radius-pill);
    color: var(--ex-gold);
}

.ex-card__foot {
    margin-top: auto;
    padding-top: var(--ex-space-md);
    color: var(--ex-text-dim);
}

/* --- Risultati nelle card case study ------------------------------------ */

.ex-card__results {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ex-space-lg);
    margin-top: auto;
    padding-top: var(--ex-space-md);
}

.ex-card__results li {
    display: flex;
    flex-direction: column;
}

.ex-card__results strong {
    font-family: var(--ex-font-headline);
    font-size: 1.5rem;
    color: var(--ex-gold);
    line-height: 1.1;
}

.ex-card__results span {
    font-family: var(--ex-font-label);
    font-size: var(--ex-fs-2xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ex-text-dim);
}