/**
 * Stala layout: archives and single views of the five Stala post types, and
 * pillar archives.
 *
 * Loaded only on those views (see includes/layout.php), which also set Astra to
 * Full Width and add these body classes:
 *   .stala-layout                     every Stala archive or single view
 *   .stala-archive / .stala-single
 *   .stala-layout--{eat|stay|do|org|person}
 *
 * Elementor Theme Builder templates (archive 1326, pillar archive 1543,
 * singles 1293 / 1310) style themselves: their V4 CSS loads since
 * includes/compat-elementor.php. This file does not restyle them. It covers:
 *   1. Astra's default markup (#main > .ast-row > article), for any view that
 *      has no Elementor template yet.
 *   2. The details panel (.stala-details) from includes/details.php, which is
 *      rendered inside the post content in both cases.
 */

.stala-layout {
	--stala-max-width: 1240px;
	--stala-text-width: 760px;
	--stala-gutter: clamp(16px, 4vw, 40px);
	--stala-gap: clamp(16px, 2.5vw, 32px);
	--stala-radius: 8px;
	--stala-border: rgba(0, 0, 0, 0.1);
	--stala-muted: rgba(0, 0, 0, 0.6);
	--stala-surface: #fff;
}

/* ================================================================ container (Astra markup only) */

/*
 * Astra Full Width removes the container's width and padding. Restore them,
 * except when an Elementor template fills the content area, since those set
 * their own widths (full-bleed mastheads, 78rem sections). Archive templates
 * sit directly in the container; single templates sit inside #primary > #main.
 */
.stala-layout #content > .ast-container:not(:has(.elementor-location-archive, .elementor-location-single)) {
	box-sizing: border-box;
	max-width: calc(var(--stala-max-width) + 2 * var(--stala-gutter));
	margin-inline: auto;
	padding-inline: var(--stala-gutter);
	padding-block: clamp(24px, 5vw, 64px);
}

.stala-layout #primary {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* ================================================================ archive: Astra fallback */

.stala-archive .ast-archive-description {
	margin: 0 0 var(--stala-gap);
	padding: 0;
	background: none;
}

.stala-archive #main > .ast-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--stala-gap);
	margin: 0;
}

/* Astra's clearfix pseudo-elements would otherwise become grid items. */
.stala-archive #main > .ast-row::before,
.stala-archive #main > .ast-row::after {
	content: none;
	display: none;
}

.stala-archive #main > .ast-row > article {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: auto;
	max-width: none;
	float: none;
	margin: 0;
	padding: 20px;
	overflow: hidden;
	background: var(--stala-surface);
	border: 1px solid var(--stala-border);
	border-radius: var(--stala-radius);
}

.stala-archive #main > .ast-row > article .ast-article-inner,
.stala-archive #main > .ast-row > article .post-content {
	width: 100%;
	margin: 0;
	padding: 0;
}

.stala-archive #main > .ast-row > article .entry-title {
	margin: 0 0 8px;
	font-size: 1.25rem;
	line-height: 1.3;
}

.stala-archive #main > .ast-row > article .ast-excerpt-container {
	color: var(--stala-muted);
}

@media (max-width: 1024px) {
	.stala-archive #main > .ast-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.stala-archive #main > .ast-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ================================================================ single: Astra fallback */

.stala-single #main > article {
	margin: 0;
	padding: 0;
	background: none;
}

.stala-single .entry-content {
	max-width: var(--stala-text-width);
}

/* ================================================================ details panel */

.stala-details {
	max-width: var(--stala-text-width, 760px);
	margin-block: 2.5em 0;
	padding: clamp(20px, 3vw, 32px);
	border: 1px solid var(--stala-border, rgba(0, 0, 0, 0.1));
	border-radius: var(--stala-radius, 8px);
}

.stala-details__heading {
	margin: 0 0 1em;
	font-size: 1.25rem;
}

.stala-details__list {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0.75em 1.5em;
	margin: 0;
}

/* Each item is a <div> wrapping a dt/dd pair; let both join the parent grid. */
.stala-details__item {
	display: contents;
}

.stala-details__label {
	margin: 0;
	font-weight: 600;
}

.stala-details__value {
	margin: 0;
	overflow-wrap: anywhere;
}

.stala-details__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 640px) {
	.stala-details__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.25em;
	}

	.stala-details__value {
		margin-bottom: 0.75em;
	}
}