.section--banner {
    background-image: var(--bg-mobile, var(--bg-tablet, var(--bg-desktop)));
}
.wrap--banner {
    height: 50vh;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.banner-title {
    color: var(--background-color);
    font-size: 3.5rem;
    /* font-family: inherit; */
    text-shadow: 2px 2px 8px var(--brand-black-color);
}

/* 
 * 1. CSS 变量定义 (建议放在 :root 中，这里为了演示放在组件根部)
 * -------------------------------------------------------------------------- */
.section--single-event {
background: linear-gradient(to bottom, var(--brand-grey-color), var(--brand-ivory-color));
  color: var(--brand-black-color);
  background-color: var(--brand-grey-color);
}

.section--single-event h1,
.section--single-event h2,
.section--single-event h3,
.section--single-event p,
.section--single-event a {
  color: var(--brand-black-color);
}
/* 
 * 2. 整体布局容器
 * -------------------------------------------------------------------------- */
.event-single-layout {
    max-width: 900px;      /* 限制内容最大宽度，提升阅读体验 */
    margin: 0 auto;        /* 居中显示 */
    padding: 2rem 0; /* 内边距 */
    color: var(--event-text-color);
}

/* 
 * 3. 活动头部区域 (标题、副标题、日期)
 * -------------------------------------------------------------------------- */
.event-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--brand-grey-color);
    text-align: center; /* 头部信息居中 */
}

.event-title {
    /* color: var(--event-text-color); */
    margin-bottom: 0.25em;
    /* font-size: 1.7em; */
}

.event-subtitle {
    /* color: var(--event-meta-color); */
    margin-top: 0;
    margin-bottom: 1em;
}

.event-meta {
    /* color: var(--event-meta-color); */
}

.event-meta strong {
    /* color: var(--event-text-color); */
}

/* 
 * 4. 活动海报
 * -------------------------------------------------------------------------- */
.event-poster {
    margin-bottom: 2.5rem;
}

.event-poster__image {
    display: block;
    width: 100%;
    height: auto; /* 保持图片原始比例 */
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 添加一点阴影提升质感 */
    justify-self: center;
}

/* 
 * 5. 活动详情/规则 (来自 the_content())
 * -------------------------------------------------------------------------- */
.event-description {
    line-height: 1.7; /* 提升正文可读性 */
}

.event-description h2,
.event-description h3 {
    /* color: var(--event-text-color); */
    margin-top: 2em;
    margin-bottom: 1em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--brand-grey-color);
}

.event-description p {
    margin-bottom: 1em;
}

.event-description ul,
.event-description ol {
    padding-left: 1.5em;
    margin-bottom: 1em;
}
@media (min-width: 768px) {
    .section--banner {
  background-image:  var(--bg-tablet, var(--bg-desktop));
    }
    .event-poster__image {
    max-width: 500px;
}

}

@media (min-width: 1024px) {
  .section--banner {
  background-image:  var(--bg-desktop);
}
}