/**
 * Tacticalia Business Discovery
 *
 * Sezione Attività in evidenza.
 */


/*
 * ============================================================
 * SECTION
 * ============================================================
 */

.tbdc-featured {
    padding:
        42px clamp(24px, 3vw, 42px) 48px;

    background:
        var(--tbdc-background);

}


/*
 * ============================================================
 * HEADER
 * ============================================================
 */

.tbdc-featured__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 28px;

    margin-bottom: 22px;
}

.tbdc-featured__heading {
    max-width: 650px;
}

.tbdc-featured__eyebrow {
    display: block;

    margin-bottom: 5px;

    color:
        var(--tbdc-primary-dark);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .14em;
    text-transform: uppercase;
}

.tbdc-featured__title {
    margin: 0;

    color:
        var(--tbdc-text);

    font-size:
        clamp(24px, 2.2vw, 32px);

    font-weight: 700;
    line-height: 1.1;

    letter-spacing: -.025em;
}

.tbdc-featured__description {
    margin: 8px 0 0;

    color:
        var(--tbdc-text-secondary);

    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}


/*
 * ============================================================
 * VIEW ALL
 * ============================================================
 */

.tbdc-featured__all {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    flex: 0 0 auto;

    padding-bottom: 2px;

    color:
        var(--tbdc-primary) !important;

    font-size: 12px;
    font-weight: 700;

    text-decoration: none !important;
}

.tbdc-featured__all:hover,
.tbdc-featured__all:focus {
    color:
        var(--tbdc-primary-hover) !important;
}

.tbdc-featured__all .dashicons {
    width: 15px;
    height: 15px;

    font-size: 15px;
    line-height: 15px;

    transition:
        transform .18s ease;
}

.tbdc-featured__all:hover .dashicons {
    transform:
        translateX(3px);
}


/*
 * ============================================================
 * GRID
 * ============================================================
 */

.tbdc-featured__grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}


/*
 * ============================================================
 * CARD
 * ============================================================
 */

.tbdc-featured-card {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid var(--tbdc-border);

    border-radius: 10px;

    background:
        var(--tbdc-surface);

    box-shadow:
        0 2px 7px rgba(16, 24, 32, .04);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.tbdc-featured-card:hover {
    border-color:
        var(--tbdc-border-strong);

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 26px rgba(16, 24, 32, .09);
}


/*
 * ============================================================
 * IMAGE
 * ============================================================
 */

.tbdc-featured-card__image-link {
    display: block;

    color: inherit !important;
    text-decoration: none !important;
}

.tbdc-featured-card__image {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    background:
        var(--tbdc-primary-soft) center center / cover no-repeat;
}


/*
 * Leggerissimo velo per uniformare
 * fotografie differenti.
 */

.tbdc-featured-card__image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(16, 24, 32, .04) 45%,
            rgba(16, 24, 32, .18) 100%);

    pointer-events: none;
}


/*
 * ============================================================
 * BADGES
 * ============================================================
 */

.tbdc-featured-card__badges {
    position: absolute;

    z-index: 2;

    left: 12px;
    top: 12px;

    display: flex;
    flex-wrap: wrap;

    gap: 5px;
}

.tbdc-featured-badge {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    min-height: 24px;

    padding:
        0 8px;

    border-radius: 999px;

    font-size: 9.5px;
    font-weight: 700;

    line-height: 1;

    box-shadow:
        0 3px 10px rgba(16, 24, 32, .12);
}

.tbdc-featured-badge .dashicons {
    width: 12px;
    height: 12px;

    font-size: 12px;
    line-height: 12px;
}


/*
 * Verificato.
 */

.tbdc-featured-badge--success {
    background:
        var(--tbdc-success-soft);

    color:
        var(--tbdc-success);
}


/*
 * Technician.
 */

.tbdc-featured-badge--technician {
    background:
        var(--tbdc-warning-soft);

    color:
        var(--tbdc-warning);
}


/*
 * Fallback.
 */

.tbdc-featured-badge--default {
    background:
        var(--tbdc-primary-soft);

    color:
        var(--tbdc-primary-dark);
}


/*
 * ============================================================
 * HEART
 * ============================================================
 */

.tbdc-featured-card__heart {
    position: absolute;

    z-index: 2;

    right: 12px;
    top: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .92);

    color:
        var(--tbdc-primary-dark);

    box-shadow:
        0 3px 10px rgba(16, 24, 32, .15);
}

.tbdc-featured-card__heart .dashicons {
    width: 16px;
    height: 16px;

    font-size: 16px;
    line-height: 16px;
}


/*
 * ============================================================
 * BODY
 * ============================================================
 */

.tbdc-featured-card__body {
    display: flex;
    flex-direction: column;

    min-height: 245px;
}

.tbdc-featured-card__main {
    flex: 1;

    padding:
        17px 18px 18px;
}


/*
 * ============================================================
 * TYPE
 * ============================================================
 */

.tbdc-featured-card__type {
    display: block;

    margin-bottom: 5px;

    color:
        var(--tbdc-primary);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .10em;
    text-transform: uppercase;
}


/*
 * ============================================================
 * TITLE
 * ============================================================
 */

.tbdc-featured-card__title {
    margin: 0;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: -.015em;
}

.tbdc-featured-card__title a {
    color:
        var(--tbdc-text) !important;

    text-decoration: none !important;
}

.tbdc-featured-card__title a:hover,
.tbdc-featured-card__title a:focus {
    color:
        var(--tbdc-primary-hover) !important;
}


/*
 * ============================================================
 * LOCATION
 * ============================================================
 */

.tbdc-featured-card__location {
    display: flex;
    align-items: center;

    gap: 4px;

    margin-top: 6px;

    color:
        var(--tbdc-text-secondary);

    font-size: 11px;
    font-weight: 600;
}

.tbdc-featured-card__location .dashicons {
    width: 13px;
    height: 13px;

    color:
        var(--tbdc-primary);

    font-size: 13px;
    line-height: 13px;
}


/*
 * ============================================================
 * DESCRIPTION
 * ============================================================
 */

.tbdc-featured-card__description {
    margin:
        13px 0 0;

    color:
        var(--tbdc-text-secondary);

    font-size: 12px;
    line-height: 1.48;
}


/*
 * ============================================================
 * SERVICES
 * ============================================================
 */

.tbdc-featured-card__services {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 15px;
}

.tbdc-featured-card__service {
    display: inline-flex;
    align-items: center;

    min-height: 25px;

    padding:
        0 8px;

    border:
        1px solid var(--tbdc-border);

    border-radius: 999px;

    background:
        var(--tbdc-primary-soft);

    color:
        var(--tbdc-primary-dark);

    font-size: 9.5px;
    font-weight: 700;
}


/*
 * ============================================================
 * CARD CTA
 * ============================================================
 */

.tbdc-featured-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    width:
        calc(100% - 28px);

    min-height: 42px;

    margin:
        0 14px 14px;

    padding:
        0 18px;

    border:
        1px solid var(--tbdc-border);

    border-radius:
        7px;

    background:
        var(--tbdc-primary-soft);

    color:
        var(--tbdc-primary-dark) !important;

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1;

    text-align:
        center;

    text-decoration:
        none !important;

    box-shadow:
        0 2px 6px rgba(16, 24, 32, .04);

    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.tbdc-featured-card__cta:hover,
.tbdc-featured-card__cta:focus {
    border-color:
        var(--tbdc-primary);

    background:
        var(--tbdc-primary);

    color:
        #FFFFFF !important;

    transform:
        translateY(-1px);
}

.tbdc-featured-card__cta .dashicons {
    width: 15px;
    height: 15px;

    font-size: 15px;
    line-height: 15px;

    transition:
        transform .18s ease;
}

.tbdc-featured-card__cta .dashicons {
    flex: 0 0 auto;
}

.tbdc-featured-card__cta:hover .dashicons {
    transform:
        translateX(3px);
}


/*
 * ============================================================
 * ACCESSIBILITY
 * ============================================================
 */

.tbdc-featured-card a:focus-visible,
.tbdc-featured__all:focus-visible {
    outline:
        2px solid var(--tbdc-accent);

    outline-offset: 2px;
}


/*
 * ============================================================
 * TABLET
 * ============================================================
 */

@media (max-width: 1000px) {

    .tbdc-featured__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/*
 * ============================================================
 * MOBILE
 * ============================================================
 */

@media (max-width: 768px) {

    .tbdc-featured {
        padding:
            34px 18px 38px;
    }

    .tbdc-featured__header {
        align-items: flex-start;
        flex-direction: column;

        gap: 12px;
    }

    .tbdc-featured__grid {
        grid-template-columns: 1fr;
    }

    .tbdc-featured-card__body {
        min-height: 0;
    }
}