/* blog-post-item.css — page-specific styles */

/* ── Navbar ── */

        /* ── Layout ── */
        .post-wrap { max-width: 1280px; margin: 0 auto; padding: 7rem 1.5rem 4rem; display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: start; }
        @media (max-width: 900px) { .post-wrap { grid-template-columns: 1fr; } }

        /* ── Article ── */
        .post-article { background: var(--bg-white); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
        .post-hero { width: 100%; max-height: 420px; object-fit: cover; display: block; }
        .post-
        .post-back { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); text-decoration: none; font-size: .88rem; font-weight: 600; margin-bottom: 1.5rem; }
        .post-back:hover { text-decoration: underline; }
        .post-meta { display: flex; align-items: center; gap: 1rem; font-size: .82rem; color: var(--text-light); margin-bottom: 1rem; flex-wrap: wrap; }
        .post-meta span { display: flex; align-items: center; gap: 4px; }
        .post-title { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; color: var(--text-primary); line-height: 1.25; margin-bottom: 2rem; }
        .post-content { color: var(--text-secondary); font-size: 1.05rem; }
        .post-content h2, .post-content h3 { color: var(--text-primary); font-weight: 700; margin: 2rem 0 0.75rem; }
        .post-content h2 { font-size: 1.4rem; }
        .post-content h3 { font-size: 1.15rem; }
        .post-content p { margin-bottom: 1.25rem; }
        .post-content ul, .post-content ol { margin: 0 0 1.25rem 1.5rem; }
        .post-content li { margin-bottom: 0.4rem; }
        .post-content strong { color: var(--text-primary); }
        .post-content a { color: var(--primary); }
        .post-content img { max-width: 100%; border-radius: var(--radius); margin: 1.5rem 0; }

        /* ── Sidebar ── */
        .sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
        .sidebar-card { background: var(--bg-white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
        .sidebar-title { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--primary); padding: 1.25rem 1.25rem 0.75rem; border-bottom: 2px solid var(--primary-50); }
        .recent-list { list-style: none; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
        .recent-item { display: flex; gap: 12px; align-items: flex-start; }
        .recent-img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
        .recent-item a { color: var(--text-primary); text-decoration: none; font-size: .85rem; font-weight: 600; line-height: 1.3; display: block; }
        .recent-item a:hover { color: var(--primary); }
        .recent-date { font-size: .74rem; color: var(--text-light); margin-top: 3px; }

        .cta-card { background: var(--primary); border-radius: var(--radius); padding: 1.5rem; text-align: center; color: white; }
        .cta-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
        .cta-card p { font-size: .84rem; opacity: .85; margin-bottom: 1.25rem; }
        .cta-card a { display: inline-block; background: white; color: var(--primary); font-weight: 700; font-size: .88rem; padding: 0.625rem 1.25rem; border-radius: 8px; text-decoration: none; }
        .cta-card a:hover { background: var(--primary-50); }

        /* ── Footer ── */