.portale-directory {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1200px;
	padding: 2rem 1rem;
}

.portale-search,
.portale-form {
	display: grid;
	gap: .75rem;
}

.portale-listings {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.portale-listing-card,
.portale-listing__contact {
	border: 1px solid currentColor;
	padding: 1rem;
}

/* Listing actions: small buttons opening modal dialogs (assets/js/listing-dialogs.js adds .is-enhanced).
   Button rules are scoped under the section so they win over theme/kit-wide `button` styles. */
.portale-listing__action-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.portale-listing__actions .portale-listing__action {
	background: transparent;
	border-radius: 0;
	color: inherit;
	border: 1px solid currentColor;
	cursor: pointer;
	font: inherit;
	font-size: .875rem;
	padding: .35rem .8rem;
}

/* Override Hello Elementor's reset.css `[type=button]:hover` pink fill. */
.portale-listing__actions .portale-listing__action:not(.portale-listing__action--contact):hover,
.portale-listing__actions .portale-listing__action:not(.portale-listing__action--contact):focus {
	background: transparent;
	color: inherit;
	text-decoration: underline;
}

.portale-listing__dialog {
	border: 0;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
	max-height: calc(100vh - 2rem);
	padding: 0;
	width: min(44rem, calc(100vw - 2rem));
}

.portale-listing__dialog::backdrop {
	background: rgba(0, 0, 0, .45);
}

.portale-listing__dialog-body {
	padding: 1.25rem 1.5rem 1.5rem;
}

.portale-listing__dialog-header {
	align-items: flex-start;
	display: flex;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.portale-listing__dialog-header h2 {
	font-size: 1.35rem;
	margin: 0;
}

/* The listing the dialog is about. */
.portale-listing__dialog-subject {
	font-weight: 600;
	margin: .25rem 0 0;
	opacity: .75;
}

.portale-listing__actions .portale-listing__dialog-close {
	background: none;
	color: inherit;
	border: 0;
	cursor: pointer;
	font-size: 1.75rem;
	line-height: 1;
	padding: 0 .25rem;
}

.portale-listing__dialog .portale-form {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.portale-listing__actions .portale-form button[type="submit"] {
	border: 0;
	border-radius: 0;
	cursor: pointer;
	padding: .6rem 1rem;
}

.portale-listing__dialog .portale-form label {
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

.portale-listing__dialog .portale-form input,
.portale-listing__dialog .portale-form select,
.portale-listing__dialog .portale-form textarea {
	box-sizing: border-box;
	width: 100%;
}

.portale-listing__dialog .portale-form textarea {
	min-height: 12rem;
	resize: vertical;
}

/* Without JavaScript: no buttons, forms inline (the dialogs are rendered open). */
.portale-listing__actions:not(.is-enhanced) .portale-listing__action-buttons,
.portale-listing__actions:not(.is-enhanced) .portale-listing__dialog-close {
	display: none;
}

.portale-listing__actions:not(.is-enhanced) .portale-listing__dialog {
	border: 1px solid currentColor;
	box-shadow: none;
	display: block;
	margin: 0 0 1rem;
	max-width: none;
	position: static;
	width: auto;
}

.portale-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 1.5rem;
}

.portale-pagination [aria-current="page"] {
	font-weight: 700;
}

.portale-pagination__ellipsis {
	user-select: none;
}

/* Route planner modal (assets/js/route-dialog.js): wide, with a tall map. */
.portale-route-dialog {
	width: min(72rem, calc(100vw - 2rem));
}

.portale-route-dialog__tools {
	align-items: center;
	display: flex;
	gap: 1rem;
}

.portale-route-dialog .portale-listing__dialog-close {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font-size: 1.75rem;
	line-height: 1;
	padding: 0 .25rem;
}

.portale-route-dialog__frame {
	border: 0;
	display: block;
	height: min(70vh, 40rem);
	width: 100%;
}