/*
 * [bck_artwork_details] structural CSS.
 *
 * Colors, borders, label typography, button styles, and font sizes all
 * come from heritagecanvas's own style.css and theme.json global styles
 * (has-parchment-background-color, has-background, has-small-font-size,
 * has-large-font-size, .hc-details-matrix/.hc-details-row/.hc-details-label,
 * .is-style-hc-download/.is-style-hc-outline) — none of that is duplicated
 * here.
 *
 * What IS needed here: the original static block got its flex row layout,
 * vertical button stacking, and sticky positioning from WordPress's
 * per-block "layout support" CSS, which is only generated for real block
 * markup that appears statically in template/post content. A shortcode's
 * output isn't visible to that static analysis, so core/group and
 * core/buttons layout CSS (is-layout-flex, is-content-justification-*,
 * .wp-block-buttons flex/gap) is not reliably enqueued on pages that only
 * reference this content via [bck_artwork_details]. These few rules
 * reproduce just that missing structural behavior, scoped to this
 * shortcode's own wrapper classes so they can't affect any other block on
 * the site.
 *
 * Selectors below combine two classes each (e.g. .wp-block-buttons.bck-…)
 * rather than relying on a single custom class. A single-class selector
 * is equal specificity to core's own single-class block rules (e.g.
 * .wp-block-buttons{gap:0.5em}), so which one wins depends on stylesheet
 * load order rather than intent — that's what silently zeroed out the
 * button gap in 1.2.1. The two-class form always wins regardless of order.
 */

.wp-block-group.bck-artwork-details {
	position: sticky;
	top: calc(1.5rem + var(--wp-admin--admin-bar--position-offset, 0px));
	z-index: 10;
	padding: var(--wp--preset--spacing--50);
}

.bck-artwork-details .wp-block-group.hc-details-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.wp-block-buttons.bck-artwork-details-buttons {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/*
 * v1.2.3: Download High-Res button gets explicit layout instead of relying
 * on theme spacing utilities (button width/appender margins previously came
 * from has-custom-width / wp-block-button__width-100 + the container's
 * flex gap). Both the wrapper and the inner link get the same rules so
 * neither one's own box model (the link is inline-flex under
 * .wp-element-button) can reintroduce auto width or default margin.
 * !important guards against theme.json global styles / block style
 * variation CSS, which loads after this stylesheet and would otherwise win
 * on equal or higher specificity.
 */
.wp-block-buttons.bck-artwork-details-buttons .wp-block-button.bck-artwork-details-download,
.wp-block-buttons.bck-artwork-details-buttons .wp-block-button.bck-artwork-details-download .wp-block-button__link {
	display: block !important;
	width: 100% !important;
	margin: 24px 0 0 0 !important;
	box-sizing: border-box !important;
	text-align: center;
}

.bck-artwork-details .hc-details-matrix-secondary {
	margin-top: 24px;
	opacity: 0.7;
}

.bck-artwork-details .hc-details-matrix-secondary .hc-details-label,
.bck-artwork-details .hc-details-matrix-secondary p {
	font-size: 0.8125rem;
}