/*
 * Destination guide category archives.
 *
 * Values mirror what the Kadence query card produced, so replacing the block
 * is not a visual change: 1:2 image to body split, 32px body padding, 32px
 * gap and a hairline rule between cards. Cards stay transparent and inherit
 * the container background, as before.
 */

.ssda {
	--ssda-ink: #12305c;
	--ssda-muted: #4a5568;
	--ssda-rule: #edf2f7;
	--ssda-gap: 32px;
}

/* Toolbar ----------------------------------------------------------------- */

.ssda-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 var(--ssda-gap);
}

.ssda-toolbar__count {
	margin: 0;
	color: #2d3748;
	font-size: 17px;
}

.ssda-sort {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/*
 * Kadence rendered this control without a visible label. Keep the label in the
 * accessibility tree only, so the design is unchanged but the select is named.
 */
.ssda-sort__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ssda-sort__select {
	padding: 6.4px 35px 6.4px 8px;
	border: 1px solid #cbd5e0;
	border-radius: 3px;
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' fill='none' stroke='%23bbb' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: calc(100% - 6px) 50%;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	color: inherit;
	appearance: none;
}

/* Cards ------------------------------------------------------------------- */

.ssda-grid {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--ssda-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ssda-card {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--ssda-rule);
}

.ssda-card__link {
	display: grid;
	grid-template-columns: 1fr 2fr;
	/*
	 * Not stretch. Letting the image fill the card tied its height to the
	 * length of the summary, so a 13 word guide and a 39 word one produced
	 * images 100px apart. Centred keeps the shorter of the two columns
	 * balanced against the other.
	 */
	align-items: center;
	padding-bottom: var(--ssda-gap);
	color: inherit;
	text-decoration: none;
}

/*
 * Fixed ratio, so every image is the same size whatever the text does. 4:5 is
 * tall enough to sit alongside the text block without cropping the landscape
 * originals so hard that a retina screen needs an oversized file.
 */
.ssda-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--ssda-rule);
}

.ssda-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ssda-card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--ssda-gap);
}

.ssda-card__title {
	margin: 0 0 var(--ssda-gap);
	font-family: inherit;
	font-size: 28px;
	font-weight: 700;
	line-height: 32px;
	color: var(--ssda-ink);
}

.ssda-card__summary {
	margin: 0 0 24px;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--ssda-ink);
}

.ssda-card__more {
	display: flex;
	align-items: center;
	gap: 7.2px;
	font-size: 14.4px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ssda-muted);
}

.ssda-card__arrow {
	flex: none;
	transition: transform 0.2s ease;
}

.ssda-card__link:hover .ssda-card__title,
.ssda-card__link:focus-visible .ssda-card__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ssda-card__link:hover .ssda-card__arrow {
	transform: translateX(3px);
}

/* Load more --------------------------------------------------------------- */

.ssda-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: var(--ssda-gap) 0;
}

.ssda-more[hidden] {
	display: none;
}

.ssda-more__button {
	padding: 0.75rem 1.5rem;
	border: 1px solid #cbd5e0;
	border-radius: 3px;
	background: #fff;
	font-family: inherit;
	font-size: 14.4px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ssda-muted);
	cursor: pointer;
}

.ssda-more__button:hover {
	border-color: var(--ssda-muted);
	color: var(--ssda-ink);
}

.ssda-more__button[hidden] {
	display: none;
}

.ssda-more__spinner {
	display: none;
	width: 22px;
	height: 22px;
	border: 2px solid var(--ssda-rule);
	border-top-color: var(--ssda-muted);
	border-radius: 50%;
}

.ssda-more.is-loading .ssda-more__spinner {
	display: block;
	animation: ssda-spin 0.8s linear infinite;
}

@keyframes ssda-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ssda-more.is-loading .ssda-more__spinner {
		animation-duration: 2s;
	}

	.ssda-card__arrow {
		transition: none;
	}
}

.ssda-more__status {
	margin: 0;
	font-size: 15px;
	color: var(--ssda-muted);
	text-align: center;
}

.ssda-more__status:empty {
	display: none;
}

/* Pagination -------------------------------------------------------------- */

.ssda-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: var(--ssda-gap) 0;
}

.ssda-pagination[hidden] {
	display: none;
}

.ssda-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--ssda-rule);
	border-radius: 3px;
	text-decoration: none;
	color: var(--ssda-muted);
}

.ssda-pagination .page-numbers.current {
	border-color: var(--ssda-ink);
	background: var(--ssda-ink);
	color: #fff;
}

/* Small screens ----------------------------------------------------------- */

@media (max-width: 767px) {
	.ssda-card__link {
		grid-template-columns: 1fr;
	}

	.ssda-card__media {
		aspect-ratio: 16 / 9;
	}

	.ssda-card__body {
		padding: 1.25rem 0 0;
	}

	.ssda-card__title {
		margin-bottom: 1rem;
		font-size: 24px;
		line-height: 1.2;
	}
}