/* =====================================================================
 * Page Layout — 2-column page wrapper untuk JWM Themes Builder
 *
 * Dipakai saat `config.layout.variant === "sidebar-right"`.
 * Renderer adapter membungkus sections dengan struktur:
 *   .page-layout-2col
 *     .page-layout-2col__content   ← sections render di sini
 *     .page-layout-2col__sidebar   ← <div data-widget-slot> di sini
 *
 * Default (`variant === "full"`) tidak pakai class ini sama sekali.
 * ===================================================================== */

.page-layout-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.page-layout-2col__content {
  min-width: 0; /* prevent overflow karena section dengan inline width */
}

.page-layout-2col__sidebar {
  /* Push sidebar down supaya tidak nempel ke break-out hero di atasnya.
     Content column (section.archive-list-01 / articles-list-01 / dll)
     sudah punya padding-top sendiri (~48-56px), jadi margin di sidebar
     aja untuk match visual rhythm-nya. */
  margin-top: 56px;
  position: sticky;
  top: 24px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Widget block default styling — bisa di-override per-widget */
.page-layout-2col__sidebar [data-widget-slot] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-layout-2col__sidebar [data-widget-slot] > * {
  background: var(--color-surface, #f4f7ff);
  border: 1px solid var(--color-border, #d9e2f2);
  border-radius: 8px;
  padding: 16px;
}

/* Sections inside content column tetap mengikuti container theme aslinya.
 * Tapi pad bottom supaya footer punya breathing room. */
.page-layout-2col__content > section {
  padding-left: 0;
  padding-right: 0;
}

/* Section full-bleed override — section dengan class .page-fullbleed
 * akan break out dari content column (escape grid). Disiapkan untuk
 * section hero yang biasanya selalu lebar penuh meski page-nya 2col. */
.page-layout-2col__content > section.page-fullbleed {
  grid-column: 1 / -1;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Responsive collapse — di mobile, sidebar pindah ke bawah konten */
@media (max-width: 992px) {
  .page-layout-2col {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .page-layout-2col__sidebar {
    position: static;
    top: auto;
    /* Di mobile sidebar drop di bawah content — top margin tidak relevan,
       gap grid sudah handle spacing. */
    margin-top: 0;
  }
}