/* ==========================================================================
   Firefly Hexo Theme - layout.css
   Three-column grid layout (ported from layout-styles.css and
   MainGridLayout.astro logic).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Main Grid Container
   -------------------------------------------------------------------------- */

#main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
}

/* --------------------------------------------------------------------------
   Sidebar Combinations (Desktop: >= 1280px)
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  #main-grid.has-both-sidebars {
    grid-template-columns: 17.5rem 1fr 17.5rem;
  }

  #main-grid.has-left-sidebar {
    grid-template-columns: 17.5rem 1fr;
  }

  #main-grid.has-right-sidebar {
    grid-template-columns: 1fr 17.5rem;
  }

  #main-grid.has-no-sidebar {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Tablet: 769px - 1279px
   Both sidebars collapse to left-sidebar layout; right sidebar moves below.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {
  #main-grid.has-both-sidebars {
    grid-template-columns: 17.5rem 1fr;
  }

  #main-grid.has-both-sidebars .sidebar-right {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Mobile: < 768px — everything stacks vertically
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  #main-grid {
    grid-template-columns: 1fr;
    padding: 0 0.75rem;
    gap: 0.75rem;
  }

  #main-grid.has-both-sidebars,
  #main-grid.has-left-sidebar,
  #main-grid.has-right-sidebar {
    grid-template-columns: 1fr;
  }

  /* On mobile, sidebars are hidden — content appears in mobile-bottom-sidebar instead */
  #main-grid .sidebar-left,
  #main-grid .sidebar-right {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Sidebar Areas
   -------------------------------------------------------------------------- */

.sidebar-left,
.sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.sidebar-left .top-widgets,
.sidebar-right .top-widgets {
  /* No sticky; scrolls with the page */
}

.sidebar-left .sticky-widgets,
.sidebar-right .sticky-widgets {
  position: sticky;
  top: calc(var(--navbar-height) + 1rem);
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* --------------------------------------------------------------------------
   Main Content Area
   -------------------------------------------------------------------------- */

#main-content {
  min-width: 0;
  width: 100%;
}

/* Center single-column content when no sidebars are present */
@media (min-width: 768px) {
  #main-grid.has-no-sidebar #main-content {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --------------------------------------------------------------------------
   Banner Layout Mode
   -------------------------------------------------------------------------- */

/* When banner is enabled, content slides up to overlap the banner area.
   The navbar sits transparently in the banner zone; grid starts below. */
.enable-banner #main-grid {
  margin-top: 0;
}

/* No banner layout: compact, no banner push */
.no-banner-layout #main-grid {
  padding-top: calc(var(--navbar-height) + 1rem);
}

/* --------------------------------------------------------------------------
   Wallpaper Transparent / Overlay Mode
   -------------------------------------------------------------------------- */

/* In wallpaper-transparent mode, content sits normally while the
   wallpaper is fixed behind as a visual layer. */

.wallpaper-transparent #main-grid {
  /* Content stays in its natural position; wallpaper is behind */
}

/* When the wallpaper is in "overlay" mode, z-index ensures content is above */
@media (min-width: 769px) {
  .wallpaper-overlay + #main-grid {
    position: relative;
    z-index: 1;
  }
}

/* --------------------------------------------------------------------------
   Mobile Bottom Sidebar
   (Main styles in responsive.css — this is the base/desktop default)
   -------------------------------------------------------------------------- */

.mobile-bottom-sidebar {
  display: none;
}

/* --------------------------------------------------------------------------
   Article / Post Page Layout inside #main-content
   -------------------------------------------------------------------------- */

.post-article {
  max-width: 820px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

@media (max-width: 768px) {
  .post-article {
    padding: 1rem 0.75rem;
  }
}

/* --------------------------------------------------------------------------
   Pagination inside main-content — M3 pill buttons
   -------------------------------------------------------------------------- */

.pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem 1rem;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pagination-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: var(--md-shape-corner-full);
  background: var(--md-sys-color-surface-variant);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--line-divider);
  transition:
    background-color var(--md-motion-duration-short) var(--md-motion-easing-standard),
    color var(--md-motion-duration-short) var(--md-motion-easing-standard);
}

.pagination-item:hover {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-color: var(--primary);
}

.pagination-item .material-symbols-outlined {
  font-size: 1.125rem;
}

.pagination-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination-info {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.pagination-info .page-number {
  color: var(--primary);
  font-weight: 700;
}

.pagination-info .page-divider {
  color: var(--text-tertiary);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-tertiary);
  font-size: 0.8125rem;
  border-top: 1px solid var(--line-divider);
  margin-top: 2rem;
  grid-column: 1 / -1; /* Spans all columns in CSS Grid */
}

/* ==========================================================================
   Main Content Wrapper Responsive / CSS-First Positioning (Avoid FOUC)
   ========================================================================== */

#main-content-wrapper {
  transition: top 0.3s ease, margin-top 0.3s ease;
}

/* Default / Banner mode positioning (desktop home & non-home) */
html[data-wallpaper-mode="banner"] #main-content-wrapper {
  top: calc(var(--banner-height) - 4rem);
}

/* Fullscreen wallpaper mode positioning (desktop) */
html[data-wallpaper-mode="fullscreen"] #main-content-wrapper {
  position: absolute !important;
  top: 100vh !important;
  margin-top: 0 !important;
}

/* Overlay wallpaper mode — content below navbar */
html[data-wallpaper-mode="overlay"] #main-content-wrapper {
  top: 5.5rem !important;
}

/* None wallpaper mode — solid background, content below navbar */
html[data-wallpaper-mode="none"] #main-content-wrapper {
  top: 5.5rem !important;
}