/* 
* EkoEnergie - Blog Stylesheet
* Author: EkoEnergie Team
* Version: 1.0
*/

/* ===== Blog Hero ===== */
.blog-hero {
    background-color: var(--primary-dark);
    color: var(--text-white);
    padding: var(--spacing-xxl) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.blog-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%234CAF50' fill-opacity='0.2' d='M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,117.3C960,107,1056,149,1152,154.7C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    opacity: 0.2;
}

.blog-hero-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

.blog-hero h1 {
    margin-bottom: var(--spacing-md);
    font-size: 2.8rem;
}

.blog-hero p {
    font-size: 1.2rem;
    opacity: 0.9;
}

/* ===== Blog Listing ===== */
.blog-listing {
    padding: var(--spacing-xxl) 0;
    background-color: var(--bg-white);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-xl);
}

.blog-item {
    background-color: var(--bg-light);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.blog-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.blog-item .blog-image {
    height: 250px;
    background-size: cover;
    background-position: center;
}

.blog-item:nth-child(1) .blog-image {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500'%3E%3Crect width='800' height='500' fill='%23A5D6A7'/%3E%3Cpath d='M0 350 L800 400 L800 500 L0 500 Z' fill='%234CAF50'/%3E%3Ccircle cx='650' cy='150' r='100' fill='%23FFC107' opacity='0.8'/%3E%3Cpath d='M650 50 L650 150 L550 150' stroke='%23FFFFFF' stroke-width='10' fill='none'/%3E%3Crect x='100' y='200' width='200' height='150' fill='%233F51B5' opacity='0.7'/%3E%3Cpath d='M200 200 L400 350' stroke='%23FFFFFF' stroke-width='5' stroke-dasharray='10,5' fill='none'/%3E%3C/svg%3E");
}

.blog-item:nth-child(2) .blog-image {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500'%3E%3Crect width='800' height='500' fill='%2381C784'/%3E%3Crect x='100' y='100' width='600' height='300' fill='%234CAF50' opacity='0.7'/%3E%3Ccircle cx='400' cy='250' r='150' fill='%23FFC107' opacity='0.5'/%3E%3Cpath d='M250 100 L400 250 L550 100' stroke='%23FFFFFF' stroke-width='8' fill='none'/%3E%3Crect x='250' y='300' width='300' height='50' fill='%23FFFFFF' opacity='0.8'/%3E%3Cpath d='M250 300 L550 300' stroke='%234CAF50' stroke-width='5' stroke-dasharray='15,10' fill='none'/%3E%3C/svg%3E");
}

.blog-item:nth-child(3) .blog-image {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500'%3E%3Crect width='800' height='500' fill='%23C8E6C9'/%3E%3Cpath d='M0 0 L800 0 L800 200 L0 300 Z' fill='%234CAF50' opacity='0.6'/%3E%3Ccircle cx='200' cy='200' r='100' fill='%232196F3' opacity='0.7'/%3E%3Cpath d='M300 200 L500 200' stroke='%23FFFFFF' stroke-width='15' fill='none'/%3E%3Crect x='500' y='150' width='100' height='300' fill='%23FFC107' opacity='0.8'/%3E%3Cpath d='M500 450 L600 450' stroke='%234CAF50' stroke-width='10' stroke-dasharray='20,10' fill='none'/%3E%3C/svg%3E");
}

.blog-item:nth-child(4) .blog-image {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500'%3E%3Crect width='800' height='500' fill='%23E8F5E9'/%3E%3Cpath d='M0 250 C100 200, 200 300, 300 250 C400 200, 500 300, 600 250 C700 200, 800 300, 900 250 L900 500 L0 500 Z' fill='%234CAF50' opacity='0.5'/%3E%3Crect x='200' y='100' width='400' height='100' fill='%23FFC107' opacity='0.6'/%3E%3Ccircle cx='400' cy='300' r='80' fill='%232196F3' opacity='0.6'/%3E%3Cpath d='M250 150 L350 150 L350 250 L450 250 L450 150 L550 150' stroke='%23FFFFFF' stroke-width='10' fill='none'/%3E%3C/svg%3E");
}

.blog-content {
    padding: var(--spacing-xl);
}

.blog-meta {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    font-size: 0.9rem;
}

.blog-date, .blog-category {
    color: var(--text-light);
}

.blog-category {
    position: relative;
    padding-left: var(--spacing-md);
}

.blog-category::before {
    content: '•';
    position: absolute;
    left: 0;
}

.blog-item h2 {
    margin-bottom: var(--spacing-md);
    font-size: 1.5rem;
    transition: color var(--transition-fast);
}

.blog-item:hover h2 {
    color: var(--primary-color);
}

.blog-item p {
    margin-bottom: var(--spacing-lg);
    color: var(--text-light);
}

/* ===== Article Content ===== */
.article-content {
    padding: var(--spacing-xxl) 0;
    background-color: var(--bg-white);
}

.article-header {
    margin-bottom: var(--spacing-xl);
}

.article-meta {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    font-size: 0.9rem;
}

.article-date, .article-category {
    color: var(--text-light);
}

.article-category {
    position: relative;
    padding-left: var(--spacing-md);
}

.article-category::before {
    content: '•';
    position: absolute;
    left: 0;
}

.article-header h1 {
    margin-bottom: var(--spacing-lg);
    font-size: 2.5rem;
    line-height: 1.2;
}

.article-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.author-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--primary-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='20' r='12' fill='%23FFFFFF'/%3E%3Cpath d='M10,60 V45 C10,35 20,30 30,30 C40,30 50,35 50,45 V60 Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-weight: 600;
    color: var(--text-dark);
}

.author-title {
    font-size: 0.9rem;
    color: var(--text-light);
}

.article-body {
    max-width: 800px;
    margin: 0 auto;
}

.featured-image {
    height: 400px;
    margin-bottom: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    background-size: cover;
    background-position: center;
}

article:nth-of-type(1) .featured-image {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Crect width='1200' height='600' fill='%23E8F5E9'/%3E%3Cpath d='M0 400 L1200 500 L1200 600 L0 600 Z' fill='%234CAF50' opacity='0.6'/%3E%3Ccircle cx='900' cy='200' r='150' fill='%23FFC107' opacity='0.8'/%3E%3Cpath d='M900 50 L900 200 L750 200' stroke='%23FFFFFF' stroke-width='15' fill='none'/%3E%3Crect x='150' y='250' width='300' height='200' fill='%233F51B5' opacity='0.6'/%3E%3Cpath d='M300 250 L600 450' stroke='%23FFFFFF' stroke-width='8' stroke-dasharray='15,10' fill='none'/%3E%3C/svg%3E");
}

article:nth-of-type(2) .featured-image {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Crect width='1200' height='600' fill='%23E1F5FE'/%3E%3Cpath d='M0 0 L1200 0 L1200 300 L0 450 Z' fill='%232196F3' opacity='0.4'/%3E%3Crect x='200' y='200' width='800' height='150' fill='%234CAF50' opacity='0.5'/%3E%3Ccircle cx='300' cy='400' r='100' fill='%23FFC107' opacity='0.7'/%3E%3Cpath d='M450 200 L700 200 L700 350 L950 350' stroke='%23FFFFFF' stroke-width='10' fill='none'/%3E%3C/svg%3E");
}

article:nth-of-type(3) .featured-image {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Crect width='1200' height='600' fill='%23F1F8E9'/%3E%3Cpath d='M0 300 C200 250, 400 350, 600 300 C800 250, 1000 350, 1200 300 L1200 600 L0 600 Z' fill='%234CAF50' opacity='0.4'/%3E%3Ccircle cx='600' cy='200' r='120' fill='%232196F3' opacity='0.6'/%3E%3Cpath d='M200 200 L1000 200' stroke='%23FFC107' stroke-width='15' stroke-dasharray='40,20' fill='none'/%3E%3Crect x='400' y='350' width='400' height='100' fill='%233F51B5' opacity='0.4'/%3E%3C/svg%3E");
}

article:nth-of-type(4) .featured-image {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Crect width='1200' height='600' fill='%23FFF8E1'/%3E%3Cpath d='M0 450 L1200 350 L1200 600 L0 600 Z' fill='%23FFC107' opacity='0.5'/%3E%3Ccircle cx='300' cy='200' r='130' fill='%234CAF50' opacity='0.6'/%3E%3Cpath d='M600 100 L600 500' stroke='%232196F3' stroke-width='12' stroke-dasharray='30,15' fill='none'/%3E%3Crect x='700' y='150' width='300' height='200' fill='%233F51B5' opacity='0.3'/%3E%3C/svg%3E");
}

.article-body h2 {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    color: var(--primary-dark);
    font-size: 1.8rem;
}

.article-body h3 {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    color: var(--text-dark);
    font-size: 1.4rem;
}

.article-body p {
    margin-bottom: var(--spacing-md);
    line-height: 1.7;
}

.article-body ul, .article-body ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-xl);
}

.article-body li {
    margin-bottom: var(--spacing-sm);
}

.article-quote {
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-xl);
    background-color: var(--bg-light);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--border-radius-md);
}

.article-quote blockquote {
    margin: 0;
    font-style: italic;
}

.article-quote p {
    margin-bottom: var(--spacing-sm);
    font-size: 1.1rem;
}

.article-quote cite {
    display: block;
    font-style: normal;
    font-size: 0.9rem;
    color: var(--text-light);
    text-align: right;
}

.article-tip {
    display: flex;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: rgba(76, 175, 80, 0.1);
    border-radius: var(--border-radius-md);
}

.tip-icon {
    color: var(--primary-color);
    font-size: 1.5rem;
    min-width: 30px;
}

.tip-content h3 {
    margin-top: 0;
    font-size: 1.2rem;
    color: var(--primary-dark);
}

.tip-content p {
    margin-bottom: 0;
}

.article-image {
    margin: var(--spacing-xl) 0;
    text-align: center;
}

.article-image svg {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}

.image-caption, .chart-caption, .map-caption {
    display: block;
    margin-top: var(--spacing-sm);
    font-size: 0.9rem;
    color: var(--text-light);
    text-align: center;
}

.article-chart {
    margin: var(--spacing-xl) 0;
    text-align: center;
}

.chart-container {
    background-color: var(--bg-light);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}

.article-chart svg {
    max-width: 100%;
    height: auto;
}

.article-comparison {
    margin: var(--spacing-xl) 0;
}

.comparison-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding: 0 var(--spacing-lg);
}

.comparison-title {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--primary-dark);
}

.comparison-vs {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--text-light);
}

.comparison-image {
    background-color: var(--bg-light);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}

.comparison-image svg {
    max-width: 100%;
    height: auto;
}

.article-map {
    margin: var(--spacing-xl) 0;
    text-align: center;
}

.map-container {
    background-color: var(--bg-light);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}

.article-map svg {
    max-width: 100%;
    height: auto;
}

/* Article SVG styling */
.thermostat-body {
    fill: #263238;
    stroke: #455A64;
    stroke-width: 1;
}

.thermostat-display {
    fill: #E0F2F1;
    stroke: #B2DFDB;
    stroke-width: 1;
}

.thermostat-temp {
    fill: #00897B;
    font-size: 24px;
    font-weight: bold;
    text-anchor: middle;
}

.thermostat-controls {
    stroke: #00897B;
    stroke-width: 4;
    stroke-linecap: round;
}

.thermostat-label {
    fill: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
}

.bar {
    fill: var(--primary-color);
    opacity: 0.8;
}

.chart-title {
    font-size: 16px;
    font-weight: bold;
    fill: var(--text-dark);
}

.chart {
    width: 100%;
    height: auto;
}

.grid line, .grid path {
    stroke: #ccc;
    stroke-width: 1;
}

.labels text {
    fill: var(--text-light);
    font-size: 12px;
}

.label-title {
    font-weight: bold;
    font-size: 14px;
    fill: var(--text-dark);
}

.data-line {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 3;
}

.data-points circle {
    fill: var(--primary-color);
    stroke: white;
    stroke-width: 2;
}

.house-shape {
    fill: #E0E0E0;
    stroke: #9E9E9E;
    stroke-width: 2;
}

.roof {
    fill: none;
    stroke: #795548;
    stroke-width: 3;
}

.door {
    fill: #5D4037;
    stroke: #3E2723;
    stroke-width: 1;
}

.window {
    fill: #BBDEFB;
    stroke: #64B5F6;
    stroke-width: 1;
}

.window-frame {
    fill: none;
    stroke: #1976D2;
    stroke-width: 1;
}

.insulation {
    stroke: #F44336;
    stroke-width: 1;
}

.solar-panel {
    fill: #1E88E5;
    stroke: #0D47A1;
    stroke-width: 1;
}

.solar-lines {
    stroke: #0D47A1;
    stroke-width: 1;
}

.house-illustration {
    max-width: 100%;
    height: auto;
}

.energy-comparison .house {
    fill: #E0E0E0;
    stroke: #9E9E9E;
    stroke-width: 2;
}

.energy-comparison .roof {
    fill: #795548;
    stroke: #5D4037;
    stroke-width: 1;
}

.energy-comparison .door {
    fill: #5D4037;
    stroke: #3E2723;
    stroke-width: 1;
}

.energy-comparison .window {
    fill: #BBDEFB;
    stroke: #64B5F6;
    stroke-width: 1;
}

.energy-comparison .panel {
    fill: #1E88E5;
    stroke: #0D47A1;
    stroke-width: 1;
}

.energy-comparison .sun {
    fill: #FFC107;
    stroke: #FFA000;
    stroke-width: 1;
}

.energy-comparison .sun-rays {
    stroke: #FFA000;
    stroke-width: 2;
}

.energy-comparison .turbine-pole {
    stroke: #9E9E9E;
    stroke-width: 4;
}

.energy-comparison .turbine-hub {
    fill: #E0E0E0;
    stroke: #9E9E9E;
    stroke-width: 1;
}

.energy-comparison .blade {
    stroke: #E0E0E0;
    stroke-width: 2;
}

.energy-comparison .wind {
    fill: none;
    stroke: #90CAF9;
    stroke-width: 2;
    stroke-dasharray: 5,3;
}

.comparison-image {
    text-align: center;
}

.czech-map .map-outline {
    fill: #E8F5E9;
    stroke: #81C784;
    stroke-width: 2;
}

.czech-map .solar-potential {
    fill: #FFC107;
    opacity: 0.6;
    stroke: #FFA000;
    stroke-width: 1;
}

.czech-map .solar-potential.high {
    fill: #FFA000;
    opacity: 0.8;
}

.czech-map .wind-potential {
    fill: #2196F3;
    opacity: 0.6;
    stroke: #1976D2;
    stroke-width: 1;
}

.czech-map .wind-potential.high {
    fill: #1976D2;
    opacity: 0.8;
}

.czech-map .city-label {
    fill: #424242;
    font-size: 14px;
    font-weight: bold;
}

.chart .breakeven {
    fill: #F44336;
    stroke: white;
    stroke-width: 2;
}

.chart .solar-return {
    stroke: #4CAF50;
    stroke-width: 3;
}

.chart .wind-return {
    stroke: #2196F3;
    stroke-width: 3;
}

.chart .investment-line {
    stroke-dasharray: 5,5;
    stroke-width: 2;
}

.chart .investment-line.solar {
    stroke: #4CAF50;
}

.chart .investment-line.wind {
    stroke: #2196F3;
}

.chart .legend-line {
    stroke-width: 3;
}

.chart .legend-line.solar-return {
    stroke: #4CAF50;
}

.chart .legend-line.wind-return {
    stroke: #2196F3;
}

.pie .slice1 {
    fill: #4CAF50;
}

.pie .slice2 {
    fill: #2196F3;
}

.pie .slice3 {
    fill: #FFC107;
}

.pie .slice4 {
    fill: #9C27B0;
}

.pie .slice5 {
    fill: #F44336;
}

.legend-color {
    stroke: #424242;
    stroke-width: 0.5;
}

.funding-process .process-box {
    fill: #E8F5E9;
    stroke: #4CAF50;
    stroke-width: 2;
}

.funding-process .arrow {
    fill: #4CAF50;
}

.funding-process .arrow-line {
    stroke: #4CAF50;
    stroke-width: 2;
}

.funding-process .process-note {
    fill: #757575;
    font-size: 12px;
}

.comparison-table {
    margin: var(--spacing-xl) 0;
    overflow-x: auto;
}

.comparison-table table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #E0E0E0;
}

.comparison-table th {
    background-color: var(--primary-dark);
    color: var(--text-white);
    padding: var(--spacing-md);
    text-align: left;
}

.comparison-table th:first-child {
    width: 30%;
}

.comparison-table td {
    padding: var(--spacing-md);
    border-bottom: 1px solid #E0E0E0;
    vertical-align: top;
}

.comparison-table tr:nth-child(even) {
    background-color: var(--bg-light);
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: var(--spacing-xl) 0;
}

.tag {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    background-color: var(--bg-light);
    border-radius: var(--border-radius-md);
    font-size: 0.85rem;
    color: var(--text-light);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.tag:hover {
    background-color: var(--primary-light);
    color: var(--text-dark);
}

.article-share {
    margin: var(--spacing-xl) 0;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--bg-light);
}

.article-share h3 {
    margin-bottom: var(--spacing-md);
    font-size: 1.2rem;
}

.share-buttons {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-md);
    font-size: 0.9rem;
    transition: all var(--transition-fast);
}

.share-btn.facebook {
    background-color: #3b5998;
    color: var(--text-white);
}

.share-btn.twitter {
    background-color: #1da1f2;
    color: var(--text-white);
}

.share-btn.linkedin {
    background-color: #0077b5;
    color: var(--text-white);
}

.share-btn.email {
    background-color: var(--bg-light);
    color: var(--text-dark);
}

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    color: var(--text-white);
}

.share-btn.email:hover {
    color: var(--text-dark);
}

.related-articles {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--bg-light);
}

.related-articles h3 {
    margin-bottom: var(--spacing-lg);
    font-size: 1.2rem;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.related-article {
    padding: var(--spacing-md);
    background-color: var(--bg-light);
    border-radius: var(--border-radius-md);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.related-article:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.related-article a {
    display: block;
    color: var(--text-dark);
}

.related-article h4 {
    margin-bottom: var(--spacing-xs);
    font-size: 1rem;
    transition: color var(--transition-fast);
}

.related-article:hover h4 {
    color: var(--primary-color);
}

.related-date {
    font-size: 0.85rem;
    color: var(--text-light);
}

/* Responsive styles */
@media (max-width: 992px) {
    .blog-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .featured-image {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .blog-hero h1 {
        font-size: 2.2rem;
    }
    
    .blog-grid {
        grid-template-columns: 1fr;
    }
    
    .article-header h1 {
        font-size: 2rem;
    }
    
    .article-quote {
        padding: var(--spacing-md);
    }
    
    .article-quote p {
        font-size: 1rem;
    }
    
    .share-buttons {
        flex-direction: column;
    }
    
    .share-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .blog-hero h1 {
        font-size: 1.8rem;
    }
    
    .blog-item .blog-image {
        height: 200px;
    }
    
    .article-header h1 {
        font-size: 1.6rem;
    }
    
    .featured-image {
        height: 200px;
    }
    
    .article-author {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .article-body h2 {
        font-size: 1.4rem;
    }
    
    .article-body h3 {
        font-size: 1.2rem;
    }
    
    .article-tip {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .comparison-header {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .related-grid {
        grid-template-columns: 1fr;
    }
}