/* Modern minimal style for every post card on the homepage */

.p-wrap {
	transition: transform .3s ease, box-shadow .3s ease;
}

.p-wrap:hover {
	transform: translateY(-4px);
}

.p-wrap .p-feat,
.p-wrap .rb-iwrap {
	border-radius: 14px;
}

.p-wrap .rb-iwrap img {
	transition: transform .5s ease;
}

.p-wrap:hover .rb-iwrap img {
	transform: scale(1.06);
}

.p-cat-info a,
.p-cat-info span {
	border-radius: 20px;
	padding: 4px 12px;
}

/* list-style cards (side image + text row): give them a real card background and shadow */
.p-list.p-wrap {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
	padding: 12px;
}

.p-list.p-wrap:hover {
	box-shadow: 0 12px 26px rgba(0, 0, 0, .1);
}

[data-theme='dark'] .p-list.p-wrap {
	background: rgba(255, 255, 255, .04);
}

/* LifeStyle Carousel (fw-feat-7, owl-carousel) below the menu: card height + content position */

/* card height: image box uses a padding-bottom aspect-ratio trick (pc-110 = 112%), reduce it */
.fw-feat-7 .rb-iwrap.pc-110 {
	padding-bottom: 65%;
}

/* smaller title and meta text to match the shorter card */
.fw-feat-7 .p-overlay-6 .entry-title {
	font-size: 15px !important;
	line-height: 1.3 !important;
}

.fw-feat-7 .p-overlay-6 .p-cat-info,
.fw-feat-7 .p-overlay-6 .p-meta-info {
	font-size: 11px !important;
}

/* content: overlay-6 style centers the title by default, move it to the bottom-left instead */
.fw-feat-7 .p-overlay-6 .content-overlay {
	justify-content: flex-end !important;
	align-items: flex-start !important;
}

.fw-feat-7 .p-overlay-6 .overlay-holder {
	padding-bottom: 20px;
	text-align: left;
}

.fw-feat-7 .p-overlay-6 .p-header {
	text-align: left !important;
}

.fw-feat-7 .p-overlay-6 .p-cat-info,
.fw-feat-7 .p-overlay-6 .p-meta-info {
	justify-content: flex-start !important;
}

/* darker overlay gradient so the text stays readable over any image */
.fw-feat-7 .p-overlay-6.p-overlay .content-overlay:before {
	opacity: .8;
}

/* prev/next buttons: rectangle shape with a centered arrow icon, always visible */
.fw-feat-7 .rb-owl-prev,
.fw-feat-7 .rb-owl-next {
	width: 44px;
	height: 44px;
	margin-top: -22px;
	border-radius: 4px;
	opacity: 1;
	background-color: rgba(0, 0, 0, .55);
}

.fw-feat-7 .rb-owl-prev:hover,
.fw-feat-7 .rb-owl-next:hover {
	background-color: rgba(0, 0, 0, .85) !important;
}

.fw-feat-7 .owl-nav i {
	width: 44px;
	line-height: 44px;
	font-size: 18px;
	color: #fff !important;
}

/* keep the arrow icon in place on hover instead of sliding it out of the button */
.fw-feat-7 .owl-nav > div:hover i {
	transform: none !important;
}

.fw-feat-7 .owl-nav span {
	display: none;
}

/* LATEST BLOGS section (fw-list-2): stack the card - image on top, then meta info, then title */
.fw-list-2 .p-list-2 {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	min-height: 0;
}

.fw-list-2 .p-list-2 .col-left,
.fw-list-2 .p-list-2 .col-right {
	width: 100%;
	max-width: 100%;
	min-height: 0;
	flex: none;
}

.fw-list-2 .p-list-2 .col-left {
	margin: 0 0 14px 0;
}

.fw-list-2 .p-list-2 .p-feat-holder,
.fw-list-2 .p-list-2 .p-feat,
.fw-list-2 .p-list-2 .rb-iwrap {
	width: 100%;
}

/* smaller, more proportional image height now that it spans the full card width */
.fw-list-2 .p-list-2 .rb-iwrap.pc-75 {
	padding-bottom: 55%;
}

.fw-list-2 .p-list-2 .col-right {
	display: flex;
	flex-direction: column;
}

.fw-list-2 .p-list-2 .p-footer {
	order: -1;
	margin-bottom: 8px;
}

.fw-list-2 .p-list-2 .entry-title,
.fw-list-2 .p-list-2 .p-header {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* 3 cards per row on desktop instead of 2 */
@media all and (min-width: 992px) {
	.fw-list-2 .p-outer.rb-col-d6 {
		flex: 0 0 33.333%;
		max-width: 33.333%;
	}
}

/* clamp the title to 2 lines */
.fw-list-2 .p-list-2 .entry-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* TRAVEL BLOGS section (fw-feat-6): reduce the tall hero image height */
.fw-feat-6 .p-overlay-4 .rb-iwrap {
	max-height: 50vh !important;
	padding-bottom: 30% !important;
}

/* LATEST BLOGS category filter: was a cramped, unwrapped slash-separated list - make it wrap into pill buttons */
.fw-list-2 .block-header {
	flex-wrap: wrap;
	row-gap: 12px;
}

.fw-list-2 .ajax-quick-filter {
	flex: 0 0 100%;
	margin-left: 0;
}

/* the actual filter pills live inside .ajax-quick-filter-inner, not directly inside .ajax-quick-filter */
.fw-list-2 .ajax-quick-filter-inner {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	width: 100%;
	gap: 10px;
}

.fw-list-2 .filter-el {
	white-space: nowrap;
	flex: 0 0 auto;
}

.fw-list-2 .filter-el:after {
	content: none;
}

.fw-list-2 .quick-filter-link {
	display: block;
	white-space: nowrap;
	padding: 10px 16px;
	font-size: 15px;
	border-radius: 24px;
	background: #f2f4f7;
	opacity: 1;
	color: #555;
	transition: background-color .3s ease, color .3s ease;
}

.fw-list-2 .quick-filter-link.is-active,
.fw-list-2 .quick-filter-link:hover {
	background: #1a1a1a;
	color: #fff;
}

[data-theme='dark'] .fw-list-2 .quick-filter-link {
	background: rgba(255, 255, 255, .08);
	color: #ddd;
}

/* the 4-post strip below TECH BLOGS already has its own working design (Elementor widget custom CSS:
   small circular images, centered row) - only add light polish on top, don't touch its sizing/shape */
.custom-card img {
	transition: transform .3s ease;
}

.custom-card:hover img {
	transform: scale(1.08);
}

.custom-card h3 a {
	transition: color .3s ease;
}

.custom-card h3 a:hover {
	color: #1a1a1a;
}

@media (max-width: 767px) {
	.custom-container {
		flex-wrap: wrap;
		row-gap: 24px;
	}
}