/* ==========================================================================
   TJL Blog — Taqwa Journal
   Scopes: .tjl-blog-cards-wrap (any blog card grid), .tjl-blog-home (home
   section 2619b924), .tjl-blog-hero / .tjl-blog-article / .tjl-blog-after /
   .tjl-blog-related (Nexter template "Blog — Single Post"), .tjl-blog-archive.
   Palette: plum #3A1259, purple #8441C0, gold #D9A62E / #E8C877, ink #2A1040,
   muted #6B6675, grounds #F7F4FA / #FBF7FE.
   ========================================================================== */

/* ---------- 1. Card grid (archive): replace The Plus isotope absolute layout ---------- */
.tjl-blog-cards-wrap .blog-list .post-inner-loop.post-inner-loop {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 30px;
	height: auto !important;
	margin: 0 !important;
}
.tjl-blog-cards-wrap .blog-list .post-inner-loop .grid-item.grid-item {
	position: static !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
	flex: none !important;
}
.tjl-blog-cards-wrap .blog-list .post-inner-loop article { height: 100%; }

/* ---------- 2. Card ---------- */
.tjl-blog-cards-wrap .blog-list.blog-style-1 .blog-list-content {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 10px;
	background: linear-gradient(180deg, #FFFFFF 0%, #FBF7FE 100%);
	border: 1px solid #ECE3F4;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(58, 18, 89, .08);
	transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease;
	text-align: left;
}
/* thin gold rule along the top edge, like the commitment medallions */
.tjl-blog-cards-wrap .blog-list.blog-style-1 .blog-list-content::before {
	content: "";
	position: absolute;
	top: 0; left: 24px; right: 24px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(90deg, transparent, #D9A62E 20%, #F7DD9B 50%, #D9A62E 80%, transparent);
	z-index: 2;
}
.tjl-blog-cards-wrap .blog-list.blog-style-1 .post-content-image {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin: 0;
	border-radius: 18px;
	background: #3A1259;
}
.tjl-blog-cards-wrap .blog-list.blog-style-1 .post-content-image a,
.tjl-blog-cards-wrap .blog-list.blog-style-1 .blog-featured-image,
.tjl-blog-cards-wrap .blog-list.blog-style-1 .thumb-wrap { display: block; height: 100%; background: none !important; }
/* The Plus paints a 32% black wash over every thumbnail — replace it with a soft plum fade at the foot only */
.tjl-blog-cards-wrap .blog-list.blog-style-1 .blog-featured-image::before {
	background: linear-gradient(180deg, rgba(42, 16, 64, 0) 55%, rgba(42, 16, 64, .55) 100%) !important;
	opacity: 1 !important;
	z-index: 1;
	pointer-events: none;
}
.tjl-blog-cards-wrap .blog-list.blog-style-1 .post-content-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s ease;
}
/* date sits on the photo as a plum pill with gold type */
.tjl-blog-cards-wrap .blog-list.blog-style-1 .post-content-bottom {
	position: static !important;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 10px;
	padding: 20px 14px 14px !important;
	background: transparent !important;
	transform: none !important;
	opacity: 1 !important;
}
.tjl-blog-cards-wrap .blog-list .post-meta-info.style-1 {
	position: absolute;
	top: 22px; left: 22px;
	z-index: 2;
	margin: 0; padding: 7px 14px 6px;
	border-radius: 30px;
	background: rgba(58, 18, 89, .88);
	border: 1px solid rgba(232, 200, 119, .55);
	backdrop-filter: blur(4px);
	line-height: 1;
}
.tjl-blog-cards-wrap .blog-list .post-meta-info span,
.tjl-blog-cards-wrap .blog-list .post-meta-info span a {
	font-family: "Jost", sans-serif;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #F7DD9B !important;
}
.tjl-blog-cards-wrap .blog-list .post-inner-loop .post-title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: "Prata", serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.38;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tjl-blog-cards-wrap .blog-list .post-inner-loop .post-title a {
	color: #2A1040 !important;
	font: inherit;
	transition: color .25s;
}
/* the whole card is the link (stretched title link) */
.tjl-blog-cards-wrap .blog-list .post-inner-loop .post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}
.tjl-blog-cards-wrap .blog-list.blog-style-1 .post-hover-content {
	display: block !important;
	position: static !important;
	max-height: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	margin: 0;
}
.tjl-blog-cards-wrap .blog-list .post-hover-content .entry-content p {
	margin: 0;
	font-family: "Jost", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #6B6675 !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* footer cue: "Read the story" + gold disc arrow (same disc as the home carousel arrows) */
.tjl-blog-cards-wrap .blog-list.blog-style-1 .post-content-bottom::after {
	content: "Read the story";
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px dashed #E2D5EE;
	font-family: "Jost", sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .5px;
	color: #3A1259;
	background: no-repeat right center / 34px 34px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Ccircle cx='17' cy='17' r='17' fill='%23E8C877'/%3E%3Cpath d='M11 17h12m-4.5-4.5L23 17l-4.5 4.5' fill='none' stroke='%233A1259' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	min-height: 34px;
	box-sizing: content-box;
}
@media (hover: hover) {
	.tjl-blog-cards-wrap .blog-list.blog-style-1 .blog-list-content:hover {
		transform: translateY(-6px);
		border-color: #D8C6EC;
		box-shadow: 0 20px 44px rgba(58, 18, 89, .16);
	}
	.tjl-blog-cards-wrap .blog-list.blog-style-1 .blog-list-content:hover .post-content-image img { transform: scale(1.06); }
	.tjl-blog-cards-wrap .blog-list.blog-style-1 .blog-list-content:hover .post-title a { color: #8441C0 !important; }
}
.tjl-blog-cards-wrap .blog-list .post-inner-loop .post-title a:focus-visible { outline: none; }
.tjl-blog-cards-wrap .blog-list .post-inner-loop .post-title a:focus-visible::after {
	outline: 2px solid #8441C0;
	outline-offset: -2px;
	border-radius: 24px;
}
/* The Plus empty state */
.tjl-blog-cards-wrap .theplus-posts-not-found {
	font-family: "Jost", sans-serif !important;
	font-size: 16px !important;
	color: #6B6675 !important;
	background: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	text-align: center;
}
.tjl-blog-related:has(.theplus-posts-not-found) { display: none !important; }

/* pagination (archive) */
.tjl-blog-cards-wrap .theplus-pagination { margin-top: 44px; text-align: center; }
.tjl-blog-cards-wrap .theplus-pagination a,
.tjl-blog-cards-wrap .theplus-pagination span.current {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; margin: 0 4px; padding: 0 12px;
	border-radius: 22px; border: 1px solid #ECE3F4; background: #fff;
	font-family: "Jost", sans-serif; color: #3A1259;
}
.tjl-blog-cards-wrap .theplus-pagination span.current { background: #3A1259; border-color: #3A1259; color: #F7DD9B; }

/* ---------- 3. Carousel (home + related) — built by assets/blog.js ---------- */
.tjl-blog-carousel { position: relative; width: 100%; }
.tjl-blog-carousel .blog-list .post-inner-loop.post-inner-loop {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 28px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding: 8px 4px 22px !important;
	scrollbar-width: none;
}
.tjl-blog-carousel .blog-list .post-inner-loop::-webkit-scrollbar { display: none; }
.tjl-blog-carousel .blog-list .post-inner-loop .grid-item.grid-item {
	flex: 0 0 calc((100% - 56px) / 3) !important;
	scroll-snap-align: start;
}
/* fewer cards than fit: centre them without centring the scroller (which would hide overflow) */
.tjl-blog-carousel .blog-list .post-inner-loop .grid-item:first-child { margin-left: auto !important; }
.tjl-blog-carousel .blog-list .post-inner-loop .grid-item:last-child { margin-right: auto !important; }
@media (max-width: 1024px) {
	.tjl-blog-carousel .blog-list .post-inner-loop .grid-item.grid-item { flex-basis: calc((100% - 28px) / 2) !important; }
}
@media (max-width: 767px) {
	.tjl-blog-carousel .blog-list .post-inner-loop.post-inner-loop { gap: 16px; }
	.tjl-blog-carousel .blog-list .post-inner-loop .grid-item.grid-item { flex-basis: 84% !important; scroll-snap-align: center; }
	.tjl-blog-carousel .blog-list .post-inner-loop .grid-item:only-child { flex-basis: 100% !important; }
}
.tjl-blog-arrow {
	position: absolute;
	top: calc(50% - 38px);
	z-index: 5;
	width: 54px; height: 54px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #E8C877;
	color: #3A1259;
	box-shadow: 0 8px 20px rgba(58, 18, 89, .22);
	cursor: pointer;
	transition: transform .2s, background .2s, opacity .2s;
}
.tjl-blog-carousel .tjl-blog-arrow.tjl-blog-arrow {
	background: #E8C877 !important;
	color: #3A1259 !important;
	border: 0 !important;
	border-radius: 50% !important;
	padding: 0 !important;
	min-width: 0; min-height: 0;
	line-height: 1;
}
.tjl-blog-carousel .tjl-blog-arrow svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; }
.tjl-blog-carousel .tjl-blog-dots button.tjl-blog-dot { padding: 0 !important; min-width: 0; min-height: 0; border-radius: 50% !important; background: transparent !important; border: 1.5px solid #D9A62E !important; }
.tjl-blog-carousel .tjl-blog-dots button.tjl-blog-dot[aria-current="true"] { border-radius: 6px !important; background: #D9A62E !important; }
.tjl-blog-arrow--prev { left: -12px; }
.tjl-blog-arrow--next { right: -12px; }
.tjl-blog-carousel .tjl-blog-arrow.tjl-blog-arrow[disabled] { opacity: .4 !important; cursor: default; box-shadow: none; }
@media (hover: hover) {
	.tjl-blog-carousel .tjl-blog-arrow.tjl-blog-arrow:not([disabled]):hover { background: #F7DD9B !important; transform: scale(1.06); }
}
.tjl-blog-arrow:focus-visible { outline: 2px solid #8441C0; outline-offset: 3px; }
.tjl-blog-dots { display: flex; justify-content: center; gap: 10px; margin-top: 6px; }
.tjl-blog-dots button {
	width: 10px; height: 10px; padding: 0;
	border-radius: 50%;
	border: 1.5px solid #D9A62E;
	background: transparent;
	cursor: pointer;
	transition: width .25s, background .25s;
}
.tjl-blog-dots button[aria-current="true"] { width: 26px; border-radius: 6px; background: #D9A62E; }
.tjl-blog-carousel:not(.is-scrollable) .tjl-blog-arrow,
.tjl-blog-carousel:not(.is-scrollable) .tjl-blog-dots { display: none; }
@media (max-width: 767px) {
	.tjl-blog-arrow { display: none !important; }
}

/* home section */
.tjl-blog-home .tjl-blog-cards-wrap { width: 100%; max-width: 1250px; }

/* ---------- 4. Single post ---------- */
.tjl-blog-hero .tjl-blog-title .tp-post-title { justify-content: center; }
.tjl-blog-hero .tjl-blog-title .tp-entry-title,
.tjl-blog-hero .tjl-blog-title h1 { max-width: 960px; margin: 0 auto; text-align: center; }
.tjl-blog-hero .tjl-blog-hero-meta,
.tjl-blog-hero .tjl-blog-hero-meta * {
	justify-content: center;
	font-family: "Jost", sans-serif;
	font-size: 13px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78) !important;
}

.tjl-blog-article .tjl-blog-feature img {
	width: 100%;
	max-height: 560px;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 20px;
	box-shadow: 0 18px 44px rgba(58, 18, 89, .16);
}

.tjl-blog-body .tp-post-content {
	font-family: "Jost", sans-serif;
	font-size: 18px;
	line-height: 1.8;
	color: #3D3547;
}
.tjl-blog-body .tp-post-content > *:first-child { margin-top: 0; }
.tjl-blog-body .tp-post-content p { margin: 0 0 1.3em; }
.tjl-blog-body .tp-post-content > p:first-of-type::first-letter {
	float: left;
	font-family: "Prata", serif;
	font-size: 3.4em;
	line-height: .9;
	padding: 6px 12px 0 0;
	color: #3A1259;
}
.tjl-blog-body .tp-post-content h2,
.tjl-blog-body .tp-post-content h3,
.tjl-blog-body .tp-post-content h4 {
	font-family: "Prata", serif;
	font-weight: 400;
	color: #2A1040;
	line-height: 1.3;
	margin: 1.9em 0 .6em;
}
.tjl-blog-body .tp-post-content h2 { font-size: 30px; }
.tjl-blog-body .tp-post-content h2::after {
	content: "";
	display: block;
	width: 48px; height: 2px;
	margin-top: 14px;
	background: linear-gradient(90deg, #D9A62E, #F7DD9B);
}
.tjl-blog-body .tp-post-content h3 { font-size: 24px; }
.tjl-blog-body .tp-post-content h4 { font-size: 20px; }
.tjl-blog-body .tp-post-content a { color: #8441C0; text-decoration: underline; text-underline-offset: 3px; }
.tjl-blog-body .tp-post-content strong { color: #2A1040; }
.tjl-blog-body .tp-post-content ul,
.tjl-blog-body .tp-post-content ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.tjl-blog-body .tp-post-content li { margin: 0 0 .5em; padding-left: .3em; }
.tjl-blog-body .tp-post-content ul li::marker { color: #D9A62E; font-size: 1.1em; }
.tjl-blog-body .tp-post-content ol li::marker { color: #8441C0; font-weight: 600; }
.tjl-blog-body .tp-post-content blockquote {
	margin: 2em 0;
	padding: 26px 30px;
	border: 0;
	border-left: 4px solid #D9A62E;
	border-radius: 0 16px 16px 0;
	background: #FBF7FE;
	font-family: "Prata", serif;
	font-style: normal;
	font-size: 21px;
	line-height: 1.55;
	color: #3A1259;
}
.tjl-blog-body .tp-post-content blockquote p:last-child { margin: 0; }

/* images the uploader adds with "Add Media" (classic editor) */
.tjl-blog-body .tp-post-content img { max-width: 100%; height: auto; border-radius: 14px; }
.tjl-blog-body .tp-post-content .wp-caption { max-width: 100% !important; margin: 2em 0; }
.tjl-blog-body .tp-post-content .wp-caption img { display: block; width: 100%; }
.tjl-blog-body .tp-post-content .wp-caption-text,
.tjl-blog-body .tp-post-content figcaption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
	font-style: italic;
	text-align: center;
	color: #6B6675;
}
.tjl-blog-body .tp-post-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.tjl-blog-body .tp-post-content .alignleft { float: left; margin: .3em 1.6em 1em 0; max-width: 48%; }
.tjl-blog-body .tp-post-content .alignright { float: right; margin: .3em 0 1em 1.6em; max-width: 48%; }
.tjl-blog-body .tp-post-content .alignnone { margin: 1.6em 0; }
.tjl-blog-body .tp-post-content::after { content: ""; display: table; clear: both; }
/* [gallery] shortcode */
.tjl-blog-body .tp-post-content .gallery { display: grid; grid-template-columns: repeat(var(--tjl-gcols, 3), 1fr); gap: 12px; margin: 2em 0; }
.tjl-blog-body .tp-post-content .gallery-columns-2 { --tjl-gcols: 2; }
.tjl-blog-body .tp-post-content .gallery-columns-4 { --tjl-gcols: 4; }
.tjl-blog-body .tp-post-content .gallery-item { width: auto !important; margin: 0 !important; }
.tjl-blog-body .tp-post-content .gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 0 !important; }
.tjl-blog-body .tp-post-content .gallery br { display: none; }
.tjl-blog-body .tp-post-content iframe { max-width: 100%; border-radius: 14px; }

@media (max-width: 767px) {
	.tjl-blog-body .tp-post-content { font-size: 16.5px; line-height: 1.75; }
	.tjl-blog-body .tp-post-content h2 { font-size: 24px; }
	.tjl-blog-body .tp-post-content h3 { font-size: 20px; }
	.tjl-blog-body .tp-post-content blockquote { padding: 20px 20px; font-size: 18px; }
	.tjl-blog-body .tp-post-content .alignleft,
	.tjl-blog-body .tp-post-content .alignright { float: none; max-width: 100%; margin: 1.4em 0; }
	.tjl-blog-body .tp-post-content .gallery { --tjl-gcols: 2 !important; }
	.tjl-blog-article .tjl-blog-feature img { border-radius: 14px; }
}

/* after-article: divider, prev/next, back button */
.tjl-blog-after .e-con-inner { border-top: 1px solid #ECE3F4; padding-top: 32px; }
.tjl-blog-after .tjl-blog-nav:not(:has(a)) { display: none; }
.tjl-blog-after .tjl-blog-nav a { color: #3A1259; }
.tjl-blog-back.tjl-blog-back .elementor-button {
	background: transparent;
	color: #3A1259;
	border: 1.5px solid #3A1259;
	border-radius: 30px;
	padding: 13px 30px;
	font-family: "Jost", sans-serif;
	font-size: 15px;
	letter-spacing: .5px;
	transition: background .25s, color .25s;
}
.tjl-blog-back.tjl-blog-back .elementor-button-text::before { content: "\2190"; margin-right: 10px; }
@media (hover: hover) {
	.tjl-blog-back.tjl-blog-back .elementor-button:hover { background: #3A1259; color: #fff; }
}

/* related */
.tjl-blog-related .tjl-blog-related-title .elementor-heading-title {
	font-family: "Prata", serif;
	font-weight: 400;
	font-size: 34px;
	color: #2A1040;
	margin-bottom: 18px;
}
.tjl-blog-related .tjl-blog-cards-wrap { width: 100%; }
@media (max-width: 767px) {
	.tjl-blog-related .tjl-blog-related-title .elementor-heading-title { font-size: 26px; }
}