/**
 * Tacticalia Business Discovery
 *
 * Hero homepage Retailers & Technicians.
 *
 * Responsabilità:
 *
 * - background fotografico;
 * - leggibilità dei contenuti;
 * - layout desktop e responsive;
 * - ricerca principale;
 * - dropdown custom dei filtri;
 * - stati hover/focus coerenti con la palette Tacticalia;
 * - predisposizione colonna destra per mappa/card Business.
 */


/*
 * ============================================================
 * HERO
 * ============================================================
 */

.tbdc-hero {
    position: relative;

    width: 100%;

    padding:
        48px clamp(30px, 3.5vw, 56px) 52px;

    /*
	 * I dropdown custom devono poter sovrapporsi
	 * agli altri elementi senza essere tagliati.
	 */
    overflow: visible;

    background:
        linear-gradient(90deg,
            rgba(16, 24, 32, .94) 0%,
            rgba(16, 24, 32, .90) 25%,
            rgba(16, 24, 32, .78) 46%,
            rgba(16, 24, 32, .54) 66%,
            rgba(16, 24, 32, .22) 100%),
        url('../images/hero-bg-business-discovery.jpg') center center / cover no-repeat;

    color: #FFFFFF;
}


/*
 * ============================================================
 * HERO INNER
 * ============================================================
 */

.tbdc-hero__inner {
    position: relative;
    z-index: 1;

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr) minmax(320px, .92fr);

    align-items: center;

    gap: clamp(36px, 4.5vw, 68px);

    margin: 0;
}


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

.tbdc-hero__content {
    position: relative;
    z-index: 5;

    min-width: 0;
}

.tbdc-hero__eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--tbdc-accent);

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

    letter-spacing: .12em;
    text-transform: uppercase;

    text-shadow:
        0 1px 8px rgba(0, 0, 0, .36);
}

.tbdc-hero__title {
    max-width: 680px;

    margin: 0;

    color: #FFFFFF;

    font-size: clamp(32px, 3vw, 46px);
    font-weight: 700;
    line-height: 1.08;

    letter-spacing: -.035em;

    text-shadow:
        0 3px 18px rgba(0, 0, 0, .38);
}

.tbdc-hero__description {
    max-width: 680px;

    margin: 16px 0 0;

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

    font-size: 17px;
    font-weight: 500;
    line-height: 1.55;

    text-shadow:
        0 1px 10px rgba(0, 0, 0, .28);
}


/*
 * ============================================================
 * SEARCH
 * ============================================================
 */

.tbdc-search {
    position: relative;
    z-index: 20;

    max-width: 780px;

    margin-top: 28px;
}


/*
 * ============================================================
 * KEYWORD SEARCH
 * ============================================================
 */

.tbdc-search__keyword {
    display: grid;

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

    align-items: center;

    min-height: 56px;

    padding-left: 17px;

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

    border-radius: 10px;

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

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .25);
}

.tbdc-search__keyword>.dashicons {
    width: 20px;
    height: 20px;

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

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

.tbdc-search__keyword input {
    width: 100%;
    min-height: 54px;

    padding: 0 14px;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;
    color: var(--tbdc-text) !important;

    box-shadow: none !important;

    font: inherit;
    font-size: 14px;
}

.tbdc-search__keyword input:hover,
.tbdc-search__keyword input:focus,
.tbdc-search__keyword input:focus-visible {
    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
}

.tbdc-search__keyword input::placeholder {
    color: var(--tbdc-text-muted);

    opacity: 1;
}


/*
 * ============================================================
 * SEARCH SUBMIT
 * ============================================================
 */

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

    gap: 10px;

    align-self: stretch;

    min-width: 142px;

    margin: 4px;

    padding: 0 20px;

    border:
        1px solid var(--tbdc-primary) !important;

    border-radius: 8px;

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

    color: #FFFFFF !important;

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

    line-height: 1;

    cursor: pointer;

    box-shadow: none !important;

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

.tbdc-search__submit:hover {
    border-color:
        var(--tbdc-primary-hover) !important;

    background:
        var(--tbdc-primary-hover) !important;

    color: #FFFFFF !important;

    transform: translateY(-1px);
}

.tbdc-search__submit:focus,
.tbdc-search__submit:focus-visible {
    border-color:
        var(--tbdc-accent) !important;

    background:
        var(--tbdc-primary-hover) !important;

    color: #FFFFFF !important;

    outline:
        2px solid var(--tbdc-accent) !important;

    outline-offset: 2px;

    box-shadow: none !important;
}

.tbdc-search__submit .dashicons {
    width: 18px;
    height: 18px;

    color: #FFFFFF;

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


/*
 * ============================================================
 * FILTER ROW
 * ============================================================
 */

.tbdc-search__filters {
    position: relative;
    z-index: 30;

    display: grid;

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

    gap: 8px;

    margin-top: 10px;
}

.tbdc-search__filter {
    position: relative;

    min-width: 0;
}


/*
 * ============================================================
 * DROPDOWN
 * ============================================================
 */

.tbdc-dropdown {
    position: relative;

    width: 100%;
}


/*
 * Quando un dropdown è aperto deve sovrapporsi
 * agli altri filtri.
 */

.tbdc-dropdown.is-open {
    z-index: 100;
}


/*
 * ============================================================
 * DROPDOWN TRIGGER
 * ============================================================
 */

.tbdc-dropdown__trigger {
    width: 100%;
    min-height: 42px;

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

    gap: 8px;

    padding:
        0 11px 0 13px;

    border:
        1px solid rgba(255, 255, 255, .17) !important;

    border-radius: 7px;

    background:
        rgba(39, 51, 33, .92) !important;

    color: #FFFFFF !important;

    font: inherit;
    font-size: 12px !important;
    font-weight: 700;

    line-height: 1.2;

    text-align: left;

    cursor: pointer;

    box-shadow: none !important;

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

.tbdc-dropdown__trigger:hover {
    border-color:
        var(--tbdc-accent) !important;

    background:
        var(--tbdc-primary-hover) !important;

    color: #FFFFFF !important;
}

.tbdc-dropdown__trigger:focus,
.tbdc-dropdown__trigger:focus-visible {
    border-color:
        var(--tbdc-accent) !important;

    background:
        var(--tbdc-primary-deep) !important;

    color: #FFFFFF !important;

    outline: none !important;

    box-shadow:
        0 0 0 2px rgba(140, 148, 112, .24) !important;
}


/*
 * Trigger quando il menu è aperto.
 */

.tbdc-dropdown.is-open .tbdc-dropdown__trigger {
    border-color:
        var(--tbdc-accent) !important;

    background:
        var(--tbdc-primary-deep) !important;

    color: #FFFFFF !important;
}


/*
 * ============================================================
 * DROPDOWN LABEL
 * ============================================================
 */

.tbdc-dropdown__label {
    display: block;

    min-width: 0;

    overflow: hidden;

    color: inherit;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/*
 * ============================================================
 * DROPDOWN CHEVRON
 * ============================================================
 */

.tbdc-dropdown__trigger .dashicons {
    flex: 0 0 auto;

    width: 16px;
    height: 16px;

    color:
        rgba(255, 255, 255, .82);

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

    transition:
        transform .18s ease;
}

.tbdc-dropdown.is-open .tbdc-dropdown__trigger .dashicons {
    transform: rotate(180deg);
}


/*
 * ============================================================
 * DROPDOWN MENU
 * ============================================================
 *
 * Il menu è SEMPRE nascosto di default.
 * Viene mostrato esclusivamente quando JS
 * applica .is-open al relativo dropdown.
 */

.tbdc-dropdown__menu {
    position: absolute;

    top: calc(100% + 6px);
    left: 0;

    z-index: 200;

    display: none;

    width: 100%;
    min-width: 180px;

    max-height: 280px;

    padding: 5px;

    overflow-x: hidden;
    overflow-y: auto;

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

    border-radius: 8px;

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

    box-shadow:
        0 14px 32px rgba(0, 0, 0, .30);
}

.tbdc-dropdown.is-open .tbdc-dropdown__menu {
    display: block;
}


/*
 * ============================================================
 * DROPDOWN OPTION
 * ============================================================
 */

.tbdc-dropdown__option {
    display: block;

    width: 100%;
    min-height: 38px;

    margin: 0;

    padding:
        9px 10px;

    border: 0 !important;
    border-radius: 5px;

    background:
        transparent !important;

    color: #FFFFFF !important;

    font: inherit;
    font-size: 12px !important;
    font-weight: 600;

    line-height: 1.25;

    text-align: left;

    cursor: pointer;

    box-shadow: none !important;

    transition:
        background-color .14s ease,
        color .14s ease;
}

.tbdc-dropdown__option:hover,
.tbdc-dropdown__option:focus {
    border: 0 !important;

    background:
        var(--tbdc-primary-hover) !important;

    color: #FFFFFF !important;

    outline: none !important;

    box-shadow: none !important;
}

.tbdc-dropdown__option:focus-visible {
    background:
        var(--tbdc-primary-hover) !important;

    color: #FFFFFF !important;

    outline:
        1px solid var(--tbdc-accent) !important;

    outline-offset: -1px;
}


/*
 * Opzione selezionata.
 */

.tbdc-dropdown__option.is-selected {
    background:
        var(--tbdc-primary) !important;

    color: #FFFFFF !important;

    font-weight: 700;
}

.tbdc-dropdown__option.is-selected:hover,
.tbdc-dropdown__option.is-selected:focus {
    background:
        var(--tbdc-primary-hover) !important;

    color: #FFFFFF !important;
}


/*
 * Opzioni filtrate via JavaScript.
 *
 * La proprietà hidden viene usata in particolare
 * per Regione → Provincia.
 */

.tbdc-dropdown__option[hidden] {
    display: none !important;
}

.tbdc-dropdown__option:disabled {
    display: none !important;

    pointer-events: none;
}


/*
 * ============================================================
 * DROPDOWN SCROLLBAR
 * ============================================================
 */

.tbdc-dropdown__menu {
    scrollbar-width: thin;

    scrollbar-color:
        var(--tbdc-accent) var(--tbdc-primary-deep);
}

.tbdc-dropdown__menu::-webkit-scrollbar {
    width: 7px;
}

.tbdc-dropdown__menu::-webkit-scrollbar-track {
    background:
        var(--tbdc-primary-deep);
}

.tbdc-dropdown__menu::-webkit-scrollbar-thumb {
    border-radius: 10px;

    background:
        var(--tbdc-accent);
}

/*
 * ============================================================
 * HERO VISUAL / SHOWCASE
 * ============================================================
 *
 * V1 puramente dimostrativa.
 *
 * Mappa, marker, attività, rating e distanze sono
 * contenuti grafici statici e non rappresentano
 * ancora dati reali del Business Directory.
 */

.tbdc-hero__visual {
    position: relative;
    z-index: 1;

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

    min-width: 0;
}

.tbdc-hero-showcase {
    position: relative;

    width: min(520px, 100%);
    min-height: 390px;
}


/*
 * ============================================================
 * MAP PANEL
 * ============================================================
 */

.tbdc-hero-showcase__map {
    position: absolute;

    left: 0;
    top: 32px;

    width: 58%;
    height: 330px;

    border:
        1px solid rgba(255, 255, 255, .10);

    border-radius: 14px;

    background:
        linear-gradient(145deg,
            rgba(39, 51, 33, .45),
            rgba(16, 24, 32, .42));

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

    backdrop-filter: blur(3px);

    overflow: hidden;
}

.tbdc-hero-showcase__map::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 30% 25%,
            rgba(140, 148, 112, .10),
            transparent 36%);

    pointer-events: none;
}


/*
 * ============================================================
 * ITALY
 * ============================================================
 */

.tbdc-hero-showcase__italy {
    position: absolute;

    inset: 14px 16px 14px 16px;

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

.tbdc-hero-showcase__italy img {
    display: block;

    width: auto;
    height: 100%;

    max-width: none;
    max-height: none;

    object-fit: contain;
    object-position: center center;

    opacity: .66;

    filter:
        grayscale(1) brightness(.88) sepia(.10);
}

/*
 * ============================================================
 * MAP MARKERS
 * ============================================================
 */

.tbdc-hero-marker {
    position: absolute;

    width: 24px;
    height: 24px;

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

    border:
        2px solid rgba(255, 255, 255, .72);

    border-radius:
        50% 50% 50% 0;

    background:
        var(--tbdc-primary);

    box-shadow:
        0 5px 15px rgba(0, 0, 0, .35);

    transform:
        rotate(-45deg);
}

.tbdc-hero-marker span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #FFFFFF;
}

.tbdc-hero-marker--1 {
    left: 40%;
    top: 16%;
}

.tbdc-hero-marker--2 {
    left: 55%;
    top: 31%;
}

.tbdc-hero-marker--3 {
    left: 41%;
    top: 44%;
}

.tbdc-hero-marker--4 {
    left: 54%;
    top: 58%;
}

.tbdc-hero-marker--5 {
    left: 61%;
    top: 73%;
}

.tbdc-hero-marker--6 {
    left: 23%;
    top: 72%;
}


/*
 * Marker centrale evidenziato.
 */

.tbdc-hero-marker--3 {
    background:
        var(--tbdc-primary-hover);

    box-shadow:
        0 0 0 6px rgba(140, 148, 112, .15),
        0 5px 15px rgba(0, 0, 0, .35);
}


/*
 * ============================================================
 * NOTE
 * ============================================================
 */

.tbdc-hero-showcase__note {
    position: absolute;

    right: 0;
    top: -2px;

    width: 180px;

    color:
        rgba(255, 255, 255, .66);

    font-size: 10px;
    font-weight: 600;
    line-height: 1.15;

    letter-spacing: .08em;
    text-align: right;
    text-transform: uppercase;
}

.tbdc-hero-showcase__note span,
.tbdc-hero-showcase__note strong {
    display: block;
}

.tbdc-hero-showcase__note strong {
    color:
        rgba(255, 255, 255, .92);

    font-weight: 700;
}

.tbdc-hero-showcase__note .dashicons {
    margin-top: 3px;

    color:
        var(--tbdc-accent);

    transform:
        rotate(42deg);
}


/*
 * ============================================================
 * BUSINESS CARDS
 * ============================================================
 */

.tbdc-hero-showcase__cards {
    position: absolute;

    z-index: 10;

    right: 0;
    top: 54px;

    width: 64%;
}

.tbdc-hero-business-card {
    display: grid;

    grid-template-columns:
        86px minmax(0, 1fr);

    min-height: 78px;

    margin-bottom: 9px;

    overflow: hidden;

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

    border-radius: 9px;

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

    color:
        var(--tbdc-text);

    box-shadow:
        0 9px 22px rgba(0, 0, 0, .26);
}


/*
 * ============================================================
 * CARD IMAGE
 * ============================================================
 *
 * Nella V1 utilizziamo immagini dimostrative dedicate
 * per le tre attività presenti nell'Hero.
 *
 * In futuro queste immagini verranno sostituite
 * dai contenuti reali delle attività.
 */

.tbdc-hero-business-card__image {
    min-height: 78px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/*
 * Tactical Store Verona
 */

.tbdc-hero-business-card__image--store {
    background-image:
        url('../images/cards/tactical-store-verona.jpg');
}


/*
 * Airsoft Lab Milano
 */

.tbdc-hero-business-card__image--lab {
    background-image:
        url('../images/cards/airsoft-lab-milano.jpg');
}


/*
 * Delta Tech Softair
 */

.tbdc-hero-business-card__image--tech {
    background-image:
        url('../images/cards/delta-tech-softair.jpg');
}

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

.tbdc-hero-business-card__content {
    min-width: 0;

    padding:
        10px 12px 8px;
}

.tbdc-hero-business-card h3 {
    margin: 0;

    overflow: hidden;

    color:
        var(--tbdc-text);

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

    text-overflow: ellipsis;
    white-space: nowrap;
}

.tbdc-hero-business-card p {
    margin: 4px 0 0;

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

    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.2;
}


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

.tbdc-hero-business-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 7px;

    font-size: 10px;
}

.tbdc-hero-business-card__rating {
    display: inline-flex;
    align-items: center;

    gap: 3px;

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

    font-weight: 700;
}

.tbdc-hero-business-card__rating>span {
    color:
        var(--tbdc-warning);

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

.tbdc-hero-business-card__rating small {
    color:
        var(--tbdc-text-muted);

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

.tbdc-hero-business-card__distance {
    color:
        var(--tbdc-text-secondary);

    font-weight: 700;
    white-space: nowrap;
}


/*
 * ============================================================
 * MAP CTA
 * ============================================================
 */

.tbdc-hero-showcase__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    float: right;

    margin-top: 5px;

    min-height: 42px;

    padding:
        0 17px;

    border:
        1px solid var(--tbdc-primary) !important;

    border-radius: 7px;

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

    color: #FFFFFF !important;

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

    text-decoration: none !important;

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

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

.tbdc-hero-showcase__cta:hover,
.tbdc-hero-showcase__cta:focus {
    border-color:
        var(--tbdc-primary-hover) !important;

    background:
        var(--tbdc-primary-hover) !important;

    color: #FFFFFF !important;

    text-decoration: none !important;

    transform:
        translateY(-1px);
}

.tbdc-hero-showcase__cta:focus-visible {
    outline:
        2px solid var(--tbdc-accent);

    outline-offset:
        2px;
}

.tbdc-hero-showcase__cta .dashicons {
    width: 15px;
    height: 15px;

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


/*
 * ============================================================
 * SHOWCASE RESPONSIVE
 * ============================================================
 */

@media (max-width: 1100px) {

    .tbdc-hero-showcase {
        transform:
            scale(.92);

        transform-origin:
            center right;
    }
}


/*
 * Da tablet in giù continuiamo a nascondere
 * il visual, privilegiando ricerca e filtri.
 */

@media (max-width: 900px) {

    .tbdc-hero__visual {
        display: none;
    }
}

/*
 * ============================================================
 * TABLET / SMALL DESKTOP
 * ============================================================
 */

@media (max-width: 1100px) {

    .tbdc-hero__inner {
        grid-template-columns:
            minmax(0, 1.15fr) minmax(280px, .85fr);

        gap: 32px;
    }

    .tbdc-hero__title {
        font-size:
            clamp(30px, 3.5vw, 42px);
    }

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


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

@media (max-width: 900px) {

    .tbdc-hero {
        padding:
            44px 26px 48px;
    }

    .tbdc-hero__inner {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .tbdc-hero__visual {
        display: none;
    }

    .tbdc-search {
        max-width: none;
    }
}


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

@media (max-width: 768px) {

    .tbdc-hero {
        padding:
            38px 18px 42px;

        background-position:
            62% center;
    }

    .tbdc-hero__title {
        max-width: none;

        font-size:
            clamp(30px, 9vw, 40px);

        line-height: 1.08;
    }

    .tbdc-hero__description {
        max-width: none;

        font-size: 16px;
    }

    .tbdc-search {
        margin-top: 24px;
    }

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


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

@media (max-width: 520px) {

    .tbdc-hero {
        padding:
            34px 14px 38px;
    }

    .tbdc-search__keyword {
        grid-template-columns:
            auto minmax(0, 1fr);
    }

    .tbdc-search__submit {
        grid-column: 1 / -1;

        min-height: 44px;

        margin:
            0 4px 4px;
    }

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

    .tbdc-dropdown__menu {
        max-height: 240px;
    }
}


/*
 * ============================================================
 * EFFETTO SFALSATURA CARDS NEGOZI MOCKUP
 * ============================================================
 */


.tbdc-hero-showcase__cards {
    position: absolute;
    z-index: 10;
    right: 0;
    top: 54px;

    width: 64%;
}

.tbdc-hero-business-card {
    position: relative;

    transform-origin: center center;

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

/* Prima card */
.tbdc-hero-business-card:nth-of-type(1) {
    transform:
        translateX(0) rotate(-0.2deg);
}

/* Seconda card */
.tbdc-hero-business-card:nth-of-type(2) {
    transform:
        translateX(10px) rotate(0.25deg);
}

/* Terza card */
.tbdc-hero-business-card:nth-of-type(3) {
    transform:
        translateX(4px) rotate(-0.15deg);
}