/* =====================================================
   IMPACTO TRADE SHOW DIRECTORY
   ===================================================== */


/* =====================================================
   FILTER BAR
   ===================================================== */

.impacto-filter-wrap {

    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    margin: 0 0 35px;

    flex-wrap: wrap;

}


/* Individual filter */

.impacto-filter {

    position: relative;

    height: 48px;

    min-width: 155px;

    display: flex;

    align-items: center;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e5b6b6;

    border-radius: 10px;

    padding: 0 14px;

    transition: .25s ease;

}


/* Search is slightly wider */

.impacto-search-filter {

    flex: 1 1 260px;

    min-width: 250px;

}


/* Filter icon */

.impacto-filter-icon {

    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-right: 9px;

    font-size: 16px;

    line-height: 1;

}


/* Inputs */

.impacto-filter input,
.impacto-filter select {

    width: 100%;

    height: 100%;

    min-width: 0;

    padding: 0;

    margin: 0;

    border: 0 !important;

    outline: 0 !important;

    box-shadow: none !important;

    background: transparent !important;

    font-family: inherit;

    font-size: 14px;

    color: #333;

}


/* Search placeholder */

.impacto-filter input::placeholder {

    color: #777;

    opacity: 1;

}


/* Select */

.impacto-filter select {

    cursor: pointer;

    appearance: auto;

}


/* Focus */

.impacto-filter:focus-within {

    border-color: #dc2929;

    box-shadow: 0 0 0 2px rgba(220, 41, 41, .08);

}


/* =====================================================
   APPLY BUTTON
   ===================================================== */

.impacto-filter-wrap button.impacto-apply-btn,
.impacto-filter-wrap button.impacto-clear-btn {

    height: 48px;

    flex: 0 0 auto;

    padding: 0 25px;

    border: 1px solid #dc2929;

    border-radius: 25px;

    background: #dc2929;

    color: #ffffff;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    line-height: 1;

    cursor: pointer;

    transition: .25s ease;

}


.impacto-filter-wrap button.impacto-apply-btn:hover,
.impacto-filter-wrap button.impacto-clear-btn:hover {

    background: #bd2020;

    border-color: #bd2020;

    color: #ffffff;

}


/* =====================================================
   CLEAR BUTTON
   ===================================================== 

.impacto-filter-wrap button.impacto-clear-btn {

     height: 48px;

    flex: 0 0 auto;

    padding: 0 25px;

    border: 1px solid #dc2929;

    border-radius: 25px;

    background: #dc2929;

    color: #ffffff;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    line-height: 1;

    cursor: pointer;

    transition: .25s ease;

}


.impacto-filter-wrap button.impacto-clear-btn:hover {

    background: #f5f5f5;

    border-color: #aaa;

    color: #222;

}
*/

/* =====================================================
   NO RESULTS
   ===================================================== */

.impacto-no-results {

    width: 100%;

    box-sizing: border-box;

    text-align: center;

    padding: 55px 20px;

    margin: 0 0 30px;

    background: #fafafa;

    border: 1px solid #eeeeee;

    border-radius: 14px;

}


.impacto-no-results-icon {

    font-size: 32px;

    margin-bottom: 10px;

}


.impacto-no-results h3 {

    margin: 0 0 8px;

    color: #222;

    font-size: 22px;

}


.impacto-no-results p {

    margin: 0;

    color: #777;

    font-size: 14px;

}


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

.impacto-trade-show-grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 22px;

}


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

.impacto-show-card {

    background: #fff;

    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);

    transition: .35s;

    border: 1px solid #eee;

    display: flex;

    flex-direction: column;

}


.impacto-show-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 45px rgba(0, 0, 0, .18);

}


/* =====================================================
   LOGO
   ===================================================== */

.impacto-logo {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 25px;

    background: #213E4C;

}


.impacto-logo img {

    width: 160px;

    height: auto;

    border-radius: 50%;

    object-fit: contain;

    background: #fff;

    border: 2px solid #efefef;

    padding: 12px;

    box-sizing: border-box;

}


/* =====================================================
   DATE
   ===================================================== */

.impacto-date {

    background: #2d608c;

    color: #fff;

    text-align: center;

    padding: 12px;

    font-size: 16px;

    font-weight: 600;

    letter-spacing: .3px;

}


/* =====================================================
   CONTENT
   ===================================================== */

.impacto-content {

    padding: 22px;

    flex: 1;

    display: flex;

    flex-direction: column;

}


.impacto-content h3 {

    margin: 0;

    font-size: 22px;

    line-height: 1.35;

    font-weight: 700;

}


.impacto-content h3 a {

    color: #111;

    text-decoration: none;

}


.impacto-content h3 a:hover {

    color: #233d4c;

}


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

.impacto-location {

    margin-top: 15px;

    color: #777;

    font-size: 15px;

}


.impacto-location span {

    margin-right: 3px;

}


/* =====================================================
   STATUS
   ===================================================== */

.impacto-status {

    margin-top: 18px;

    display: inline-block;

    padding: 6px 12px;

    border-radius: 30px;

    background: #e8f7ec;

    color: #1b7b3b;

    font-size: 13px;

    font-weight: 600;

    width: fit-content;

}


/* =====================================================
   BUTTON
   ===================================================== */

.impacto-btn {

    margin-top: auto;

    display: block;

    width: 100%;

    box-sizing: border-box;

    text-align: center;

    background: #233d4c;

    color: #fff;

    text-decoration: none;

    padding: 14px;

    border-radius: 8px;

    font-weight: 600;

    transition: .3s;

    margin-top: 25px;

}


.impacto-btn:hover {

    background: #162d38;

    color: #fff;

}


/* =====================================================
   UPCOMING SHOWS — HOMEPAGE WIDGET (1 row x 4 cols)
   ===================================================== */

.impacto-upcoming-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 22px;

}


@media (max-width: 992px) {

    .impacto-upcoming-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}


@media (max-width: 480px) {

    .impacto-upcoming-grid {

        grid-template-columns: 1fr;

    }

}


/* =====================================================
   SMALL LAPTOP
   ===================================================== */

@media (max-width: 1200px) {

    .impacto-trade-show-grid {

        grid-template-columns: repeat(4, 1fr);

    }

}


/* =====================================================
   TABLET / SMALL LAPTOP
   ===================================================== */

@media (max-width: 992px) {

    .impacto-trade-show-grid {

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

    }


    .impacto-filter {

        min-width: 145px;

    }

}


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

@media (max-width: 768px) {

    .impacto-filter-wrap {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;

    }


    .impacto-search-filter {

        grid-column: 1 / -1;

        min-width: 0;

    }


    .impacto-filter {

        width: 100%;

        min-width: 0;

    }


    .impacto-apply-btn,
    .impacto-clear-btn {

        width: 100%;

    }


    .impacto-trade-show-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}


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

@media (max-width: 480px) {

    .impacto-filter-wrap {

        display: grid;

        grid-template-columns: 1fr;

    }


    .impacto-search-filter {

        grid-column: auto;

    }


    .impacto-filter,
    .impacto-apply-btn,
    .impacto-clear-btn {

        width: 100%;

    }


    .impacto-trade-show-grid {

        grid-template-columns: 1fr;

    }


    .impacto-logo img {

        width: 100px;

        height: 100px;

    }


    .impacto-content h3 {

        font-size: 18px;

    }

}