/* =========================================================================
   Immersive IT — Blog grid + Single post
   Prefix: .iit-
   Breakpoints follow Elementor defaults: tablet <=1024px, mobile <=767px
   ====================================================================== */

:root {
	--iit-green: #39b54a;
	--iit-green-dark: #2e9c3e;
	--iit-ink: #111111;
	--iit-body: #2f3538;
	--iit-muted: #6b7280;
	--iit-line: rgba(17, 17, 17, 0.07);
	--iit-card-radius: 14px;
	--iit-font-head: "Encode Sans", -apple-system, "Segoe UI", sans-serif;
	--iit-font-body: "Noto Sans", -apple-system, "Segoe UI", sans-serif;
}


/* =========================================================================
   1. BLOG GRID  ([iit_blog_grid])
   ====================================================================== */

.iit-blog {
	width: 100%;
}

.iit-grid {
	display: grid;
	grid-template-columns: repeat(var(--iit-cols, 3), minmax(0, 1fr));
	gap: 34px;
	align-items: stretch;
}

/* ---- Card ------------------------------------------------------------ */

.iit-card {
	position: relative;
	isolation: isolate;              /* keeps the hover accent behind content */
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid var(--iit-line);
	border-radius: var(--iit-card-radius);
	box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.iit-card:hover,
.iit-card:focus-within {
	transform: translateY(-6px);
	border-color: rgba(57, 181, 74, 0.35);
	box-shadow: 0 18px 40px rgba(57, 181, 74, 0.18);
}

/* Shared green curved bottom accent */
.iit-card__accent {
	position: absolute;
	left: -12%;
	right: -12%;
	bottom: 0;
	height: 118px;
	z-index: 0;
	pointer-events: none;
	border-radius: 50% 50% 0 0 / 62px 62px 0 0;
	background: linear-gradient(180deg, rgba(57, 181, 74, 0) 0%, rgba(57, 181, 74, 0.28) 100%);
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.iit-card:hover .iit-card__accent,
.iit-card:focus-within .iit-card__accent {
	opacity: 1;
	transform: translateY(0);
}

/* ---- Media ----------------------------------------------------------- */

.iit-card__media {
	position: relative;
	z-index: 1;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #e9eef0;
}

.iit-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.iit-card:hover .iit-card__media img {
	transform: scale(1.045);
}

.iit-card__media-fallback {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #dfe7e9 0%, #eef3f2 100%);
}

/* ---- Body ------------------------------------------------------------ */

.iit-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 22px 24px 20px;
}

.iit-card__title {
	margin: 0;
	font-family: var(--iit-font-head);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.28;
	color: var(--iit-ink);

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.iit-card__title a {
	color: inherit;
	text-decoration: none;
}

/* Stretched link — the whole card is clickable, but the accessible
   link text is still the post title. */
.iit-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.iit-card__title a:focus-visible::after {
	outline: 3px solid var(--iit-green);
	outline-offset: 3px;
	border-radius: var(--iit-card-radius);
}

.iit-card__excerpt {
	margin: 13px 0 0;
	font-family: var(--iit-font-body);
	font-size: 13.5px;
	line-height: 1.62;
	color: #3f4650;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* ---- Footer row ------------------------------------------------------ */

.iit-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: auto;             /* pins the row to the bottom */
	padding-top: 26px;
}

.iit-card__date {
	font-family: var(--iit-font-body);
	font-size: 14px;
	color: var(--iit-muted);
}

.iit-card__more {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--iit-font-head);
	font-size: 15px;
	font-weight: 700;
	color: var(--iit-green);
	white-space: nowrap;
}

.iit-card__more .iit-arrow {
	transition: transform 0.3s ease;
}

.iit-card:hover .iit-card__more .iit-arrow {
	transform: translateX(4px);
}

/* ---- Pagination ------------------------------------------------------ */

.iit-pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 52px;
}

.iit-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--iit-line);
	border-radius: 8px;
	background: #ffffff;
	font-family: var(--iit-font-head);
	font-size: 15px;
	font-weight: 600;
	color: var(--iit-ink);
	text-decoration: none;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.iit-pagination .page-numbers:hover {
	border-color: rgba(57, 181, 74, 0.4);
	color: var(--iit-green);
}

.iit-pagination .page-numbers.current {
	background: var(--iit-green);
	border-color: var(--iit-green);
	color: #ffffff;
}

.iit-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

.iit-empty {
	font-family: var(--iit-font-body);
	color: var(--iit-muted);
}


/* =========================================================================
   2. SINGLE POST
   ====================================================================== */

.iit-main {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.iit-post {
	position: relative;
}

/* ---- Floating transparent header over the hero ----------------------- */
/* UAE (Header Footer Builder) wraps its header in .ehf-header.
   If your header uses a different wrapper, change the selector here. */

.iit-transparent-header .ehf-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
	background: transparent;
}

/* ---- Hero ------------------------------------------------------------ */

.iit-post__hero {
	position: relative;
	width: 100%;
	height: clamp(320px, 40vw, 600px);
	overflow: hidden;
	background: #1c2226;
}

.iit-post__hero-img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: none !important;
	object-fit: cover;
}

.iit-post__hero--empty {
	height: clamp(180px, 22vw, 300px);
	background: linear-gradient(135deg, #1c2226 0%, #2e3a35 100%);
}

/* ---- White sheet ----------------------------------------------------- */

.iit-post__sheet {
	position: relative;
	z-index: 2;
	max-width: 1340px;
	margin: -56px auto 0;
	padding: 66px clamp(24px, 5vw, 90px) 96px;
	background: #ffffff;
	border-radius: 40px 40px 0 0;
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.iit-post__head {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.iit-post__title {
	margin: 0;
	font-family: var(--iit-font-head);
	font-size: clamp(30px, 3.4vw, 50px);
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.01em;
	color: var(--iit-ink);
}

.iit-post__date {
	margin: 20px 0 0;
	font-family: var(--iit-font-head);
	font-size: 19px;
	font-weight: 600;
	color: var(--iit-muted);
}

/* ---- Article content ------------------------------------------------- */

.iit-post__content {
	max-width: 1040px;
	margin: 58px auto 0;
	font-family: var(--iit-font-body);
	font-size: 19px;
	line-height: 1.68;
	color: var(--iit-body);
}

.iit-post__content > *:first-child {
	margin-top: 0;
}

.iit-post__content p {
	margin: 0 0 1.45em;
}

.iit-post__content h2,
.iit-post__content h3,
.iit-post__content h4 {
	font-family: var(--iit-font-head);
	font-weight: 700;
	line-height: 1.3;
	color: var(--iit-ink);
	margin: 2.3em 0 0.85em;
}

.iit-post__content h2 { font-size: 23px; }
.iit-post__content h3 { font-size: 20px; }
.iit-post__content h4 { font-size: 18px; }

.iit-post__content img,
.iit-post__content .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 2.4em 0;
}

.iit-post__content figure {
	margin: 2.4em 0;
}

.iit-post__content figure img {
	margin: 0;
}

.iit-post__content figcaption {
	margin-top: 12px;
	font-size: 15px;
	color: var(--iit-muted);
	text-align: center;
}

.iit-post__content ul,
.iit-post__content ol {
	margin: 0 0 1.45em;
	padding-left: 1.5em;
}

.iit-post__content li {
	margin-bottom: 0.45em;
}

.iit-post__content a {
	color: var(--iit-green-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.iit-post__content a:hover {
	color: var(--iit-green);
}

.iit-post__content blockquote {
	margin: 2em 0;
	padding: 4px 0 4px 24px;
	border-left: 4px solid var(--iit-green);
	font-size: 20px;
	font-style: italic;
	color: var(--iit-ink);
}

.iit-post__content strong {
	font-weight: 700;
	color: var(--iit-ink);
}


/* =========================================================================
   3. RESPONSIVE
   ====================================================================== */

/* Tablet */
@media (max-width: 1024px) {

	.iit-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px;
	}

	.iit-post__sheet {
		margin-top: -40px;
		padding: 52px 28px 72px;
		border-radius: 32px 32px 0 0;
	}

	.iit-post__content {
		margin-top: 44px;
		font-size: 18px;
	}
}

/* Mobile */
@media (max-width: 767px) {

	.iit-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.iit-card__body {
		padding: 20px 20px 18px;
	}

	.iit-card__title {
		font-size: 19px;
	}

	.iit-card__foot {
		padding-top: 20px;
	}

	.iit-post__hero {
		height: clamp(240px, 56vw, 340px);
	}

	.iit-post__sheet {
		margin-top: -28px;
		padding: 38px 20px 60px;
		border-radius: 24px 24px 0 0;
	}

	.iit-post__date {
		font-size: 17px;
	}

	.iit-post__content {
		margin-top: 34px;
		font-size: 17px;
	}

	.iit-post__content h2 { font-size: 21px; }

	.iit-pagination {
		margin-top: 38px;
	}
}


/* =========================================================================
   4. REDUCED MOTION
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {

	.iit-card,
	.iit-card__accent,
	.iit-card__media img,
	.iit-card__more .iit-arrow,
	.iit-pagination .page-numbers {
		transition: none !important;
	}

	.iit-card:hover,
	.iit-card:focus-within {
		transform: none;
	}

	.iit-card:hover .iit-card__media img {
		transform: none;
	}

	.iit-card:hover .iit-card__more .iit-arrow {
		transform: none;
	}

	.iit-card__accent {
		transform: none;
	}
}