/* css/agenda_style.css - Custom Styles for the Agenda Page */
main{
    width:80vw; 
    margin:0 auto; 
    background-color: #eeedf2;
}

/* Agenda Hero Section */
.agenda-hero-section {
    position: relative;
    width: 100%;
    height: 225px;
    background-image: url('../images/with text 2.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    overflow: hidden;
    margin: -31px 0 0 0 !important;
    padding: 0;
}

.agenda-title {
    font-size: 2rem;
    font-weight: 500;
    color: #333;
    padding-left: 15px;
    text-align: start;
}

.agenda-subtitle {
    font-size: 1.2rem;
    color: #555;
    padding-left: 15px;
    text-align: start;
}

/* Main Agenda Content Section */
.agenda-content-section {
    padding-top: 50px;
    padding-bottom: 50px;
    color: #333;
}

.agenda-day-card {
    /* background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03); */
    padding: 30px;
    margin-bottom: 30px;
}

.agenda-day-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #f51128;
    margin-bottom: 20px;
    border-bottom: 2px solid #f51128;
    padding-bottom: 10px;
}

.agenda-note {
    font-style: italic;
    font-weight: 400;
    color: #f51128;
    margin-bottom: 20px;
}

/* New: Container for two images per day */
.agenda-day-image-container {
    display: flex;
    flex-direction: column; /* Vertical stacking for web */
    justify-content: space-between; /* Distribute space between images */
    gap: 20px; /* Maintain a base gap even with space-between if container height varies */
    margin-bottom: 20px;
    align-items: flex-start; /* Align images to the start of the column */
    /* You might need to give this container a minimum height if space-between doesn't work well due to content-driven height */
    /* min-height: 450px; /* Example: Adjust this based on content height to give space-between room */
}

/* New: Styling for the two main images per day */
.agenda-day-main-image {
    width: 100%; /* Take full width of the column */
    max-width: 400px; /* Increased slightly for web view */
    height: 250px; /* Adjusted height slightly for better proportionality with increased width */
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.agenda-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}

.agenda-list li {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

.agenda-list li strong {
    color: #333;
}

.agenda-sub-note {
    font-size: 0.95rem;
    color: #888;
    /* margin-left: 20px; */
}

.agenda-group-note {
    font-size: 1rem;
    font-style: italic;
    color: #666;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 20px;
}

.agenda-dress-code {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.agenda-dress-code h4 {
    font-size: 1.3rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
}

.agenda-dress-code ul {
    list-style: disc;
    padding-left: 20px;
}

.agenda-dress-code li {
    font-size: 1.05rem;
    line-height: 1.5;
    margin-bottom: 5px;
}

/* Original image styling (now for general agenda images if any are used outside day cards) */
.agenda-image-container {
    text-align: center;
    margin-bottom: 20px;
}

.agenda-image {
    max-width: 100%;
    height: 60vh;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.dress-code-images {
    display: flex;
    justify-content: left;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.agenda-dress-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

@media (max-width: 1287px){
    .agenda-hero-section {
        height: 190px;
    }
}


/* Responsive Adjustments - Mobile View (should not change from original) */
@media (max-width: 767.98px) { /* Small devices (phones) */
main{
    width:100vw; 
    margin:0 auto; 
    background-color: #eeedf2;
}
    .agenda-hero-section {
        background-image: url('../images/shell-product-2.png');
        text-align: center;
        padding-left: 0;
        padding-right: 0;
        margin: 0px !important;
    }

    .agenda-title {
        font-size: 1.8rem;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }

    .agenda-subtitle {
        font-size: 1rem;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }

    .agenda-content-section {
        padding-left: 15px;
        padding-right: 15px;
       
    }

    .agenda-day-card {
        padding: 20px;
    }

    .agenda-day-title {
        font-size: 1.7rem;
    }

    .agenda-list li,
    .agenda-dress-code li {
        font-size: 1rem;
    }

    .agenda-group-note {
        font-size: 0.9rem;
        margin-left: 10px;
    }

    .agenda-dress-code h4 {
        font-size: 1.2rem;
    }

    .agenda-dress-image {
        width: 80px; /* Smaller size for mobile */
        height: 80px;
    }

    .agenda-image{
        height: 25vh;
    }

    /* Specific mobile styles for the new two-image container (as per original mobile view) */
    .agenda-day-image-container {
        flex-direction: column; /* Stack images vertically on small screens */
        align-items: center; /* Center stacked images */
        gap: 10px; /* Space between stacked images */
    }

    .agenda-day-main-image {
        width: 100%; /* Full width for stacked images */
        max-width: 300px; /* Constrain width for a better look */
        height: 200px; /* Fixed height for consistency as in mobile screenshot */
        object-fit: cover; /* Ensure images cover the area */
    }
}