/**
 * Homepage article cards + content grid + ad slots. Homepage-only
 * (enqueued via is_front_page()). Values verified against the real
 * (non-dead-@media-max-width-1px) base rules in Design Refrance's
 * TSI Home Canva -Flat-.html.
 */

.ui-body {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 18px;
	padding: var(--spacing-content_grid-top) var(--spacing-content_grid-side) var(--spacing-content_grid-bottom);
}

.ui-articles {
	grid-column: 1 / span 8;
}

.ui-side {
	grid-column: 10 / span 3;
}

.ui-kick {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--color-ink-soft);
	padding-bottom: 14px;
	border-bottom: 2px solid var(--color-line);
	margin-bottom: 8px;
}

.ui-art {
	display: flex;
	gap: 22px;
	padding: 24px 0;
	border-bottom: 1px solid var(--color-line);
	color: inherit;
}

/* Same visited-link bug fixed in site-header.css — neutralize it here
   too, since .ui-art is also a real <a href>. */
.ui-art,
.ui-art:visited,
.ui-art:hover,
.ui-art:focus {
	color: inherit;
	text-decoration: none;
}

.ui-art .thumb {
	width: 120px;
	height: 88px;
	flex: none;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--color-line);
	background: var(--color-primary-wash);
}

/* Confirmed alternating corner-cut pattern — see article-card.php's
   header comment for the exact rule (2nd card = top-right cut, 4th =
   top-left, 6th = top-right, 8th = top-left, ...). 34px is the real
   confirmed radius (the source's inline style="border-top-right-
   radius:60px" is overridden by an !important CSS rule down to 34px —
   applying the real final value directly here rather than reproducing
   that two-step override). */
.ui-art .thumb.corner-tr {
	border-top-right-radius: 34px;
}

.ui-art .thumb.corner-tl {
	border-top-left-radius: 34px;
}

.ui-art .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ui-art .cat {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--color-primary);
}

.ui-art h3 {
	font-family: var(--font-secondary);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.25;
	margin: 6px 0 8px;
	color: var(--color-ink);
	/* Card headlines aren't length-limited by Design Refrance's own demo
	   content, but real editorial titles can run much longer than the
	   short samples shown there — a card with no cap can grow tall enough
	   to break the grid's visual rhythm against its neighbors. 3 lines is
	   a common, reasonable ceiling for a compact card headline (enough to
	   read a full thought, short of dominating the card) — clamped with
	   an ellipsis rather than just letting it overflow or wrap unbounded. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.ui-art:hover h3,
.ui-art:focus h3 {
	color: var(--color-primary-deep);
}

.ui-art .amt {
	font-size: 12px;
	color: var(--color-ink-soft);
}

.ui-art .amt b {
	color: var(--color-ink-mid);
	font-weight: 600;
}

/* Ad slots — leaderboard + sidebar rectangle, shared placeholder look
   (template-parts/components/ad-slot.php) when no image is set yet. */
.ui-lb-wrap {
	padding: var(--spacing-leaderboard_ad-top) var(--spacing-leaderboard_ad-side) var(--spacing-leaderboard_ad-bottom);
}

.ui-lb {
	border: 2px solid var(--color-ink);
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: var(--color-paper);
	overflow: hidden;
}

/* REAL BUG, confirmed via computed-style inspection (not assumed): flex
   items don't stretch on the main axis by default — only the CROSS axis
   (align-items: stretch, already the default, handles height). Whenever
   an ad has a Redirect URL set, malasiya_render_ad_picture() wraps the
   <picture> in an <a>, and that <a> — being the flex item here, not the
   <picture>/<img> — has no width of its own, so it shrinks to the image's
   native pixel size (e.g. a 1024px-wide upload sitting in a much wider
   box, with dead space on both sides) instead of filling the slot. A
   link-less ad never hit this (its <picture> IS the direct flex child,
   and this same rule below already covered that case). Applies to both
   the <a> and <picture> wrapper, whichever ends up as the direct child. */
.ui-lb > a,
.ui-lb > picture {
	display: block;
	width: 100%;
}

.ui-lb img {
	display: block;
	width: 100%;
	height: auto;
}

/**
 * Placeholder-state styling (corner marks, tag, italic copy, size label)
 * is shared by every ad slot — .ui-lb (leaderboard), .ui-rect (sidebar),
 * and .ad-rail .rbox (skyscraper/rail slots) — so an empty slot looks and
 * reads identically everywhere on the site, regardless of which page or
 * variant it is. Originally scoped to .ui-lb only, then .ui-rect (a
 * sidebar placeholder rendered as unstyled stacked text, caught via a
 * real screenshot); .ad-rail .rbox added on the same "make every empty
 * slot look the same" request — it used to be a plainer box (just copy +
 * size, no corner marks/tag).
 */
.ui-lb,
.ui-rect,
.ad-rail .rbox {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ui-lb .corner,
.ui-rect .corner,
.ad-rail .rbox .corner {
	position: absolute;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--color-ink-soft);
}

.ui-lb .corner.tl, .ui-rect .corner.tl, .ad-rail .rbox .corner.tl { top: 14px; left: 18px; }
.ui-lb .corner.tr, .ui-rect .corner.tr, .ad-rail .rbox .corner.tr { top: 14px; right: 18px; }
.ui-lb .corner.bl, .ui-rect .corner.bl, .ad-rail .rbox .corner.bl { bottom: 14px; left: 18px; }
.ui-lb .corner.br, .ui-rect .corner.br, .ad-rail .rbox .corner.br { bottom: 14px; right: 18px; }

.ui-lb .lb-in,
.ui-rect .lb-in,
.ad-rail .rbox .lb-in {
	text-align: center;
	z-index: 1;
	padding: 16px;
}

.ui-lb .lb-tag,
.ui-rect .lb-tag,
.ad-rail .rbox .lb-tag {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 9px;
}

.ui-lb .lb-copy,
.ui-rect .lb-copy,
.ad-rail .rbox .lb-copy {
	font-family: var(--font-secondary);
	font-size: 19px;
	font-style: italic;
	color: var(--color-ink-mid);
}

.ui-lb .lb-sz,
.ui-rect .lb-sz,
.ad-rail .rbox .lb-sz {
	display: block;
	font-size: 11px;
	color: var(--color-ink-soft);
	margin-top: 7px;
}

.ad-label {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #555;
	background: rgba(255, 255, 255, 0.88);
	padding: 2px 7px;
	border: 1px solid rgba(0, 0, 0, 0.13);
	border-radius: 2px;
	z-index: 10;
	line-height: 1.5;
	pointer-events: none;
}

.ui-rect {
	border: 1px solid var(--color-line-mid);
	height: 600px;
	border-radius: 0;
	overflow: hidden;
	position: relative;
}

/* Same flex-item-doesn't-stretch bug as .ui-lb above, plus .ui-rect's own
   align-items:center (from the shared rule further up) means the <a>/
   <picture> wrapper wouldn't stretch vertically either without this —
   needed so the img's own height:100%/object-fit:cover below actually
   has a real 600px-tall box to fill instead of collapsing to content. */
.ui-rect > a,
.ui-rect > picture {
	display: block;
	width: 100%;
	height: 100%;
}

.ui-rect img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 768px) {
	.ui-body {
		grid-template-columns: 1fr;
		padding-top: var(--spacing-content_grid-top);
		padding-bottom: var(--spacing-content_grid-bottom);
		padding-inline: 16px;
		gap: 0;
	}

	.ui-lb-wrap {
		padding-top: var(--spacing-leaderboard_ad-top);
		padding-bottom: var(--spacing-leaderboard_ad-bottom);
		padding-inline: 16px;
	}

	.ui-articles,
	.ui-side {
		grid-column: 1 / -1;
	}

	.ui-side {
		margin-top: 24px;
	}

	.ui-art {
		gap: 14px;
		padding: 18px 0;
	}

	/* Confirmed from source's mobile block — these three font-size
	   reductions (h3, .cat, .amt) were missing entirely, so headlines/
	   category labels/meta text all rendered at full desktop size on
	   mobile. */
	.ui-art h3 {
		font-size: 17px;
		margin: 5px 0 7px;
	}

	.ui-art .cat {
		font-size: 9.5px;
	}

	.ui-art .amt {
		font-size: 11px;
	}

	.ui-rect {
		height: 420px;
	}

	.ui-lb {
		padding: 6px;
	}

	.ad-label {
		font-size: 7px;
	}
}