/* Basic styling for the body and container */
body {
    margin: 0;
    font-family: sans-serif;
    display: flex; /* Use flexbox to center content if needed */
    justify-content: center;
}

.container {
    display: grid;
    /* Defines the grid structure with two columns */
    /* The first column is 200px wide, and the second takes up the remaining space */
    grid-template-columns: 200px 1fr; 
    /* Defines three rows: the title, content, and image */
    grid-template-rows: auto 1fr auto;
    /* Specifies a gap between grid items */
    gap: 10px;
    height: 100vh; /* Make the container fill the viewport height */
    width: 90vw; /* Adjust the overall width as needed */
    border: 2px solid black;
    box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
}

/* Positioning the sidebar using grid properties */
.sidebar {
    grid-column: 1 / 2; /* Spans from the first column line to the second */
    grid-row: 1 / 4; /* Spans from the first row line to the last, covering the full height */
    background-color: #f0f0f0;
    padding: 15px;
    border: 2px solid black;
    box-sizing: border-box;
}

/* Positioning the main content area */
.main-content-area {
    grid-column: 2 / 3; /* Places it in the second column */
    display: grid;
    grid-template-rows: auto 1fr; /* Defines its own internal grid for the header and the content/image part */
    gap: 10px;
}

.title-bar {
    grid-row: 1 / 2;
    background-color: #ddd;
    padding: 10px;
    text-align: center;
    border: 2px solid black;
}

.content-and-image {
    grid-row: 2 / 3;
    display: flex; /* Uses Flexbox to arrange the content and image sections vertically */
    flex-direction: column;
    gap: 10px;
    flex-grow: 1; /* Allows this container to fill the remaining vertical space */
}

.content-section {
    flex: 1; /* Makes the content section grow to fill available space */
    background-color: #e6e6e6;
    padding: 15px;
    border: 2px solid black;
}

.image-section {
    flex: 1; /* Makes the image section grow to fill available space, sharing space equally with content */
    background-color: #ccc;
    padding: 15px;
    border: 2px solid black;
}
/* ==================================== */
/* Base Styles (for Mobile Devices)     */
/* ==================================== */
body {
    margin: 0;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
}

.container {
    display: grid;
    /* On mobile, stack all sections in a single column */
    grid-template-columns: 1fr; 
    grid-template-rows: auto auto auto auto;
    gap: 10px;
    height: 100vh;
    width: 90vw;
    border: 2px solid black;
    box-sizing: border-box;
}

/* On mobile, the navigation bar will be at the top */
.sidebar {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    background-color: #f0f0f0;
    padding: 15px;
    border: 2px solid black;
    box-sizing: border-box;
}

/* Title bar is below the navigation bar on mobile */
.title-bar {
    grid-row: 2 / 3;
    background-color: #ddd;
    padding: 10px;
    text-align: center;
    border: 2px solid black;
}

/* The main content area will stack its children vertically */
.main-content-area {
    grid-row: 3 / 4;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.content-and-image {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}

/* Content and image sections stack on top of each other */
.content-section,
.image-section {
    flex: 1;
    background-color: #e6e6e6;
    padding: 15px;
    border: 2px solid black;
}

/* ==================================== */
/* Tablet Layout (min-width: 768px)     */
/* ==================================== */
@media screen and (min-width: 768px) {
    .container {
        /* On tablets, we can start to introduce a sidebar again */
        grid-template-columns: 150px 1fr; 
        grid-template-rows: auto 1fr;
    }

    .sidebar {
        /* Sidebar now spans the full height on the left */
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }

    .main-content-area {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        /* The main content area uses grid to place the header and content below it */
        display: grid;
        grid-template-rows: auto 1fr;
    }

    .title-bar {
        grid-row: 1 / 2;
    }

    /* Content and image sections are side-by-side on tablets */
    .content-and-image {
        grid-row: 2 / 3;
        display: flex;
        flex-direction: row; /* Change to row to place them next to each other */
    }

    .content-section,
    .image-section {
        flex: 1;
    }
}

/* ==================================== */
/* Desktop Layout (min-width: 1024px)   */
/* ==================================== */
@media screen and (min-width: 1024px) {
    .container {
        /* Revert to the original desktop layout */
        grid-template-columns: 200px 1fr; 
        grid-template-rows: auto 1fr;
    }

    /* Styles remain similar to the tablet layout, just wider */
    .sidebar {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
    
    .main-content-area {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        display: grid;
        grid-template-rows: auto 1fr;
    }

    .content-and-image {
        grid-row: 2 / 3;
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

    .content-section,
    .image-section {
        flex: 1;
    }
}