/**
 * Tacticalia Homepage — Mobile.
 *
 * Adattamenti responsive specifici della homepage Tacticalia.
 *
 * @package TFM_Teams
 */

@media (max-width: 767px) {

    .tfm-area-card {
        padding: 18px !important;
        min-height: 0 !important;
        height: auto !important;
        gap: 14px !important;
    }

    .tfm-area-card-top {
        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 6px;
        align-items: start;
    }

    .tfm-area-icon-wrap {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
    }

    .tfm-area-card-top> :not(.tfm-area-icon-wrap) {
        min-width: 0;
    }

    .tfm-area-card h2,
    .tfm-area-card h3 {
        margin: 0 0 4px !important;
        font-size: 21px !important;
        line-height: 1.15 !important;
    }

    .tfm-area-card p {
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
    }

    .tfm-area-button {
        width: 100% !important;
        min-height: 42px !important;
        margin-top: 8px !important;
        padding: 0 14px !important;
        font-size: 14px !important;
    }

    /**
     * Immagini annunci mobile.
     *
     * Il box immagine mantiene un rapporto quadrato costante
     * indipendentemente dalle dimensioni del file sorgente.
     * object-fit: cover evita deformazioni e mantiene
     * uniforme la griglia degli annunci.
     */

    .tacticalia-listing-card__image-wrapper {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
    }

    .tacticalia-listing-card__image {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

}


/**
 * Homepage Tacticalia — CTA footer mobile.
 *
 * Compatta la sezione finale e migliora
 * leggibilità e gerarchia visiva su smartphone.
 */
@media (max-width: 767px) {

    .tfm-cta-outer {
        padding: 28px 22px !important;
    }

    .tfm-cta-outer h2,
    .tfm-cta-outer h3 {
        margin: 0 0 14px !important;
        color: #ffffff !important;
        font-size: 24px !important;
        line-height: 1.15 !important;
    }

    .tfm-cta-outer p {
        margin: 0 0 20px !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 15px !important;
        line-height: 1.45 !important;
    }

    .tfm-cta-outer img {
        display: block;
        width: 58px !important;
        height: auto !important;
        margin: 0 0 18px !important;
    }

    .tfm-cta-outer .elementor-button {
        min-height: 44px;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
}