/*
 * 全站左侧栏 — 对齐 bayase.com WPCode 3463 中左栏相关样式。
 * 三列布局仅在左栏节点存在时启用（:has），避免「有右栏无左栏」空出一列。
 *
 * 侧栏相关数值优先跟 Blocksy 主题变量（Customize → Sidebars）：
 *   --sidebar-width / --sidebar-gap / --sidebar-offset
 * 左栏自身宽度用 --left-sidebar-width（与线上 WPCode 一致，默认 15%）。
 */
:root {
  --left-sidebar-width: 15%;
}

main#main .ct-container[data-sidebar]:has(> .app-left-sidebar-container) {
  grid-template-columns: var(--left-sidebar-width, 15%) minmax(0, 1fr) var(--sidebar-width, 20%);
  column-gap: var(--sidebar-gap, 4%);
}

.app-left-sidebar-container {
  /* 宽度由上方 grid-template-columns 的 --left-sidebar-width 决定；
   * 这里再写 15% 会相对于「格子」二次缩放（约变成 29px）。 */
  width: 100%;
  max-width: none;
  min-width: 0;
}

.app-left-sidebar {
  width: 100%;
  position: sticky;
  /* 与 Blocksy 右栏同一套变量，不在此写死 offset 数值 */
  top: calc(
    var(--sidebar-offset, 0px) + var(--admin-bar, 0px) + var(--theme-frame-size, 0px) +
      (var(--header-sticky-height, 60px) * var(--sticky-shrink, 100) / 100)
  );
  align-self: flex-start;
  z-index: 10;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 全局放大 */
.g-site-ani-scale {
  transition: transform 0.3s;
}

.g-site-ani-scale:hover {
  transform: scale(1.05);
}

/* 广告位 */
.g-site-slot {
  width: 100%;
  overflow: hidden;
}

.g-site-slot img {
  width: 100%;
  height: auto;
  display: block;
}

.app-left-sidebar .g-site-slot {
  aspect-ratio: 54 / 29;
}

/* shark 扫光 */
.app-ani-shark-box {
  position: relative;
}

.app-ani-shark-box::after {
  content: "";
  position: absolute;
  inset: -20%;
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0) 60%
  );
  animation: bayase-bp-shark-wrap 2s infinite;
  transform: translateX(-100%);
  pointer-events: none;
}

@keyframes bayase-bp-shark-wrap {
  to {
    transform: translateX(100%);
  }
}

/* 作者卡 */
.site-profile-card .avatar-wrapper {
  position: relative;
  display: inline-block;
}

.site-profile-card .avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0px 4px 8px rgba(0, 0, 0, 0.04),
    0px 0px 2px rgba(0, 0, 0, 0.06),
    0px 0px 1px rgba(0, 0, 0, 0.04);
}

.site-profile-card .emoji {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  box-shadow:
    0px 10px 20px rgba(0, 0, 0, 0.04),
    0px 2px 6px rgba(0, 0, 0, 0.04),
    0px 0px 1px rgba(0, 0, 0, 0.04);
}

.site-profile-card .title {
  font-size: 18px;
  font-weight: bold;
  margin: 12px 0 8px;
  text-align: left;
}

.site-profile-card .desc {
  font-size: 16px;
  line-height: 1.5;
  color: #555;
  text-align: left;
  margin: 0;
}

/* 推广 Banner */
.g-site-promo-activity .g-site-promo-activity-item {
  width: 100%;
  margin-bottom: 0.8em;
  border-radius: 0.6em;
  overflow: hidden;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  position: relative;
}

.g-site-promo-activity .g-site-promo-activity-item img {
  width: 100%;
  height: auto;
  display: block;
}

.g-site-promo-activity .g-site-promo-activity-item:last-child {
  margin-bottom: unset;
}

.g-site-promo-activity .g-site-promo-activity-item:nth-child(2n)::after {
  animation-delay: 1s;
}

/* 平板：隐藏左栏，只保留内容 + 右栏 */
@media (min-width: 700px) and (max-width: 1000px) {
  main#main .ct-container[data-sidebar]:has(> .app-left-sidebar-container) {
    grid-template-columns: minmax(0, 1fr) var(--sidebar-width, 20%);
  }

  main#main .ct-container > .app-left-sidebar-container {
    display: none;
  }
}

/* 手机：单列 */
@media (max-width: 700px) {
  main#main .ct-container[data-sidebar]:has(> .app-left-sidebar-container) {
    grid-template-columns: minmax(0, 1fr);
  }

  main#main .ct-container > .app-left-sidebar-container,
  main#main .ct-container > #sidebar {
    display: none;
  }
}