/**
 * Page Layout Styles
 * Controls the overall page structure, container widths, and layout patterns
 */

/* ========== Layout with Sidebars ========== */

.layout-with-sidebars {
  display: grid;
  gap: var(--spacing-32);
  align-items: start;
}

/* Two sidebars */
.layout-with-sidebars:has(.sidebar--first):has(.sidebar--second) {
  grid-template-columns: 280px 1fr 280px;
  grid-template-areas: "sidebar-first content sidebar-second";
}

/* First sidebar only */
.layout-with-sidebars:has(.sidebar--first):not(:has(.sidebar--second)) {
  grid-template-columns: 280px 1fr;
  grid-template-areas: "sidebar-first content";
}

/* Second sidebar only */
.layout-with-sidebars:has(.sidebar--second):not(:has(.sidebar--first)) {
  grid-template-columns: 1fr 280px;
  grid-template-areas: "content sidebar-second";
}

.sidebar--first {
  grid-area: sidebar-first;
}

.sidebar--second {
  grid-area: sidebar-second;
}

.layout-with-sidebars .main-content-region {
  grid-area: content;
  min-width: 0; /* Prevent grid blowout */
}

/* ========== Component Width Containers ========== */

/* Full Width - No container (Hero banners, full-width images) */
.full-width-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Contained Width - Standard container (Most content) */
.contained-section {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Content Width - Narrower container for main content */
.content-section {
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-padding);
  padding-right: var(--content-padding);
}

/* Narrow Width - For reading content (Articles, blog posts) */
.narrow-section {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Wide Width - Between full and contained (Feature sections) */
.wide-section {
  max-width: calc(var(--container-max-width) + 200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* ========== Region Wrappers ========== */

/* Breadcrumb */
.breadcrumb-wrapper {
  background: var(--background-surface);
  border-bottom: 1px solid var(--stroke-default);
  padding: var(--spacing-12) 0;
}

/* Highlighted Messages */
.highlighted-wrapper {
  background: var(--background-surface);
  padding: var(--spacing-16) 0;
}

/* Help Text */
.help-wrapper {
  background: var(--color-aqua-25);
  border-left: 4px solid var(--color-aqua-100);
  padding: var(--spacing-16) 0;
  margin-bottom: var(--spacing-24);
}

/* ========== Sidebar Styles ========== */

.sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--spacing-24));
  max-height: calc(100vh - var(--header-height) - var(--spacing-48));
  overflow-y: auto;
}

.sidebar h2 {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-semibold-18);
  margin-bottom: var(--spacing-16);
  color: var(--content-on-surface);
}

/* ========== Content Region Spacing ========== */

/* Add spacing between blocks in main content */
.main-content-region > * + * {
  margin-top: var(--spacing-48);
}

/* Exception: No spacing for full-width hero banners */
.main-content-region > .hero-banner:first-child {
  margin-top: 0;
}

.main-content-region > .full-width-section + .full-width-section {
  margin-top: 0;
}

/* ========== Responsive Layout ========== */

@media (max-width: 1024px) {
  /* Stack sidebars on tablet */
  .layout-with-sidebars:has(.sidebar--first):has(.sidebar--second) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "content"
      "sidebar-first"
      "sidebar-second";
  }

  .layout-with-sidebars:has(.sidebar--first):not(:has(.sidebar--second)) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "content"
      "sidebar-first";
  }

  .layout-with-sidebars:has(.sidebar--second):not(:has(.sidebar--first)) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "content"
      "sidebar-second";
  }

  .sidebar {
    position: static;
    max-height: none;
  }

  .layout-with-sidebars {
    gap: var(--spacing-24);
  }
}

@media (max-width: 768px) {
  /* Reduce spacing on mobile */
  .container,
  .contained-section,
  .narrow-section,
  .wide-section {
    padding-left: var(--spacing-16);
    padding-right: var(--spacing-16);
  }

  .main-content-region > * + * {
    margin-top: var(--spacing-32);
  }

  .layout-with-sidebars {
    gap: var(--spacing-16);
  }

  /* Adjust region spacing */
  .breadcrumb-wrapper,
  .highlighted-wrapper,
  .help-wrapper {
    padding: var(--spacing-12) 0;
  }
}

@media (max-width: 480px) {
  /* Further reduce padding on small mobile */
  .container,
  .contained-section,
  .narrow-section,
  .wide-section {
    padding-left: var(--spacing-12);
    padding-right: var(--spacing-12);
  }
}

/* ========== Special Layout Classes ========== */

/* No Header Spacing (for pages with hero at top) */
.page-wrapper--no-header-spacing .main-content {
  margin-top: 0;
}

/* Boxed Layout (add background to main content) */
.page-wrapper--boxed .main-content {
  background: var(--background-white);
  box-shadow: var(--shadow-lg);
  margin: var(--spacing-24) auto;
  max-width: calc(var(--container-max-width) + var(--spacing-48));
}

@media (max-width: 768px) {
  .page-wrapper--boxed .main-content {
    margin: 0;
    box-shadow: none;
  }
}

/* ========== Print Layout ========== */

@media print {
  .page-wrapper {
    display: block;
  }

  .sidebar,
  .breadcrumb-wrapper,
  .highlighted-wrapper {
    display: none;
  }

  .main-content-region {
    max-width: 100%;
  }

  .full-width-section {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}