/* ========================================= BLOG DETAIL PAGE  —  blog-detail.css ========================================= */ :root { --bd-cyan: #29c3d4; --bd-cyan-dk: #1fa8b8; --bd-dark: #1a1a1a; --bd-text: #333; --bd-muted: #666; --bd-bg: #f0f0f0; --bd-white: #ffffff; --bd-border: #e5e9f0; --bd-shadow: 0 2px 14px rgba(0, 0, 0, 0.07); --bd-radius: 8px; } /* ─── Page shell ─── */ .bd-page { background: var(--bd-bg); min-height: 100vh; } .bd-outer { max-width: 1060px; margin: 0 auto; padding: 30px 20px 60px; box-sizing: border-box; } /* ─── Two-column layout ─── */ .bd-layout { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: start; } /* ========================================= ARTICLE (LEFT) ========================================= */ .bd-article { background: var(--bd-white); border-radius: var(--bd-radius); overflow: hidden; box-shadow: var(--bd-shadow); } /* ── Featured image hero ── */ .bd-hero-img { position: relative; width: 100%; overflow: hidden; max-height: 380px; line-height: 0; } .bd-hero-img img { width: 100%; height: 380px; object-fit: cover; display: block; transition: transform 0.5s ease; } .bd-hero-img:hover img { transform: scale(1.02); } /* Gradient overlay so white text reads clearly */ .bd-hero-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.55) 100% ); } /* Text pinned to bottom of hero image */ .bd-hero-meta { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 24px 22px; z-index: 2; } /* Teal category badge */ .bd-category-badge { display: inline-block; background: #d32029; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 15px 20px; border-radius: 20px; margin-bottom: 8px; } .bd-hero-title { color: #fff; font-size: 22px; font-weight: 900; line-height: 1.3; margin: 0 0 8px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); font-family: "Georgia", serif; } .bd-hero-info { color: rgba(255, 255, 255, 0.85); font-size: 12px; margin: 0; font-weight: 500; } /* No-image fallback header */ .bd-no-img-header { padding: 28px 28px 0; } .bd-plain-title { font-size: 24px; font-weight: 900; color: var(--bd-dark); margin: 10px 0 8px; font-family: "Georgia", serif; line-height: 1.3; } /* ── Article body ── */ .bd-body { padding: 28px 28px 8px; } .bd-body h2 { font-size: 20px; font-weight: 800; color: var(--bd-dark); margin: 28px 0 12px; line-height: 1.3; border-bottom: 2px solid var(--bd-border); padding-bottom: 8px; } .bd-body h3 { font-size: 17px; font-weight: 800; color: var(--bd-dark); margin: 22px 0 10px; } .bd-body p { font-size: 14px; color: var(--bd-text); line-height: 1.85; margin-bottom: 16px; } .bd-body ul, .bd-body ol { margin: 0 0 18px 18px; padding: 0; } .bd-body li { font-size: 14px; color: var(--bd-text); line-height: 1.75; margin-bottom: 6px; } .bd-body strong, .bd-body b { color: var(--bd-dark); font-weight: 700; } .bd-body a { color: #d32029; text-decoration: underline; } .bd-body a:hover { text-decoration: none; } /* Key Points / callout boxes inside body */ .bd-body blockquote { border-left: 4px solid var(--bd-cyan); background: #f0fbfc; margin: 16px 0; padding: 14px 18px; font-style: italic; color: var(--bd-muted); border-radius: 0 var(--bd-radius) var(--bd-radius) 0; } /* ========================================= FAQ SECTION ========================================= */ .bd-faq { background: #fff8dc; padding: 50px 0 60px; } .bd-faq-heading { font-size: 36px; font-weight: 800; color: #1a1a1a; margin: 0 0 40px; line-height: 1.2; } .bd-faq-heading span { color: #8b1a1a; } .bd-faq-item { border-top: 1px solid #e8d5a3; padding: 20px 0; } .bd-faq-item:last-child { border-bottom: 1px solid #e8d5a3; } .bd-faq-question { display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; padding: 4px 0; } .bd-faq-question strong { font-size: 16px; font-weight: 700; color: #1a1a1a; line-height: 1.5; flex: 1; } .bd-faq-number { color: #8b1a1a; margin-right: 6px; } .bd-faq-toggle { width: 32px; height: 32px; min-width: 32px; background: #8b1a1a; color: white; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 300; flex-shrink: 0; } .bd-faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; } .bd-faq-item.active .bd-faq-answer { max-height: 500px; padding-top: 16px; } .bd-faq-answer-inner { background: white; border: 1px solid #8b1a1a; padding: 20px 24px; font-size: 15px; line-height: 1.7; color: #333333; overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; } .bd-faq-answer-inner p { margin: 0 0 12px 0; } .bd-faq-answer-inner p:last-child { margin-bottom: 0; } .bd-faq-answer-inner * { max-width: 100%; } /* ========================================= SIDEBAR (RIGHT) ========================================= */ .bd-sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 20px; } /* ── Widget shell ── */ .bd-widget { background: var(--bd-white); border-radius: var(--bd-radius); box-shadow: var(--bd-shadow); overflow: hidden; } .bd-widget-title { font-size: 13px; font-weight: 800; color: var(--bd-dark); text-transform: uppercase; letter-spacing: 0.8px; margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--bd-border); background: #fafafa; } /* ── Related Blogs list ── */ .bd-related-list { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 0; } .bd-related-item { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--bd-border); transition: opacity 0.2s; } .bd-related-item:last-child { border-bottom: none; padding-bottom: 0; } .bd-related-item:hover { opacity: 0.75; } .bd-related-thumb { flex-shrink: 0; width: 62px; height: 44px; overflow: hidden; border-radius: 3px; background: #eee; border: 1px solid var(--bd-border); } .bd-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .bd-thumb-placeholder { width: 100%; height: 100%; background: #dde; } .bd-related-label { font-size: 11px; font-weight: 700; color: var(--bd-dark); line-height: 1.4; text-transform: uppercase; letter-spacing: 0.3px; } .bd-empty-note { font-size: 12px; color: var(--bd-muted); padding: 10px 0; margin: 0; } /* ========================================= RESPONSIVE ========================================= */ @media (max-width: 900px) { .bd-layout { grid-template-columns: 1fr; } .bd-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .bd-share-box { grid-column: span 2; } } @media (max-width: 768px) { .bd-faq { padding: 36px 0 40px; } .bd-faq-heading { font-size: 28px; } .bd-faq-question strong { font-size: 14px; } .bd-faq-answer-inner { padding: 16px 18px; font-size: 14px; } } @media (max-width: 600px) { .bd-outer { padding: 20px 14px 40px; } .bd-hero-img, .bd-hero-img img { max-height: 240px; height: 240px; } .bd-hero-title { font-size: 17px; } .bd-body { padding: 18px 16px 6px; } .bd-faq { margin: 8px 16px 12px; } .bd-sidebar { grid-template-columns: 1fr; } .bd-share-box { grid-column: span 1; } }