/* Ensure no external styles affect this layout */
.places-section {
    padding: 3px;
    background-color: var(--background-color-white);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-lg);
}

.places-section-list {
    margin-top: var(--spacing-xs);
}

/* Each place-item is its own container */
.place-section-item {
    background-color: var(--background-color-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    box-shadow: var(--shadow-md);
    border: var(--border-width-thin) solid var(--background-color-primary-light);
}

/* Title and map link should always be on the same row */
.places-section-title-row {
    display: flex;
    flex-wrap: wrap; /* Allow title and link to wrap if necessary */
    align-items: center; /* Keep title and link vertically aligned */
    gap: var(--spacing-xs); /* Space between title and map link */
    margin-bottom: var(--spacing-xs); /* Space between title and description */
    width: 100%; /* Ensure it takes up the full container width */
}

/* Title styling */
.places-section-place-title {
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--color-primary-hover);
    flex: 1; /* Allow the title to take up available space */
}

.map-link {
    background: var(--color-primary);
    border: var(--border-width-thin) solid var(--color-primary-hover);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--text-color-light);
    transition: background var(--transition-medium), border var(--transition-medium), color var(--transition-medium);
    text-decoration: none; /* Ensure links have no underline */
}

.map-link:hover {
    background: var(--color-primary-hover);
    border-color: var(--background-color-primary-light);
    color: var(--background-color-white);
}

/* Description row (always below the title-row) */
.places-section-description-row {
    margin-top: var(--spacing-xs);
    width: 100%; /* Ensure description takes the full width */
}

/* Description styling */
.places-section-place-description {
    color: var(--text-color-light);
}

/* Media query for smaller screens */
@media (max-width: var(--breakpoint-sm)) {
    /* Stack title and map link vertically on smaller screens */
    .places-section-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Add space between the title and map link on small screens */
    .map-link {
        margin-top: var(--spacing-xs); /* Define --spacing-xxs if needed */
    }
}



/* 



.modal-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    height: 90%; 
    max-height: 90%;
    overflow-y: auto; 
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

.modal-dialog {
    margin: 0;
    width: 100%;
}

.modal-content {
    border-radius: 10px 10px 0 0; 
}

@media (min-width: 768px) {
    .modal-bottom {
        height: auto;
        max-height: none;
        position: relative;
    }
} */