/*
 * Belgian Beer Experience Section Styles
 */

.experience-section {
    /* background-color: #1b1d1e; /* Removed: Will be applied to text column */
    /* color: #fff; */ /* Default color will be inherited or set on text column */
    padding-top: 0; /* Removed padding */
    padding-bottom: 0; /* Removed padding */
    overflow: hidden;
    background-color: #fff; /* Set overall section to white or a neutral color */
}

.experience-section .row {
    display: flex;
    align-items: stretch; /* Make columns equal height */
    margin-left: 0;
    margin-right: 0;
}

.experience-text-column {
    background-color: #1b1d1e; /* Dark background for text column */
    color: #fff; /* Light text for this column */
    padding: 60px 40px; /* Maintain padding within the text column */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.experience-text-column h2 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 38px; /* Slightly reduced for balance */
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.experience-text-column p {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px; /* Slightly reduced */
    color: #eee;
    line-height: 1.6;
    margin-top: 15px;
    margin-bottom: 25px;
}

.experience-buttons {
    display: flex; /* Align buttons in a row */
    flex-wrap: wrap; /* Allow wrapping if necessary, though aiming for one line */
    gap: 8px; /* Add small gap between buttons */
}

/* .experience-buttons .btn-default.experience-btn styles are now handled by .btn-brand-gold */
/* Ensure .experience-btn class is only for structural/spacing if needed, or remove if not */

/* .experience-buttons .btn-default.experience-btn:hover is now handled by .btn-brand-gold:hover */

/* .experience-buttons .btn-default.experience-btn:last-child {
    margin-right: 0;
} */

.experience-image-column {
    padding: 0;
    display: flex; /* Allow image to fill height */
}

.experience-image-column img {
    width: 100%;
    height: 100%; /* Make image fill the column height */
    display: block;
    object-fit: cover;
    /* max-height: 500px; /* Removed max-height to let it match text column */
}

/* Mobile Adjustments */
@media (max-width: 767px) {
    .experience-section .row {
        flex-direction: column;
    }

    .experience-text-column {
        padding: 40px 20px;
        text-align: center;
    }
    
    .experience-image-column img {
        /* max-height: 350px; /* Height will be auto or determined by content */
        height: auto; /* Revert to auto height for stacked layout */
        width: 100%;
    }

    .experience-buttons {
        justify-content: center; /* Center buttons on mobile */
    }

    .experience-buttons .btn-default.experience-btn {
        margin-right: 5px; 
        margin-left: 5px;
        margin-bottom: 10px;
        /* padding: 10px 15px; /* Base .btn-brand-gold padding is 12px 25px, .btn-sm might be smaller */
        /* font-size: 11px; /* Base .btn-brand-gold font-size is 14px */
        /* The .btn-brand-gold will apply. If a smaller version is needed, consider .btn-brand-gold.btn-sm */
    }
}

.experience-section.container-fluid {
    padding-left: 0; /* Override Bootstrap padding */
    padding-right: 0; /* Override Bootstrap padding */
}

/* Ensure direct child row also has no negative margins if container-fluid padding is removed */
.experience-section.container-fluid > .row {
    margin-left: 0;
    margin-right: 0;
}