/**
 * Real Estate Social Pro — a card treatment for `.rep-social-linked-post`
 * (see Frontend\PostTemplate::add_card_class()), applied via post_class()
 * to every real WordPress post Publish to Website creates. Loaded on
 * every front-end request, deliberately theme-agnostic: this plugin
 * doesn't control (or know the internal markup/class names of) a
 * theme's own blog archive, "recent posts" widget, or related-posts
 * block, but post_class() output always lands on that per-post wrapper
 * element regardless of theme, so this is the one styling hook
 * guaranteed to reach those surfaces too — not just this plugin's own
 * [social_pro_feed]/[social_pro_posts] shortcode output (styled
 * separately, and more fully, in social.css's own .rep-social-feed__item).
 *
 * Deliberately conservative: a card surface (background/border/radius/
 * shadow/hover-lift) and a brand-colored link/heading accent — nothing
 * that assumes a particular internal layout, since guessing a theme's own
 * `.entry-title`/`.entry-summary`-style class names would be as likely to
 * clash with that theme's own CSS as to improve it.
 *
 * No padding on this outer element, on purpose — a Query Loop block (or
 * most themes' own card markup) puts the featured image flush against
 * the card's own edges, full-bleed, with its own separately-padded text
 * area below it, not unlike .rep-social-feed__item in social.css. Adding
 * padding here insets that image from a layout that already assumed it
 * wouldn't be, which is exactly what broke it: overflow: hidden alone is
 * enough to clip a flush image to this element's own rounded corners
 * without touching anything else about how the image itself is sized.
 */

.rep-social-linked-post {
	background: var(--rep-surface, #fff);
	border: 1px solid var(--rep-border, rgba(18, 21, 28, 0.1));
	border-radius: var(--rep-radius-md, 12px);
	box-shadow: var(--rep-shadow-sm, none);
	overflow: hidden;
	transition: box-shadow var(--rep-transition-fast, 130ms ease), transform var(--rep-transition-fast, 130ms ease);
	/* Every card in a row is stretched by the grid rule below to match
	   the row's own tallest card — flex column here lets this card's own
	   content (the text block below the image) actually grow to fill
	   that stretched box, rather than leaving empty space at the bottom.
	   No explicit height set: a flex item stretched to fill its row
	   already has that height, and setting one here (100%) fights that,
	   since it has nothing of its own to resolve 100% against. */
	display: flex;
	flex-direction: column;
}

/* One image can be a tall/portrait share graphic, another a wide
   landscape photo — left alone, that made every card's own height
   different (docs: "make sure no matter what, all the article boxes
   are the same size always"). Forcing every card's own image to the
   same crop ratio regardless of its original shape is what actually
   equalizes them; the flex/height rules above only handle a card whose
   image is already sized consistently. :first-of-type rather than a
   blanket `img` selector, so an inline image inside the excerpt text
   (rare, but possible) isn't force-cropped along with the actual
   featured/thumbnail image. */
.rep-social-linked-post img:first-of-type {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
}

.rep-social-linked-post:hover {
	box-shadow: var(--rep-shadow-md, 0 4px 14px rgba(18, 21, 28, 0.1));
	transform: translateY(-2px);
}

.rep-social-linked-post a {
	color: var(--rep-primary, #3452ff);
}

.rep-social-linked-post h1 a,
.rep-social-linked-post h2 a,
.rep-social-linked-post h3 a,
.rep-social-linked-post h4 a {
	color: var(--rep-text, #12151c);
	text-decoration: none;
}

.rep-social-linked-post h1 a:hover,
.rep-social-linked-post h2 a:hover,
.rep-social-linked-post h3 a:hover,
.rep-social-linked-post h4 a:hover {
	color: var(--rep-primary, #3452ff);
}

/*
 * The grid/list a theme (or page builder) wraps these post cards in has
 * no predictable class name — unlike everything else in this file, it's
 * not something post_class() reaches, so it can't be targeted directly.
 * `*:has(> .rep-social-linked-post)` sidesteps guessing one entirely: it
 * matches whatever element actually has one of this plugin's own post
 * cards as a direct child, whatever tag or class that element carries
 * (a WordPress core Query Loop's `<ul class="wp-block-post-template">`,
 * a theme's own `<div class="blog-grid">`, anything), and forces a
 * responsive, centered flex row on it — a fixed column count (Query
 * Loop's own default, and plenty of themes') doesn't respond to screen
 * size at all, and CSS Grid's `auto-fill` sizing (or a fixed % width
 * per card) leaves a short row sitting left-aligned instead of centered
 * (docs: "make them adjust to screen size to fit more or less on a row
 * but to always be spaced out and centered"). Scoped by :has() to only
 * a container actually holding one of this plugin's own posts, so any
 * unrelated grid elsewhere on the site is never touched; the !important
 * pair is necessary since the very thing being overridden is that
 * container's own, usually more specific, layout rules — and browsers
 * without :has() support simply leave that grid's original layout
 * behavior untouched rather than erroring.
 *
 * align-items: stretch is flexbox's own default, but it's declared
 * explicitly (and !important) here anyway — the container being
 * overridden may have set align-items to something else for its own
 * (now-replaced) layout, which would otherwise still apply and is
 * exactly what leaves cards in the same row at different heights
 * whenever their own content/image happens to differ (docs: "make sure
 * no matter what, all the article boxes are the same size always").
 */
*:has(> .rep-social-linked-post) {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch !important;
	justify-content: center;
	gap: var(--rep-space-md, 16px);
}

*:has(> .rep-social-linked-post) > * {
	flex: 1 1 260px;
	max-width: 360px;
	width: auto !important;
}