/* === Common Page Styles === */
.page-main { min-height: 60vh; }

/* === Content Main Card Spacing === */
.content-main .card + .card { margin-top: var(--space--md); }

/* === Index Page === */
.slider-container { overflow: hidden; }

/* === Detail Page === */
.detail__header { margin-bottom: var(--space--md); }
@media (min-width: 768px) {
    .detail__header { margin-bottom: var(--space--lg); }
}
.detail__title { font-size: var(--font__size--lg); margin-bottom: var(--space--sm); line-height: 1.4; }
@media (min-width: 768px) {
    .detail__title { font-size: var(--font__size--xl); margin-bottom: var(--space--md); }
}
.detail__meta { display: flex; flex-wrap: wrap; gap: var(--space--sm); color: var(--color__text--light); font-size: var(--font__size--xs); border-bottom: 1px solid var(--color__border); padding-bottom: var(--space--sm); margin-bottom: var(--space--md); }
@media (min-width: 768px) {
    .detail__meta { gap: var(--space--md); font-size: var(--font__size--sm); padding-bottom: var(--space--md); margin-bottom: var(--space--lg); }
}
.detail__meta i { margin-right: 4px; vertical-align: middle; }
.detail__content { font-size: var(--font__size--sm); line-height: 1.8; overflow-wrap: break-word; word-wrap: break-word; }
@media (min-width: 768px) {
    .detail__content { font-size: var(--font__size--base); }
}
.detail__content p { margin-bottom: var(--space--md); text-indent: 2em; }
.detail__content img { max-width: 100%; width: 100%; height: auto; margin: var(--space--md) auto; border-radius: var(--radius__sm); }
@media (min-width: 768px) {
    .detail__content img { width: auto; max-width: 100%; }
}
.detail__content strong { word-break: break-word; }
.detail__actions { display: flex; flex-wrap: wrap; gap: var(--space--sm); padding-top: var(--space--md); border-top: 1px solid var(--color__border--light); margin-top: var(--space--lg); }

/* === Card Body Mobile Optimization === */
@media (max-width: 767px) {
    .card__body { padding: var(--space--sm); }
    .card__header { padding: var(--space--sm); }
}

/* === Sidebar Sticky === */
@media (min-width: 992px) {
    .sidebar { position: sticky; top: calc(var(--header__height) + 32px); height: fit-content; }
}

/* === Sidebar card spacing === */
.sidebar .card + .card { margin-top: var(--space--md); }

/* === Article Item Mobile Optimization === */
@media (max-width: 575px) {
    .article-item__desc { display: none; }
    .article-item__meta { flex-wrap: wrap; }
    .article-item__actions { margin-left: 0; margin-top: var(--space--xs); width: 100%; }
}