/* ==========================================================================
   Stravum Builder — Query Loop widget (widgets/query-loop.php)

   PART FILE. Not enqueued on its own: the session lead concatenates this into
   assets/frontend.css. Everything here is scoped under .st-loop* and is the
   structural minimum + dark-theme defaults — all per-instance styling comes
   from the style engine (control `selectors`), which overrides these because
   it is emitted in a later <style> element at higher specificity (.st-el-{uid}).

   These declarations double as graceful degradation: if a bad `columns` /
   `gap` / `image_ratio` value makes the engine's declaration invalid, the CSS
   parser drops it and the defaults below still apply.

   No hidden-state rules are used, so nothing needs scoping out of the block
   editor canvas (frontend.css also loads inside the editor iframe).
   ========================================================================== */

.st-loop {
	--st-loop-bg: #10131a;
	--st-loop-bg-deep: #0a0c10;
	--st-loop-accent: #fd5b38;
	--st-loop-peach: #ffb4a4;
	--st-loop-text: rgba(255, 255, 255, 0.72);
	--st-loop-border: rgba(255, 255, 255, 0.08);
}

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

/* List layout: a single column of horizontal cards. */
.st-loop-grid.is-list {
	grid-template-columns: minmax(0, 1fr);
}

.st-loop-grid.is-list .st-loop-item {
	flex-direction: row;
	align-items: stretch;
}

.st-loop-grid.is-list .st-loop-link {
	flex-direction: row;
	align-items: stretch;
}

.st-loop-grid.is-list .st-loop-thumb {
	flex: 0 0 34%;
	max-width: 34%;
}

.st-loop-grid.is-list .st-loop-body {
	flex: 1 1 auto;
	justify-content: center;
}

/* Responsive fallbacks. The style engine's own tablet/mobile rules (from the
   responsive `columns` control) are emitted later and win when set. */
@media (max-width: 1024px) {
	.st-loop-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.st-loop-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.st-loop-grid.is-list .st-loop-item,
	.st-loop-grid.is-list .st-loop-link {
		flex-direction: column;
	}

	.st-loop-grid.is-list .st-loop-thumb {
		flex: 0 0 auto;
		max-width: 100%;
	}
}

/* ------------------------------------------------------------------ Card. */
.st-loop-item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background-color: var(--st-loop-bg);
	border: 1px solid var(--st-loop-border);
	border-radius: 16px;
	transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.st-loop-item:hover {
	border-color: rgba(253, 91, 56, 0.35);
}

/* The whole-card anchor must not look like a link or break the card layout. */
.st-loop-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.st-loop-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: 20px;
}

/* When the card itself carries padding (style control), the body should not
   double it up on the inline axis. */
.st-loop-item .st-loop-thumb + .st-loop-body {
	padding-top: 16px;
}

/* ----------------------------------------------------------- Thumbnail. */
.st-loop-thumb {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background-color: var(--st-loop-bg-deep);
	min-width: 0;
}

.st-loop-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.st-loop-item:hover .st-loop-thumb img {
	transform: scale(1.04);
}

/* Placeholder shown when a post has no featured image. */
.st-loop-ph {
	width: 100%;
	height: 100%;
	min-height: 120px;
	background:
		linear-gradient(135deg, rgba(253, 91, 56, 0.12), rgba(255, 180, 164, 0.05)),
		var(--st-loop-bg-deep);
}

/* ---------------------------------------------------------------- Meta. */
.st-loop-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	font-family: "Geist", sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.st-loop-terms {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.st-loop-term {
	color: var(--st-loop-peach);
}

.st-loop-term + .st-loop-term::before {
	content: "/ ";
}

/* --------------------------------------------------------------- Title. */
.st-loop-title {
	margin: 0;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: #fff;
	transition: color 0.25s ease;
	overflow-wrap: break-word;
}

.st-loop-title a {
	color: inherit;
	text-decoration: none;
}

.st-loop-item:hover .st-loop-title {
	color: var(--st-loop-peach);
}

/* ------------------------------------------------------------- Excerpt. */
.st-loop-excerpt {
	margin: 0;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: var(--st-loop-text);
	overflow-wrap: break-word;
}

/* ----------------------------------------------------------- Read more. */
.st-loop-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 2px;
	font-family: "Geist", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--st-loop-accent);
	text-decoration: none;
	transition: color 0.25s ease, gap 0.25s ease;
}

.st-loop-more::after {
	content: "\2192";
	font-size: 14px;
	letter-spacing: 0;
}

.st-loop-item:hover .st-loop-more {
	color: var(--st-loop-peach);
	gap: 10px;
}

/* --------------------------------------------------------- No results. */
.st-loop-empty {
	padding: 32px 20px;
	text-align: center;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 15px;
	color: var(--st-loop-text);
	background-color: var(--st-loop-bg);
	border: 1px dashed var(--st-loop-border);
	border-radius: 16px;
}

/* -------------------------------------------------------- Pagination. */
.st-loop-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 32px;
}

.st-loop-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	font-family: "Geist", sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: var(--st-loop-text);
	text-decoration: none;
	background-color: transparent;
	border: 1px solid var(--st-loop-border);
	border-radius: 10px;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.st-loop-pagination a.page-numbers:hover {
	color: #fff;
	border-color: rgba(253, 91, 56, 0.45);
}

.st-loop-pagination .page-numbers.current {
	color: var(--st-loop-bg-deep);
	background-color: var(--st-loop-accent);
	border-color: var(--st-loop-accent);
}

.st-loop-pagination .page-numbers.dots {
	border-color: transparent;
}