/**
 * Trending Topics
 *
 * Every figure below is a custom property with a fallback, so the WPBakery
 * and Elementor controls can override any of it per element without this
 * file needing to know they exist.
 */

.fc-topics {
	/* Palette */
	--fc-gold: #d5af34;
	--fc-navy: #162542;

	/* Section heading */
	--fc-heading-color: var(--fc-navy);
	--fc-heading-size: 36px;
	--fc-heading-lh: 40px;
	--fc-heading-weight: 400;
	--fc-heading-space: 44px;
	--fc-heading-align: center;

	/* Layout */
	/* The gap between the featured story and the list, and between the list
	   rows. 30px is the ceiling asked for. */
	--fc-col-gap: 30px;
	--fc-row-gap: 30px;
	--fc-featured-width: 50;
	/*
	 * Straight off the comp: the featured photo is 750 x 310 and the list
	 * photo 375 x 310 - half the width, the same height.
	 *
	 * Both are held as proportions rather than pixels, so the pair keeps that
	 * relationship at any container width. The list photo's share of its own
	 * row is the figure that keeps the two heights level; it is a percentage
	 * for the same reason.
	 */
	--fc-media-ratio: 750 / 310;
	--fc-item-media-ratio: 375 / 310;
	--fc-item-media-pct: 52;
	--fc-item-gap: 22px;
	--fc-media-radius: 0px;
	--fc-empty-bg: #eef0f3;

	/*
	 * How a photo meets its frame.
	 *
	 * cover fills the frame and crops whatever will not fit - the whole box
	 * is picture, but a wide photo in a near-square frame loses its sides.
	 * contain fits the entire photo inside and leaves the placeholder colour
	 * showing where the shapes differ. Position decides which part survives
	 * a crop.
	 */
	--fc-media-fit: cover;
	--fc-media-position: center;

	/* Date badge */
	--fc-date-bg: var(--fc-gold);
	--fc-date-color: #162542;
	--fc-date-size: 16px;
	--fc-date-lh: 20px;
	--fc-date-padding: 7px 12px;
	--fc-date-right: 20px;
	--fc-date-bottom: 20px;

	/* Titles */
	--fc-title-font: serif;
	--fc-title-color: var(--fc-navy);
	--fc-title-hover: var(--fc-gold);
	--fc-title-size: 36px;
	--fc-title-lh: 40px;
	--fc-item-title-size: 26px;
	--fc-item-title-lh: 32px;
	/* Lines, not words: two list headings beside each other have to occupy
	   the same depth whatever their titles happen to be. */
	--fc-item-title-lines: 3;
	--fc-item-text-lines: 3;
	--fc-title-weight: 400;
	--fc-title-space: 14px;

	/* Excerpt */
	--fc-text-color: #4a5462;
	--fc-text-size: 18px;
	--fc-text-lh: 30px;
	--fc-item-text-size: 15px;
	--fc-item-text-lh: 24px;
	--fc-text-space: 18px;

	/* Read More */
	--fc-btn-color: var(--fc-navy);
	--fc-btn-bg: transparent;
	--fc-btn-border: var(--fc-navy);
	--fc-btn-color-h: #ffffff;
	--fc-btn-bg-h: var(--fc-navy);
	--fc-btn-border-h: var(--fc-navy);
	--fc-btn-size: 18px;
	--fc-btn-lh: 24px;
	--fc-btn-weight: 400;
	--fc-btn-padding: 7px 20px;
	--fc-btn-radius: 0px;
	--fc-btn-border-width: 1px;

	/* Meta */
	--fc-meta-color: #6b7280;
	--fc-meta-size: 13px;
	--fc-meta-gap: 14px;
	--fc-meta-space: 10px;
}

.fc-topics *,
.fc-topics *::before,
.fc-topics *::after { box-sizing: border-box; }

/*
 * Type is forced, and every forced value is still a variable.
 *
 * Themes routinely ship a blanket rule - h3 { font-size: 30px !important }
 * is the one on this site - which otherwise wins over anything here and
 * flattens the featured title, the list titles and the heading to one size.
 * Declaring these !important is what keeps the sizes the builder is set to;
 * reading them from custom properties is what keeps the builder in charge.
 */
.fc-topics .fc-topics-heading {
	margin: 0 0 var(--fc-heading-space) !important;
	color: var(--fc-heading-color) !important;
	font-size: var(--fc-heading-size) !important;
	line-height: var(--fc-heading-lh) !important;
	font-weight: var(--fc-heading-weight) !important;
	text-align: var(--fc-heading-align) !important;
}

/* The featured story and the list sit side by side; the featured column's
   share is a percentage so one control moves the split. */
.fc-topics-grid {
	display: grid;
	grid-template-columns: calc( var(--fc-featured-width) * 1% ) minmax(0, 1fr);
	column-gap: var(--fc-col-gap);
	align-items: start;
}

/*
 * The featured photo and the first list photo start on the same line.
 *
 * Both are the first thing in their column, so the only way they can drift
 * apart is a story with no photo at all: the text would begin where the
 * picture should have, and every row below it would sit high. An empty frame
 * holds the line instead, and the ratio keeps its height honest.
 */
.fc-topic-media-empty {
	display: block;
	width: 100%;
	aspect-ratio: var(--fc-media-ratio);
	background: var(--fc-empty-bg, #eef0f3);
}

.fc-topic-item .fc-topic-media-empty { aspect-ratio: var(--fc-item-media-ratio); }

.fc-topics-list {
	display: flex;
	flex-direction: column;
	gap: var(--fc-row-gap);
}

.fc-topic { margin: 0; }

/* ---------- Photo ---------- */

.fc-topic-media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--fc-media-radius);
	text-decoration: none;
}

.fc-topic-img {
	display: block;
	width: 100%;
	aspect-ratio: var(--fc-media-ratio);
	background-size: var(--fc-media-fit);
	background-position: var(--fc-media-position);
	background-repeat: no-repeat;
	/* Shows only where a contained photo does not reach the edges. */
	background-color: var(--fc-empty-bg);
	transition: transform 0.45s ease;
}

/* Zooming a contained photo on hover would push it out of its own frame. */
.fc-topics[style*="--fc-media-fit:contain"] .fc-topic-media:hover .fc-topic-img {
	transform: none;
}

.fc-topic-media:hover .fc-topic-img { transform: scale(1.04); }

/* The chip is pinned to the corner of the photo, which is why the photo is
   the positioning context rather than the card. */
.fc-topics .fc-topic-date {
	position: absolute;
	right: var(--fc-date-right);
	bottom: var(--fc-date-bottom);
	padding: var(--fc-date-padding);
	background: var(--fc-date-bg);
	color: var(--fc-date-color);
	font-size: var(--fc-date-size) !important;
	line-height: var(--fc-date-lh) !important;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* ---------- Text ---------- */

.fc-topic-body { padding-top: 18px; }

.fc-topics-heading + .fc-topics-grid { margin-top: 0; }

.fc-topics .fc-topic-title {
	margin: 0 0 var(--fc-title-space) !important;
	font-family: var(--fc-title-font) !important;
	font-size: var(--fc-title-size) !important;
	line-height: var(--fc-title-lh) !important;
	font-weight: var(--fc-title-weight) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

.fc-topics .fc-topic-title a {
	color: var(--fc-title-color) !important;
	font-size: inherit !important;
	line-height: inherit !important;
	font-weight: inherit !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.fc-topics .fc-topic-title a:hover,
.fc-topics .fc-topic-title a:focus-visible { color: var(--fc-title-hover) !important; }

/* Both the heading and the button are real links; nothing is allowed to sit
   over them or switch their pointer events off. */
.fc-topics .fc-topic-title a,
.fc-topics .fc-topic-btn {
	position: relative;
	z-index: 1;
	pointer-events: auto !important;
	cursor: pointer;
}

.fc-topic-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fc-meta-gap);
	margin-bottom: var(--fc-meta-space);
	color: var(--fc-meta-color);
	font-size: var(--fc-meta-size);
	line-height: 1.3;
}

.fc-topics .fc-topic-excerpt {
	margin: 0 0 var(--fc-text-space) !important;
	color: var(--fc-text-color) !important;
	font-size: var(--fc-text-size) !important;
	line-height: var(--fc-text-lh) !important;
}

/* ---------- Read More ----------
   Themes style links inside content heavily, so each declaration is forced;
   every one of them is still a variable, so the builder keeps control. */
.fc-topics .fc-topic-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 9px;
	background: var(--fc-btn-bg) !important;
	color: var(--fc-btn-color) !important;
	font-size: var(--fc-btn-size) !important;
	line-height: var(--fc-btn-lh) !important;
	font-weight: var(--fc-btn-weight) !important;
	padding: var(--fc-btn-padding) !important;
	border-radius: var(--fc-btn-radius) !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	border: var(--fc-btn-border-width) solid var(--fc-btn-border) !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.fc-topics .fc-topic-btn:hover,
.fc-topics .fc-topic-btn:focus-visible {
	background: var(--fc-btn-bg-h) !important;
	color: var(--fc-btn-color-h) !important;
	border-color: var(--fc-btn-border-h) !important;
}

.fc-topic-arrow {
	flex: none;
	transition: transform 0.2s ease;
}

.fc-topic-btn:hover .fc-topic-arrow { transform: translateX(3px); }

/* ---------- The list's own shape ----------
   Photo beside the text rather than above it, and the smaller type scale. */
.fc-topic-item {
	display: grid;
	grid-template-columns: calc( var(--fc-item-media-pct) * 1% ) minmax(0, 1fr);
	column-gap: var(--fc-item-gap);
	align-items: start;
}

.fc-topic-item .fc-topic-body { padding-top: 0; }

/*
 * The list rows are locked to a fixed depth.
 *
 * A word limit gets two headings close to each other but never equal: the
 * same 13 words wrap to three lines or four depending on how long the words
 * are, and the rows below then sit at different heights. A line count is
 * exact. min-height holds a short heading open to the full depth, and the
 * clamp stops a long one from exceeding it, so every row measures the same
 * whatever the titles are.
 */
.fc-topics .fc-topic-item .fc-topic-title {
	font-size: var(--fc-item-title-size) !important;
	line-height: var(--fc-item-title-lh) !important;
	min-height: calc( var(--fc-item-title-lh) * var(--fc-item-title-lines) );
	display: -webkit-box;
	-webkit-line-clamp: var(--fc-item-title-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fc-topics .fc-topic-item .fc-topic-excerpt {
	font-size: var(--fc-item-text-size) !important;
	line-height: var(--fc-item-text-lh) !important;
	min-height: calc( var(--fc-item-text-lh) * var(--fc-item-text-lines) );
	display: -webkit-box;
	-webkit-line-clamp: var(--fc-item-text-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 0 lines means "as tall as it needs to be", for anyone who wants that. */
.fc-topics[style*="--fc-item-title-lines:0"] .fc-topic-item .fc-topic-title,
.fc-topics[style*="--fc-item-text-lines:0"] .fc-topic-item .fc-topic-excerpt {
	min-height: 0;
	display: block;
	overflow: visible;
}

/* A list photo is a taller crop than the featured one, so the row does not
   stretch to the height of four lines of heading. */
.fc-topic-item .fc-topic-img { aspect-ratio: var(--fc-item-media-ratio); }

/* ---------- Responsive ---------- */

/* ---------- Responsive ----------
   Desktop and laptop are the same layout at the same figures. Everything at
   tablet width and below gets the stacked version instead: one column, the
   photo above the words. */

@media (max-width: 1024px) {
	.fc-topics-grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--fc-row-gap);
	}

	/* The list rows stack too, so a tablet reads the same way a phone does. */
	.fc-topic-item {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 14px;
	}

	.fc-topic-item .fc-topic-img { aspect-ratio: var(--fc-media-ratio); }
	.fc-topic-item .fc-topic-body { padding-top: 4px; }

	/*
	 * On one column the two shapes read as one list, so the right-hand
	 * headings take the same figures as the featured one - set explicitly at
	 * each width rather than inherited, so a change to one does not silently
	 * move the other.
	 */
	/* Stacked, the rows are full width and no longer sit beside each other,
	   so a fixed depth would only leave gaps. */
	.fc-topics .fc-topic-item .fc-topic-title,
	.fc-topics .fc-topic-item .fc-topic-excerpt {
		min-height: 0;
		display: block;
		overflow: visible;
	}

	.fc-topics {
		--fc-title-size: 30px;
		--fc-title-lh: 36px;
		--fc-item-title-size: 30px;
		--fc-item-title-lh: 36px;
		--fc-text-size: 17px;
		--fc-text-lh: 28px;
		--fc-item-text-size: 17px;
		--fc-item-text-lh: 28px;
	}
}

@media (max-width: 600px) {
	.fc-topics {
		--fc-heading-size: 28px;
		--fc-heading-lh: 34px;
		--fc-title-size: 24px;
		--fc-title-lh: 30px;
		--fc-item-title-size: 24px;
		--fc-item-title-lh: 30px;
		--fc-text-size: 16px;
		--fc-text-lh: 26px;
		--fc-item-text-size: 16px;
		--fc-item-text-lh: 26px;
		--fc-date-right: 12px;
		--fc-date-bottom: 12px;
	}
}