/**
 * CodelabIT News - Elementor widgets stylesheet
 * Covers: Post Content Tab, Post Feature Box, Video Gallery, Post Grid
 * Box, Post List, Banner Feature, Category Grid.
 */

/* ---------------------------------------------------------------
 * Shared Heading block (icon + title + subtitle) used by every widget
 * --------------------------------------------------------------- */
.ron-heading-block {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ron-heading-block.ron-heading-align-center {
	justify-content: center;
	text-align: center;
}
.ron-heading-block.ron-heading-align-right {
	justify-content: flex-end;
	text-align: right;
}
.ron-heading-icon {
	font-size: 26px;
	line-height: 1;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #d90a2c; /* fallback - Elementor's per-instance "Icon Color" control overrides this via {{WRAPPER}} */
}
/* Elementor's Icon control can output either an inline <svg> (SVG icon
   library, e.g. Font Awesome rendered as SVG) or a webfont <i> tag,
   depending on the icon picked and the site's icon-rendering mode.
   Elementor's own CSS sizes/colors those inside ITS OWN widget wrapper
   classes (.elementor-icon, .elementor-icon-box-icon, etc.) - since our
   heading uses custom markup, that CSS doesn't reliably reach it, so we
   size and color both possible output types ourselves rather than
   depending on Elementor's internal styles being present/matching. */
.ron-heading-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}
.ron-heading-icon i {
	display: block;
	color: inherit;
}
.ron-heading-title {
	margin: 0;
	font-size: 20px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	display: inline;
}
.ron-heading-subtitle {
	font-size: 13px;
	color: #8a8577;
	margin-left: 6px;
	display: inline-block;
}
.ron-heading-align-center .ron-heading-subtitle,
.ron-heading-align-right .ron-heading-subtitle {
	display: block;
	margin-left: 0;
}

/* ---------------------------------------------------------------
 * Post Content Tab
 * --------------------------------------------------------------- */
.ron-post-content-tab .ron-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 24px;
	border-bottom: 1px solid #eee;
}
.ron-post-content-tab .ron-tabs-nav button {
	cursor: pointer;
	border: none;
	background: #fff;
	font-size: 15px;
	font-weight: 600;
	padding: 12px 20px;
	transition: all 0.25s ease;
}
.ron-post-content-tab .ron-tab-panel {
	display: none;
}
.ron-post-content-tab .ron-tab-panel.active {
	display: block;
}
.ron-card-grid,
.ron-post-content-tab .ron-tab-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
/* .ron-post-card renders on an <article> tag (via post_class()), and the
   theme's own style.css has a generic "article:not(:first-child) {
   padding-top: 20px; margin-top: 20px; }" rule for stacked blog lists.
   Inside a CSS grid that rule pushes every card but the first out of
   alignment. ".ron-card-grid" scopes the override with higher
   specificity than that theme rule so it always wins regardless of
   stylesheet load order. */
.ron-card-grid article.ron-post-card,
.ron-card-grid .ron-post-card {
	margin: 0;
	padding: 0;
	overflow: hidden;
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.ron-post-card .ron-card-thumb {
	display: block;
	overflow: hidden;
}
.ron-post-card .ron-card-thumb img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.4s ease;
}
.ron-post-card:hover .ron-card-thumb img {
	transform: scale(1.05);
}
.ron-post-card .ron-card-body {
	padding: 16px 4px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.ron-post-card .ron-card-title {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.35;
}
.ron-post-card .ron-card-title a {
	text-decoration: none;
}
.ron-post-card .ron-card-meta {
	font-size: 13px;
	color: #888;
	margin-bottom: 8px;
}
.ron-post-card .ron-card-meta span:not(:last-child)::after {
	content: '\2022';
	margin: 0 6px;
}
.ron-post-card .ron-card-excerpt {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.6;
}
.ron-post-card .ron-read-more {
	margin-top: auto;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* ---------------------------------------------------------------
 * Post Grid Box
 * --------------------------------------------------------------- */
.ron-post-grid-box .ron-card-thumb {
	position: relative;
}
.ron-post-card .ron-card-category {
	position: absolute;
	top: 14px;
	left: 14px;
	background: #d90a2c;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	border-radius: 3px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------
 * Post List Type (e.g. "Trending Now")
 * --------------------------------------------------------------- */
.ron-plist-item {
	display: flex;
	align-items: center;
	gap: 14px;
}
.ron-plist-number {
	flex: 0 0 auto;
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
	color: #d90a2c;
	min-width: 28px;
}
.ron-plist-number.ron-number-circle {
	width: 36px;
	height: 36px;
	min-width: 36px;
	border-radius: 50%;
	background: #d90a2c;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}
.ron-plist-thumb {
	flex: 0 0 auto;
	width: 70px;
	height: 70px;
	display: block;
	overflow: hidden;
	border-radius: 6px;
}
.ron-plist-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ron-plist-content {
	flex: 1 1 auto;
	min-width: 0;
}
.ron-plist-cat {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #d90a2c;
	margin-bottom: 4px;
}
.ron-plist-title {
	margin: 0 0 4px;
	font-size: 15px;
	line-height: 1.4;
}
.ron-plist-title a {
	text-decoration: none;
	color: #222;
}
.ron-plist-meta {
	font-size: 12px;
	color: #999;
}

/* ---------------------------------------------------------------
 * Post Feature Box
 * --------------------------------------------------------------- */
.ron-post-feature-box {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	align-items: stretch;
}
.ron-post-feature-box .ron-feature-list {
	flex: 1 1 34%;
	display: flex;
	flex-direction: column;
}
.ron-post-feature-box .ron-list-item {
	display: flex;
	gap: 14px;
	padding: 14px 0;
	align-items: flex-start;
}
.ron-post-feature-box .ron-list-thumb {
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	overflow: hidden;
	display: block;
	border-radius: 6px;
}
.ron-post-feature-box .ron-list-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ron-post-feature-box .ron-list-title {
	margin: 0 0 6px;
	font-size: 15px;
	line-height: 1.4;
}
.ron-post-feature-box .ron-list-title a {
	text-decoration: none;
}
.ron-post-feature-box .ron-list-meta {
	font-size: 12px;
	color: #999;
}
.ron-post-feature-box .ron-list-meta span:not(:last-child)::after {
	content: '\2022';
	margin: 0 6px;
}
.ron-post-feature-box .ron-feature-post {
	flex: 1 1 62%;
	display: flex;
	flex-direction: column;
}
.ron-post-feature-box .ron-feature-thumb {
	display: block;
	overflow: hidden;
	border-radius: 10px;
	margin-bottom: 18px;
}
.ron-post-feature-box .ron-feature-thumb img {
	width: 100%;
	height: auto;
	display: block;
}
.ron-post-feature-box .ron-feature-title {
	margin: 0 0 10px;
	font-size: 30px;
	line-height: 1.25;
	font-weight: 700;
}
.ron-post-feature-box .ron-feature-title a {
	text-decoration: none;
}
.ron-post-feature-box .ron-feature-meta {
	font-size: 13px;
	color: #888;
	margin-bottom: 12px;
}
.ron-post-feature-box .ron-feature-meta span:not(:last-child)::after {
	content: '\2022';
	margin: 0 6px;
}
.ron-post-feature-box .ron-feature-excerpt {
	font-size: 16px;
	line-height: 1.7;
	margin: 0;
}
/* Style 1 = feature left, list right (default source order).
   Style 2 = feature right, list left (mirrored, DOM order unchanged
   for reading/SEO order - only the visual position flips). */
.ron-post-feature-box.ron-style-2 {
	flex-direction: row-reverse;
}

/* ---------------------------------------------------------------
 * Category Grid Box
 * --------------------------------------------------------------- */
.ron-category-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.ron-cat-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	color: inherit;
}
.ron-cat-tile .ron-cat-thumb {
	display: block;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #eee;
}
.ron-cat-tile.ron-cat-circle .ron-cat-thumb {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	margin: 0 auto 12px;
}
.ron-cat-tile.ron-cat-circle .ron-cat-title {
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 2px;
}
.ron-cat-tile.ron-cat-square {
	position: relative;
}
.ron-cat-tile.ron-cat-square .ron-cat-thumb {
	position: relative;
	height: 180px;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
}
.ron-cat-square-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) 60%);
}
.ron-cat-square-text {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.ron-cat-tile.ron-cat-square .ron-cat-title {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 2px;
}
.ron-cat-count {
	font-size: 12px;
	color: #999;
}

/* ---------------------------------------------------------------
 * Banner Type Post Feature
 * --------------------------------------------------------------- */
.ron-banner-feature {
	position: relative;
	min-height: 420px;
	display: flex;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #1a1a1a;
	overflow: hidden;
}
.ron-banner-overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, 0.55);
	pointer-events: none;
}
.ron-banner-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	width: 100%;
	padding: 40px;
	gap: 12px;
}
.ron-banner-category {
	display: inline-block;
	background: #d90a2c;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 5px 14px;
	border-radius: 3px;
}
.ron-banner-title {
	margin: 0;
	font-size: 32px;
	line-height: 1.25;
	font-weight: 800;
	max-width: 760px;
}
.ron-banner-title a {
	color: #fff;
	text-decoration: none;
}
.ron-banner-button {
	display: inline-block;
	background: #fff;
	color: #1a1a1a;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 10px 22px;
	border-radius: 3px;
	text-decoration: none;
	margin-top: 6px;
}
.ron-banner-content .ron-heading-block {
	margin-bottom: 4px;
}
.ron-banner-content .ron-heading-title,
.ron-banner-content .ron-heading-subtitle {
	color: #fff;
}

/* ---------------------------------------------------------------
 * Video Gallery
 * --------------------------------------------------------------- */
.ron-video-widget .ron-video-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.ron-video-widget .ron-video-featured {
	flex: 1 1 54%;
}
.ron-video-widget .ron-video-grid {
	flex: 1 1 42%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	align-content: start;
}
.ron-video-widget .ron-video-item {
	display: block;
}
.ron-video-widget .ron-video-frame {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	cursor: pointer;
	background: #111;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.ron-video-widget .ron-video-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.ron-video-widget .ron-video-frame:hover img {
	transform: scale(1.04);
}
.ron-video-widget .ron-play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
}
.ron-video-widget .ron-video-featured .ron-play-button {
	width: 76px;
	height: 76px;
	font-size: 22px;
}
.ron-video-widget .ron-video-duration {
	position: absolute;
	left: 14px;
	bottom: 14px;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 3px;
}
.ron-video-widget .ron-video-caption {
	margin-top: 10px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: center;
}
.ron-video-widget .ron-video-duration-inline {
	display: block;
	font-weight: 400;
	text-transform: none;
	color: #999;
	font-size: 12px;
	margin-top: 2px;
}
/* Style 1 - Compact: featured video and grid sit side-by-side. */
.ron-video-widget.ron-style-1 .ron-video-caption {
	text-align: left;
}
.ron-video-widget.ron-style-1 .ron-video-featured .ron-video-caption {
	font-size: 15px;
}

/* Style 2 - Large: featured video is full width on top with a big
   "Watch: ..." headline underneath, grid runs full width below it. */
.ron-video-widget.ron-style-2 .ron-heading-title {
	font-size: 30px;
}
.ron-video-widget.ron-style-2 .ron-video-layout {
	flex-direction: column;
}
.ron-video-widget.ron-style-2 .ron-video-featured,
.ron-video-widget.ron-style-2 .ron-video-grid {
	flex: 1 1 100%;
	width: 100%;
}
.ron-video-widget.ron-style-2 .ron-video-featured .ron-video-frame {
	aspect-ratio: 21 / 9;
}
.ron-video-widget.ron-style-2 .ron-video-featured .ron-video-caption {
	text-align: left;
	font-size: 24px;
	font-weight: 800;
	text-transform: none;
	letter-spacing: normal;
	margin-top: 16px;
}
.ron-video-widget.ron-style-2 .ron-video-caption {
	font-size: 13px;
}
/* Note: grid column count is left to the "Video Grid" style control
   (Columns) so it always wins regardless of style - it is not
   hard-coded here per style. */

.ron-video-widget-notice {
	border: 1px dashed #d63638;
	background: #fcf0f1;
	color: #444;
	padding: 14px 16px;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.6;
}
.ron-video-widget-notice p {
	margin: 0 0 6px;
}
.ron-video-widget-notice p:last-child {
	margin-bottom: 0;
}

/* Lightbox used for both hosted and embedded videos */
.ron-video-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.ron-video-lightbox[hidden] {
	display: none;
}
.ron-video-lightbox .ron-video-lightbox-inner {
	position: relative;
	width: 100%;
	max-width: 960px;
	aspect-ratio: 16 / 9;
	background: #000;
}
.ron-video-lightbox iframe,
.ron-video-lightbox video {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.ron-video-lightbox-close {
	position: absolute;
	top: -40px;
	right: 0;
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

@media (max-width: 767px) {
	.ron-post-content-tab .ron-tab-cards,
	.ron-post-grid-box .ron-card-grid {
		grid-template-columns: 1fr;
	}
	.ron-post-feature-box,
	.ron-video-widget .ron-video-layout {
		flex-direction: column;
	}
	.ron-video-widget .ron-video-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.ron-category-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.ron-banner-content {
		padding: 24px;
	}
	.ron-banner-title {
		font-size: 24px;
	}
}