/* Blog post article layout - extends category look from blog.css */

.bp-page {
 background: #ffffff;
 color: #111827;
}

.bp-layout {
 width: min(1180px, calc(100% - 40px));
 margin: 0 auto;
 padding: 36px 0 72px;
 display: grid;
 grid-template-columns: minmax(0, 1fr) 300px;
 gap: 36px;
 align-items: start;
}

.bp-main {
 min-width: 0;
}

.bp-crumb {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
 color: #64748b;
 font-size: 0.9rem;
 font-weight: 700;
 margin-bottom: 14px;
}

.bp-crumb a {
 color: #123a75;
 text-decoration: none;
}

.bp-crumb a:hover {
 color: #1d4ed8;
 text-decoration: underline;
}

.bp-title {
 margin: 0 0 14px;
 color: #0f172a !important;
 font-size: clamp(1.9rem, 4vw, 2.6rem);
 line-height: 1.15;
 text-shadow: none !important;
}

.bp-lead {
 margin: 0 0 18px;
 color: #334155;
 font-size: 1.12rem;
 line-height: 1.75;
}

.bp-meta-row {
 display: flex;
 flex-wrap: wrap;
 gap: 10px 16px;
 align-items: center;
 margin-bottom: 18px;
 color: #64748b;
 font-size: 0.92rem;
 font-weight: 700;
}

.bp-updated {
 color: #15803d;
}

.bp-tags {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 list-style: none;
 margin: 0;
 padding: 0;
}

.bp-tags li {
 padding: 3px 9px;
 border-radius: 999px;
 background: #ecfdf5;
 color: #166534;
 font-size: 0.78rem;
 font-weight: 800;
}

.bp-banner {
 margin: 0 0 28px;
 border-radius: 14px;
 overflow: hidden;
 border: 1px solid #e2e8f0;
 background: #f8fafc;
}

.bp-banner img {
 display: block;
 width: 100%;
 height: auto;
 max-height: 420px;
 object-fit: cover;
}

.bp-article {
 color: #1f2937;
 line-height: 1.75;
 font-size: 1.02rem;
}

.bp-article :where(h2) {
 margin: 2rem 0 0.85rem;
 color: #123a75 !important;
 font-size: 1.55rem;
 line-height: 1.3;
}

.bp-article :where(h3) {
 margin: 1.55rem 0 0.7rem;
 color: #0f172a !important;
 font-size: 1.2rem;
}

.bp-article :where(p) {
 margin: 0 0 1rem;
}

.bp-article :where(ul, ol) {
 margin: 0 0 1.1rem;
 padding-left: 1.35rem;
}

.bp-article :where(li) {
 margin: 0.35rem 0;
}

.bp-article :where(a) {
 color: #1d4ed8;
 font-weight: 700;
 text-decoration: none;
}

.bp-article :where(a:hover) {
 text-decoration: underline;
}

.bp-article :where(blockquote) {
 margin: 0 0 1.1rem;
 padding: 12px 16px;
 border-left: 4px solid #d49559;
 background: #f8fafc;
 color: #334155;
}

.bp-article :where(hr) {
 border: 0;
 border-top: 1px solid #e2e8f0;
 margin: 1.8rem 0;
}

.bp-article :where(code) {
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 font-size: 0.92em;
 background: #f1f5f9;
 padding: 0.1em 0.35em;
 border-radius: 4px;
}

.bp-table-wrap {
 overflow-x: auto;
 margin: 0 0 1.25rem;
 border: 1px solid #e2e8f0;
 border-radius: 12px;
}

.bp-article table {
 width: 100%;
 border-collapse: collapse;
 font-size: 0.95rem;
}

.bp-article th,
.bp-article td {
 padding: 10px 12px;
 border-bottom: 1px solid #e2e8f0;
 text-align: left;
 vertical-align: top;
}

.bp-article th {
 background: #f8fafc;
 color: #0f172a;
 font-weight: 800;
}

.bp-article tr:last-child td {
 border-bottom: 0;
}

.bp-faq {
 margin-top: 2rem;
 padding-top: 0.5rem;
}

.bp-faq h2 {
 margin-bottom: 1rem;
}

.bp-faq-item {
 border: 1px solid #e2e8f0;
 border-radius: 12px;
 background: #ffffff;
 padding: 4px 18px;
 margin-bottom: 10px;
}

.bp-faq-item summary {
 cursor: pointer;
 list-style: none;
 padding: 14px 0;
 color: #0f172a;
 font-weight: 800;
}

.bp-faq-item summary::-webkit-details-marker {
 display: none;
}

.bp-faq-item summary::after {
 content: '+';
 float: right;
 color: #15803d;
 font-weight: 900;
}

.bp-faq-item[open] summary::after {
 content: '\2212';
}

.bp-faq-item p {
 margin: 0 0 14px;
 color: #475569;
}

.bp-pager {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 14px;
 margin: 28px 0 22px;
}

.bp-pager a {
 display: block;
 padding: 14px 16px;
 border: 1px solid #e2e8f0;
 border-radius: 12px;
 background: #f8fafc;
 text-decoration: none;
 color: #0f172a;
}

.bp-pager a:hover {
 border-color: #2563eb;
}

.bp-pager .label {
 display: block;
 color: #64748b;
 font-size: 0.8rem;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: 0.04em;
 margin-bottom: 6px;
}

.bp-pager .title {
 font-weight: 800;
 color: #123a75;
 line-height: 1.35;
}

.bp-pager .bp-next {
 text-align: right;
}

.bp-author {
 display: grid;
 grid-template-columns: 64px 1fr;
 gap: 14px;
 padding: 18px;
 border: 1px solid #e2e8f0;
 border-radius: 14px;
 background: #ffffff;
 box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.bp-author-avatar {
 width: 64px;
 height: 64px;
 border-radius: 12px;
 object-fit: contain;
 background: #f8fafc;
 border: 1px solid #e2e8f0;
}

.bp-author h3 {
 margin: 0 0 6px;
 color: #0f172a !important;
 font-size: 1.05rem;
}

.bp-author p {
 margin: 0 0 10px;
 color: #475569;
 line-height: 1.6;
 font-size: 0.95rem;
}

.bp-author-links {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
}

.bp-author-links a {
 color: #15803d;
 font-weight: 800;
 text-decoration: none;
}

.bp-author-links a:hover {
 text-decoration: underline;
}

.bp-sidebar {
 position: sticky;
 top: 88px;
 display: grid;
 gap: 16px;
}

.bp-side-card {
 border: 1px solid #e2e8f0;
 border-radius: 14px;
 background: #ffffff;
 padding: 16px 16px 14px;
 box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.bp-side-card h2 {
 margin: 0 0 12px;
 color: #0f172a !important;
 font-size: 1rem;
 letter-spacing: 0.02em;
}

.bp-side-card ul {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: 8px;
}

.bp-side-card a {
 color: #123a75;
 text-decoration: none;
 font-weight: 700;
 font-size: 0.92rem;
 line-height: 1.35;
}

.bp-side-card a:hover {
 color: #1d4ed8;
 text-decoration: underline;
}

.bp-cat-link {
 display: inline-flex;
 align-items: center;
 min-height: 34px;
 padding: 5px 12px;
 border-radius: 999px;
 border: 1px solid #cbd5e1;
 background: #f8fafc;
}

.bp-rec-meta {
 display: block;
 color: #94a3b8;
 font-size: 0.75rem;
 font-weight: 700;
 margin-top: 2px;
}

@media (max-width: 960px) {
 .bp-layout {
 grid-template-columns: 1fr;
 }

 .bp-sidebar {
 position: static;
 order: 2;
 }

 .bp-pager {
 grid-template-columns: 1fr;
 }

 .bp-pager .bp-next {
 text-align: left;
 }
}

/* Sidebar colored frame + recommended article tone cards */
.bp-sidebar .bp-side-card {
 border: 1px solid #cbd5e1;
 border-left: 4px solid #2563eb;
 background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
 box-shadow: 0 10px 28px rgba(37, 99, 235, 0.08);
}

.bp-sidebar .bp-side-card:nth-child(2) {
 border-left-color: #0d9488;
 box-shadow: 0 10px 28px rgba(13, 148, 136, 0.08);
}

.bp-sidebar .bp-side-card ul {
 gap: 10px;
}

.bp-rec-item {
 border: 1px solid #e2e8f0;
 border-radius: 10px;
 padding: 10px 12px;
 transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bp-rec-item a {
 display: block;
}

.bp-rec-item:hover {
 border-color: #93c5fd;
 box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.bp-rec-tone-1 { background: #eff6ff; border-color: #bfdbfe; }
.bp-rec-tone-2 { background: #f0fdf4; border-color: #bbf7d0; }
.bp-rec-tone-3 { background: #fff7ed; border-color: #fed7aa; }
.bp-rec-tone-4 { background: #faf5ff; border-color: #e9d5ff; }
.bp-rec-tone-5 { background: #ecfeff; border-color: #a5f3fc; }

.bp-rec-item .bp-rec-meta {
 color: #64748b;
}