/* ==========================================================================
   TSF Listing Archive Card Grid
   Flat-markup replacement for the old Elementor Loop Grid + "Listing Card -
   Default" loop-item template. See tsf_render_listing_card() in
   listing-archive.php.
   ========================================================================== */

@font-face {
    font-family: 'Scare Factor';
    src: url('https://www.thescarefactor.com/wp-content/uploads/2026/03/ScareFactor-Regular.woff2') format('woff2'),
         url('https://www.thescarefactor.com/wp-content/uploads/2026/03/ScareFactor-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Overrides the Elementor heading widget's own typography setting (Bebas
   Neue) for the [tsf_listing_archive_heading] shortcode's <h1>. The ID
   selector already outranks Elementor's ".elementor-element-<id> h1.tsf-
   archive-heading" class-based rule, but !important guards against load
   order if Elementor's CSS gets regenerated/re-ordered later. */
#tsf-dynamic-heading.tsf-archive-heading {
    font-family: 'Scare Factor', 'Bebas Neue', sans-serif !important;
}

.tsf-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
}

@media (max-width: 1024px) {
    .tsf-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .tsf-card-grid {
        grid-template-columns: 1fr;
    }
}

.tsf-card {
    display: flex;
    flex-direction: column;
    border: 2px solid #3F3F3F;
    border-radius: 31px;
    background-color: #0F0F0F !important;
    box-shadow: 0 13px 50px -13px #000000;
    transition: box-shadow 180ms ease-in-out;
    overflow: hidden;
}

.tsf-card:hover {
    box-shadow: 0 13px 50px -13px #500000;
}

/* === CARD BACKGROUND COLORS BY LISTING TYPE === */
.tsf-card.type-haunted-houses { background-color: #1C1A24; }
.tsf-card.type-paranormal     { background-color: #191C1F; }
.tsf-card.type-spooky-spots   { background-color: #1C1C1C; }

/* === SUB-TYPE PILL COLORS BY LISTING TYPE === */
.tsf-card.type-haunted-houses .listing-subtype-pill {
    background-color: #FF6A00;
    color: #fff;
}
.tsf-card.type-paranormal .listing-subtype-pill {
    background-color: #00B4B4;
    color: #fff;
}
.tsf-card.type-spooky-spots .listing-subtype-pill {
    background-color: #C77DFF;
    color: #111;
}

/* === HOVER: BORDER + SHADOW BY LISTING TYPE === */
.tsf-card.type-haunted-houses:hover {
    box-shadow: 0 0 0 2px #c10000 inset, 0 4px 20px rgba(255, 106, 0, 0.4);
}
.tsf-card.type-paranormal:hover {
    box-shadow: 0 0 0 2px #00B4B4 inset, 0 4px 20px rgba(0, 180, 180, 0.4);
}
.tsf-card.type-spooky-spots:hover {
    box-shadow: 0 0 0 2px #C77DFF inset, 0 4px 20px rgba(199, 125, 255, 0.4);
}

.tsf-card-logo-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding: 0 5px;
}

.tsf-card-logo {
    width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: 13px;
}

.tsf-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 15px 20px;
}

.tsf-card-title {
    font-size: 20px;
    margin: 0 0 4px;
}

.tsf-card-title a {
    color: inherit;
    text-decoration: none;
}

.tsf-card-city {
    font-style: italic;
    color: #ACACAC;
    margin: 0 0 4px;
}

.tsf-card-notes {
    font-weight: 600;
    color: #FF6600;
    margin: 0 0 8px;
}

.tsf-card-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-evenly;
    gap: 10px;
    width: 100%;
    padding: 0 0.5vw;
    margin-top: 8px;
}

.tsf-card-footer .listing-subtype-pill {
    display: inline-block;
    padding: 0.25em 0.6em;
    border: 2px solid #ff6600;
    border-radius: 31px;
    color: #cbcbcb;
    background-color: #131313;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tsf-card-footer .mini-guest-rating {
    text-align: right;
    font-size: 13px;
}

.tsf-nothing-found {
    text-align: center;
    grid-column: 1 / -1;
}

.tsf-nothing-found p {
    color: #cbcbcb;
}

/* === List view toggle (see tsf-listing-archive-shell HTML widget JS) === */
@media (min-width: 768px) {
    #tsf-listing-grid.tsf-layout-list .tsf-card-grid {
        grid-template-columns: 1fr;
    }

    #tsf-listing-grid.tsf-layout-list .tsf-card {
        background-color: transparent !important;
        border: none !important;
        border-bottom: 2px solid #333 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 8px 10px !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    #tsf-listing-grid.tsf-layout-list .tsf-card:hover {
        background-color: #111 !important;
        box-shadow: none !important;
    }

    #tsf-listing-grid.tsf-layout-list .tsf-card-logo-wrap {
        display: none !important;
    }

    #tsf-listing-grid.tsf-layout-list .tsf-card-body {
        width: 100% !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
        text-align: left;
        padding: 0 !important;
    }

    #tsf-listing-grid.tsf-layout-list .tsf-card-title {
        width: auto !important;
        margin: 0 !important;
        flex-grow: 0;
    }

    #tsf-listing-grid.tsf-layout-list .tsf-card-title h3,
    #tsf-listing-grid.tsf-layout-list .tsf-card-title {
        font-size: 16px !important;
        white-space: nowrap;
    }

    #tsf-listing-grid.tsf-layout-list .tsf-card-city {
        width: auto !important;
        font-size: 14px !important;
        color: #999 !important;
        margin: 0 !important;
    }

    #tsf-listing-grid.tsf-layout-list .tsf-card-notes {
        width: auto !important;
        flex-grow: 1;
        font-size: 12px !important;
        font-style: italic !important;
        margin: 0 !important;
        line-height: 1.2;
        text-align: left !important;
    }

    #tsf-listing-grid.tsf-layout-list .tsf-card-footer {
        width: auto !important;
        margin-left: auto !important;
        padding: 0 !important;
    }
}

@media (max-width: 767px) {
    #tsf-listing-grid.tsf-layout-list .tsf-card-body {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 8px !important;
    }
}