/**
 * Post Magazine Grid — base layout.
 *
 * A port of the Unlimited Elements addon's `css.tpl`, with two deliberate
 * differences:
 *
 * 1. Everything is scoped to `.sir-magazine-grid`. The original left three rules
 *    unscoped (`.ue-grid-item-title a`, `.ue-grid-item-category a` and
 *    `.ue-grid-item-meta-data`), so they leaked into every widget on the page.
 *    Scoping them costs nothing here: Elementor's typography controls are written
 *    with four classes and still win.
 * 2. The responsive collapse block is not here. It depends on two controls and,
 *    more importantly, has to be an id selector to outrank Elementor's per-item
 *    spans, so the widget prints it inline per instance.
 *
 * Everything else — including the parts that look redundant — is kept as it was,
 * because the rendered page has to match what the addon produced.
 */

.sir-magazine-grid * {
	box-sizing: border-box;
}

.sir-magazine-grid {
	display: grid;
	grid-auto-rows: 1fr;
}

.sir-magazine-grid div.ue-grid-item {
	position: relative;
	display: flex;
	overflow: hidden;
}

.sir-magazine-grid .ue-grid-item-image img {
	display: block;
	width: 100%;
}

/* Cover layout: the image fills the cell and the content floats over its foot. */
.sir-magazine-grid.ue-layout-cover .ue-grid-item-image {
	position: absolute;
	inset: 0;
}

.sir-magazine-grid.ue-layout-cover .ue-grid-item-image img {
	height: 100%;
	object-fit: cover;
}

.sir-magazine-grid.ue-layout-cover .ue-grid-item-content {
	position: absolute;
	bottom: 0;
	width: 100%;
}

.sir-magazine-grid .ue-grid-item-image-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	display: block;
	width: 100%;
	height: 100%;
	transition: 0.3s;
}

.sir-magazine-grid .ue-grid-item-title a {
	font-size: 21px;
	font-weight: bold;
}

.sir-magazine-grid .ue-grid-item-category a {
	display: inline-block;
	text-transform: uppercase;
	font-size: 10px;
}

.sir-magazine-grid .uc_more_btn {
	text-align: center;
	text-decoration: none;
	transition: 0.3s;
}

.sir-magazine-grid .ue-grid-item-meta-data {
	display: flex;
	flex-wrap: wrap;
	font-size: 12px;
}

.sir-magazine-grid .ue-grid-item-meta-data-icon {
	line-height: 1em;
}

.sir-magazine-grid .ue-grid-item-meta-data-icon svg {
	width: 1em;
	height: 1em;
}

/*
 * Pagination.
 *
 * The old widget rendered a bare row of links styled by a hand-written Custom
 * CSS block on the page. These are real buttons instead: a square target big
 * enough to hit on a phone, a visible frame, and a filled current page.
 *
 * The frame is a pseudo-element rather than a border, for the same reason as the
 * filter pills — the parent theme styles link borders and box-shadows for its
 * own underline effect and overrides whichever of the two a link uses. Theme
 * rules do not reach ::before, so this holds.
 */
.sir-magazine-pagination {
	--sir-page-size: 44px;
	--sir-page-ink: #0a2246;
	--sir-page-line: #d8dce3;
	--sir-page-current-ink: #fff;
	--sir-page-current-bg: #0a2246;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.sir-magazine-pagination .page-numbers {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: var(--sir-page-size);
	height: var(--sir-page-size);
	padding: 0 10px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
	color: var(--sir-page-ink);
	text-decoration: none;
	line-height: 1;
	transition: background-color 160ms ease, color 160ms ease;
}

.sir-magazine-pagination .page-numbers::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--sir-page-line);
	pointer-events: none;
	transition: border-color 160ms ease;
}

.sir-magazine-pagination a.page-numbers:hover,
.sir-magazine-pagination a.page-numbers:focus-visible {
	color: var(--sir-page-ink);
}

.sir-magazine-pagination a.page-numbers:hover::before,
.sir-magazine-pagination a.page-numbers:focus-visible::before {
	border-color: var(--sir-page-ink);
}

.sir-magazine-pagination .page-numbers.current {
	background-color: var(--sir-page-current-bg);
	color: var(--sir-page-current-ink);
}

.sir-magazine-pagination .page-numbers.current::before {
	border-color: var(--sir-page-current-bg);
}

/* The ellipsis is not a target, so it gets no frame and no box. */
.sir-magazine-pagination .page-numbers.dots {
	min-width: 0;
	padding: 0 4px;
}

.sir-magazine-pagination .page-numbers.dots::before {
	content: none;
}

.sir-magazine-pagination .page-numbers.prev,
.sir-magazine-pagination .page-numbers.next {
	padding: 0 14px;
	font-size: 1.2em;
}

.sir-magazine-pagination .page-numbers:focus-visible {
	outline: 2px solid var(--sir-page-ink);
	outline-offset: 2px;
}