/* Map Component Styles */
/* Mobile-first approach */

.map {
    padding: var(--spacing-2xl) 0;
}

.map-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-card-mobile);
}

.map-wrapper iframe {
    width: 100%;
    height: 300px;
    display: block;
    border: 0;
}

/* Tablet (768px+) */
@media (min-width: 768px) {
    .map-wrapper {
        border-radius: var(--radius-card);
    }
    
    .map-wrapper iframe {
        height: 450px;
    }
}

/* Desktop (1200px+) */
@media (min-width: 1200px) {
    .map-wrapper iframe {
        height: 600px;
    }
}