/*
 * CTW Post List — CSS-only, zero JavaScript. Deliberately independent of
 * ctw-carousel.css: this widget has no sliding/autoplay/arrows/dots, so it
 * never needs the carousel engine at all, and a page using only this widget
 * never downloads it.
 *
 * It does, however, style some of the same BLOCK class names the carousels do
 * (.ctw-block-image, .ctw-block-title, ...), because all three widgets render
 * the same building blocks. Every such rule here is therefore scoped to
 * .ctw-postlist — see the long note above them for the bug that came of not
 * doing so. Rules for this widget's own unique classes (.ctw-postlist,
 * .ctw-pl-*) need no scoping, and .ctw-visually-hidden is byte-identical in
 * both files so it cannot conflict.
 */

.ctw-postlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( var( --ctw-pl-columns, 1 ), minmax( 0, 1fr ) );
	gap: var( --ctw-pl-gap, 24px );
}

.ctw-postlist.ctw-pl-equal-height {
	align-items: stretch;
}
.ctw-postlist.ctw-pl-equal-height .ctw-pl-item-inner {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Same border-box fix as .ctw-slide-inner in ctw-carousel.css (2.1.0): with
   "Equal Height" on the item box gets height:100%, and under the browser
   default (content-box) the Item Box Padding was added on top of that, so each
   card overflowed its grid cell by the padding amount. Nothing changes when
   Equal Height is off, and no width or spacing shifts either way. */
.ctw-pl-item-inner {
	display: block;
	box-sizing: border-box;
	text-decoration: none;
	color: inherit;
}
a.ctw-pl-item-inner {
	display: flex;
	flex-direction: column;
}

/* -----------------------------------------------------------------------
 * Everything below is scoped to .ctw-postlist (2.1.1 bug fix).
 *
 * These block classes — .ctw-block-image, .ctw-block-title, .ctw-block-meta,
 * .ctw-block-description, .ctw-block-readmore — are NOT unique to this widget.
 * The two carousels' stylesheet (ctw-carousel.css) styles the very same class
 * names, because all three widgets render the same building blocks. Written
 * unscoped, as they were, whichever of the two stylesheets the page happened to
 * print second silently won for BOTH widgets.
 *
 * The damage that actually did: ctw-carousel.css gives .ctw-block-image
 * `display: flex`, which is the only reason the Content Carousel's Style >
 * Image > Alignment control (Left / Center / Right, applied as
 * justify-content) has anything to act on. This file's `display: block` landed
 * on top of it and switched the image wrapper back to a block, so
 * justify-content became inert and every carousel image stayed hard left no
 * matter what Alignment was set to. Reproduced and measured in a real browser:
 * with this stylesheet also loaded the image sat 0px from the left edge with
 * Alignment on Center, and 113px from it — correctly centred — without.
 *
 * Any page carrying both a Post List and a carousel hit it, and so did every
 * page open in the Elementor editor, which loads all of a plugin's widget
 * styles so any widget can be dropped in and render immediately.
 *
 * Scoping this file's copies to .ctw-postlist fixes it in both directions and
 * changes nothing about how the Post List itself looks: these rules already
 * won for Post List items before (they were either later in source order or
 * are now simply more specific), so the widget renders byte-identically. The
 * carousel stylesheet is left exactly as it was, and the Logo Slider's
 * stylesheet shares none of these class names and is untouched.
 * ---------------------------------------------------------------------*/

.ctw-postlist .ctw-block-image {
	display: block;
}
.ctw-postlist .ctw-block-image img {
	display: block;
	max-width: 100%;
	width: 100%;
	height: auto;
}

.ctw-postlist .ctw-block-title {
	margin: 0 0 8px;
}

.ctw-postlist .ctw-block-meta {
	display: block;
	margin: 0 0 8px;
}

.ctw-postlist .ctw-block-description.ctw-block-excerpt {
	margin: 0 0 12px;
}

.ctw-postlist .ctw-block-readmore {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
}
/* When the whole item is already a link, the visual-only Read More label
   (aria-hidden, see the widget's render()) must not itself be clickable —
   otherwise a click there would register twice / behave oddly since it sits
   inside the real <a>. */
.ctw-postlist a.ctw-pl-item-link .ctw-block-readmore {
	pointer-events: none;
}

/* Standard visually-hidden ("screen-reader-only") pattern, kept local to
   this widget's own stylesheet so it stays fully self-contained. */
.ctw-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.ctw-postlist-empty-notice {
	padding: 16px;
	border: 1px dashed rgba( 0, 0, 0, 0.25 );
	color: rgba( 0, 0, 0, 0.6 );
}