/**
 * 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);
	/* Content max-width (matches https://smartinvestor.com.my/ reference —
	   every content row caps on large screens instead of stretching
	   edge-to-edge). No background here to preserve, so capped directly. */
	max-width: var(--container-max);
	margin-inline: auto;
}

.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 — explicitly requested value of 60px. */
.ui-art .thumb.corner-tr {
	border-top-right-radius: 60px;
}

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

.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);
	/* Content max-width (matches https://smartinvestor.com.my/ reference —
	   every content row caps on large screens instead of stretching
	   edge-to-edge; explicitly includes the leaderboard, unlike the
	   left/right skyscraper rail ads, which stay uncapped). No background
	   here to preserve, so capped directly. */
	max-width: var(--container-max);
	margin-inline: auto;
}

.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;
	/* Scales with the available content width, capped by .ui-lb-wrap's own
	   max-width (--container-max) above — this 1440px safety cap only
	   matters if this ever renders somewhere without that wrapper. Locked
	   aspect ratio (1308:162) keeps it proportional at every size — never
	   resizes based on whatever image an admin uploads, still identical on
	   every page (homepage/listing/single/legal). Mobile override below. */
	width: 100%;
	max-width: var(--container-max);
	aspect-ratio: 1308 / 162;
	margin-inline: auto;
}

/* REAL BUG #1, 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 instead of filling the slot. A link-less ad never hit
   this (its <picture> IS the direct flex child).
   REAL BUG #2, same root cause: when an ad HAS a link, <picture> is no
   longer a direct child of .ui-lb — it's nested one level deeper inside
   <a> — so the `.ui-lb > picture` rule below never matched it, leaving
   <picture> (and the <img> inside, whose own height:100% resolves against
   THIS box) with no explicit height at all. It fell back to its intrinsic
   aspect-ratio height instead, which doesn't match the 1308:162 box —
   visually this overflowed past the bottom padding and got clipped flush
   against the border, with the top padding staying correct throughout
   (exactly the "cropped/overlapping from the bottom" symptom reported).
   `.ui-lb > a > picture` below covers this nested case explicitly. */
.ui-lb > a,
.ui-lb > picture,
.ui-lb > a > picture {
	display: block;
	width: 100%;
	height: 100%;
}

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

/**
 * 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);
	border-radius: 0;
	overflow: hidden;
	position: relative;
	/* Strict homepage sidebar dimensions (316×600 desktop), mobile override
	   below (358×420) — replaces the old fixed height:600px so width/height
	   both stay locked regardless of the uploaded image or page context. */
	width: 100%;
	max-width: 316px;
	aspect-ratio: 316 / 600;
}

/* 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 > picture` covers the same nested-picture-inside-a-linked-
   ad case fixed on .ui-lb above (the actual bottom-cropping bug). */
.ui-rect > a,
.ui-rect > picture,
.ui-rect > a > 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 Design Refrance (TSI HM V4 - Responsive.html) — the
	   homepage's own mobile thumb size (100x74) was missing entirely, so
	   mobile kept the 120x88 desktop size instead of shrinking. */
	.ui-art .thumb {
		width: 100px;
		height: 74px;
	}

	/* 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 {
		max-width: 358px;
		aspect-ratio: 358 / 420;
	}

	.ui-lb {
		padding: 6px;
		max-width: 338px;
		aspect-ratio: 338 / 42;
	}

	/* "Hide on mobile" per-slot checkbox (Advertisements panel) — applied
	   to the slot's outer wrapper in ad-slot.php. */
	.ad-hide-mobile {
		display: none;
	}

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