/*
 * Home navigation cards
 * ---------------------
 * Fixed navigation cards used on the home page for IDEM, Casa WWTS and
 * represented brands. Font families/colors still come from the Elementor Kit;
 * this component owns the local card scale, spacing, surface and image behavior.
 */

.wwts-home-cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(18px, 2.2vw, 30px);

    width: min(100%, 1024px);
    /* margin: clamp(28px, 3vw, 42px) auto 0 !important; // changed to an elementor-owned control */
}

.wwts-home-card {
    display: flex !important;
    flex-direction: column;
    gap: 0 !important;

    min-width: 0;
    height: 100%;
    padding: 0 !important;
    overflow: hidden;

    background: var(--wwts-card-surface);
    border: var(--wwts-card-border);
    border-radius: var(--wwts-card-radius);
    box-shadow: var(--wwts-card-shadow);
    transition: box-shadow 180ms ease;
}

.wwts-home-card:hover,
.wwts-home-card:focus-within {
    box-shadow: var(--wwts-card-shadow-hover);
}

/*
 * Media sits flush against the card edges. The card clips it to the same top
 * radius, while the content spacing lives exclusively in the text wrapper.
 */
.wwts-home-card__image {
    display: block;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: var(--wwts-card-radius) var(--wwts-card-radius) 0 0;
}

img.wwts-home-card__image,
.wwts-home-card__image img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: var(--wwts-card-radius) var(--wwts-card-radius) 0 0;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.wwts-home-card__body {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px !important;

    width: 100%;
    margin: 0 !important;
    padding: 18px 18px 20px !important;
}

.wwts-home-card-text {
    flex: 1 1 auto;
    padding: 15px 20px !important;
}

.wwts-home-card__title,
.wwts-home-card__title .elementor-heading-title,
.wwts-home-card__text,
.wwts-home-card__text p {
    margin: 0;
    padding: 0;
}

/*
 * Card typography is intentionally local to the component. Elementor still
 * supplies the project font families/colors, while the card fixes its own
 * compact type scale so every instance matches the approved visual direction.
 */
.wwts-home-card__title,
.wwts-home-card__title .elementor-heading-title {
    padding-bottom: 10px;
    font-size: clamp(18px, 1.45vw, 21px);
    font-weight: 400;
    line-height: 1.15;
}

.wwts-home-card__text,
.wwts-home-card__text p {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
}

@media (max-width: 1024px) {
    .wwts-home-cards {
        gap: 18px;
    }
}

@media (max-width: 767px) {
    .wwts-home-cards {
        grid-template-columns: 1fr;
        width: min(100%, 520px);
        gap: 18px;
        margin-top: 26px !important;
    }

    .wwts-home-card__title,
    .wwts-home-card__title .elementor-heading-title {
        font-size: 20px;
    }

    .wwts-home-card__text,
    .wwts-home-card__text p {
        font-size: 15px;
    }
}