/* ===== RESPONSIVE DESIGN - TOURS SECTION ===== */

/* ===== TABLET Y DESKTOP PEQUEÑO (max-width: 1024px) ===== */
@media (max-width: 1024px) {
    .tours-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
        max-width: 600px;
    }
    
    .tour-card {
        min-height: 580px;
    }
    
    .tours-filters {
        gap: var(--spacing-md);
    }
    
    .filter-button {
        min-width: 160px;
        padding: var(--spacing-md) var(--spacing-lg);
    }
}

/* ===== MÓVIL (max-width: 768px) ===== */
@media (max-width: 768px) {
    .tours-section {
        padding: var(--spacing-2xl) 0;
    }
    
    .tours-header {
        margin-bottom: var(--spacing-2xl);
    }
    
    .tours-filters {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-md);
        margin-top: var(--spacing-xl);
    }
    
    .filter-button {
        min-width: 250px;
        width: 100%;
        max-width: 300px;
    }
    
    .tours-grid {
        padding: 0 var(--spacing-md);
        gap: var(--spacing-xl);
    }
    
    .tour-card {
        min-height: 500px;
    }
    
    .tour-header-section {
        height: 220px;
    }
    
    .tour-content {
        padding: var(--spacing-lg);
    }
    
    .tour-title {
        font-size: var(--fs-xl);
    }
    
    .tour-details-simple {
        gap: var(--spacing-lg);
    }
    
    .tour-highlights-simple {
        gap: var(--spacing-xs);
    }
    
    .highlight-tag {
        font-size: 0.7rem;
        padding: var(--spacing-xs);
    }
    
    .tour-actions {
        gap: var(--spacing-sm);
    }
    
    .tour-action-primary,
    .tour-action-secondary {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: var(--fs-sm);
    }
}

/* ===== MÓVIL PEQUEÑO (max-width: 480px) ===== */
@media (max-width: 480px) {
    .tours-section {
        padding: var(--spacing-xl) 0;
    }
    
    .tours-grid {
        padding: 0 var(--spacing-sm);
    }
    
    .filter-button {
        min-width: 200px;
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--fs-sm);
    }
    
    .tour-card {
        min-height: 450px;
    }
    
    .tour-header-section {
        height: 180px;
    }
    
    .tour-content {
        padding: var(--spacing-md);
    }
    
    .tour-title {
        font-size: var(--fs-lg);
        margin-bottom: var(--spacing-sm);
    }
    
    .tour-description {
        font-size: var(--fs-sm);
        margin-bottom: var(--spacing-md);
    }
    
    .tour-details-simple {
        gap: var(--spacing-md);
    }
    
    .tour-highlights-simple {
        gap: var(--spacing-xs);
    }
    
    .highlight-tag {
        font-size: 0.6rem;
        padding: var(--spacing-xs);
    }
    
    .tour-action-primary,
    .tour-action-secondary {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--fs-xs);
    }
    
    .empty-state {
        padding: 0 var(--spacing-md);
    }
    
    .empty-state i {
        font-size: var(--fs-4xl);
    }
    
    .empty-state h3 {
        font-size: var(--fs-xl);
    }
    
    .empty-state p {
        font-size: var(--fs-sm);
    }
}

/* ===== AJUSTES ESPECÍFICOS PARA LANDSCAPE EN MÓVIL ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .tour-header-section {
        height: 160px;
    }
    
    .tour-card {
        min-height: 400px;
    }
    
    .tours-filters {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .filter-button {
        min-width: 140px;
        width: auto;
    }
}

/* ===== AJUSTES PARA PANTALLAS MUY GRANDES (min-width: 1400px) ===== */
@media (min-width: 1400px) {
    .tours-grid {
        max-width: 1600px;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-2xl);
    }
    
    .tour-card {
        min-height: 600px;
    }
}

/* ===== PREFERENCIAS DE MOVIMIENTO REDUCIDO ===== */
@media (prefers-reduced-motion: reduce) {
    .tour-card,
    .filter-button,
    .tour-detail-item,
    .tour-highlight-item,
    .tour-action-primary,
    .tour-action-secondary {
        transition: none;
    }
    
    .tour-card:hover {
        transform: none;
    }
    
    .tour-image {
        transition: none;
    }
    
    .tour-card:hover .tour-image {
        transform: none;
    }
    
    .spinner {
        animation: none;
    }
}

/* ===== MODO OSCURO (si se implementa en el futuro) ===== */
@media (prefers-color-scheme: dark) {
    /* Se pueden agregar estilos para modo oscuro aquí */
    .tour-card {
        background: #1a1a1a;
        border-color: rgba(255, 107, 53, 0.2);
    }
    
    .tour-title {
        color: #ffffff;
    }
    
    .tour-description {
        color: #cccccc;
    }
    
    .tour-detail-label {
        color: #999999;
    }
    
    .tour-detail-value {
        color: #ffffff;
    }
}