/* =========================================================
   XPLORE MOTORCYCLES — TOURS
   Page-specific styles. Shared layout lives in base.css.
   ========================================================= */

/* CRITICAL RESET: Garante as fontes oficiais da marca sem interferência do WordPress */
.xplore-tours-layout-container,
.xplore-tours-layout-container * {
    font-family: 'Montserrat', 'Inter', sans-serif !important;
}

/* DESTINATION CARDS HOVER EFFECTS */
.destinations-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; text-align: left;
}

.destination-card {
    position: relative; overflow: hidden; border: 1px solid #252525; background-color: #161616; transition: all 0.4s ease; text-decoration: none !important; display: flex; flex-direction: column;
}

.destination-card:hover {
    transform: translateY(-5px); border-color: #A38A5F; box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}

.destination-card-img-wrapper {
    width: 100%; height: 200px; position: relative; overflow: hidden; background-color: #111;
}

.destination-card-img {
    width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.destination-card:hover .destination-card-img {
    transform: scale(1.05);
}

.destination-card-content {
    padding: 25px 20px; display: flex; flex-direction: column; justify-content: space-between; flex: 1; box-sizing: border-box;
}

@media (max-width: 1200px) {
    .destinations-grid {
        grid-template-columns: repeat(2, 1fr) !important; gap: 25px !important;
    }
}

@media (max-width: 991px) {
    .xplore-tours-split-grid {
        grid-template-columns: 1fr !important; padding-top: 60px;
    }

    .tours-hero-image-wrapper {
        height: 350px !important; min-height: 350px !important;
    }

    .tours-hero-content-wrapper {
        padding: 40px 20px !important;
    }

    .tours-hero-content-wrapper h2 {
        font-size: 30px !important;
    }

    .corider-callout-grid {
        grid-template-columns: 1fr !important; gap: 30px !important;
    }
}

@media (max-width: 600px) {
    .destinations-grid {
        grid-template-columns: 1fr !important; gap: 20px !important;
    }
}