/* ==========================================================================
   Blog Shortcodes — Inline CTA Banner + Related Projects Grid
   rep_blog_cta & rep_blog_projects
   ========================================================================== */

/* ------------------------------------------------------------------
   [blog_cta] — Inline CTA Banner
   ------------------------------------------------------------------ */

.rep-blog-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.25rem 1.5rem;
	border-radius: 10px;
	margin: 1.75rem 0;
	flex-wrap: wrap;
}

/* Colour skins */
.rep-blog-cta--blue {
	background: linear-gradient(135deg, var(--rep-primary) 0%, var(--rep-primary-dark) 100%);
}

.rep-blog-cta--green {
	background: linear-gradient(135deg, #0d6e56 0%, #074d3c 100%);
}

.rep-blog-cta--dark {
	background: linear-gradient(135deg, var(--rep-dark) 0%, #0f172a 100%);
}

.rep-blog-cta--light {
	background: var(--rep-bg-alt);
	border: 1px solid var(--rep-border);
}

.rep-blog-cta--amber {
	background: linear-gradient(135deg, #d97706 0%, #92400e 100%);
}

.rep-blog-cta--teal {
	background: linear-gradient(135deg, #0d9488 0%, #115e59 100%);
}

/* Body text */
.rep-blog-cta__body {
	flex: 1;
	min-width: 0;
}

.rep-blog-cta__title {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 .3rem;
	color: #fff;
}

.rep-blog-cta--light .rep-blog-cta__title {
	color: var(--rep-text);
}

.rep-blog-cta__subtitle {
	font-size: .875rem;
	margin: 0;
	color: rgba(255, 255, 255, .8);
}

.rep-blog-cta--light .rep-blog-cta__subtitle {
	color: var(--rep-text-muted);
}

/* Actions */
.rep-blog-cta__actions {
	display: flex;
	gap: .625rem;
	flex-shrink: 0;
	flex-wrap: wrap;
}

.rep-blog-cta__btn {
	display: inline-flex;
	align-items: center;
	padding: .55rem 1.1rem;
	border-radius: 7px;
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	transition: opacity .2s, transform .2s;
	white-space: nowrap;
}

.rep-blog-cta__btn:hover {
	opacity: .88;
	transform: translateY(-1px);
}

.rep-blog-cta__btn--primary {
	background: #fff;
	color: var(--rep-primary);
}

.rep-blog-cta--light .rep-blog-cta__btn--primary {
	background: var(--rep-primary);
	color: #fff;
}

.rep-blog-cta__btn--secondary {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .55);
}

.rep-blog-cta--light .rep-blog-cta__btn--secondary {
	color: var(--rep-text);
	border-color: var(--rep-border);
}

@media (max-width: 600px) {
	.rep-blog-cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	.rep-blog-cta__actions {
		width: 100%;
	}
	.rep-blog-cta__btn {
		flex: 1;
		justify-content: center;
	}
}


/* ------------------------------------------------------------------
   [related_projects] — Premium Projects Grid
   ------------------------------------------------------------------ */

.rep-blog-projects {
	margin: 2rem 0;
}

.rep-blog-projects__title {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 1.1rem;
	color: var(--rep-text);
	position: relative;
	padding-inline-start: 14px;
}

.rep-blog-projects__title::before {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	top: .15em;
	bottom: .15em;
	width: 3px;
	background: var(--rep-primary);
	border-radius: 3px;
}

.rep-blog-projects__grid {
	display: grid;
	gap: 1.25rem;
}

.rep-blog-projects__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.rep-blog-projects__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.rep-blog-projects__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
	.rep-blog-projects__grid--cols-3,
	.rep-blog-projects__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
	.rep-blog-projects__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.rep-blog-projects__grid { grid-template-columns: 1fr; }
}

/* ── Premium Project Card ──── */
.rep-blog-proj-card {
	border-radius: 12px;
	overflow: hidden;
	background: var(--rep-bg);
	transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
	box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}

.rep-blog-proj-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05);
}

.rep-blog-proj-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* ── Thumbnail ──── */
.rep-blog-proj-card__thumb {
	position: relative;
	padding-top: 66%;
	overflow: hidden;
	background: var(--rep-bg-alt);
}

.rep-blog-proj-card__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}

.rep-blog-proj-card:hover .rep-blog-proj-card__thumb img {
	transform: scale(1.08);
}

/* Thumbnail gradient overlay */
.rep-blog-proj-card__thumb::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45) 100%);
	pointer-events: none;
}

/* ── Price badge (glass morphism) ──── */
.rep-blog-proj-card__badge {
	position: absolute;
	bottom: 10px;
	inset-inline-end: 10px;
	background: rgba(255, 255, 255, .88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--rep-primary);
	font-size: .78rem;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 20px;
	letter-spacing: .3px;
	z-index: 2;
	box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ── Developer badge (top-left) ──── */
.rep-blog-proj-card__dev {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	background: rgba(255,255,255,.92);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--rep-text);
	font-size: .68rem;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 20px;
	z-index: 2;
	box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* ── Body ──── */
.rep-blog-proj-card__body {
	padding: .85rem .9rem .9rem;
}

.rep-blog-proj-card__title {
	font-size: .95rem;
	font-weight: 700;
	color: var(--rep-text);
	margin: 0 0 .5rem;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rep-blog-proj-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .9rem;
}

.rep-blog-proj-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: .78rem;
	color: var(--rep-text-muted);
}

.rep-blog-proj-card__meta-item svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	opacity: .65;
}

.rep-blog-proj-card__meta-item svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}


/* ==========================================================================
   Smart CTA — [blog_cta type=smart]
   3 auto-buttons: WhatsApp + Call + Form popup
   ========================================================================== */

/* Smart variant — actions wrap tighter on desktop */
.rep-blog-cta--smart .rep-blog-cta__actions {
	gap: .5rem;
}

/* WhatsApp button */
.rep-blog-cta__btn--whatsapp {
	background: #25d366;
	color: #fff;
}

.rep-blog-cta__btn--whatsapp:hover {
	background: #1da851;
	opacity: 1;
}

/* Call button */
.rep-blog-cta__btn--call {
	background: rgba(255, 255, 255, .18);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .45);
}

.rep-blog-cta--light .rep-blog-cta__btn--call {
	background: transparent;
	color: var(--rep-text);
	border-color: var(--rep-border);
}

.rep-blog-cta__btn--call:hover {
	background: rgba(255, 255, 255, .28);
	opacity: 1;
}

/* Form trigger button */
.rep-blog-cta__btn--form {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .45);
	cursor: pointer;
	font-family: inherit;
}

.rep-blog-cta--light .rep-blog-cta__btn--form {
	color: var(--rep-text);
	border-color: var(--rep-border);
}

.rep-blog-cta__btn--form:hover {
	background: rgba(255, 255, 255, .18);
	opacity: 1;
}

/* SVG icons inside buttons */
.rep-blog-cta__btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-inline-end: 5px;
}

/* Compact layout — smaller padding */
.rep-blog-cta--compact {
	padding: .85rem 1.1rem;
}

.rep-blog-cta--compact .rep-blog-cta__title {
	font-size: .875rem;
}

.rep-blog-cta--compact .rep-blog-cta__btn {
	padding: .4rem .8rem;
	font-size: .8rem;
}

/* ---- Inline form popup ---- */
.rep-blog-cta__form-wrap {
	grid-column: 1 / -1;
	width: 100%;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, .2);
	margin-top: .5rem;
	animation: rep-cta-fadein .2s ease;
}

.rep-blog-cta--light .rep-blog-cta__form-wrap {
	border-top-color: var(--rep-border);
}

@keyframes rep-cta-fadein {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Force the smart CTA to wrap to column when form is open */
.rep-blog-cta--smart {
	flex-wrap: wrap;
}

.rep-blog-cta__form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
	margin-bottom: .5rem;
}

.rep-cta-input {
	width: 100%;
	padding: .5rem .75rem;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, .4);
	background: rgba(255, 255, 255, .15);
	color: #fff;
	font-size: .875rem;
	font-family: inherit;
	box-sizing: border-box;
	transition: border-color .15s, background .15s;
}

.rep-blog-cta--light .rep-cta-input {
	border-color: var(--rep-border);
	background: var(--rep-bg);
	color: var(--rep-text);
}

.rep-cta-input::placeholder {
	color: rgba(255, 255, 255, .6);
}

.rep-blog-cta--light .rep-cta-input::placeholder {
	color: var(--rep-text-muted);
}

.rep-cta-input:focus {
	outline: none;
	border-color: rgba(255, 255, 255, .8);
	background: rgba(255, 255, 255, .22);
}

.rep-blog-cta--light .rep-cta-input:focus {
	border-color: var(--rep-primary);
}

.rep-cta-submit {
	width: 100%;
	padding: .55rem;
	background: #fff;
	color: var(--rep-primary);
	border: none;
	border-radius: 6px;
	font-size: .875rem;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	transition: opacity .2s;
}

.rep-blog-cta--light .rep-cta-submit {
	background: var(--rep-primary);
	color: #fff;
}

.rep-cta-submit:hover { opacity: .88; }
.rep-cta-submit:disabled { opacity: .55; cursor: not-allowed; }

.rep-cta-msg {
	margin: .5rem 0 0;
	font-size: .8rem;
	color: rgba(255, 255, 255, .9);
	min-height: 1.2em;
}

.rep-blog-cta--light .rep-cta-msg { color: var(--rep-text-muted); }

/* Mobile adjustments for smart CTA */
@media (max-width: 600px) {
	.rep-blog-cta__form-row {
		grid-template-columns: 1fr;
	}
	.rep-blog-cta--smart .rep-blog-cta__actions {
		width: 100%;
	}
	.rep-blog-cta__btn--whatsapp,
	.rep-blog-cta__btn--call,
	.rep-blog-cta__btn--form {
		flex: 1;
		justify-content: center;
	}
}