/* css/components/Contact/ContactInfo.css */
.contact-info-section {
    padding: 4rem 0;
    background-color: var(--koeleman-white); /* Match React */
}

.locations-title {
    text-align: center;
    color: var(--koeleman-blue);
    margin-bottom: 3rem;
    font-size: 2.25rem;
}

.locations-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 640px) {
    .locations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .locations-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.location-card {
    background-color: var(--koeleman-white);
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
    text-align: left;
    height: 100%; /* Zorgt dat kaarten even hoog zijn */
}

.location-card h3 {
    color: var(--koeleman-blue);
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

.location-card p {
    margin-bottom: 0.5rem;
    line-height: 1.6;
    color: var(--text-primary); /* Match React */
}

/* Styling voor de protected email link */
.location-card .protected-email {
    color: var(--koeleman-gold);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.location-card .protected-email:hover {
    color: var(--koeleman-blue);
}

/* --- NIEUW: Styling voor de telefoonlink (geen styling) --- */
.location-card .location-phone-link {
    color: inherit; /* Behoud de kleur van de paragraaf (var(--text-primary)) */
    text-decoration: none; /* Geen onderlijning */
    cursor: pointer; /* Toon een tekstcursor op desktop */
}

/* Verwijder hover-effecten op desktop */
.location-card .location-phone-link:hover {
    color: inherit;
    text-decoration: none;
}

/* Zorg ervoor dat het op touch-apparaten wel aanvoelt als een link */
@media (hover: none) and (pointer: coarse) {
    .location-card .location-phone-link {
        cursor: pointer; /* Toon een pointer op touch devices */
    }
}