/* Specifieke CSS voor de locatiespagina */

/* --- Locaties Sectie --- */
.locations-section {
    background-color: var(--background); /* Witte achtergrond */
    text-align: center; /* Centreer de inhoud */
}

.location-display-wrapper {
    max-width: 900px; /* Max breedte voor de locatieweergave */
    margin: 0 auto; /* Centreer de wrapper */
}

.location-display {
    display: flex;
    flex-direction: column; /* Standaard onder elkaar op mobiel */
    align-items: center;
    gap: var(--spacing-lg); /* Ruimte tussen afbeelding en tekst */
    background-color: var(--background);
    border-radius: 0.75rem; /* Afgeronde hoeken */
    box-shadow: var(--shadow-soft);
    padding: var(--spacing-lg);
    text-align: left; /* Tekstdetails links uitlijnen */
}

.location-image-container {
    width: 100%;
    max-width: 600px; /* Max breedte voor de afbeelding */
    border-radius: 0.5rem; /* Afgeronde hoeken voor afbeelding container */
    overflow: hidden; /* Zorgt dat de afbeelding netjes binnen de border-radius blijft */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Lichte schaduw voor afbeelding */
}

.location-image {
    width: 100%;
    height: auto;
    display: block; /* Verwijder extra ruimte onder afbeelding */
    border-radius: 0.5rem; /* Afgeronde hoeken voor afbeelding zelf */
}

.location-details {
    flex-grow: 1; /* Laat details de resterende ruimte innemen op desktop */
}

.location-details .section-title {
    margin-bottom: var(--spacing-sm);
    color: var(--primary-color); /* Locatienaam in primaire kleur */
}

.location-details p {
    margin-bottom: var(--spacing-md);
    color: var(--muted-foreground);
}

/* Knoppen voor navigatie */
.location-navigation {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm); /* Ruimte tussen de knoppen */
    padding-top: 40px;
}

/* Specifieke stijl voor de outline knop in navigatie */
.btn-outline-primary {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: var(--text-color-light);
    transform: translateY(-2px);
}


/* --- Responsive Design (Media Queries) --- */

/* Medium screens (md: in Tailwind) - min-width: 768px */
@media (min-width: 768px) {
    .location-display {
        flex-direction: row; /* Naast elkaar op grotere schermen */
        text-align: left; /* Zorg dat tekst links blijft */
    }

    .location-image-container {
        flex-shrink: 0; /* Voorkom dat de afbeelding krimpt */
        width: 350px; /* Vaste breedte voor afbeelding op desktop */
        height: 250px; /* Vaste hoogte voor afbeelding op desktop */
    }

    .location-image {
        height: 100%; /* Vul de container hoogte */
        object-fit: cover; /* Zorg dat de afbeelding de container vult zonder vervorming */
    }

    .location-details {
        padding-left: var(--spacing-lg); /* Ruimte tussen afbeelding en tekst */
    }
}

/* Large screens (lg: in Tailwind) - min-width: 1024px */
@media (min-width: 1024px) {
    .location-display {
        gap: var(--spacing-xl); /* Meer ruimte tussen afbeelding en tekst op grote schermen */
    }

    .location-image-container {
        width: 450px; /* Grotere afbeelding op grote schermen */
        height: 300px;
    }
}