.blog-post { padding-bottom: 60px; } .blog-hero { background: linear-gradient(135deg, var(--color-primary), #303f9f); color: white; text-align: center; display: flex; align-items: center; justify-content: center; margin-top: 80px; padding: 4rem 2rem; content-visibility: auto; contain-intrinsic-size: 0 500px; } .blog-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: rgba(255, 255, 255, 0.1); } .blog-hero .container { width: 100%; max-width: 1200px; margin: 0 auto; } .blog-index .blog-hero { padding: 5rem 2rem; } .blog-index .blog-hero h1 { font-size: 3.5rem; margin-bottom: 1.5rem; font-weight: 700; line-height: 1.2; } .blog-index .blog-hero .subtitle { font-size: 1.4rem; max-width: 700px; margin: 0 auto; line-height: 1.5; } .blog-post .blog-hero { padding: 4rem 2rem; } .blog-post .blog-hero h1 { font-size: 3rem; line-height: 1.2; margin-bottom: 1rem; max-width: 800px; margin-left: auto; margin-right: auto; font-weight: 700; } .post-header { margin-bottom: 2rem; } .post-meta { color: rgba(255, 255, 255, 0.8); margin: 1rem 0; } .post-meta time, .post-meta .reading-time { display: inline-block; margin: 0 0.5rem; } .post-content { max-width: 800px; margin: 0 auto; padding: 2rem 1rem; line-height: 1.8; } .post-content h2 { margin-top: 2.5rem; margin-bottom: 1.5rem; } .post-content h3 { margin-top: 2rem; margin-bottom: 1rem; } .post-content p { margin-bottom: 1.5rem; } .post-content ul { margin-bottom: 1.5rem; padding-left: 1.5rem; } .post-content li { margin-bottom: 0.5rem; } .comparison-box { margin: 2rem 0; padding: 1.5rem; background: var(--color-background-light); border-radius: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 100%; overflow-x: hidden; } .comparison-item { padding: 1rem; max-width: 100%; } .comparison-item h4 { margin-bottom: 1rem; color: var(--color-primary); } .comparison-item ul { list-style-position: inside; padding-left: 0; } .comparison-item li { text-wrap: wrap; overflow-wrap: break-word; word-break: break-word; hyphens: auto; } .cta-section { margin-top: 3rem; text-align: center; padding: 2rem; background: var(--color-background-light); border-radius: 8px; } .lead { font-size: 1.2rem; color: var(--color-text-light); margin-bottom: 2rem; } .blog-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; padding: 2rem 0; } .post-preview { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; padding: 2rem; } .post-preview h2 { font-size: 2rem; font-weight: 700; line-height: 1.3; margin-bottom: 1rem; } .post-preview h2 a { color: var(--color-primary); text-decoration: none; transition: color 0.2s ease; } .post-preview h2 a:hover { color: var(--color-primary-dark); } .post-preview .post-meta { font-size: 1.1rem; color: #666; margin-bottom: 1.5rem; } .post-preview .post-description { font-size: 1.15rem; line-height: 1.6; color: #444; margin-bottom: 1.5rem; } .post-preview .read-more { display: inline-block; color: var(--color-primary); font-weight: 500; text-decoration: none; font-size: 1.1rem; transition: all 0.2s ease; } .post-preview .read-more:hover { color: var(--color-primary-dark); transform: translateX(5px); } .pagination { margin: 3rem 0; display: flex; justify-content: center; } .pagination-content { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; justify-content: center; } .pagination-button { background: white; border: 1px solid #e0e0e0; padding: 0.75rem 1.25rem; border-radius: 6px; color: var(--color-primary); font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 0.5rem; } .pagination-button:hover { background: var(--color-primary); color: white; border-color: var(--color-primary); } .pagination-button.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .pagination-button i { font-size: 0.9rem; } .pagination-ellipsis { padding: 0.75rem 0.5rem; color: var(--color-text); font-weight: 500; } .blog-container, .blog-post-container { max-width: 1200px; margin: 0 auto; padding: 20px; } @media (max-width: 768px) { .blog-container, .blog-post-container { padding: 10px; } } @media (max-width: var(--breakpoint-tablet)) { .comparison-box { grid-template-columns: 1fr; gap: 1rem; } .post-content { padding: 0 1rem; } } @media (max-width: 768px) { .blog-hero { margin-top: 60px; padding: 3rem 1.5rem; } .blog-index .blog-hero { padding: 3.5rem 1.5rem; } .blog-index .blog-hero h1 { font-size: 2.5rem; margin-bottom: 1rem; } .blog-index .blog-hero .subtitle { font-size: 1.2rem; line-height: 1.4; padding: 0 1rem; } .blog-post .blog-hero h1 { font-size: 2.2rem; line-height: 1.3; } .post-content { padding: 1.5rem 1rem; } .post-content ul { padding-left: 0; list-style-position: inside; margin-right: 0; } .post-content li { margin-bottom: 0.8rem; text-wrap: wrap; overflow-wrap: break-word; word-break: break-word; hyphens: auto; } .comparison-box { grid-template-columns: 1fr; gap: 1rem; padding: 1rem; } .comparison-item { padding: 0.5rem; } .blog-posts { grid-template-columns: 1fr; padding: 1.5rem 0; } .post-preview { padding: 1.5rem; margin-bottom: 1.5rem; } .post-preview h2 { font-size: 1.75rem; } .post-preview .post-description { font-size: 1.1rem; } .pagination { margin: 2rem 0; } .pagination-button { padding: 0.6rem 1rem; font-size: 0.9rem; } .pagination-ellipsis { padding: 0.6rem 0.4rem; } } .scrollable-table { max-height: 400px; overflow-y: auto; }