.article-hero { background: hsl(210, 40%, 96.1%); padding: 2rem 0 0; }
.article-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 768px) { .article-hero-inner { grid-template-columns: 1fr; gap: 2rem; } }
.article-hero-content { padding: 2rem 0 3rem; }
.article-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: hsl(215.4, 16.3%, 46.9%); margin-bottom: 1.5rem; }
.article-hero-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 2.5rem; font-weight: 700; color: hsl(222.2, 84%, 4.9%); line-height: 1.2; margin-bottom: 1.5rem; }
@media (max-width: 768px) { .article-hero-title { font-size: 1.75rem; } }
.share-buttons { display: flex; align-items: center; gap: 0.75rem; }
.share-label { font-size: 0.875rem; color: hsl(215.4, 16.3%, 46.9%); font-weight: 500; }
.share-btn { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.75rem; transition: transform 0.2s ease; text-decoration: none; border: none; cursor: pointer; }
.share-btn:hover { transform: scale(1.1); }
.share-btn.facebook { background: #1877f2; }
.share-btn.twitter { background: #000; }
.share-btn.pinterest { background: #e60023; }
.share-btn.whatsapp { background: #25d366; }
.share-btn.copy { background: hsl(215.4, 16.3%, 46.9%); }
.article-hero-image { height: 100%; min-height: 300px; background: linear-gradient(135deg, hsl(172.5, 77.4%, 36%) 0%, hsl(173, 58%, 39%) 100%); border-radius: 1rem 1rem 0 0; display: flex; align-items: center; justify-content: center; }
.article-hero-image svg { width: 80px; height: 80px; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.5; fill: none; }
@media (max-width: 768px) { .article-hero-image { border-radius: 1rem; min-height: 200px; } }
.article-body { padding: 4rem 0; background: white; }
.article-content { max-width: 720px; margin: 0 auto; }
.article-content h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.75rem; font-weight: 700; color: hsl(222.2, 84%, 4.9%); margin: 2.5rem 0 1rem; line-height: 1.3; }
.article-content h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.25rem; font-weight: 600; color: hsl(222.2, 84%, 4.9%); margin: 2rem 0 0.75rem; }
.article-content p { font-size: 1.0625rem; line-height: 1.8; color: hsl(215.4, 16.3%, 36.9%); margin-bottom: 1.5rem; }
.article-content ul, .article-content ol { margin: 1.5rem 0; padding-left: 1.5rem; }
.article-content li { font-size: 1.0625rem; line-height: 1.8; color: hsl(215.4, 16.3%, 36.9%); margin-bottom: 0.75rem; }
.article-content blockquote { border-left: 4px solid hsl(172.5, 77.4%, 36%); padding-left: 1.5rem; margin: 2rem 0; font-style: italic; color: hsl(215.4, 16.3%, 46.9%); }
.article-content table { width: 100%; border-collapse: collapse; margin: 2rem 0; }
.article-content th, .article-content td { padding: 1rem; text-align: left; border-bottom: 1px solid hsl(214.3, 31.8%, 91.4%); }
.article-content th { font-weight: 600; color: hsl(222.2, 84%, 4.9%); background: hsl(210, 40%, 96.1%); }
.article-content strong { color: hsl(222.2, 84%, 4.9%); font-weight: 600; }
.continue-reading { background: hsl(210, 40%, 96.1%); padding: 3rem 0; }
.continue-reading-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; background: white; border-radius: 1rem; overflow: hidden; }
@media (max-width: 768px) { .continue-reading-inner { grid-template-columns: 1fr; } }
.continue-reading-content { padding: 2rem; }
.continue-reading-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(215.4, 16.3%, 46.9%); margin-bottom: 0.75rem; }
.continue-reading-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 700; color: hsl(222.2, 84%, 4.9%); margin-bottom: 1rem; line-height: 1.3; }
.continue-reading-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: hsl(172.5, 77.4%, 36%); text-decoration: none; }
.continue-reading-link:hover { text-decoration: underline; }
.continue-reading-image { height: 200px; background: linear-gradient(135deg, hsl(172.5, 77.4%, 36%) 0%, hsl(173, 58%, 39%) 100%); display: flex; align-items: center; justify-content: center; }
.continue-reading-image svg { width: 48px; height: 48px; stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.5; fill: none; }