/* Base Mobile Layout (Stacked columns) */
.main-content-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.region--content, 
.region--sidebar-first, 
.region--sidebar-second {
  width: 100%;
}

/* Tablet & Desktop Layout */
@media (min-width: 768px) {
  .main-content-layout {
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* Sidebars take up 25% width */
  .region--sidebar-first, 
  .region--sidebar-second {
    flex: 0 0 25%;
    max-width: 25%;
  }

  /* Dynamic sizing for Content Area using CSS selectors */
  
  /* 1. Default: Full width if no sidebars exist */
  .region--content {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* 2. One Sidebar: content takes up 75% */
  .region--sidebar-first ~ .region--content,
  .region--content:has(~ .region--sidebar-second) {
    flex: 0 0 75%;
    max-width: 75%;
  }

  /* 3. Both Sidebars: content takes up 50% in the middle */
  .region--sidebar-first ~ .region--content:has(~ .region--sidebar-second) {
    flex: 0 0 50%;
    max-width: 50%;
    order: 2; /* Ensures content stays centered visually */
  }
  
  .region--sidebar-first { order: 1; }
  .region--sidebar-second { order: 3; }
}