/*
 * Journal post build-details collapse + credits row.
 *
 * On journal posts the BUILD DETAILS list in .section_blog_specifications
 * starts collapsed behind its heading at every viewport — on mobile the
 * stacked column otherwise pushes the piece far down the page, and on
 * desktop a spec list taller than the intro text leaves a large gap in the
 * section. The PHOTOS / WORDS credits sit side-by-side on mobile.
 *
 * The DOM wrapping and toggle logic live in js/regroup20.js; this file is
 * excluded from the LiteSpeed CSS optimizer and versioned by filemtime.
 */

/* Pre-JS guard: keep the spec entries hidden until the script wraps them,
   so the page never flashes the full list. Scoped to html.js so no-JS
   visitors still see everything. Once wrapped, the entries are no longer
   siblings of the heading and this rule stops matching. */
html.js .section_blog_specifications .first_column .elementor-widget-heading ~ .specification_entry {
	display: none;
}

.section_blog_specifications .first_column .specs_toggle {
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

.section_blog_specifications .first_column .specs_toggle .elementor-heading-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.section_blog_specifications .first_column .specs_toggle:hover .elementor-heading-title {
	opacity: 0.75;
}

.section_blog_specifications .first_column .specs_panel {
	width: 100%;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s ease;
}

.section_blog_specifications .first_column.specs_open .specs_panel {
	grid-template-rows: 1fr;
}

.section_blog_specifications .first_column .specs_panel_inner {
	overflow: hidden;
	min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
	.section_blog_specifications .first_column .specs_panel {
		transition: none;
	}
}

/* With the build details collapsed the piece opens on a slim bar, so the
   intro section doesn't need the full editorial top padding (248/192/128
   from the utility class). Scoped to the section directly after the post
   header — later sections keep their rhythm. */
.section_blog_header + .section_blog_specifications {
	padding-top: 128px;
}

@media screen and (max-width: 1200px) {
	.section_blog_header + .section_blog_specifications {
		padding-top: 96px;
	}
}

@media screen and (max-width: 800px) {
	.section_blog_header + .section_blog_specifications {
		padding-top: 64px;
	}
}

/* Credits: stacked rows on desktop, a single side-by-side row on mobile.
   The wrapper needs an explicit width — once the entries are wrapped they
   stop matching Elementor's direct-child full-width rule and would
   otherwise shrink-wrap next to each other. */
.section_blog_specifications .first_column .credits_row {
	width: 100%;
}

.section_blog_specifications .first_column .credits_row > .specification_entry {
	width: 100%;
}

@media screen and (max-width: 800px) {
	.section_blog_specifications .first_column .credits_row {
		display: flex;
		gap: 24px;
	}

	.section_blog_specifications .first_column .credits_row > .specification_entry {
		flex: 1 1 50%;
	}
}