/* ──────────────────────────────────────────────────────────────────────────
   blog-fixes.css — corrections layered on top of the legacy stylesheets.

   blogstyle.css / main-blog-custom.css / headstyles are kept byte-for-byte
   from the old Laravel site so the design stays 1:1, so every fix lives here
   and this file loads last.
   ────────────────────────────────────────────────────────────────────────── */

/* ── 1. Card grid alignment ────────────────────────────────────────────────
   Legacy let each thumbnail's own aspect ratio set the card height, so cards
   in a row ended at different heights and the Read More buttons stepped up
   and down. Fix the thumb ratio, stretch every card to the row height and
   push the button to the bottom edge. */
/* `.text-start` marks the grid card; the post page reuses `.single-blog` for
   its hero image, which must keep its own proportions. */
.blog-section .single-blog.text-start {
	height: 100%;
	justify-content: flex-start;
}
.blog-section .single-blog.text-start .blog-thumb {
	display: block;
}
.blog-section .single-blog.text-start .blog-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
.blog-section .blog-post-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.blog-section .blog-post-content .sub-title {
	margin-bottom: 0;
}
.blog-section .blog-post-content .title {
	min-height: 3em;      /* 2 lines at line-height 1.5 — keeps excerpts level */
	margin-bottom: 10px;
}

/* ── 2. Excerpt ───────────────────────────────────────────────────────────
   Was a fixed 150px box with overflow-y:scroll: a brown scrollbar sat in
   every card and the last visible line was sliced in half. Clamp to whole
   lines instead. */
.blog-section .blog-post-content .text {
	height: auto;
	max-height: none;
	overflow: hidden;
	padding-right: 0;
	font-size: 14.5px;
	line-height: 1.7;
	margin-bottom: 18px;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
}

/* ── 3. "Read More" button ────────────────────────────────────────────────
   The legacy rule painted the box solid white (background-color:#fff
   !important), and because btn2_bg.png is a torn-paper strip with
   transparent edges that white showed through around the label. It also set
   line-height:30px inside a 45px box, so the text sat above centre, and left
   the link colour to inherit — dark text on a dark brown strip. */
.blog-section .blog-post-content .read-more,
.blog-section .blog-post-content .read-more:hover,
.blog-section .blog-post-content .read-more:focus {
	background-color: transparent !important;
	background-size: 100% 100% !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	width: 160px;
	height: 46px;
	line-height: 46px !important;
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.2px;
	text-decoration: none !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	margin: auto auto 0 !important;   /* top:auto pins it to the card bottom */
	flex: 0 0 auto;
}
.blog-section .blog-post-content .read-more:hover {
	opacity: 0.9;
}

/* ── 4. Small screens ─────────────────────────────────────────────────────
   One column, so a fixed clamp only wastes space; let the excerpt breathe
   and keep the thumb a little shorter. */
@media (max-width: 767px) {
	.blog-section .single-blog.text-start .blog-thumb img {
		aspect-ratio: 16 / 9;
	}
	.blog-section .blog-post-content .title {
		min-height: 0;
	}
	.blog-section .blog-post-content .text {
		-webkit-line-clamp: 5;
		font-size: 14px;
	}
}