/**
 * CodLab Editor PRO — Loop Builder frontend styles.
 *
 * Variables consumed (set on `.codlab-loop` inline by Loop_Builder::render_full):
 *   --codlab-loop-cols : column count for grid/masonry
 *   --codlab-loop-gap  : gap in px (uniform vertical + horizontal)
 *
 * Brand palette: #CA1414 / #1D1B20.
 */

/* Base ----------------------------------------------------------------- */
.codlab-loop {
	--codlab-loop-brand: #CA1414;
	--codlab-loop-ink: #1D1B20;
	--codlab-loop-muted: #6B6B6B;
	--codlab-loop-border: #E0E0E0;
	--codlab-loop-bg: #FFFFFF;
	box-sizing: border-box;
	width: 100%;
}
.codlab-loop *,
.codlab-loop *::before,
.codlab-loop *::after {
	box-sizing: border-box;
}

.codlab-loop__items {
	display: block;
}

/* Grid ----------------------------------------------------------------- */
.codlab-loop--grid .codlab-loop__items {
	display: grid;
	grid-template-columns: repeat(var(--codlab-loop-cols, 3), minmax(0, 1fr));
	gap: var(--codlab-loop-gap, 24px);
}

/* List ----------------------------------------------------------------- */
.codlab-loop--list .codlab-loop__items {
	display: flex;
	flex-direction: column;
	gap: var(--codlab-loop-gap, 16px);
}

/* Masonry (CSS columns — graceful, not perfect) ------------------------ */
.codlab-loop--masonry .codlab-loop__items {
	column-count: var(--codlab-loop-cols, 3);
	column-gap: var(--codlab-loop-gap, 24px);
}
.codlab-loop--masonry .codlab-loop__item {
	break-inside: avoid;
	margin-bottom: var(--codlab-loop-gap, 24px);
	display: block;
}

/* Carousel (horizontal scroll-snap) ------------------------------------ */
.codlab-loop--carousel .codlab-loop__items {
	display: flex;
	flex-direction: row;
	gap: var(--codlab-loop-gap, 24px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
}
.codlab-loop--carousel .codlab-loop__item {
	flex: 0 0 calc((100% - (var(--codlab-loop-cols, 3) - 1) * var(--codlab-loop-gap, 24px)) / var(--codlab-loop-cols, 3));
	scroll-snap-align: start;
}

/* Items wrapper -------------------------------------------------------- */
.codlab-loop__item {
	min-width: 0; /* prevent grid blow-out */
}

/* Empty state ---------------------------------------------------------- */
.codlab-loop__empty {
	padding: 32px 16px;
	text-align: center;
	color: var(--codlab-loop-muted);
	font-size: 14px;
	border: 1px dashed var(--codlab-loop-border);
	border-radius: 8px;
	background: #fafafa;
}

/* Card variants used by starter templates ------------------------------ */
.cl-card {
	display: flex;
	flex-direction: column;
	background: var(--codlab-loop-bg);
	border: 1px solid var(--codlab-loop-border);
	border-radius: 10px;
	overflow: hidden;
	transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.cl-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(29, 27, 32, 0.08);
	border-color: rgba(202, 20, 20, 0.25);
}
.cl-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f4f4f4;
}
.cl-card__media img,
.cl-card__media .codlab-loop__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cl-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px;
	flex: 1;
}
.cl-card__title {
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--codlab-loop-ink);
}
.cl-card__title a {
	color: inherit;
	text-decoration: none;
}
.cl-card__title a:hover {
	color: var(--codlab-loop-brand);
}
.cl-card__excerpt {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--codlab-loop-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.cl-card__meta {
	font-size: 12px;
	color: var(--codlab-loop-muted);
	letter-spacing: 0.02em;
}
.cl-card__cta {
	align-self: flex-start;
	margin-top: 4px;
	padding: 8px 14px;
	border-radius: 6px;
	background: var(--codlab-loop-ink);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background 200ms ease;
}
.cl-card__cta:hover {
	background: var(--codlab-loop-brand);
}

/* Magazine variant ----------------------------------------------------- */
.cl-card--magazine .cl-card__media {
	aspect-ratio: 21 / 9;
}
.cl-card--magazine .cl-card__title {
	font-size: 22px;
}

/* List variant --------------------------------------------------------- */
.cl-card--list {
	flex-direction: row;
	align-items: stretch;
}
.cl-card__media--small {
	flex: 0 0 120px;
	aspect-ratio: 1 / 1;
	width: 120px;
	height: auto;
}
.cl-card--list .cl-card__body {
	padding: 14px 18px;
	justify-content: center;
}
.cl-card--list .cl-card__title {
	font-size: 16px;
}

/* Pagination chrome ---------------------------------------------------- */
.codlab-loop__pagination {
	margin-top: 24px;
}
.codlab-loop__pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	justify-content: center;
}
.codlab-loop__pagination li {
	margin: 0;
}
.codlab-loop__pagination .page-numbers {
	display: inline-block;
	padding: 8px 12px;
	min-width: 36px;
	border: 1px solid var(--codlab-loop-border);
	border-radius: 6px;
	color: var(--codlab-loop-ink);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	background: #fff;
	transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.codlab-loop__pagination .page-numbers:hover,
.codlab-loop__pagination .page-numbers.current {
	background: var(--codlab-loop-brand);
	color: #fff;
	border-color: var(--codlab-loop-brand);
}
.codlab-loop__pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var(--codlab-loop-muted);
	cursor: default;
}

/* Load more / infinite ------------------------------------------------- */
.codlab-loop__more {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}
.codlab-loop__btn-more {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: var(--codlab-loop-ink);
	color: #fff;
	padding: 12px 28px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 180ms ease, transform 120ms ease;
}
.codlab-loop__btn-more:hover {
	background: var(--codlab-loop-brand);
}
.codlab-loop__btn-more:active {
	transform: translateY(1px);
}
.codlab-loop__btn-more.is-loading {
	opacity: 0.7;
	cursor: wait;
	background: var(--codlab-loop-muted);
}

.codlab-loop__sentinel {
	height: 32px;
	margin-top: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.codlab-loop__sentinel.is-loading::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	border: 2px solid var(--codlab-loop-border);
	border-top-color: var(--codlab-loop-brand);
	border-radius: 50%;
	animation: codlab-loop-spin 720ms linear infinite;
}
@keyframes codlab-loop-spin {
	to { transform: rotate(360deg); }
}

/* Toast (errors) ------------------------------------------------------- */
.codlab-loop-toast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	transform: translateX(-50%) translateY(20px);
	background: var(--codlab-loop-ink, #1D1B20);
	color: #fff;
	padding: 12px 22px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transition: opacity 240ms ease, transform 240ms ease;
	z-index: 99999;
	pointer-events: none;
}
.codlab-loop-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.codlab-loop-toast--error {
	background: var(--codlab-loop-brand, #CA1414);
}

/* Placeholder (used by Loop_Builder::placeholder) ---------------------- */
.codlab-loop-placeholder {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	border: 1px dashed var(--codlab-loop-border);
	border-radius: 8px;
	background: #fff7e6;
	color: #7a5b00;
	font-size: 13px;
}
.codlab-loop-placeholder__icon {
	font-size: 16px;
	line-height: 1;
}

/* Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
	.codlab-loop--grid .codlab-loop__items {
		grid-template-columns: repeat(min(var(--codlab-loop-cols, 3), 2), minmax(0, 1fr));
	}
	.codlab-loop--masonry .codlab-loop__items {
		column-count: min(var(--codlab-loop-cols, 3), 2);
	}
	.cl-card--magazine .cl-card__title { font-size: 20px; }
}
@media (max-width: 600px) {
	.codlab-loop--grid .codlab-loop__items,
	.codlab-loop--masonry .codlab-loop__items {
		grid-template-columns: 1fr;
		column-count: 1;
	}
	.cl-card--list { flex-direction: column; }
	.cl-card__media--small { width: 100%; flex: none; aspect-ratio: 16 / 9; }
}