/**
 * ============================================================================
 * HOME PAGE LAYOUT - TWO-COLUMN LAYOUT STRUCTURE
 * ============================================================================
 * Defines the main layout structure for the homepage.
 * Creates a two-column layout with a flexible main content area and
 * a fixed-width sidebar.
 * 
 * LAYOUT STRUCTURE:
 * - Main content area (left): Flexible width, grows to fill space
 * - Sidebar (right): Fixed 300px width
 * - 40px gap between columns
 * - Centered with max-width of 1400px
 * 
 * RESPONSIVE BEHAVIOR:
 * - On desktop: Two columns side-by-side
 * - Responsive styles handle mobile/tablet breakpoints
 * ============================================================================
 */

/* ========================================================================== */
/* LAYOUT CONTAINER - MAIN TWO-COLUMN WRAPPER */
/* ========================================================================== */
/* Creates the flexbox container for main content and sidebar */
.home-page-layout {
  display: flex; /* Enable flexbox layout */
  max-width: 1400px; /* Maximum width for large screens */
  margin: 0 auto; /* Center horizontally */
  padding: 0 20px; /* Horizontal padding for mobile screens */
  gap: 40px; /* Space between main content and sidebar */
}

/* ========================================================================== */
/* MAIN CONTENT AREA - FLEXIBLE WIDTH COLUMN */
/* ========================================================================== */
/* Contains the primary content (articles, highlights, etc.) */
.home-page-layout__main {
  flex: 1; /* Grow to fill available space */
  max-width: calc(
    100% - 340px
  ); /* Prevent overflow: total width minus sidebar (300px) and gap (40px) */
}

/* ========================================================================== */
/* SIDEBAR - FIXED WIDTH COLUMN */
/* ========================================================================== */
/* Contains widgets, ads, and secondary content */
.home-page-layout__sidebar {
  width: 300px; /* Fixed width */
  flex-shrink: 0; /* Prevent shrinking when space is limited */
  display: flex; /* Flexbox for vertical stacking of widgets */
  flex-direction: column; /* Stack widgets vertically */
  gap: 0; /* No gap between widgets (widgets have their own margins) */
}
