/**
 * Sogbu — Custom front-end overrides
 *
 * Spectra (UAGB) Post Grid normalization for the home page.
 * Every selector below is scoped to a specific block-instance class
 * so no other Post Grid, Post block, or layout on the site is touched.
 *
 * Currently styled blocks:
 *   - .uagb-block-482b3544  → "Trending News" 4-column row
 *   - .uagb-block-e2282807  → Editorial Picks left column (small list)
 *   - .uagb-block-d087bec8  → Editorial Picks center hero
 *   - .uagb-block-0da6fc6e  → Editorial Picks center secondary
 *   - .uagb-block-ffefe8ce  → Editorial Picks right column (mixed list)
 *   - .uagb-block-b43aa079  → Around The World hero (image as background)
 *   - .uagb-block-fa6f8201  → Around The World stacked cards (image as bg)
 *
 * If you ever swap or recreate any of these blocks, update the
 * .uagb-block-XXXXXXXX class names below to match the new instances.
 *
 * Cross-block design rules:
 *   1. Uniform thumbnail frames using aspect-ratio + object-fit: cover
 *      so portrait, landscape, and square sources all crop cleanly.
 *   2. Posts without a featured image get a branded "SOGBU.PH" cover
 *      (where it makes sense — text-only list items are left alone).
 *   3. Categories render as wrapping pill chips so even long names
 *      like "Gala (Travel / Food Trips)" never get clipped.
 *   4. Titles aren't line-clamped on hero cards; smaller list items
 *      use a 2- or 3-line clamp where space is tight.
 *   5. Dates pinned to the bottom of grid cards via flex margin-top.
 *
 * @package Astra
 */

/* ==================================================================
   Shared variables — colour, sizing and chip palette used by every
   custom-styled block on the home page.
   ================================================================== */

.uagb-block-482b3544.uagb-post-grid,
.uagb-block-e2282807.uagb-post-grid,
.uagb-block-d087bec8.uagb-post-grid,
.uagb-block-0da6fc6e.uagb-post-grid,
.uagb-block-ffefe8ce.uagb-post-grid {
	--sogbu-thumb-bg: #f1f1f1;
	--sogbu-thumb-radius: 6px;

	/* Pill chip palette */
	--sogbu-chip-bg: rgba(0, 0, 0, 0.045);
	--sogbu-chip-bg-hover: rgba(0, 0, 0, 0.08);
	--sogbu-chip-border: rgba(0, 0, 0, 0.06);
	--sogbu-chip-radius: 999px;

	/* SOGBU.PH fallback "cover" for missing featured images. */
	--sogbu-fallback-bg-deep: #2a1810;
	--sogbu-fallback-bg-mid: #4a2618;
	--sogbu-fallback-accent: rgba(229, 29, 72, 0.28);
	--sogbu-fallback-warm: rgba(255, 200, 100, 0.16);
	--sogbu-fallback-text: rgba(255, 255, 255, 0.92);

	/* List separator on the column lists */
	--sogbu-divider: rgba(0, 0, 0, 0.07);
}

/* ==================================================================
   Shared pill-chip style — used everywhere we render categories.
   ================================================================== */

.uagb-block-482b3544.uagb-post-grid .uagb-post__taxonomy.highlighted,
.uagb-block-d087bec8.uagb-post-grid .uagb-post__taxonomy.highlighted,
.uagb-block-0da6fc6e.uagb-post-grid .uagb-post__taxonomy.highlighted,
.uagb-block-ffefe8ce.uagb-post-grid .uagb-post__taxonomy.highlighted {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 4px 10px;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--sogbu-chip-bg);
	border: 1px solid var(--sogbu-chip-border);
	border-radius: var(--sogbu-chip-radius);
	line-height: 1.4;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.uagb-block-482b3544.uagb-post-grid .uagb-post__taxonomy.highlighted:hover,
.uagb-block-d087bec8.uagb-post-grid .uagb-post__taxonomy.highlighted:hover,
.uagb-block-0da6fc6e.uagb-post-grid .uagb-post__taxonomy.highlighted:hover,
.uagb-block-ffefe8ce.uagb-post-grid .uagb-post__taxonomy.highlighted:hover {
	background: var(--sogbu-chip-bg-hover);
}

.uagb-block-482b3544.uagb-post-grid .uagb-post__taxonomy.highlighted a,
.uagb-block-d087bec8.uagb-post-grid .uagb-post__taxonomy.highlighted a,
.uagb-block-0da6fc6e.uagb-post-grid .uagb-post__taxonomy.highlighted a,
.uagb-block-ffefe8ce.uagb-post-grid .uagb-post__taxonomy.highlighted a {
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

/* The chip *row* container (the parent <div class="uagb-post__text">
   that wraps the highlighted pills). Wrap and gap so chips never clip. */
.uagb-block-482b3544.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__text:has(.uagb-post__taxonomy),
.uagb-block-d087bec8.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__text:has(.uagb-post__taxonomy),
.uagb-block-0da6fc6e.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__text:has(.uagb-post__taxonomy),
.uagb-block-ffefe8ce.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__text:has(.uagb-post__taxonomy) {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 0.6rem;
	padding: 0;
	line-height: 1;
}

/* ==================================================================
   Shared "SOGBU.PH" branded fallback cover — used by every block
   that has visible-thumbnail cards, except the small left-column
   list (which gets its own compact monogram, see below).
   ================================================================== */

.uagb-block-482b3544.uagb-post-grid .uagb-post__inner-wrap:not(:has(.uagb-post__image))::before,
.uagb-block-d087bec8.uagb-post-grid .uagb-post__inner-wrap:not(:has(.uagb-post__image))::before,
.uagb-block-0da6fc6e.uagb-post-grid .uagb-post__inner-wrap:not(:has(.uagb-post__image))::before {
	content: "SOGBU.PH";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background:
		radial-gradient(ellipse at 28% 28%, var(--sogbu-fallback-warm), transparent 55%),
		radial-gradient(ellipse at 72% 78%, var(--sogbu-fallback-accent), transparent 55%),
		linear-gradient(135deg,
			var(--sogbu-fallback-bg-deep) 0%,
			var(--sogbu-fallback-bg-mid) 50%,
			var(--sogbu-fallback-bg-deep) 100%);
	color: var(--sogbu-fallback-text);
	font-family: inherit;
	font-size: clamp(0.85rem, 1.4vw, 1.25rem);
	font-weight: 800;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	text-transform: uppercase;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
	border-radius: var(--sogbu-thumb-radius);
	margin-bottom: 1rem;
	order: 1;
	position: relative;
	overflow: hidden;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.06),
		inset 0 -50px 70px rgba(0, 0, 0, 0.32);
}

/* ==================================================================
   "Trending News" — 4-column row (.uagb-block-482b3544)
   ================================================================== */

.uagb-block-482b3544.uagb-post-grid {
	--sogbu-thumb-ratio: 4 / 3;
	--sogbu-card-gap: 1rem;
	--sogbu-card-gutter: 14px;
	margin-inline: calc(-1 * var(--sogbu-card-gutter));
}

.uagb-block-482b3544.uagb-post-grid .uagb-post__inner-wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	padding-inline: var(--sogbu-card-gutter);
}

.uagb-block-482b3544.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__image {
	order: 1;
}
.uagb-block-482b3544.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__text:has(.uagb-post__taxonomy) {
	order: 2;
}
.uagb-block-482b3544.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__title {
	order: 3;
}
.uagb-block-482b3544.uagb-post-grid .uagb-post__inner-wrap > .uagb-post-grid-byline {
	order: 4;
}

.uagb-block-482b3544.uagb-post-grid .uagb-post__image {
	position: relative;
	width: 100%;
	aspect-ratio: var(--sogbu-thumb-ratio);
	overflow: hidden;
	background: var(--sogbu-thumb-bg);
	border-radius: var(--sogbu-thumb-radius);
	margin-bottom: var(--sogbu-card-gap);
}

.uagb-block-482b3544.uagb-post-grid .uagb-post__image > a {
	display: block;
	width: 100%;
	height: 100%;
}

.uagb-block-482b3544.uagb-post-grid .uagb-post__image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: center;
	transition: transform 0.45s ease;
}

.uagb-block-482b3544.uagb-post-grid .uagb-post__inner-wrap:hover .uagb-post__image img {
	transform: scale(1.04);
}

.uagb-block-482b3544.uagb-post-grid .uagb-post__inner-wrap:not(:has(.uagb-post__image))::before {
	aspect-ratio: var(--sogbu-thumb-ratio);
	margin-bottom: var(--sogbu-card-gap);
}

.uagb-block-482b3544.uagb-post-grid .uagb-post__title {
	margin: 0 0 0.5rem;
	line-height: 1.35;
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;
}

.uagb-block-482b3544.uagb-post-grid .uagb-post-grid-byline {
	margin-top: auto;
	padding-top: 0.25rem;
}

/* ==================================================================
   Editorial Picks — LEFT column (.uagb-block-e2282807)
   Small list. Image-on-left layout for a tight sidebar feel.
   ================================================================== */

.uagb-block-e2282807.uagb-post-grid .uagb-post__inner-wrap {
	display: grid;
	grid-template-columns: 110px 1fr;
	grid-template-rows: auto auto 1fr;
	column-gap: 14px;
	row-gap: 4px;
	align-items: start;
	padding: 14px 0;
	margin: 0;
	border-bottom: 1px solid var(--sogbu-divider);
}

.uagb-block-e2282807.uagb-post-grid .uagb-post__inner-wrap:first-of-type {
	padding-top: 0;
}

.uagb-block-e2282807.uagb-post-grid .uagb-post__inner-wrap:last-of-type {
	border-bottom: none;
	padding-bottom: 0;
}

.uagb-block-e2282807.uagb-post-grid .uagb-post__image {
	grid-column: 1;
	grid-row: 1 / span 3;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--sogbu-thumb-radius);
	background: var(--sogbu-thumb-bg);
	margin: 0;
}

.uagb-block-e2282807.uagb-post-grid .uagb-post__image > a,
.uagb-block-e2282807.uagb-post-grid .uagb-post__image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

.uagb-block-e2282807.uagb-post-grid .uagb-post__image img {
	object-fit: cover;
	object-position: center;
	max-width: none;
	transition: transform 0.45s ease;
}

.uagb-block-e2282807.uagb-post-grid .uagb-post__inner-wrap:hover .uagb-post__image img {
	transform: scale(1.04);
}

/* Compact monogram fallback for the small left-column thumbnail. */
.uagb-block-e2282807.uagb-post-grid .uagb-post__inner-wrap:not(:has(.uagb-post__image))::before {
	content: "S";
	grid-column: 1;
	grid-row: 1 / span 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	background:
		radial-gradient(ellipse at 30% 30%, var(--sogbu-fallback-warm), transparent 55%),
		linear-gradient(135deg, var(--sogbu-fallback-bg-deep), var(--sogbu-fallback-bg-mid));
	color: var(--sogbu-fallback-text);
	font-size: 1.6rem;
	font-weight: 800;
	border-radius: var(--sogbu-thumb-radius);
}

.uagb-block-e2282807.uagb-post-grid .uagb-post__title {
	grid-column: 2;
	grid-row: 1;
	font-size: 0.95rem;
	line-height: 1.35;
	font-weight: 600;
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.uagb-block-e2282807.uagb-post-grid .uagb-post-grid-byline {
	grid-column: 2;
	grid-row: 2;
	font-size: 0.72rem;
	margin: 4px 0 0;
	opacity: 0.65;
}

/* ==================================================================
   Editorial Picks — CENTER HERO (.uagb-block-d087bec8)
   Big featured post with 16:9 thumb, chips, large title, excerpt.
   ================================================================== */

.uagb-block-d087bec8.uagb-post-grid .uagb-post__inner-wrap {
	display: flex;
	flex-direction: column;
	margin: 0 0 2rem;
}

.uagb-block-d087bec8.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__image {
	order: 1;
}
.uagb-block-d087bec8.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__text:has(.uagb-post__taxonomy) {
	order: 2;
	margin-top: 1rem;
}
.uagb-block-d087bec8.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__title {
	order: 3;
}
.uagb-block-d087bec8.uagb-post-grid .uagb-post__inner-wrap > .uagb-post-grid-byline {
	order: 4;
}
.uagb-block-d087bec8.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__excerpt {
	order: 5;
}

.uagb-block-d087bec8.uagb-post-grid .uagb-post__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
	background: var(--sogbu-thumb-bg);
	margin: 0;
}

.uagb-block-d087bec8.uagb-post-grid .uagb-post__image > a,
.uagb-block-d087bec8.uagb-post-grid .uagb-post__image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

.uagb-block-d087bec8.uagb-post-grid .uagb-post__image img {
	object-fit: cover;
	object-position: center;
	max-width: none;
	transition: transform 0.5s ease;
}

.uagb-block-d087bec8.uagb-post-grid .uagb-post__inner-wrap:hover .uagb-post__image img {
	transform: scale(1.03);
}

.uagb-block-d087bec8.uagb-post-grid .uagb-post__inner-wrap:not(:has(.uagb-post__image))::before {
	aspect-ratio: 16 / 9;
}

.uagb-block-d087bec8.uagb-post-grid .uagb-post__title {
	font-size: clamp(1.25rem, 1.6vw, 1.6rem);
	line-height: 1.25;
	font-weight: 700;
	margin: 0 0 0.4rem;
	overflow-wrap: break-word;
	hyphens: auto;
}

.uagb-block-d087bec8.uagb-post-grid .uagb-post-grid-byline {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	opacity: 0.7;
}

.uagb-block-d087bec8.uagb-post-grid .uagb-post__excerpt {
	font-size: 0.95rem;
	line-height: 1.55;
	opacity: 0.85;
	margin: 0;
}

.uagb-block-d087bec8.uagb-post-grid .uagb-post__excerpt p {
	margin: 0;
}

/* ==================================================================
   Editorial Picks — CENTER SECONDARY (.uagb-block-0da6fc6e)
   Same cover treatment as hero, slightly smaller typography.
   The Spectra-rendered .uagb-image-ratio-2-3 wrapper is overridden
   here so wide and square sources both crop to a clean 16:9 frame.
   ================================================================== */

.uagb-block-0da6fc6e.uagb-post-grid .uagb-post__inner-wrap {
	display: flex;
	flex-direction: column;
	margin: 0 0 2rem;
}

.uagb-block-0da6fc6e.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__image {
	order: 1;
}
.uagb-block-0da6fc6e.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__text:has(.uagb-post__taxonomy) {
	order: 2;
	margin-top: 1rem;
}
.uagb-block-0da6fc6e.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__title {
	order: 3;
}
.uagb-block-0da6fc6e.uagb-post-grid .uagb-post__inner-wrap > .uagb-post-grid-byline {
	order: 4;
}

.uagb-block-0da6fc6e.uagb-post-grid .uagb-post__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
	background: var(--sogbu-thumb-bg);
	margin: 0;
}

.uagb-block-0da6fc6e.uagb-post-grid .uagb-post__image > a,
.uagb-block-0da6fc6e.uagb-post-grid .uagb-post__image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

.uagb-block-0da6fc6e.uagb-post-grid .uagb-post__image img {
	object-fit: cover;
	object-position: center;
	max-width: none;
	transition: transform 0.5s ease;
}

.uagb-block-0da6fc6e.uagb-post-grid .uagb-post__inner-wrap:hover .uagb-post__image img {
	transform: scale(1.03);
}

.uagb-block-0da6fc6e.uagb-post-grid .uagb-post__inner-wrap:not(:has(.uagb-post__image))::before {
	aspect-ratio: 16 / 9;
}

.uagb-block-0da6fc6e.uagb-post-grid .uagb-post__title {
	font-size: clamp(1.05rem, 1.2vw, 1.2rem);
	line-height: 1.3;
	font-weight: 700;
	margin: 0 0 0.4rem;
	overflow-wrap: break-word;
	hyphens: auto;
}

.uagb-block-0da6fc6e.uagb-post-grid .uagb-post-grid-byline {
	margin: 0;
	font-size: 0.75rem;
	opacity: 0.7;
}

/* ==================================================================
   Editorial Picks — RIGHT column (.uagb-block-ffefe8ce)
   Stacked list. Items with featured images get a 4:3 thumb at top;
   text-only items render cleanly as just chips + title + date so
   the column doesn't feel image-heavy.
   ================================================================== */

.uagb-block-ffefe8ce.uagb-post-grid .uagb-post__inner-wrap {
	display: flex;
	flex-direction: column;
	padding: 14px 0;
	margin: 0;
	border-bottom: 1px solid var(--sogbu-divider);
}

.uagb-block-ffefe8ce.uagb-post-grid .uagb-post__inner-wrap:first-of-type {
	padding-top: 0;
}

.uagb-block-ffefe8ce.uagb-post-grid .uagb-post__inner-wrap:last-of-type {
	border-bottom: none;
}

.uagb-block-ffefe8ce.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__image {
	order: 1;
}
.uagb-block-ffefe8ce.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__text:has(.uagb-post__taxonomy) {
	order: 2;
}
.uagb-block-ffefe8ce.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__title {
	order: 3;
}
.uagb-block-ffefe8ce.uagb-post-grid .uagb-post__inner-wrap > .uagb-post-grid-byline {
	order: 4;
}

.uagb-block-ffefe8ce.uagb-post-grid .uagb-post__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--sogbu-thumb-radius);
	background: var(--sogbu-thumb-bg);
	margin: 0 0 0.7rem;
}

.uagb-block-ffefe8ce.uagb-post-grid .uagb-post__image > a,
.uagb-block-ffefe8ce.uagb-post-grid .uagb-post__image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
}

.uagb-block-ffefe8ce.uagb-post-grid .uagb-post__image img {
	object-fit: cover;
	object-position: center;
	max-width: none;
	transition: transform 0.45s ease;
}

.uagb-block-ffefe8ce.uagb-post-grid .uagb-post__inner-wrap:hover .uagb-post__image img {
	transform: scale(1.04);
}

/* No SOGBU.PH cover for text-only right-column items — the mixed
   visual rhythm (image + text rows / pure text rows) reads as an
   intentional editorial list rather than missing-image cards. */

.uagb-block-ffefe8ce.uagb-post-grid .uagb-post__title {
	font-size: 1rem;
	line-height: 1.35;
	font-weight: 700;
	margin: 0 0 0.35rem;
	overflow-wrap: break-word;
	hyphens: auto;
}

.uagb-block-ffefe8ce.uagb-post-grid .uagb-post-grid-byline {
	margin: 0;
	font-size: 0.72rem;
	opacity: 0.7;
}

/* ==================================================================
   "Around The World" — shared chip + chip-row treatment for the two
   image-as-background blocks. Lighter (white-on-dark) variant of the
   chip used elsewhere on the page so it reads on photographic
   backgrounds with a dark gradient overlay.
   ================================================================== */

.uagb-block-b43aa079.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__text:has(.uagb-post__taxonomy),
.uagb-block-fa6f8201.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__text:has(.uagb-post__taxonomy) {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0;
	line-height: 1;
	position: relative;
	z-index: 2;
}

.uagb-block-b43aa079.uagb-post-grid .uagb-post__taxonomy.highlighted,
.uagb-block-fa6f8201.uagb-post-grid .uagb-post__taxonomy.highlighted {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 4px 10px;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	line-height: 1.4;
	color: #b91c47;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background 0.2s ease, transform 0.2s ease;
}

.uagb-block-b43aa079.uagb-post-grid .uagb-post__taxonomy.highlighted:hover,
.uagb-block-fa6f8201.uagb-post-grid .uagb-post__taxonomy.highlighted:hover {
	background: #fff;
	transform: translateY(-1px);
}

.uagb-block-b43aa079.uagb-post-grid .uagb-post__taxonomy.highlighted a,
.uagb-block-fa6f8201.uagb-post-grid .uagb-post__taxonomy.highlighted a {
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

/* ==================================================================
   "Around The World" — HERO card (.uagb-block-b43aa079)
   Image fills the card as a background; text content sits above a
   bottom-up dark gradient for legibility.
   ================================================================== */

.uagb-block-b43aa079.uagb-post-grid {
	margin: 0;
}

.uagb-block-b43aa079.uagb-post-grid .uagb-post__inner-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 4 / 5;
	min-height: 460px;
	overflow: hidden;
	border-radius: 10px;
	padding: 2rem 2rem 1.75rem;
	margin: 0;
	isolation: isolate;
}

/* Image full-bleed — every element in the chain (.uagb-post__image,
   the <a>, the <img>) is forced to position:absolute filling its
   parent. This defeats every Spectra dynamic-CSS rule we've seen
   that re-anchors the image to a corner or pins it to its natural
   intrinsic dimensions. */
.uagb-block-b43aa079.uagb-post-grid .uagb-post__image,
.uagb-block-b43aa079.uagb-post-grid .uagb-post__image > a,
.uagb-block-b43aa079.uagb-post-grid .uagb-post__image img {
	position: absolute !important;
	inset: 0 !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	display: block !important;
	float: none !important;
	z-index: 0 !important;
}

.uagb-block-b43aa079.uagb-post-grid .uagb-post__image img {
	object-fit: cover !important;
	object-position: center center !important;
	transform: none;
	transform-origin: center center !important;
	transition: transform 0.45s ease !important;
}

/* Override Spectra's heavier ken-burns hover (which translates the
   image, causing the off-centre "lower-right" drift). Replace with a
   clean centre-out scale that matches every other block on the page. */
.uagb-block-b43aa079.uagb-post-grid .uagb-post__inner-wrap:hover .uagb-post__image img {
	transform: scale(1.04) !important;
	transform-origin: center center !important;
}

/* Kill Spectra's full-card darkening overlay on hover. We already
   provide our own bottom-up gradient via ::after for legibility. */
.uagb-block-b43aa079.uagb-post-grid .uagb-post__inner-wrap::before,
.uagb-block-b43aa079.uagb-post-grid .uagb-post__inner-wrap:hover::before {
	display: none !important;
	opacity: 0 !important;
}

/* Belt-and-braces: ensure no transform leaks onto the image *container*
   so the only thing that scales is the IMG itself, from its centre. */
.uagb-block-b43aa079.uagb-post-grid .uagb-post__inner-wrap .uagb-post__image,
.uagb-block-b43aa079.uagb-post-grid .uagb-post__inner-wrap:hover .uagb-post__image {
	transform: none !important;
}

/* Dark gradient overlay over the image. */
.uagb-block-b43aa079.uagb-post-grid .uagb-post__inner-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.78) 0%,
		rgba(0, 0, 0, 0.50) 35%,
		rgba(0, 0, 0, 0.20) 65%,
		rgba(0, 0, 0, 0.05) 100%
	);
	pointer-events: none;
	border-radius: inherit;
}

/* Lift content above the overlay. */
.uagb-block-b43aa079.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__title,
.uagb-block-b43aa079.uagb-post-grid .uagb-post__inner-wrap > .uagb-post-grid-byline,
.uagb-block-b43aa079.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__excerpt {
	position: relative;
	z-index: 2;
}

/* Visual order: chips → title → date → excerpt. */
.uagb-block-b43aa079.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__text:has(.uagb-post__taxonomy) {
	order: 1;
	margin: 0 0 0.85rem;
}
.uagb-block-b43aa079.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__title {
	order: 2;
}
.uagb-block-b43aa079.uagb-post-grid .uagb-post__inner-wrap > .uagb-post-grid-byline {
	order: 3;
}
.uagb-block-b43aa079.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__excerpt {
	order: 4;
}

/* Title — explicit size override since Spectra renders this as <h1>. */
.uagb-block-b43aa079.uagb-post-grid .uagb-post__title {
	color: #fff;
	font-size: clamp(1.5rem, 2.4vw, 2.25rem) !important;
	line-height: 1.15;
	font-weight: 800;
	margin: 0 0 0.75rem;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
	overflow-wrap: break-word;
	hyphens: auto;
}

.uagb-block-b43aa079.uagb-post-grid .uagb-post__title a {
	color: inherit;
	text-decoration: none;
}

.uagb-block-b43aa079.uagb-post-grid .uagb-post-grid-byline {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}

.uagb-block-b43aa079.uagb-post-grid .uagb-post__excerpt {
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.92rem;
	line-height: 1.55;
	margin: 0;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}

.uagb-block-b43aa079.uagb-post-grid .uagb-post__excerpt p {
	margin: 0;
}

/* ==================================================================
   "Around The World" — STACKED smaller cards (.uagb-block-fa6f8201)
   Same image-as-background pattern, smaller typography, two cards
   stacked vertically. Aspect ratio is set so two cards plus the gap
   roughly match the height of the hero on desktop layouts.
   ================================================================== */

.uagb-block-fa6f8201.uagb-post-grid {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
}

.uagb-block-fa6f8201.uagb-post-grid .uagb-post__inner-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 16 / 11;
	min-height: 220px;
	overflow: hidden;
	border-radius: 10px;
	padding: 1.25rem;
	margin: 0;
	isolation: isolate;
}

.uagb-block-fa6f8201.uagb-post-grid .uagb-post__image,
.uagb-block-fa6f8201.uagb-post-grid .uagb-post__image > a,
.uagb-block-fa6f8201.uagb-post-grid .uagb-post__image img {
	position: absolute !important;
	inset: 0 !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	display: block !important;
	float: none !important;
	z-index: 0 !important;
}

.uagb-block-fa6f8201.uagb-post-grid .uagb-post__image img {
	object-fit: cover !important;
	object-position: center center !important;
	transform: none;
	transform-origin: center center !important;
	transition: transform 0.45s ease !important;
}

.uagb-block-fa6f8201.uagb-post-grid .uagb-post__inner-wrap:hover .uagb-post__image img {
	transform: scale(1.04) !important;
	transform-origin: center center !important;
}

/* Kill Spectra's full-card darkening overlay on hover. */
.uagb-block-fa6f8201.uagb-post-grid .uagb-post__inner-wrap::before,
.uagb-block-fa6f8201.uagb-post-grid .uagb-post__inner-wrap:hover::before {
	display: none !important;
	opacity: 0 !important;
}

/* Belt-and-braces: no transform on the image container. */
.uagb-block-fa6f8201.uagb-post-grid .uagb-post__inner-wrap .uagb-post__image,
.uagb-block-fa6f8201.uagb-post-grid .uagb-post__inner-wrap:hover .uagb-post__image {
	transform: none !important;
}

.uagb-block-fa6f8201.uagb-post-grid .uagb-post__inner-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.82) 0%,
		rgba(0, 0, 0, 0.55) 35%,
		rgba(0, 0, 0, 0.25) 70%,
		rgba(0, 0, 0, 0.08) 100%
	);
	pointer-events: none;
	border-radius: inherit;
}

.uagb-block-fa6f8201.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__title,
.uagb-block-fa6f8201.uagb-post-grid .uagb-post__inner-wrap > .uagb-post-grid-byline {
	position: relative;
	z-index: 2;
}

.uagb-block-fa6f8201.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__text:has(.uagb-post__taxonomy) {
	order: 1;
	margin: 0 0 0.55rem;
}
.uagb-block-fa6f8201.uagb-post-grid .uagb-post__inner-wrap > .uagb-post__title {
	order: 2;
}
.uagb-block-fa6f8201.uagb-post-grid .uagb-post__inner-wrap > .uagb-post-grid-byline {
	order: 3;
	margin: 0.5rem 0 0;
}

.uagb-block-fa6f8201.uagb-post-grid .uagb-post__title {
	color: #fff;
	font-size: clamp(0.95rem, 1.15vw, 1.15rem) !important;
	line-height: 1.25;
	font-weight: 700;
	margin: 0;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	overflow-wrap: break-word;
	hyphens: auto;
}

.uagb-block-fa6f8201.uagb-post-grid .uagb-post__title a {
	color: inherit;
	text-decoration: none;
}

.uagb-block-fa6f8201.uagb-post-grid .uagb-post-grid-byline {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ==================================================================
   Mobile tightening — single-column flow on small screens.
   ================================================================== */

@media (max-width: 600px) {
	.uagb-block-482b3544.uagb-post-grid {
		--sogbu-thumb-ratio: 16 / 10;
		--sogbu-card-gutter: 0px;
		margin-inline: 0;
	}

	.uagb-block-482b3544.uagb-post-grid .uagb-post__inner-wrap {
		padding-inline: 0;
		margin-bottom: 1.5rem;
	}

	/* Left-column list switches from image-on-left to a tighter
	   image-on-left with a smaller thumbnail. */
	.uagb-block-e2282807.uagb-post-grid .uagb-post__inner-wrap {
		grid-template-columns: 88px 1fr;
		column-gap: 12px;
	}

	.uagb-block-d087bec8.uagb-post-grid .uagb-post__title {
		font-size: 1.2rem;
	}

	.uagb-block-0da6fc6e.uagb-post-grid .uagb-post__title {
		font-size: 1.05rem;
	}

	/* "Around The World" — relax the portrait aspect ratio on phones
	   so the hero doesn't become absurdly tall in a single column. */
	.uagb-block-b43aa079.uagb-post-grid .uagb-post__inner-wrap {
		aspect-ratio: 4 / 3;
		min-height: 360px;
		padding: 1.5rem;
	}

	.uagb-block-b43aa079.uagb-post-grid .uagb-post__title {
		font-size: 1.4rem !important;
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}

	.uagb-block-fa6f8201.uagb-post-grid .uagb-post__inner-wrap {
		aspect-ratio: 16 / 9;
		min-height: 200px;
	}
}