/**
 * Artwork layout styles for MaWe Artworks Display.
 *
 * All visual decisions live in the CSS custom properties block at the top.
 * To restyle every artwork post globally — even after the client has built
 * many posts — only this section needs to be edited.
 *
 * The layout is a two-column structure:
 *   Left  (33 %): Werk-Grafik or video (optional) + technical metadata
 *   Right (66 %): descriptive text
 *
 * Accessibility: the prefers-reduced-motion media query at the bottom pauses
 * all video animation for visitors who have requested reduced motion in their
 * system settings. The poster image remains visible in its place.
 *
 * @package Mawe_Artworks_Display
 * @since   1.0.0
 */


/* =============================================================================
   Design Tokens — edit here to restyle all artwork pages globally
   ============================================================================= */

:root {
	/* Typography */
	--mawe-artwork-meta-font-size:        0.875rem;   /* 14px at default base */
	--mawe-artwork-meta-line-height:      1.6;
	--mawe-artwork-meta-font-weight:      700;       /* bold */
	/* Spacing */
	--mawe-artwork-column-gap:            4rem;
	--mawe-artwork-meta-row-gap:          0.25rem;    /* tight spacing between meta lines */
	--mawe-artwork-image-margin-bottom:   1.5rem;
	--mawe-artwork-video-margin-bottom:   1.5rem;
	--mawe-artwork-section-padding:       3rem 0;

	/* Colours */
	--mawe-artwork-meta-color:            currentColor;
}


/* =============================================================================
   Section heading: "Details"
   ============================================================================= */

.mawe-artwork-section-heading {
	margin-bottom: var( --mawe-artwork-image-margin-bottom );
	font-size: 1.35rem;
	font-weight: 700;
}


/* =============================================================================
   Outer wrapper
   ============================================================================= */

.mawe-artwork-details {
	padding: var( --mawe-artwork-section-padding );
}

/* Override theme padding on the inner block-group container. */
.mawe-artwork-details .wp-block-group__inner-container {
	padding: 0 !important;
}


/* =============================================================================
   Two-column layout
   ============================================================================= */

.mawe-artwork-columns {
	gap: var( --mawe-artwork-column-gap ) !important;
}

@media ( max-width: 48rem ) {
	.mawe-artwork-columns {
		flex-direction: column;
	}

	.mawe-artwork-col-left,
	.mawe-artwork-col-right {
		flex-basis: 100% !important;
		width: 100%;
	}
}


/* =============================================================================
   Left column: Werk-Grafik (schematic image)
   ============================================================================= */

.mawe-artwork-schematic {
	margin-bottom: var( --mawe-artwork-image-margin-bottom );
}

.mawe-artwork-schematic img {
	display: block;
	width: 100%;
	height: auto;
}


/* =============================================================================
   Left column: video
   ============================================================================= */

.mawe-artwork-video {
	margin-bottom: var( --mawe-artwork-video-margin-bottom );
}

.mawe-artwork-video video {
	display: block;
	width: 100%;
	height: auto;

	/* Prevent the browser from showing its own poster-image border or
	   background in the empty state before the video loads. */
	background: transparent;
}


/* =============================================================================
   Left column: meta fields
   ============================================================================= */

.mawe-artwork-meta {
	gap: var( --mawe-artwork-meta-row-gap ) !important;
}

.mawe-artwork-meta p {
	margin: 0;
	font-size: var( --mawe-artwork-meta-font-size );
	line-height: var( --mawe-artwork-meta-line-height );
	font-weight: var( --mawe-artwork-meta-font-weight );
	color: var( --mawe-artwork-meta-color );
}


/* =============================================================================
   Right column: description — inherits global body styles
   ============================================================================= */


/* =============================================================================
   Accessibility: reduced motion
   Visitors who have enabled "Reduce motion" in their OS or browser settings
   will see the poster image instead of the looping video. The video element
   is not removed from the DOM — it is paused at its first frame via CSS so
   no reflow occurs and the poster image takes its place visually.
   ============================================================================= */

@media ( prefers-reduced-motion: reduce ) {
	.mawe-artwork-video video {
		/* Suppress animation and transitions only. The video element stays
		   fully visible so the browser can render the poster attribute as a
		   static fallback image. opacity:0 would hide the poster too, since
		   the poster is painted inside the video element, not behind it. */
		animation: none !important;
		transition: none !important;
	}
}


/* =============================================================================
   Project Section (.mawe-project-section)
   Styles for the "Projekt-Abschnitt" patterns registered in
   includes/block-patterns.php. The accordion content overlays the media
   area (carousel or gallery) when open.
   ============================================================================= */

.mawe-project-section {
	position: relative;
}

/* Inner container: header left, accordion toggle right, media below.
   The 40px side padding aligns the content with the page's h1. */
.mawe-project-section__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.5rem;
	padding: var( --container-padding, 40px );
}

.mawe-project-section__header {
	flex: 1 1 auto;
}

.mawe-project-section__accordion {
	flex: 0 0 auto;
	margin-left: auto;
	/* Bottom-align with the header so the toggle sits on the last
	   line of the project title, however many lines it wraps to. */
	align-self: flex-end;
}

.mawe-project-section__gallery {
	flex-basis: 100%;
	margin-top: 1.5rem;
}

@media ( max-width: 48rem ) {
	.mawe-project-section__inner {
		flex-direction: column;
	}

	.mawe-project-section__accordion {
		margin-left: 0;
		align-self: flex-start;
	}
}

/* Header: location (h2) small and plain, project title (h3) large */
.mawe-project-section__header h2 {
	font-size: 1.35rem;
	font-weight: 400;
	margin: 0 0 0.5rem;
}

.mawe-project-section__header h3 {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	margin: 0;
	/* Wrap long titles instead of spanning the full row (see design draft) */
	max-width: 18ch;
	text-wrap: balance;
}

/* Accordion toggle: icon before the label */
.mawe-project-section .gb-accordion__toggle {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	gap: 0.4em;
	font-weight: 700;
	cursor: pointer;
}

/* Center the icon glyph on the label's text line */
.mawe-project-section .gb-accordion__toggle-icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

/* Hover / focus: underline the label only, matching the site's link style */
.mawe-project-section .gb-accordion__toggle:hover .gb-text,
.mawe-project-section .gb-accordion__toggle:focus-visible .gb-text {
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
	text-decoration-skip-ink: none;
}

.mawe-project-section .gb-accordion,
.mawe-project-section .gb-accordion__item {
	overflow: visible;
}

/* Open accordion content overlays the media area. The inner wrapper is
   re-contained to the section width and given the same 40px padding.
   top stays auto: the panel keeps its natural flow position (directly
   below the toggle, which is bottom-aligned with the title), so it
   clears headlines of any line count. left/right stretch it across
   the full section width. */
.mawe-project-section .gb-accordion__content {
	position: absolute;
	left: 0;
	right: 0;
	/* Clear the title's last line: the toggle (the panel's anchor) sits
	   slightly higher than the headline's bottom edge. */
	margin-top: 3rem;
	z-index: 10;
	background: #fff;
}

.mawe-project-section .gb-accordion__item-open .gb-accordion__content {
	box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.12);
}

.mawe-project-section .gb-accordion__content > * {
	max-width: var( --gb-container-width, 1400px );
	margin-left: auto;
	margin-right: auto;
	padding: 1rem var( --container-padding, 40px ) 2rem;
	box-sizing: border-box;
}

/* Readable line length for the description text */
.mawe-project-section .gb-accordion__content p {
	max-width: 70ch;
}

/* --- Block editor only ---------------------------------------------------
   .editor-styles-wrapper exists only in the editor canvas. The open
   accordion stays in normal flow there: an overlay would cover the very
   blocks the client needs to click and edit. */
.editor-styles-wrapper .mawe-project-section .gb-accordion__content {
	position: static;
	margin-top: 1rem;
	box-shadow: none;
}

.mawe-project-section .gb-carousel-item {
	overflow: hidden;
}

.mawe-project-section .gb-carousel {
	overflow: hidden;
	padding-bottom: 2rem;
}