/*
 * blog/blog-style.css
 * Session B3 - public blog polish. Local, no-CDN, loaded ONLY on the public
 * blog pages (blog/index.php, blog/blog-single.php) via public_head.php's
 * existing $publicExtraStylesheets hook - it is never linked from any other
 * public page, and this file does not touch css/stylesheet.css or any other
 * shared/global stylesheet.
 *
 * The site theme (css/stylesheet.css) already styles .blog-post, .tags,
 * .side-post/.item-post and .post-comment - this file only adds what that
 * theme doesn't cover: a fixed 16:9 photo frame (so a top photo can never
 * stretch/distort regardless of its native size), small polish for the new
 * B3 elements (filter bar, empty state, older/newer nav, login prompt,
 * duplicate/rate-limit notices), and mobile-responsive tweaks.
 *
 * Session B6 additions (appended at the end of this file, below the
 * "Session B6 additions" marker): share buttons + copy-link feedback and
 * small "Related Posts" cards on blog/blog-single.php, plus a mobile tweak
 * for the share row. Nothing above the marker was changed.
 */

/* ---- Top photo: fixed 16:9 frame, never stretched -----------------------
   object-fit:cover fills the frame by cropping rather than stretching, so
   the image is always proportional no matter its original aspect ratio
   (matches how admin/B2 already stores photos pre-cropped to 16:9). ---- */
.blog-thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f4f5f4;
	border-radius: 0.25rem 0.25rem 0 0;
}

.blog-thumb img.card-img-top {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.blog-single-thumb {
	position: relative;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 0.5rem;
	background: #f4f5f4;
}

.blog-single-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Filter bar (search/tag indicator + clear link) ---- */
.blog-filter-bar {
	font-size: 0.95rem;
}

.blog-filter-bar .badge {
	font-weight: 500;
}

/* ---- Empty / not-found state ---- */
.blog-empty-state i {
	opacity: 0.6;
}

/* ---- Pagination: wrap on narrow screens instead of overflowing ---- */
.blog-pagination {
	flex-wrap: wrap;
	row-gap: 0.5rem;
}

/* ---- Older/Newer post navigation ---- */
.blog-adjacent-nav {
	padding: 0.75rem 0;
}

.blog-adjacent-item {
	max-width: 48%;
}

.blog-adjacent-item a {
	font-weight: 600;
}

/* ---- Comments ---- */
.blog-no-comments {
	font-style: italic;
}

.post-comment p {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* ---- Login prompt (comment form gate for logged-out visitors) ---- */
.blog-login-prompt {
	font-size: 0.95rem;
}

/* ---- Mobile responsiveness ------------------------------------------- */
@media (max-width: 991.98px) {
	/* Sidebar already stacks below the content on mobile via the existing
	   Bootstrap col-lg-8 / col-lg-4 grid in blog/index.php and
	   blog/blog-single.php - nothing to change there. This just tightens
	   spacing so the stacked layout doesn't feel cramped. */
	.blog-post.card {
		padding: 1.25rem !important;
	}

	.blog-adjacent-item {
		max-width: 100%;
	}

	.blog-adjacent-nav {
		flex-direction: column;
	}

	.blog-adjacent-item.text-end {
		text-align: left !important;
	}
}

@media (max-width: 575.98px) {
	.blog-filter-bar {
		flex-direction: column;
		align-items: flex-start !important;
	}

	.post-comment .col-auto {
		padding-right: 0.5rem !important;
	}
}

/* -----------------------------------------------------------------------
 * Session B6 additions below this line.
 * ---------------------------------------------------------------------*/

/* ---- Share buttons ---- */
.blog-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: #f4f5f4;
	color: #55606b;
	font-size: 0.95rem;
	border: 1px solid rgba(0, 0, 0, 0.08);
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
	cursor: pointer;
}

.blog-share-btn:hover,
.blog-share-btn:focus-visible {
	transform: translateY(-1px);
	color: #fff;
	text-decoration: none;
	outline: none;
}

.blog-share-whatsapp:hover { background: #25d366; }
.blog-share-facebook:hover { background: #1877f2; }
.blog-share-linkedin:hover { background: #0a66c2; }
.blog-share-twitter:hover { background: #000; }
.blog-share-copy:hover { background: #405189; }

.blog-share-copied-msg {
	min-height: 1.2em;
}

/* ---- Related posts ---- */
.blog-related-card {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.blog-related-card:hover {
	transform: translateY(-2px);
}

.blog-related-thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f4f5f4;
	border-radius: 0.25rem 0.25rem 0 0;
}

.blog-related-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-related-card h6 a {
	color: inherit;
}

@media (max-width: 575.98px) {
	.blog-share {
		gap: 0.4rem !important;
	}

	.blog-share-label {
		width: 100%;
	}
}

/* -----------------------------------------------------------------------
 * Session B7 rich content additions below this line.
 * ---------------------------------------------------------------------*/

.blog-post .card-body > h1,
.blog-post .card-body > h2,
.blog-post .card-body > h3,
.blog-post .card-body > h4,
.blog-post .card-body > h5,
.blog-post .card-body > h6 {
	margin: 1.4rem 0 0.75rem;
	font-weight: 700;
	line-height: 1.25;
	color: #263238;
}

.blog-post .card-body > p,
.blog-post .card-body > ul,
.blog-post .card-body > ol,
.blog-post .card-body > blockquote,
.blog-post .card-body > table,
.blog-post .card-body > div {
	margin-bottom: 1rem;
}

.blog-post .card-body ul,
.blog-post .card-body ol {
	padding-left: 1.35rem;
}

.blog-post .card-body li {
	margin-bottom: 0.35rem;
}

.blog-post .card-body blockquote {
	padding: 0.85rem 1rem;
	border-left: 4px solid #405189;
	background: #f7f8fb;
	color: #4c5665;
}

.blog-post .card-body table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 1rem 0;
}

.blog-post .card-body thead,
.blog-post .card-body tbody,
.blog-post .card-body tfoot,
.blog-post .card-body tr {
	width: 100%;
}

.blog-post .card-body th,
.blog-post .card-body td {
	border: 1px solid #d3dae5;
	padding: 0.6rem 0.75rem;
	vertical-align: top;
	min-width: 8rem;
}

.blog-post .card-body th {
	background: #f1f4f9;
	font-weight: 700;
}

.blog-post .card-body sup,
.blog-post .card-body sub {
	line-height: 0;
}

.blog-post .card-body img {
	max-width: 100%;
	height: auto;
}