.article-detail-page{background-color:var(--color-background-default);padding-top:var(--spacing-8);padding-bottom:var(--spacing-13)}.article-detail-container{max-width:var(--layout-main-max-width,1200px);padding-inline:var(--grid-desktop-margin,72px);margin-inline:auto}@media (max-width:1199px){.article-detail-container{padding-inline:var(--grid-tablet-margin,56px)}}@media (max-width:767px){.article-detail-container{padding-inline:var(--grid-mobile-margin,24px)}}.article-breadcrumb{align-items:center;gap:var(--spacing-2);font-size:var(--font-size-xs);color:var(--color-text-muted);margin-bottom:var(--spacing-7);white-space:nowrap;flex-wrap:nowrap;max-width:100%;display:flex;overflow:hidden}.article-breadcrumb a{color:var(--color-text-muted);transition:color var(--transition-fast);flex-shrink:0;text-decoration:none}.article-breadcrumb a:hover{color:var(--color-primary-500)}.breadcrumb-separator{color:var(--color-secondary-900);flex-shrink:0}.breadcrumb-current{color:var(--color-text-primary);font-weight:var(--font-weight-medium);text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.article-hero{text-align:right;max-width:860px;margin-inline:auto;margin-bottom:var(--spacing-8)}.article-category-wrap{margin-bottom:var(--spacing-4)}.article-category-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);color:var(--color-primary-500);padding:var(--spacing-1) var(--spacing-3);border-radius:var(--radius-sm);border:var(--border-width-default) solid #99132526;background-color:#99132514;display:inline-block}.article-main-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-black);color:var(--color-text-primary);margin-bottom:var(--spacing-5);letter-spacing:-.01em;line-height:1.35}@media (max-width:767px){.article-main-title{font-size:var(--font-size-lg)}}.article-excerpt{font-size:var(--font-size-md);font-weight:var(--font-weight-regular);color:var(--color-text-secondary);margin-bottom:var(--spacing-6);border-right:3px solid var(--color-primary-500);padding-right:var(--spacing-4);line-height:1.7}@media (max-width:767px){.article-excerpt{font-size:var(--font-size-sm)}}.article-meta-bar{align-items:center;gap:var(--spacing-6);padding-top:var(--spacing-4);border-top:var(--border-width-default) solid var(--color-secondary-900);font-size:var(--font-size-xs);color:var(--color-text-secondary);flex-wrap:wrap;display:flex}@media (max-width:767px){.article-meta-bar{align-items:flex-start;gap:var(--spacing-3);flex-direction:column}}.meta-item strong{color:var(--color-text-primary);font-weight:var(--font-weight-bold)}.article-cover-wrapper{margin-inline:auto;margin-bottom:var(--spacing-10);border-radius:var(--radius-sm);border:1px solid var(--color-border-default);background-color:var(--color-secondary-500);width:100%;height:400px;position:relative;overflow:hidden}@media (max-width:768px){.article-cover-wrapper{height:200px}}.article-cover-img{object-fit:cover;width:100%;max-height:520px;display:block}.article-content-wrapper{max-width:1140px;margin-inline:auto;margin-bottom:var(--spacing-12);gap:var(--spacing-8);grid-template-columns:1fr 340px;align-items:start;display:grid}.article-body-container{flex-direction:column;min-width:0;display:flex}.article-sidebar{align-self:start;position:sticky;top:100px}.article-promo-card{background-color:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-sm);box-shadow:var(--shadow-default);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);flex-direction:column;padding:0;display:flex;overflow:hidden}.article-promo-card:hover{border-color:var(--color-border-interactive);box-shadow:var(--shadow-interactive)}.promo-cover{background-color:var(--color-secondary-500);border-bottom:1px solid var(--color-border-default);height:180px;position:relative;overflow:hidden}.promo-img{object-fit:cover;width:100%;height:100%;transition:transform var(--transition-normal)}.article-promo-card:hover .promo-img{transform:scale(1.05)}.promo-badge{top:var(--spacing-3);right:var(--spacing-3);background-color:var(--color-primary-500);color:var(--text-white);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);padding:var(--spacing-1) var(--spacing-3);border-radius:var(--radius-sm);position:absolute}.promo-content{padding:var(--spacing-6);gap:var(--spacing-3);flex-direction:column;display:flex}.promo-title{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0;line-height:1.4}.promo-description{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-text-secondary);margin:0;line-height:1.7}.promo-cta-btn{width:100%;margin-top:var(--spacing-2);text-align:center;justify-content:center}@media (max-width:1023px){.article-content-wrapper{gap:var(--spacing-8);grid-template-columns:1fr}.article-sidebar{width:100%;max-width:480px;margin-inline:auto;position:static}}.article-paragraph{font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-text-primary);margin-bottom:var(--spacing-6);text-align:justify;line-height:1.95}.article-h2{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-top:var(--spacing-9);margin-bottom:var(--spacing-4);padding-bottom:var(--spacing-2);border-bottom:1px solid var(--color-secondary-900);line-height:1.4}.article-h3{font-size:var(--font-size-md);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-top:var(--spacing-7);margin-bottom:var(--spacing-3);line-height:1.5}.article-blockquote{margin-block:var(--spacing-7);padding:var(--spacing-6) var(--spacing-7);background-color:var(--color-secondary-500);border-right:4px solid var(--color-primary-500);border-radius:var(--radius-sm)}.article-blockquote p{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);margin:0;font-style:italic;line-height:1.8}.article-ul,.article-ol{margin-block:var(--spacing-5);padding-right:var(--spacing-6);gap:var(--spacing-3);flex-direction:column;display:flex}.article-ul li,.article-ol li{font-size:var(--font-size-sm);color:var(--color-text-primary);line-height:1.8}.article-ul li::marker{color:var(--color-primary-500)}.article-inline-media{margin-block:var(--spacing-8);border-radius:var(--radius-sm);border:1px solid var(--color-border-default);background-color:var(--color-secondary-500);overflow:hidden}.article-inline-media img{object-fit:cover;width:100%;max-height:440px;display:block}.media-caption{padding:var(--spacing-3) var(--spacing-5);font-size:var(--font-size-xs);color:var(--color-text-secondary);background-color:var(--color-neutral-100);border-top:var(--border-width-default) solid var(--color-secondary-900);text-align:center}.related-articles-section{margin-top:var(--spacing-12);margin-bottom:var(--spacing-12);padding-top:var(--spacing-10);border-top:1px solid var(--color-secondary-900)}.related-section-header{margin-bottom:var(--spacing-8);text-align:right}.related-section-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:var(--spacing-2);text-align:center}.related-section-subtitle{font-size:var(--font-size-xs);text-align:center;color:var(--color-text-muted)}.related-articles-grid{gap:var(--spacing-6);grid-template-columns:repeat(3,1fr);display:grid}@media (max-width:1199px){.related-articles-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:767px){.related-articles-grid{grid-template-columns:1fr}}.article-skeleton-hero{max-width:860px;margin-inline:auto;margin-bottom:var(--spacing-8)}.article-skeleton-category{width:120px;height:24px;margin-bottom:var(--spacing-4)}.article-skeleton-title{width:75%;height:44px;margin-bottom:var(--spacing-4)}.article-skeleton-subtitle{width:90%;height:24px;margin-bottom:var(--spacing-6)}.article-skeleton-meta{width:200px;height:20px;margin-bottom:var(--spacing-7)}.article-skeleton-cover{border-radius:var(--radius-sm);width:100%;height:420px;margin-bottom:var(--spacing-9)}.article-not-found{padding:var(--spacing-12) var(--spacing-4);text-align:center}.article-not-found-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold)}.article-not-found-text{margin-top:var(--spacing-4);color:var(--color-text-secondary);font-size:var(--font-size-sm)}.article-not-found-action{margin-top:var(--spacing-7)}
