/* SA Downtown Listings. Fonts and base colours are inherited from the theme. */

.sad-listings,
.sad-modal,
.sad-detail {
	--sad-accent: #1f6f8b;
	--sad-border: #dcdfe3;
	--sad-muted: #5f6b76;
	--sad-surface: #fff;
	--sad-radius: 8px;
}

.sad-listings *,
.sad-modal *,
.sad-detail * {
	box-sizing: border-box;
}

/* ---------- Search bar (full width) ---------- */

.sad-search {
	display: flex;
	gap: 8px;
	width: 100%;
	margin-bottom: 24px;
	padding: 7px;
	border: 1px solid #e1e1e1;
	border-radius: 10px;
	background: #fff;
}

/* The input has no border of its own, so the bar shows keyboard focus instead. */
.sad-search:focus-within {
	border-color: var(--sad-accent);
}

/* Doubled class and :focus: themes style search inputs with more specific selectors. */
.sad-search .sad-search__input,
.sad-search .sad-search__input:focus {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 16px;
	border: 0;
	box-shadow: none;
	outline: 0;
	background: transparent;
	color: #111;
	font-family: 'Figtree', sans-serif;
	font-size: 1rem;
	font-weight: 500;
}

.sad-search__btn,
.sad-apply {
	padding: 12px 20px;
	border: 0;
	border-radius: var(--sad-radius);
	background: var(--sad-accent);
	color: #fff;
	font-size: 1rem;
	cursor: pointer;
}

.sad-search__btn {
	border-radius: 7px;
	font-family: 'Figtree', sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.25px;
}

/* ---------- Layout: 25% sidebar, 75% results ---------- */

.sad-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	gap: 32px;
	align-items: start;
}

/*
 * Stays in view while the results scroll. --sad-sticky-top is the gap above it:
 * raise it if the site has a fixed header that would cover the sidebar.
 */
.sad-sidebar {
	position: sticky;
	top: var(--sad-sticky-top, 120px);
	max-height: calc(100vh - var(--sad-sticky-top, 120px) - 20px);
	overflow-y: auto;
	padding: 20px;
	border: 1px solid var(--sad-border);
	border-radius: var(--sad-radius);
	background: var(--sad-surface);
}

.sad-filter {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
}

.sad-filter:last-child {
	margin-bottom: 0;
}

.sad-filter__title {
	display: block;
	margin-bottom: 8px;
	padding: 0;
	font-family: 'Figtree', sans-serif;
	font-weight: 600;
}

.sad-sort {
	width: 100%;
	padding: 8px 10px;
	font-family: 'Figtree', sans-serif;
	border: 1px solid var(--sad-border);
	border-radius: var(--sad-radius);
}

.sad-check {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	cursor: pointer;
}

.sad-check__name {
	flex: 1 1 auto;
}

.sad-check__count {
	color: var(--sad-muted);
	font-size: 0.875em;
}

.sad-filter--actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Extra class: the theme underlines links in page content with a more specific selector. */
.sad-listings .sad-filter--actions .sad-clear {
	display: block;
	border-radius: 4px;
	padding: 6px 0;
	background: #eee;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

/* With JavaScript running, filters apply as soon as they change. */
.sad-js .sad-apply {
	display: none;
}

/* ---------- Results ---------- */

.sad-listings .sad-count {
	margin: 0 0 16px;
	color: var(--sad-muted);
}

.sad-results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 24px;
	transition: opacity 0.15s;
}

.is-loading .sad-results {
	opacity: 0.5;
}

.sad-empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 32px 0;
	text-align: center;
	color: var(--sad-muted);
}

/* Image-overlay card: the photo and the text share one grid cell, text on top. */
.sad-card {
	position: relative;
	display: grid;
	/* Square, like the supplied 1080 x 1080 photos, so the whole photo shows. */
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--sad-radius);
	/* Shown when a listing has no image. */
	background: #2b3640;
	transition: box-shadow 0.2s;
}

.sad-card:hover,
.sad-card:focus-within {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.sad-card__media,
.sad-card__body {
	grid-area: 1 / 1;
	min-width: 0;
	min-height: 0;
}

.sad-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}

.sad-card:hover .sad-card__img,
.sad-card:focus-within .sad-card__img {
	transform: scale(1.06);
}

/*
 * Dark fade behind the text keeps it readable on any photo. Positioned so it stays
 * above the photo while the photo is scaled on hover; it fills the card, so the
 * link's ::after still covers the whole card.
 */
.sad-card__body {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	padding: 16px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 80%);
	color: #fff;
}

/* Doubled classes: themes colour headings and links with more specific selectors. */
.sad-card .sad-card__title {
	margin: 0;
	color: #fff;
	font-size: 1.125rem;
	line-height: 1.3;
}

.sad-listings .sad-card .sad-card__link,
.sad-listings .sad-card .sad-card__link:hover,
.sad-listings .sad-card .sad-card__link:focus {
	color: #fff;
	text-decoration: none;
}

/* Makes the whole card clickable while keeping a single link for screen readers. */
.sad-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sad-card .sad-card__cat {
	order: -1;
	margin: 0 0 3px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.sad-card .sad-card__meta {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	margin-bottom: 0 !important;
	padding-top: 4px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.8125rem;
}

.sad-card__meta time {
	white-space: nowrap;
}

.sad-card__views {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.sad-card__eye {
	flex: none;
}

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

.sad-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 32px;
}

.sad-page {
	min-width: 40px;
	padding: 8px 12px;
	border: 1px solid var(--sad-border);
	border-radius: var(--sad-radius);
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.sad-page.is-current {
	border-color: var(--sad-accent);
	background: var(--sad-accent);
	color: #fff;
}

.sad-page--gap {
	border-color: transparent;
}

/* ---------- Detail (modal and single page) ---------- */

.sad-detail__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sad-radius);
}

.sad-detail__title {
	margin: 20px 0 4px;
}

/* Doubled class: themes indent lists inside post content with a more specific selector. */
.sad-detail .sad-detail__contact {
	margin: 16px 0;
	padding: 0;
	list-style: none;
}

.sad-detail__contact li {
	display: flex;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--sad-border);
	overflow-wrap: anywhere;
}

.sad-detail__label {
	flex: 0 0 90px;
	color: var(--sad-muted);
}

.sad-map {
	height: 435px;
	border-radius: var(--sad-radius);
	background: #eef0f2;
	z-index: 0;
}

/* Keeps the theme's link underline off the map's zoom buttons. */
.sad-map .leaflet-control a {
	text-decoration: none;
}

.sad-detail__directions {
	margin: 16px 0 0;
}

/* Extra class: the theme colours and underlines links in page content. */
.sad-detail .sad-directions-btn,
.sad-detail .sad-directions-btn:hover,
.sad-detail .sad-directions-btn:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: var(--sad-radius);
	background: var(--sad-accent);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.sad-detail .sad-directions-btn:hover,
.sad-detail .sad-directions-btn:focus {
	filter: brightness(1.1);
}

.sad-detail--single .sad-directions-btn {
	display: inline-flex;
}

/* ---------- Detail drawer (slides in from the right) ---------- */

.sad-modal-open {
	overflow: hidden;
}

.sad-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
}

.sad-modal[hidden] {
	display: none;
}

.sad-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	animation: sad-fade-in 0.25s ease-out;
}

.sad-modal__dialog {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 480px;
	max-width: 100%;
	overflow-y: auto;
	padding: 0;
	background: var(--sad-surface);
	box-shadow: -8px 0 32px rgba(0, 0, 0, 0.25);
	outline: 0;
	animation: sad-drawer-in 0.25s ease-out;
}

@keyframes sad-drawer-in {
	from {
		transform: translateX(100%);
	}
}

@keyframes sad-fade-in {
	from {
		opacity: 0;
	}
}

/* Sticky so it stays reachable while the drawer scrolls; the negative margin lets it sit over the photo. */
.sad-modal__close {
	position: sticky;
	top: 8px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 8px 8px -48px auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #222;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/*
 * The drawer itself has no padding, so the photo runs edge to edge and each block
 * below it carries its own 20px side padding.
 */
.sad-modal .sad-detail {
	padding-bottom: 16px;
}

.sad-modal .sad-detail__media img {
	border-radius: 0;
}

.sad-modal .sad-detail__title,
.sad-modal .sad-detail__contact {
	padding-right: 20px;
	padding-left: 20px;
}

.sad-modal .sad-detail__directions {
	padding: 0 20px;
}

/* Margin, not padding: padding would not inset the map, whose tiles fill the whole box. */
.sad-modal .sad-map {
	height: 250px;
	margin-right: 20px;
	margin-left: 20px;
}

/* Leaves room for the close button when a listing has no photo at the top. */
.sad-modal .sad-detail__title:first-child {
	padding-right: 56px;
}

.sad-modal__message {
	margin: 32px 0;
	text-align: center;
	color: var(--sad-muted);
}

/*
 * ---------- Narrow space: sidebar stacks above the results ----------
 * Based on the width the theme gives the listings, not the screen, so it also
 * stacks inside a narrow content column on a wide screen.
 */

.sad-listings {
	container: sad-listings / inline-size;
}

@container sad-listings (max-width: 640px) {
	.sad-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.sad-results {
		gap: 16px;
	}

	/* Stacked above the results, a sticky sidebar would cover them. */
	.sad-sidebar {
		position: static;
		max-height: none;
	}
}

/* Clears the WordPress toolbar for logged-in users. */
.admin-bar .sad-sidebar {
	top: calc(var(--sad-sticky-top, 120px) + 32px);
}

@media (prefers-reduced-motion: reduce) {
	.sad-results,
	.sad-card,
	.sad-card__img {
		transition: none;
	}

	.sad-card:hover .sad-card__img,
	.sad-card:focus-within .sad-card__img {
		transform: none;
	}

	.sad-modal__backdrop,
	.sad-modal__dialog {
		animation: none;
	}
}

/* ---------- Load more on scroll ---------- */

/* Page links are only the fallback for visitors without JavaScript. */
.sad-js .sad-pagination {
	display: none;
}

.sad-end {
	height: 1px;
}

.sad-listings .sad-more {
	margin: 24px 0 0;
	text-align: center;
	color: var(--sad-muted);
}

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