/**
 * Blog listing page polish (posts index — body.blog).
 *
 * The parent Barsi theme already lays the blog list out responsively; this
 * file only adds design refinements on top and tightens a few breakpoints
 * for tablet, mobile and 13"/14" laptops. Everything is scoped to body.blog
 * so no other template is affected.
 *
 * @package MRB
 */

/* ---------------------------------------------------------------------------
 * Sidebar "Recent Posts": placeholder for a post with no featured image.
 *
 * The Barsi Core widget (barsi-core/widgets/recent-posts-sidebar.php) skips
 * the .item-img block entirely when a post has no thumbnail, and marks the row
 * .no-thumbnail. The row is a flex line — 84px image, 16px gap, then the copy —
 * so dropping the image does not just leave a blank square, it pulls that
 * row's date and title 100px left of every other row. One post without a
 * featured image makes the whole list look broken.
 *
 * Rather than hide the problem, the row keeps its shape: a placeholder tile of
 * exactly the same 84px box and 8px radius, in the same neutral grey the
 * product search results use for missing images (#f8f8f9 tile, #d9d9de glyph),
 * so the list reads as one rhythm and a missing image looks deliberate.
 *
 * Done with a pseudo-element so the widget markup — which lives in a plugin,
 * not this theme — does not need patching, and so it covers every future post
 * published without a featured image rather than just today's.
 * ------------------------------------------------------------------------- */
.bs-sidebar-blog-single.no-thumbnail::before {
	content: "";
	flex: 0 0 112px;
	align-self: flex-start;
	width: 112px;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	background-color: #f8f8f9;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23d9d9de' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 32px 32px;
}

/* ---------------------------------------------------------------------------
 * Card: turn the flat bordered box into an interactive, elevated card.
 * ------------------------------------------------------------------------- */
body.blog .bs-blog-page-3-item-single {
	border-color: #E5E7EB;
	border-radius: 12px;
	background: #fff;
	transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
	will-change: transform;
}

body.blog .tx-blog-box:hover .bs-blog-page-3-item-single {
	border-color: var(--bs-clr-pr-1);
	box-shadow: 0 18px 40px -18px rgba(17, 24, 39, 0.28);
	transform: translateY(-4px);
}

/* Featured image: consistent framing + rounded corners, zoom on hover. */
body.blog .bs-blog-page-3-item-single .item-img {
	border-radius: 10px;
	overflow: hidden;
}

body.blog .bs-blog-page-3-item-single .item-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

body.blog .tx-blog-box:hover .bs-blog-page-3-item-single .item-img img {
	transform: scale(1.05);
}

/* Excerpt: cap line length and lines so every card reads evenly. */
body.blog .bs-blog-page-3-item-single .item-disc {
	color: #4B5563;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Guard against any child element ever forcing a horizontal scrollbar. */
body.blog .bs-blog-page-3-item-single img,
body.blog .bs-blog-page-3-item-single svg {
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * 13"/14" laptops: trim the generous section padding so the first posts show
 * sooner on shorter viewports. (The breadcrumb hero is a site-wide banner and
 * is intentionally left untouched to stay consistent with sibling pages.)
 * ------------------------------------------------------------------------- */
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
	body.blog .bs-blog-page-2-area {
		padding-top: 90px;
		padding-bottom: 90px;
	}
}

/* ---------------------------------------------------------------------------
 * Tablet (768–991): comfortable card padding + image height, trimmed padding.
 *
 * The theme only builds the 2-column layout at >=992px (col-lg-*), so on a
 * tablet the sidebar drops full-width below the post list. Rather than leave
 * "Recent Posts" as a stray, cramped block, present it as a tidy full-width
 * strip: a clear separator on top and its items in an even multi-column grid.
 * ------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	body.blog .bs-blog-page-2-area {
		padding-top: 70px;
		padding-bottom: 70px;
	}

	body.blog .bs-blog-page-3-item-single {
		padding: 28px;
	}

	body.blog .bs-blog-page-3-item-single .item-img {
		height: 340px;
	}

	/* Give the relocated sidebar breathing room + a divider from the list. */
	body.blog .bs-blog-page-sidebar {
		margin-top: 50px;
		padding-top: 40px;
		border-top: 1px solid #E5E7EB;
	}

	/* Lay recent posts out as an even grid instead of an uneven wrap. */
	body.blog .bs-blog-page-sidebar .tx-recent-posts {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		align-items: start;
		gap: 24px 30px;
	}

	body.blog .bs-blog-page-sidebar .latest-post-item {
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
	}
}

/* ---------------------------------------------------------------------------
 * Mobile (<=767): tighter rhythm, readable meta, full-width friendly image.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	body.blog .bs-blog-page-2-area {
		padding-top: 50px;
		padding-bottom: 50px;
	}

	body.blog .bs-blog-page-3-item-single {
		padding: 18px;
		border-radius: 10px;
	}

	body.blog .bs-blog-page-3-item-single .item-img {
		height: 220px;
		margin-bottom: 20px !important;
	}

	body.blog .bs-blog-page-3-item-single .item-meta {
		gap: 8px 22px;
		padding: 18px 0;
	}

	body.blog .bs-blog-page-3-item-single .item-meta .meta-item {
		font-size: 15px;
	}

	/* Disable the lift on touch screens (no hover) to avoid a stuck state. */
	body.blog .tx-blog-box:hover .bs-blog-page-3-item-single {
		transform: none;
	}
}

/* Small phones: keep the image from feeling cramped. */
@media (max-width: 479px) {
	body.blog .bs-blog-page-3-item-single .item-img {
		height: 190px;
	}
}

/* ==========================================================================
   POST CONTENT TABLES (blog detail)

   A five-column comparison table in a 358px viewport rendered as five ~70px
   columns with `table-layout: fixed` and `word-break: break-word`, which
   broke every label mid-word — "Materi/al", "Excel/lent", "Constructi/on".
   Narrowing type would not have saved it: five columns simply do not fit.

   So the table keeps readable column widths and scrolls sideways inside its
   own card, the way a data table should on a phone, and gets the same visual
   language as the rest of the site (12px radius, #ededed rules, tinted
   header row). WordPress already wraps block tables in <figure>, so no
   markup change is needed.
   ========================================================================== */

body.single-post .wp-block-table {
	margin: 32px 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #ededed;
	border-radius: 12px;
	/* Firefox, which ignores the ::-webkit- pseudo-elements below. */
	scrollbar-width: thin;
	scrollbar-color: #c9c9d1 #f4f4f6;
}

/* --------------------------------------------------------------------------
   The table's own scrollbar.

   barsi-core.css:117 styles ::-webkit-scrollbar globally — unscoped, so it
   catches every scrollable element on the site — but only inside a media
   query that resolves to min-width:1400px. The result was a scrollbar that
   changed appearance depending on the machine: a black track with a #f16319
   orange thumb from 1400px up, and the plain browser default below it, so a
   13" laptop and a 16" one showed the same table differently.

   That rule also sets `width` but not `height`. Width only applies to a
   VERTICAL scrollbar; the thickness of a horizontal one comes from `height`.
   So this table kept the browser's default ~15px bar and merely repainted it
   black — the opposite of the slim 7px the theme was going for.

   Scoped here, so the table reads the same at every width and in every
   browser, and the page's own scrollbar is left exactly as the theme has it.
   Neutral greys rather than brand orange: this is a scroll affordance inside
   a data card, not a call to action, and orange competes with the links in
   the table. To go back to brand colour, set the thumb to #f16319 — nothing
   else needs to change.
   -------------------------------------------------------------------------- */
body.single-post .wp-block-table::-webkit-scrollbar {
	width: 8px;
	/* The one that actually governs a horizontal scrollbar. */
	height: 8px;
	background: transparent;
}

body.single-post .wp-block-table::-webkit-scrollbar-track {
	background: #f4f4f6;
}

body.single-post .wp-block-table::-webkit-scrollbar-thumb {
	background: #c9c9d1;
	border-radius: 8px;
}

body.single-post .wp-block-table::-webkit-scrollbar-thumb:hover {
	background: #a8a8b0;
}

body.single-post .wp-block-table table,
body.single-post .wp-block-table table.has-fixed-layout {
	width: 100%;
	/* Below this the columns stop being readable and the card scrolls. */
	min-width: 620px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	/* Overrides the block's has-fixed-layout: let each column take the width
	   its content needs instead of an equal share of a phone screen. */
	table-layout: auto;
}

body.single-post .wp-block-table th,
body.single-post .wp-block-table td {
	padding: 14px 18px;
	border: 0;
	border-bottom: 1px solid #ededed;
	font-family: "DM Sans", sans-serif;
	font-size: 15px;
	line-height: 1.45;
	text-align: left;
	vertical-align: top;
	/* The reason the labels were breaking mid-word. */
	word-break: normal;
	overflow-wrap: normal;
	hyphens: none;
}

/* WordPress core draws a 3px black rule under the head — far too heavy next
   to the hairline rules used everywhere else on the site. */
body.single-post .wp-block-table thead {
	border-bottom: 0;
}

body.single-post .wp-block-table thead th,
body.single-post .wp-block-table tr:first-child th {
	background: #f8f8f9;
	border-bottom: 1px solid #e3e3e6;
	font-family: "Albert Sans", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #1a1a1a;
	white-space: nowrap;
}

body.single-post .wp-block-table tbody tr:nth-child(even) {
	background: #fbfbfb;
}

body.single-post .wp-block-table tbody tr:last-child td {
	border-bottom: 0;
}

body.single-post .wp-block-table td {
	color: #393939;
}

/* First column carries the row's subject — give it the same weight as the
   header so a partly scrolled table is still readable. */
body.single-post .wp-block-table tbody td:first-child {
	font-weight: 600;
	color: #1a1a1a;
	white-space: nowrap;
}

/* Scroll affordance. Only below ~660px is the card narrower than the table's
   620px minimum, so that is where the hint belongs — a soft inset shadow on
   the right edge saying there is more table off-screen. (The usual four-layer
   gradient trick is avoided here: its white "cover" layers would wash out the
   zebra rows at the edges.) */
@media (max-width: 659px) {
	body.single-post .wp-block-table {
		box-shadow: inset -14px 0 14px -14px rgba(0, 0, 0, 0.22);
	}
}

@media (max-width: 767px) {
	body.single-post .wp-block-table {
		margin: 24px 0;
	}

	body.single-post .wp-block-table th,
	body.single-post .wp-block-table td {
		padding: 12px 14px;
		font-size: 14px;
	}
}