/* ==========================================================================
   Layout Styles
   - Defines main page structure, containers, section spacing,
     responsive grid system, and common layout patterns.
   ========================================================================== */

/* 1. Main Page Structure
   -------------------------------------------------------------------------- */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensures footer stays at the bottom for short content pages */
}

.main-content { /* Wrapper for the primary content area between header and footer */
  flex-grow: 1; /* Allows this area to expand and push the footer down */
  width: 100%;
}

/* Page Wrapper for app-like views (e.g., dashboard, settings) */
.page-wrapper {
  display: flex;
  flex-direction: column; /* Default: app-nav (sidebar) stacks above page-content-area on mobile */
  padding: var(--space-md);
  gap: var(--space-md);
  width: 100%;
  max-width: 1400px; /* Max width for overall app interface */
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) { /* md breakpoint */
  .page-wrapper {
    padding: var(--space-lg);
    gap: var(--space-lg);
  }
}

/* Layout for pages with a sidebar (e.g., .app-nav) and main content area */
@media (min-width: 992px) { /* lg breakpoint */
  .page-wrapper.has-sidebar { /* Add .has-sidebar to .page-wrapper on relevant HTML pages */
    flex-direction: row;    /* Sidebar and content side-by-side */
    align-items: flex-start; /* Align items to the top if they have different heights */
  }
  .page-wrapper.has-sidebar > .app-nav { /* Styling for the .app-nav when it acts as a sidebar */
    flex: 0 0 260px; /* Fixed width for the sidebar, adjust as needed */
    /* For a sticky sidebar that stays in view while scrolling content: */
    /* position: sticky;
       top: var(--space-lg); /* Adjust top offset as needed (e.g., account for a sticky top navbar height) */
    /* height: calc(100vh - (2 * var(--space-lg))); /* Example height, adjust based on top offset and desired bottom space */
    /* overflow-y: auto; /* Allow sidebar content to scroll if it's too long */
  }
  .page-wrapper.has-sidebar > .page-content-area {
    flex: 1; /* Main content area takes the remaining space */
    min-width: 0; /* Prevents content from overflowing if it's too wide for the flex item */
  }
}

/* Main content area within a .page-wrapper (e.g., the white card holding dashboard content) */
.page-content-area {
  background-color: var(--color-surface);
  border-radius: var(--border-radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
  flex-grow: 1; /* If it's the only child in a column flex .page-wrapper */
}


/* 2. Section Containers & Spacing
   -------------------------------------------------------------------------- */

/* Standard container for centering content with a max-width */
.container {
  width: 100%;
  max-width: 1200px; /* Default max-width for general content sections */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);  /* Default horizontal padding */
  padding-right: var(--space-md);
}

@media (min-width: 640px) { /* sm breakpoint */
  .container {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
}
@media (min-width: 1024px) { /* lg breakpoint */
  .container {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
  }
}

/* Full-width container, typically for full-bleed backgrounds */
.container-fluid {
  width: 100%;
  padding-left: var(--space-md);  /* Minimal edge padding */
  padding-right: var(--space-md);
}

/* Section defaults: primarily for vertical spacing */
.section {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  width: 100%; /* Sections usually span the full width of their parent */
  position: relative; /* Useful for containing pseudo-elements or absolutely positioned children */
  /* overflow: hidden; /* CAUTION: Apply this directly to specific sections if their background/content causes overflow.
                         Applying globally can clip intended overhangs like box-shadows on child elements. */
}

.section-sm { /* Smaller vertical padding for sections */
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.section-lg { /* Larger vertical padding for sections */
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

/* Common styling for section headers (title + optional subtitle) */
.section-header {
  text-align: center;
  margin-bottom: var(--space-xl); /* Space below the entire header block */
}

.section-header .section-title { /* Typically an <h2> */
  font-size: var(--font-size-3xl); /* From base.css, or can be overridden */
  margin-bottom: var(--space-sm);
  color: var(--color-text-primary);
}

.section-header .section-subtitle { /* Typically a <p> */
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  max-width: 700px; /* Constrain line length for readability */
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}


/* 3. Responsive Grid System
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-lg); /* Default gap for grid items */
}

/* Utility classes for different gap sizes */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }


/* Grid column templates */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Add more as needed, e.g., .grid-cols-5, .grid-cols-6 */

/* Responsive grid column classes (sm: 640px, md: 768px, lg: 1024px - defined in base.css comments) */
@media (min-width: 640px) {
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Auto-fit grid: creates columns of a minimum width, fitting as many as possible */
/* Usage: <div class="grid grid-auto-fit" style="--grid-item-min-width: 300px;"> */
.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-item-min-width, 280px), 1fr));
}


/* 4. Common Layout Patterns
   -------------------------------------------------------------------------- */

/* Two-column layout (e.g., for text beside an image) */
.two-col-layout {
  display: grid;
  grid-template-columns: 1fr; /* Stacks columns on mobile by default */
  gap: var(--space-xl);        /* Gap between columns (or stacked items) */
  align-items: center;       /* Vertically align content of columns */
}

@media (min-width: 768px) { /* md breakpoint: side-by-side columns */
  .two-col-layout {
    grid-template-columns: 1fr 1fr; /* Two equal columns */
  }
  /* Modifier to swap visual order of columns on desktop */
  .two-col-layout.layout-swapped .col-visual { /* Assuming .col-visual is the second item in HTML */
    order: -1; /* Moves the visual column to the first position */
  }
}

.two-col-layout .col-text {
  /* Specific styling for the text column if needed */
  /* Text alignment, etc., can be handled by utility classes or direct child styling */
}
.two-col-layout .col-visual {
  /* Specific styling for the visual column (image, video, etc.) */
  text-align: center; /* Center the visual if it's narrower than the column */
}
.two-col-layout .col-visual img {
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 100%; /* Ensure image is responsive within its column */
  height: auto;    /* Maintain aspect ratio */
  display: block;  /* Remove extra space under image */
}

/* Page Title Header (Commonly used at the top of main content in app pages) */
.page-title-header {
  text-align: center;
  padding: var(--space-md) 0; /* Vertical padding, no horizontal as it's usually in a padded container */
  margin-bottom: var(--space-xl); /* Space below the title block */
}
.page-title-header h1 {
  font-size: var(--font-size-3xl); /* Can be overridden for specific pages */
  color: var(--color-primary);    /* Themed page titles */
  margin-bottom: var(--space-xs);
}
.page-title-header p { /* Subtitle for page title */
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  margin-bottom: 0;
  max-width: 600px; /* Constrain subtitle width */
  margin-left: auto;
  margin-right: auto;
}

/* Class added to .main-nav via JS when mobile menu is open */
.main-nav.mobile-menu-active {
  /* This class can be used to style the .main-nav itself when the mobile menu is open.
     For example, if the menu overlayed content and you wanted to prevent body scroll,
     you might add overflow:hidden to the body via another class toggled by JS.
     Or, if the nav background needed to change, etc.
     Currently, the menu display is handled by targeting the menu itself based on checkbox state or JS.
  */
}