/*=====================================================================
  Root Variables
======================================================================*/
:root {
    --program-min-width: 200px;  /* Minimum width for program tiles */
    --gap-size: 1.5em;           /* Gap size for grid */
    --main-bg: #ffffff;          /* Background color for the main content */
}

/*=====================================================================
  Global Grid Display
  Apply `display: grid;` to any element with `grid` in its class name
======================================================================*/
[class*="grid"] {
    display: grid;
}

/*=====================================================================
  Base Layout: Mobile and Tablet (Stacked)
======================================================================*/
.program-finder.grid {
    grid-template-columns: 1fr;  /* Single column by default */
    grid-template-areas:
        "header"
        "sidebar"
        "main";                  /* Sidebar stacks on top of main content */
    gap: var(--gap-size);
}

/*=====================================================================
  Grid Areas Definitions
======================================================================*/
.grid-header {
    grid-area: header;
}

.grid-sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;      /* Stack sidebar items vertically */
    gap: var(--gap-size);
}

.grid-sidebar .checkboxes {
    display: flex;
    flex-direction: column;      /* Ensure checkbox groups are stacked */
}

.grid-main {
    grid-area: main;
    background-color: var(--main-bg);  /* Main content background */
}

/*=====================================================================
  Responsive Program Grid
  Automatically Adjusts Based on Available Space
======================================================================*/
/*
  Dynamic responsive columns for program tiles:
  - Uses `repeat(auto-fill, minmax(min(var(--program-min-width), 100%), 1fr))`
    to create flexible columns.
  - `auto-fill`: Fills the row with as many columns as possible.
  - `minmax(...)`: Ensures each column has a minimum width but can grow.
  This setup allows `.grid-programs` to adjust to available space without media queries.
*/
.grid-programs {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--program-min-width), 100%), 1fr));
    gap: var(--gap-size);
}

/*=====================================================================
  Two-Column Layout for Tablet and Above
  Tablet breakpoint (48em ≈ 768px)
======================================================================*/
@media (min-width: 48em) {
    .program-finder.grid {
        grid-template-columns: minmax(300px, 1fr) 3fr;  /* Sidebar and main content side-by-side */
        grid-template-areas:
            "header header"
            "sidebar main";                            /* Sidebar on the left by default */
    }
    .program-finder.grid[data-sidebar="right"] {
        grid-template-columns: 3fr minmax(300px, 1fr);  /* Sidebar on the right */
        grid-template-areas:
            "header header"
            "main sidebar";
    }
}

/*=====================================================================
  Larger Layout for Desktop and Above
  Desktop breakpoint (62em ≈ 992px)
======================================================================*/
@media (min-width: 62em) {
    .program-finder.grid {
        grid-template-columns: 1fr 3fr;  /* Adjusted sidebar and main content widths */
    }
}