/**
 * Post / CPT detail styles (Beiträge + Projekte + Leistungen).
 *
 * Loaded only on singular post/projekte/leistungen and related archives.
 * JetEngine: attach classes via the CSS class field on Dynamic widgets.
 *
 * Classes
 * --------
 * Images:     .reference-detail-image | .reference-insight-image
 * Hero:       .fpw-grid-2.reference-hero | .reference-meta
 * Meta:       .meta-branche | .meta-leistungen | .meta-website | .fpw-meta-label
 * Type:       .reference-h1 … .reference-h6 | .reference-text | .reference-text-on-dark
 * Grids:      .reference-solution-grid
 */

/* ==========================================================================
   1. Images
   ========================================================================== */

/* Hero / detail mockup — 21:9 */
.reference-detail-image,
.reference-detail-image img {
	aspect-ratio: 21 / 9 !important;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Einblicke gallery — 4:3 */
.reference-insight-image,
.reference-insight-image img {
	aspect-ratio: 4 / 3 !important;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.reference-insight-image {
	margin-bottom: 14px;
}

/* ==========================================================================
   2. Hero layout
   Parent: .fpw-grid-2.reference-hero
   Right:  .reference-meta
   ========================================================================== */

.fpw-grid-2.reference-hero {
	grid-template-columns: 1fr auto !important;
	align-items: stretch !important;
	justify-items: stretch;
	gap: clamp(2.5rem, 2rem + 2vw, 4rem);
}

/* Sidebar look (padding + border) only for project meta — not .leistung-meta */
.reference-meta {
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	align-items: stretch !important;
	justify-self: end;
	align-self: stretch;
	box-sizing: border-box;
	width: max-content;
	min-width: 16rem;
	max-width: 22rem;
	min-height: 100%;
	margin-left: auto;
	padding-left: 2.5rem;
	border-left: 1px solid var(--wp--preset--color--border-on-dark, rgba(255, 255, 255, 0.25));
	text-align: left;
}

.reference-meta > * {
	flex: 0 0 auto;
	width: 100%;
	text-align: left;
}

@media screen and (max-width: 900px) {
	.fpw-grid-2.reference-hero {
		grid-template-columns: 1fr !important;
	}

	.reference-meta {
		flex-direction: row !important;
		flex-wrap: wrap;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		justify-self: stretch;
		width: 100%;
		max-width: none;
		min-width: 0;
		min-height: 0;
		margin-left: 0;
		padding: 10px 0 0 !important;
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--border-on-dark, rgba(255, 255, 255, 0.25));
		gap: 1.25rem 2rem !important;
	}

	.reference-meta > * {
		width: auto;
		flex: 1 1 auto;
	}
}

/* ==========================================================================
   3. Meta fields (Branche / Leistungen / Website)
   Jet puts the class on the block + an inner copy — label only on [data-is-block].
   ========================================================================== */

[data-is-block].meta-branche::before,
[data-is-block].meta-leistungen::before,
[data-is-block].meta-website::before {
	content: "";
	display: block;
	margin-bottom: 0.375rem;
	font: 600 0.75rem / 1.4 var(--wp--preset--font-family--jost);
	text-transform: uppercase;
	color: var(--wp--preset--color--body-text);
}

[data-is-block].meta-branche::before {
	content: "Branche";
}

[data-is-block].meta-leistungen::before {
	content: "Leistungen";
}

[data-is-block].meta-website::before {
	content: "Website";
}

/* No duplicate labels on Jet's inner .meta-* node */
.meta-branche .meta-branche::before,
.meta-leistungen .meta-leistungen::before,
.meta-website .meta-website::before {
	content: none !important;
	display: none !important;
	margin: 0 !important;
}

.fpw-meta-label {
	display: block;
	margin-bottom: 0.375rem;
	font: 600 0.75rem / 1.4 var(--wp--preset--font-family--jost);
	text-transform: uppercase;
	color: var(--wp--preset--color--body-text);
}

[data-is-block].meta-branche,
[data-is-block].meta-leistungen,
[data-is-block].meta-website {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.96875rem;
	font-weight: 600;
	line-height: 1.4;
}

[data-is-block].meta-branche p,
[data-is-block].meta-leistungen p,
[data-is-block].meta-website p,
[data-is-block].meta-branche .jet-listing,
[data-is-block].meta-leistungen .jet-listing,
[data-is-block].meta-website .jet-listing {
	margin: 0;
	padding: 0;
	text-align: left;
}

[data-is-block].meta-branche a,
[data-is-block].meta-leistungen a,
[data-is-block].meta-website a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	transition: color 0.15s linear, border-color 0.15s linear;
}

[data-is-block].meta-branche a:hover,
[data-is-block].meta-leistungen a:hover,
[data-is-block].meta-website a:hover {
	color: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--preset--color--accent);
}

[data-is-block].meta-website a::after {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-left: 0.3em;
	vertical-align: -0.05em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 14v4.833A1.166 1.166 0 0 1 16.833 20H5.167A1.167 1.167 0 0 1 4 18.833V7.167A1.166 1.166 0 0 1 5.167 6h4.618m4.447-2H20v5.768m-7.889 2.121l7.778-7.778'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 14v4.833A1.166 1.166 0 0 1 16.833 20H5.167A1.167 1.167 0 0 1 4 18.833V7.167A1.166 1.166 0 0 1 5.167 6h4.618m4.447-2H20v5.768m-7.889 2.121l7.778-7.778'/%3E%3C/svg%3E");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.reference-meta-value {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.96875rem;
	font-weight: 600;
	line-height: 1.4;
}

.reference-meta-value a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-color: rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   4. Typography helpers
   Jet classes sit on the wrapper — theme.json tag styles beat inheritance,
   so each helper also targets the inner heading/p / .__content.
   ========================================================================== */

/* H1 — white (hero) */
.reference-h1,
.reference-h1 h1,
.reference-h1 .jet-listing-dynamic-field__content,
.reference-detail h1 {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--preset--font-size--h-1-font-size);
	font-weight: 600;
	line-height: 1.1;
}

/* H2 — ink (light sections) */
.reference-h2,
.reference-h2 h2,
.reference-h2 .jet-listing-dynamic-field__content,
.reference-detail h2 {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--preset--font-size--h-2-font-size);
	font-weight: 600;
	line-height: 1.1;
	text-wrap: balance;
}

/* H2 — white (dark sections) */
.reference-h2-on-dark,
.reference-h2-on-dark h2,
.reference-h2-on-dark .jet-listing-dynamic-field__content {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--preset--font-size--h-2-font-size);
	font-weight: 600;
	line-height: 1.1;
}

/* H3 — H5 scale (cards / Lösung items) */
.reference-h3,
.reference-h3 h3,
.reference-h3 .jet-listing-dynamic-field__content,
.reference-detail h3 {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--preset--font-size--h-5-font-size);
	font-weight: 600;
	line-height: 1.1;
}

/* H6 scale as paragraph */
.reference-h6,
.reference-h6 p,
.reference-h6 .jet-listing-dynamic-field__content {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--jost);
	font-size: var(--wp--preset--font-size--h-6-font-size);
	font-weight: 600;
	line-height: 1.1;
}

/* Body — on light */
.reference-text,
.reference-text p,
.reference-text .jet-listing-dynamic-field__content,
.reference-detail p {
	color: var(--wp--preset--color--body-on-white);
	font-family: var(--wp--preset--font-family--sora);
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 400;
	line-height: 1.6;
}

/* Body — on dark */
.reference-text-on-dark,
.reference-text-on-dark p,
.reference-text-on-dark .jet-listing-dynamic-field__content {
	color: var(--wp--preset--color--body-text);
	font-family: var(--wp--preset--font-family--sora);
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 400;
	line-height: 1.6;
}

/* ==========================================================================
   5. Section grids
   ========================================================================== */

/* Lösung — 3×2 */
.reference-solution-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 56px;
}

.reference-solution-grid > * {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 20px;
}

@media screen and (max-width: 781px) {
	.reference-solution-grid {
		grid-template-columns: 1fr;
	}
}