/* ==========================================================================
   Project Sticky Showcase Widget
   Replicates the exact layout + sticky behaviour of the three manually-built
   Elementor sections (e081f2b / 3ca03bc / 806334b) on the Athinum-2 page.

   Key principle:
     Each .pxl-showcase-card is the equivalent of one of those sections.
     When sticky is enabled, Elementor injects
       position: sticky; top: <offset>px;
     on every .pxl-showcase-card (via the widget's selector controls).
     The z-index is set inline per card in PHP so later cards always slide
     OVER earlier ones — identical to the natural DOM-order stacking of
     separate sticky Elementor sections.
   ========================================================================== */

/* ── Outer wrapper ────────────────────────────────────────────────────────── */

.pxl-project-sticky-showcase {
	width: 100%;
	/* Must NOT have overflow:hidden — that would break position:sticky on cards. */
}

/* ── Each card = one "section" equivalent ────────────────────────────────── */

/*
 * The card itself carries the sticky behaviour (injected by Elementor selectors).
 * We add a default stacking context so z-index (set inline in PHP) works.
 * Outer horizontal padding mirrors sections' padding: 0 15px 0 15px.
 */
.pxl-showcase-card {
	padding: 0 15px;
	/* position:sticky and top are injected by Elementor when sticky is enabled. */
}

/* No gap between cards — they overlap as they stick, just like adjacent sections. */
.pxl-showcase-card + .pxl-showcase-card {
	margin-top: 0;
}

/* ── White card shell  (mirrors container 66e257f: bg #FFFFFF, padding 10px, gap 10px, radius 10px, flex row) */

.pxl-showcase-card-inner {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 10px;
	background-color: #ffffff;
	border-radius: 10px;
	padding: 10px;
}

/* ── Info panel — left column ─────────────────────────────────────────────── */
/*
 * Mirrors container f273251:
 *   bg #F5F5F5, width 712px (desktop) / 50% (tablet), padding 50px (desktop) /
 *   30px (tablet) / 15px (mobile), border-radius 10px, flex column, flex-grow.
 */

.pxl-showcase-info {
	width: 712px;
	flex-grow: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 30px;
	background-color: #f5f5f5;
	border-radius: 10px;
	padding: 50px;
}

/* Logo / title */
.pxl-showcase-logo,
.pxl-showcase-logo-img {
	line-height: 0;
}

.pxl-showcase-logo img,
.pxl-showcase-logo-img img {
	max-width: 276px;   /* matches original logo img width */
	height: auto;
	display: block;
}

.pxl-showcase-logo-title {
	font-size: 1.5em;
	font-weight: 700;
	color: #000000;
	line-height: 1.2;
	max-width: 276px;
}

/* Description — flex-grow pushes meta / link to the bottom */
.pxl-showcase-desc {
	flex-grow: 1;
	min-height: 0;
}

.pxl-showcase-desc .pxl-item--inner {
	margin-top: 0;
}

/*
 * Meta badge row
 * Mirrors inner row d7bfa86: flex row, flex-wrap, gap 10px, padding-top 11px.
 *
 * The theme's pxl-icon-box1 style-1 CSS only sets flex layout on .pxl-item--inner.
 * All pill-shape styling (background, border-radius, padding, typography) is normally
 * injected by the Elementor widget as inline styles via control selectors — so we
 * reproduce those values here, scoped tightly under .pxl-showcase-meta so they
 * NEVER bleed out to any other icon-box widget on the page.
 */
.pxl-showcase-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 11px;
}

/* Pill shell — white background, fully-rounded, left/right padding only
   (the 33px line-height on the title provides the vertical "height" of the pill) */
.pxl-showcase-meta .pxl-icon-box {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	background-color: #ffffff;   /* default; overridden per-badge via repeater inline style */
	border-radius: 30px;
	padding: 0 14px;
	line-height: 33px;
}

/* Inner flex row: icon + text — 9px gap matches original icon_spacing: 9px */
.pxl-showcase-meta .pxl-icon-box .pxl-item--inner {
	display: flex;
	align-items: center;
	column-gap: 9px;
	line-height: inherit;
}

/* Icon — 14px, black, centred.
   Use !important on colour so Elementor's per-icon inline style and any
   theme gradient rules (e.g. .pxl-contact-info-widget i) cannot override it. */
.pxl-showcase-meta .pxl-icon-box .pxl-item--icon {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 14px;
	flex-shrink: 0;
	line-height: 1;
	/* Kill any inherited gradient-text effect from theme utility classes */
	background: none !important;
	-webkit-background-clip: unset !important;
	background-clip: unset !important;
	-webkit-text-fill-color: unset !important;
}

.pxl-showcase-meta .pxl-icon-box .pxl-item--icon i,
.pxl-showcase-meta .pxl-icon-box .pxl-item--icon svg {
	font-size: 14px;
	width:  14px;
	height: 14px;
	color: #000000 !important;
	fill:  #000000 !important;
	-webkit-text-fill-color: #000000 !important;
	background: none !important;
	display: block;
}

/* Title — 16px / 400 / 33px line-height, black, Satoshi font */
.pxl-showcase-meta .pxl-icon-box .pxl-item--title {
	margin: 0;
	padding: 0;
	font-family: "Satoshi", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 33px;
	color: #000000;
	white-space: nowrap;
}

.pxl-showcase-meta .pxl-icon-box .pxl-item--title a {
	color: inherit;
	text-decoration: none;
}

.pxl-showcase-meta .pxl-icon-box .pxl-item--title a:hover {
	color: inherit;
	text-decoration: none;
}

/*
 * Two-row badge layout — pill stays its natural width, but sits alone on row 1.
 *
 * Technique: flex `order` + an invisible full-width pseudo-element "break":
 *   order 0 → first badge (row 1)
 *   order 1 → ::after ghost (width 100%, height 0) — forces a new flex line
 *   order 2 → all remaining badges (row 2)
 *
 * This keeps the first pill at its natural width instead of stretching it.
 */
.pxl-showcase-meta .pxl-icon-box:first-child {
	order: 0;
}

/* Invisible row-break flex item */
.pxl-showcase-meta::after {
	content: '';
	width: 100%;
	height: 0;
	order: 1;
}

.pxl-showcase-meta .pxl-icon-box:not(:first-child) {
	order: 2;
}

/* Link button */
.pxl-showcase-link {
	margin-top: 4px;
}

.pxl-showcase-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 20px;
	background-color: #000000;
	color: #ffffff;
	border-radius: 30px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.pxl-showcase-btn:hover,
.pxl-showcase-btn:focus {
	background-color: #333333;
	color: #ffffff;
	text-decoration: none;
}

/* ── Image column — right column ──────────────────────────────────────────── */
/*
 * Mirrors container 9a7763c:
 *   width 60% (desktop) / 50% (tablet), padding 0, border-radius 10px.
 */

.pxl-showcase-image {
	flex-basis: 40%;
	flex-shrink: 0;
	min-width: 0;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	align-items: stretch;
}

.pxl-showcase-image img.pxl-showcase-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	max-height: 800px;   /* matches pxl_image max_height from the widget */
}

/* ── No-image fallback ────────────────────────────────────────────────────── */

.pxl-showcase-no-image {
	width: 100%;
	min-height: 300px;
	background-color: #e8e8e8;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	color: #888888;
	font-size: 14px;
	text-align: center;
	padding: 20px;
}

/* ── Empty-state (editor only) ────────────────────────────────────────────── */

.pxl-showcase-empty {
	padding: 40px 30px;
	background: #f9f9f9;
	border: 2px dashed #cccccc;
	border-radius: 10px;
	text-align: center;
	color: #888888;
	font-size: 14px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

/*
 * Tablet (≤ 1024px): stack columns, remove horizontal card padding so
 * the info and image go full-width.  Mirrors the tablet widths in the
 * original sections (width_tablet: 50% → both columns become 100% when stacked).
 */
@media screen and (max-width: 1024px) {
	.pxl-showcase-card {
		padding: 0 10px; /* tighten side padding on tablet */
	}

	.pxl-showcase-card-inner {
		flex-direction: column;
	}

	.pxl-showcase-info,
	.pxl-showcase-image {
		flex-basis: 100% !important;
		min-width: 100% !important;
		width: 100%;
	}

	
.pxl-showcase-desc {
		display: none; /* hidden on tablet */
	}
	
	.pxl-showcase-image {
		display: none; /* hidden on tablet */
	}
	
	/*
	 * On tablet the theme also forces col_sticky top:0 for pxl-column-sticky.
	 * We do the same: override the Elementor-injected top value to 0.
	 */
	.pxl-showcase-sticky .pxl-showcase-card {
		top: 0 !important;
	}
}

@media screen and (max-width: 767px) {
	.pxl-showcase-card {
		padding: 0 5px;
	}

	.pxl-showcase-desc {
		display: none; /* hidden on mobile */
	}

.pxl-showcase-image {
		display: none; /* hidden on mobile */
	}
	.pxl-showcase-meta {
		gap: 8px;
	}

	.pxl-showcase-logo-title {
		font-size: 1.2em;
	}

	/* Fully disable sticky on mobile — same as theme rule for pxl-column-sticky */
	.pxl-showcase-sticky .pxl-showcase-card {
		position: static !important;
		top: auto !important;
	}
}