/* Shared blog styles — responsive and accessible */
:root{
    --brand:#b02519;
    --brand-dark:#841a11;
    --muted:rgba(0,0,0,0.6);
    --card-bg:#ffffff;
    --radius:12px;
}
*{box-sizing:border-box}
body{font-family:DM Sans, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#111}

/* Listing (mainsite .blog-root / sub-site .blogs-grid) */
.blog-root, .home-shell{padding:20px}
.blog-title, .blogs-page-heading{font-weight:700;color:var(--brand);margin:0 0 12px;font-size:clamp(1.4rem,2vw,2rem)}
.section-eyebrow{color:var(--muted);text-transform:uppercase;font-size:.8rem;margin-bottom:6px}

.blog-grid, .blogs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.blog-card, .blog-card__body{background:var(--card-bg);border-radius:var(--radius);overflow:hidden;box-shadow:0 6px 18px rgba(16,24,40,0.08);display:flex;flex-direction:column}
.blog-card .blog-media, .blog-card__img-wrap, .blog-card__skeleton{width:100%;height:180px;background:#f2f2f2}
.blog-card img, .blog-card__hero-img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card__body{padding:14px;display:flex;flex-direction:column;gap:8px}
.blog-meta-date, .blog-card__meta{color:var(--muted);font-size:.9rem}
.blog-card h2, .blog-card__title{font-size:1.05rem;margin:0}
.blog-card p, .blog-card__excerpt{color:#333;margin:0;font-size:.95rem}
.blog-learn-more, .blog-card__link{display:inline-block;margin-top:10px;padding:8px 12px;background:var(--brand);color:#fff;border-radius:6px;text-decoration:none}
.blog-learn-more:hover,.blog-card__link:hover{background:var(--brand-dark)}

/* Blog post page */
.blog-post-page .home-shell{max-width:1100px;margin:0 auto;padding:20px}
.blog-post__hero-img{width:100%;height:auto;border-radius:8px}
.blog-post__title{font-size:clamp(1.6rem,2.4vw,2.4rem);margin:8px 0}
.blog-post__meta{color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
.blog-post__lead p{font-size:1.05rem;color:#222}
.blog-post__body{line-height:1.72;color:#222}

/* Prevent content overflow and make media responsive */
.blog-post__body img,
.blog-post__body video,
.blog-post__body iframe,
.blog-post__body table,
.blog-post__body embed,
.blog-post__body object,
.blog-content img,
.blog-content video,
.blog-content iframe,
.blog-content table,
.blog-content embed,
.blog-content object {
    max-width: 100%;
    height: auto !important;
    display: block;
    margin: 0.75rem 0;
}

/* Constrain very tall images while preserving aspect ratio */
.blog-post__body img { max-height: 800px; object-fit: contain; }

/* Responsive iframe / video wrapper */
.responsive-media{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden}
.responsive-media iframe, .responsive-media video{position:absolute;top:0;left:0;width:100%;height:100%}

/* Make long words and code blocks wrap instead of overflowing */
.blog-post__body, .blog-post__body p, .blog-post__body li {word-wrap:break-word;overflow-wrap:break-word}
.blog-post__body pre, .blog-post__body code{white-space:pre-wrap}

/* Tables: make scrollable on small screens */
.blog-post__body table{width:100%;border-collapse:collapse}
.blog-post__body .table-wrap{overflow:auto;width:100%}


.blog-post__share{margin-top:24px}
.blog-post__share-links{display:flex;gap:8px}
.blog-post__share-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:6px;background:#f4f4f4;color:#111;text-decoration:none}
.blog-post__share-btn--fb{background:#1877f2;color:#fff}
.blog-post__share-btn--tw{background:#1da1f2;color:#fff}
.blog-post__share-btn--wa{background:#25d366;color:#fff}

/* Utilities */
.btn.btn-outline{border:1px solid #ddd;padding:8px 12px;border-radius:8px;color:#111;background:#fff;text-decoration:none}

@media (max-width:720px){
    .blog-card .blog-media, .blog-card__img-wrap, .blog-card__skeleton{height:160px}
}

@media (max-width:420px){
    .blog-card .blog-media, .blog-card__img-wrap, .blog-card__skeleton{height:140px}
    .blog-root, .home-shell{padding:12px}
}

/* Accessibility: focus states */
a:focus{outline:3px solid rgba(176,37,25,0.16);outline-offset:3px}

/* Small helpers for older inline classes used in mainsite */
.blog-featured-image img{border-radius:8px}