/**
 * SCTC Featured Fallback — square listing thumbnails and logo placeholder.
 *
 * Everything here is scoped to `.wp-block-post-template`, the query loop
 * wrapper, so the single post and the pages keep the theme's own behaviour.
 */

/* --- Square frame ------------------------------------------------------- */

/*
 * The listing thumbnails carry no aspect ratio of their own — the front page
 * stores a bare featured-image block — so posters keep their native shape and
 * the cards end up at different heights. Framing them squarely here fixes the
 * grid without touching the stored content, and matches the placeholder, which
 * is square by nature.
 */
.wp-block-post-template .wp-block-post-featured-image {
	aspect-ratio: 1 / 1;
	width: 100%;
	max-width: 400px;
	margin-inline: auto;
}

/*
 * The theme caps thumbnails at 350px in both dimensions (style.css line 1330).
 * That cap is what lets an image sit smaller than its frame, so it has to be
 * lifted for the square to be filled.
 */
.wp-block-post-template .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center;
}

/* The link is an inline box by default; it has to relay the square frame. */
.wp-block-post-template .wp-block-post-featured-image > a {
	display: block;
	width: 100%;
	height: 100%;
}

/* --- Date badge --------------------------------------------------------- */

/*
 * The theme centres the date badge vertically on `.homeblog-meta`, a row built
 * to hold the author name on the left and the badge on the right. The author
 * block is hidden on this site, so that row collapsed to zero height: the badge
 * hangs half below its own container and lands on the title of the card below.
 *
 * Putting it back in the flow removes any dependency on a parent height — the
 * cause of the bug. Pushed to the end of its row and pulled up by its own
 * height, it straddles the bottom edge of the thumbnail at any card width. The
 * row itself stays at zero height, so nothing below shifts. The card keeps its
 * spacing regardless: `.homeblog-text` carries its own top margin inline.
 */

/*
 * The gap under the thumbnail differs per context — the theme forces it to 0 on
 * the home page (`.blog-sec`, line 3390) but to a spacing preset elsewhere
 * (line 2073). Zeroing it in every listing gives the badge a single, predictable
 * starting point instead of one offset per template.
 */
.wp-block-post-template .wp-block-post-featured-image {
	margin-bottom: 0 !important;
}

.wp-block-post-template .homeblog-meta {
	/* The theme's `position: relative` only existed to anchor the badge. */
	position: static;
	justify-content: flex-end;
	/* The row sits straight under the thumbnail, so the badge lands on its edge. */
	margin-top: 0 !important;
}

.wp-block-post-template .homeblog-date-box {
	/* Relative, not absolute: stays in the flow, but can be lifted and layered. */
	position: relative;
	transform: translateY(-50%);
	margin-right: 20px;
	/* The thumbnail clips its overflow; the badge has to sit above it. */
	z-index: 2;
}

/*
 * Closes the gap between the thumbnail and the text card. The pattern stores
 * `margin-top: var(--wp--preset--spacing--30)` and a top padding preset inline
 * on the block, so overriding takes `!important` — the stored content stays
 * untouched.
 */
.wp-block-post-template .homeblog-text {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* --- Placeholder -------------------------------------------------------- */

/*
 * The crest ships already desaturated and very light, so no `grayscale()` or
 * `opacity` is applied on top: either would wash it out entirely. The tinted
 * background is what makes it legible — it is a shade darker than the card, so
 * the shape reads without competing with the real thumbnails around it.
 */
.sctc-featured-fallback__image {
	display: block;
	width: 100%;
	height: 100%;
	background-color: #eef0f4;
	background-image: url("logo-sctc.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 62% auto;
	transition: transform 0.5s ease;
}

/*
 * The theme grows thumbnails on hover, but its rule targets `img` and the
 * placeholder is a `span`, so the same cue is wired here to stay consistent
 * across the grid.
 */
.wp-block-post-template .wp-block-post-featured-image:hover .sctc-featured-fallback__image {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.sctc-featured-fallback__image {
		transition: none;
	}

	.wp-block-post-template .wp-block-post-featured-image:hover .sctc-featured-fallback__image {
		transform: none;
	}
}