/*
 * Block styles shared by the front end and the block editor:
 * images, video, embeds, tables, separators, noise, mask and size classes.
 * Colours / widths come from the --ek-* variables (Customizer).
 */

/* ======================================================================
   Size options  (editor sidebar → "Ekremer: size, noise & mask")
   ====================================================================== */

.ek-size-narrow,
.ek-size-text,
.ek-size-media,
.ek-size-wide {
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

.ek-size-narrow { max-width: var(--ek-narrow-width) !important; }
.ek-size-text   { max-width: var(--ek-content-width) !important; }
.ek-size-media  { max-width: var(--ek-media-width) !important; }
.ek-size-wide   { max-width: var(--ek-wide-width) !important; }

.ek-size-full {
	max-width: none !important;
	width: 100% !important;
}

/* Media inside a sized block fills that size. */
:is(.ek-size-narrow, .ek-size-text, .ek-size-media, .ek-size-wide, .ek-size-full):is(.wp-block-image, .wp-block-video) :is(img, video),
:is(.ek-size-narrow, .ek-size-text, .ek-size-media, .ek-size-wide, .ek-size-full).wp-block-image > figure {
	width: 100%;
	height: auto;
}

:is(.ek-size-narrow, .ek-size-text, .ek-size-media, .ek-size-wide, .ek-size-full).wp-block-image > figure {
	display: block;
}

/* Small side padding so sized blocks never touch the screen edge on phones. */
@media (max-width: 700px) {
	.ek-size-narrow,
	.ek-size-text {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* Height limit for images / videos (keeps aspect ratio, crops nothing). */
.ek-maxh-50 :is(img, video) { max-height: 50vh; width: auto !important; max-width: 100%; margin-inline: auto; }
.ek-maxh-75 :is(img, video) { max-height: 75vh; width: auto !important; max-width: 100%; margin-inline: auto; }
.ek-maxh-90 :is(img, video) { max-height: 90vh; width: auto !important; max-width: 100%; margin-inline: auto; }

/* Vertical spacing presets. */
.ek-space-s  { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.ek-space-m  { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.ek-space-l  { margin-top: 6rem !important; margin-bottom: 6rem !important; }
.ek-space-xl { margin-top: 10rem !important; margin-bottom: 10rem !important; }

/* ======================================================================
   Images
   ====================================================================== */

figure.wp-block-image,
.wp-block-image > figure {
	position: relative;
}

.wp-block-image {
	margin: 0;
}

figure.wp-block-image img,
.wp-block-image img {
	vertical-align: bottom;
}

/* Default caption: soft overlay at the bottom of the image (original look). */
.wp-block-image figcaption {
	position: absolute;
	text-align: center;
	width: 100%;
	min-width: 80vw;
	right: 0;
	transform: translateY(-2em);
	margin: 0;
	opacity: 0.5;
	color: var(--ek-caption);
}

/* Style "Caption below": normal caption under the image. */
.wp-block-image.is-style-caption-below figcaption {
	position: relative;
	right: auto;
	transform: none;
	min-width: 0;
	padding: 0.5em 1em 0;
	opacity: 0.7;
	font-size: 0.9em;
}

@media (max-width: 700px) {
	.wp-block-image figcaption {
		font-size: 0.7em;
	}
}

/* ======================================================================
   Video (core/video) – a real, normal player now.
   The old theme put the logo clip-mask on EVERY video, which cut off the
   controls. The mask is now opt-in (style "Logo mask" or the Mask toggle).
   ====================================================================== */

.wp-block-video {
	max-width: var(--ek-media-width);
	margin: 2rem auto;
}

.wp-block-video video {
	display: block;
	width: 100%;
	height: auto;
	background: #000;
	accent-color: var(--ek-accent);
}

.wp-block-video figcaption {
	text-align: center;
	color: var(--ek-caption);
	opacity: 0.7;
	font-size: 0.9em;
	padding-top: 0.5em;
}

.wp-block-video.alignfull,
.wp-block-video.alignwide {
	max-width: none;
}

.wp-block-video.alignwide {
	max-width: var(--ek-wide-width);
}

/* ======================================================================
   Embeds (YouTube / Vimeo …) – keep their real aspect ratio.
   (Replaces the old fixed "padding-bottom: 500px" hack.)
   ====================================================================== */

.wp-block-embed {
	max-width: var(--ek-media-width);
	margin: 2rem auto;
}

.wp-block-embed.alignwide {
	max-width: var(--ek-wide-width);
}

.wp-block-embed.alignfull {
	max-width: none;
}

.wp-block-embed__wrapper {
	position: relative;
}

.wp-block-embed iframe {
	border: 0;
	display: block;
	max-width: 100%;
}

/* Embeds WordPress couldn't detect a ratio for: assume 16:9. */
.wp-block-embed:not(.wp-has-aspect-ratio) iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.wp-block-embed figcaption {
	text-align: center;
	color: var(--ek-caption);
	opacity: 0.7;
	font-size: 0.9em;
	padding-top: 0.5em;
}

/* ======================================================================
   Tables
   ====================================================================== */

.wp-block-table {
	max-width: var(--ek-content-width);
	margin: 2rem auto;
	padding: 0 var(--ek-text-padding);
	overflow-x: auto;                 /* wide tables scroll on phones instead of breaking the page */
	-webkit-overflow-scrolling: touch;
	font-family: var(--ek-font-body, "Roboto", sans-serif);
}

.wp-block-table.alignwide { max-width: var(--ek-wide-width); }
.wp-block-table.alignfull { max-width: none; }

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	color: inherit;
	font-size: 0.95em;
	line-height: 1.5;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.65em 0.9em;
	border: 1px solid var(--ek-table-border);
	text-align: left;
	vertical-align: top;
	word-break: normal;
}

.wp-block-table th[data-align="center"], .wp-block-table td[data-align="center"],
.wp-block-table .has-text-align-center { text-align: center; }
.wp-block-table th[data-align="right"], .wp-block-table td[data-align="right"],
.wp-block-table .has-text-align-right { text-align: right; }

.wp-block-table thead {
	border-bottom: 2px solid var(--ek-accent);
}

.wp-block-table thead th,
.wp-block-table thead td {
	background: var(--ek-table-head-bg);
	font-family: var(--ek-font-heading, "Cinzel", serif);
	font-weight: 500;
	letter-spacing: 0.03em;
}

.wp-block-table tfoot {
	border-top: 2px solid var(--ek-table-border);
}

.wp-block-table tfoot td {
	background: var(--ek-table-head-bg);
}

.wp-block-table tbody tr {
	transition: background-color 0.15s;
}

.wp-block-table tbody tr:hover {
	background-color: rgba(255, 255, 255, 0.04);
}

/* Core "Stripes" style – use theme colours instead of light grey. */
.wp-block-table.is-style-stripes {
	border-bottom: 0;
}

.wp-block-table.is-style-stripes table {
	border-bottom: 1px solid var(--ek-table-border);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--ek-table-stripe);
}

.wp-block-table.is-style-stripes td,
.wp-block-table.is-style-stripes th {
	border-color: transparent;
}

/* Style "Minimal lines": only horizontal rules. */
.wp-block-table.is-style-ek-minimal th,
.wp-block-table.is-style-ek-minimal td {
	border-width: 0 0 1px;
}

.wp-block-table.is-style-ek-minimal thead th {
	background: transparent;
}

/* Style "Boxed": rounded card. */
.wp-block-table.is-style-ek-boxed table {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--ek-table-border);
	border-radius: 8px;
	overflow: hidden;
	background: var(--ek-surface);
}

.wp-block-table.is-style-ek-boxed th,
.wp-block-table.is-style-ek-boxed td {
	border-width: 0 0 1px;
}

.wp-block-table.is-style-ek-boxed tbody tr:last-child td {
	border-bottom: 0;
}

/* Colours picked in the editor win over the theme defaults. */
.wp-block-table table.has-background thead th,
.wp-block-table table.has-background tfoot td {
	background: transparent;
}

.wp-block-table table.has-border-color th,
.wp-block-table table.has-border-color td {
	border-color: inherit;
}

.wp-block-table figcaption,
.wp-block-table .wp-element-caption {
	text-align: center;
	color: var(--ek-caption);
	opacity: 0.7;
	font-size: 0.85em;
	padding-top: 0.6em;
}

@media (max-width: 700px) {
	.wp-block-table {
		padding: 0 1rem;
	}

	.wp-block-table table {
		font-size: 0.85em;
	}

	.wp-block-table th,
	.wp-block-table td {
		padding: 0.5em 0.6em;
	}
}

/* ======================================================================
   Separator
   ====================================================================== */

/* Defaults: Customize → Ekremer Theme → Separator lines.
   Colour = text colour unless a separator colour is set there or on the block. */
.wp-block-separator {
	border: 0;
	border-top: var(--ek-separator-thickness, 1px) solid;
	height: 0;
	width: var(--ek-separator-width, 30%);
	max-width: var(--ek-separator-max, 200px);
	margin: 2em auto;
}

.wp-block-separator.wp-block-separator:not(.has-text-color):not(.has-background) {
	border-color: var(--ek-separator, var(--ek-text));
	color: var(--ek-separator, var(--ek-text)); /* "dots" style */
	opacity: var(--ek-separator-opacity, 0.6);
}

.wp-block-separator.is-style-dots {
	border-top: 0;
}

.wp-block-separator.is-style-wide {
	width: 100%;
	max-width: var(--ek-content-width);
}

/* ======================================================================
   Textures on single blocks: noise, grunge, paper
   - Text blocks / cards: the texture sits BEHIND the text (z-index -1 inside
     an isolated block = above the block's background, below its content),
     so text is never grainy.
   - Images / videos / embeds: the texture sits on top of the picture.
   - Captions always stay above the texture.
   ====================================================================== */

.has-noise,
.has-grunge,
.has-paper,
:is(div.wp-block-image).has-noise > figure,
:is(div.wp-block-image).has-grunge > figure {
	position: relative;
	isolation: isolate;
}

/* --- Noise (class has-noise [+ has-noise-subtle / has-noise-strong]) --- */

.has-noise::after,
div.wp-block-image.has-noise > figure::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: var(--ek-noise-static);
	background-size: var(--ek-noise-size);
	opacity: var(--ek-noise-block-opacity);
	mix-blend-mode: var(--ek-noise-blend);
	border-radius: inherit;
}

div.wp-block-image.has-noise::after {
	display: none;
}

.has-noise.has-noise-subtle::after,
div.wp-block-image.has-noise-subtle > figure::after {
	opacity: calc(var(--ek-noise-block-opacity) * 0.5);
}

.has-noise.has-noise-strong::after,
div.wp-block-image.has-noise-strong > figure::after {
	opacity: calc(var(--ek-noise-block-opacity) * 2);
}

/* --- Grunge / dirt (class has-grunge [+ -subtle / -strong]) – for images --- */

.has-grunge::before,
div.wp-block-image.has-grunge > figure::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: url("../images/grunge_map_16_bitmap_output.jpg") center / var(--ek-dirt-size, 1024px);
	mix-blend-mode: multiply;
	opacity: 0.3;
	border-radius: inherit;
}

div.wp-block-image.has-grunge::before {
	display: none;
}

.has-grunge.has-grunge-subtle::before,
div.wp-block-image.has-grunge-subtle > figure::before {
	opacity: 0.15;
}

.has-grunge.has-grunge-strong::before,
div.wp-block-image.has-grunge-strong > figure::before {
	opacity: 0.55;
}

/* --- Paper structure (class has-paper [+ -subtle / -strong]) – for cards & text blocks.
   Uses the paper scan images/paper_01.jpg. --- */

.has-paper::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	/* images/paper_01.jpg (or Customize → Cards & shadows → Paper texture).
	   brightness() pulls the light-grey scan to mid-grey, which soft-light
	   treats as neutral: only fibres and relief show, the card colour stays. */
	background: var(--ek-paper-image, url("../images/paper_01.jpg")) center / calc(var(--ek-paper-size, 1024px) * var(--ek-paper-scale, 1));
	filter: brightness(var(--ek-paper-brightness, 0.71)) contrast(1.8);
	mix-blend-mode: soft-light;
	opacity: 0.7;
}

.has-paper.has-paper-subtle::before {
	opacity: 0.3;
}

.has-paper.has-paper-strong::before {
	opacity: 0.9;
}

/* Paper scale per block, relative to the theme size (Customize → Cards & shadows). */
.ek-paper-fine   { --ek-paper-scale: 0.5; }
.ek-paper-coarse { --ek-paper-scale: 2; }
.ek-paper-xl     { --ek-paper-scale: 4; }

.has-paper.ek-paper-fit::before {
	background-size: cover;
}

/* --- Media blocks: textures go on top of the picture, below the caption. --- */

:is(figure.wp-block-image, .wp-block-video, .wp-block-embed, .wp-block-gallery):is(.has-noise, .has-grunge)::after,
:is(figure.wp-block-image, .wp-block-video, .wp-block-embed, .wp-block-gallery):is(.has-noise, .has-grunge)::before,
div.wp-block-image:is(.has-noise, .has-grunge) > figure::after,
div.wp-block-image:is(.has-noise, .has-grunge) > figure::before {
	z-index: 3;
}

/* Cover: above the background image, below the overlay colour and the text. */
.wp-block-cover:is(.has-noise, .has-grunge, .has-paper)::after,
.wp-block-cover:is(.has-noise, .has-grunge, .has-paper)::before {
	z-index: 0;
}

:is(.wp-block-image, .wp-block-video, .wp-block-embed, .wp-block-gallery) figcaption {
	z-index: 4;
}

/* ======================================================================
   Cards  (class ek-card [+ ek-card--strong / ek-card--flat])
   Coloured box with rounded corners and a soft drop shadow.
   The block's own background / text colour (Styles tab) wins.
   ====================================================================== */

.ek-card {
	--ek-card-shadow:
		0 1.2rem 2.5rem -0.6rem rgba(var(--ek-shadow-rgb), calc(0.65 * var(--ek-shadow-strength))),
		0 0.35rem 0.8rem -0.2rem rgba(var(--ek-shadow-rgb), calc(0.45 * var(--ek-shadow-strength)));
}

.ek-card--strong {
	--ek-card-shadow:
		0 2.5rem 4.5rem -1rem rgba(var(--ek-shadow-rgb), calc(0.85 * var(--ek-shadow-strength))),
		0 0.8rem 1.6rem -0.4rem rgba(var(--ek-shadow-rgb), calc(0.55 * var(--ek-shadow-strength)));
}

.ek-card--flat {
	--ek-card-shadow: none;
}

/* Doubled class = beats ".pagecontent p" etc. without !important. */
.ek-card.ek-card {
	position: relative;
	box-sizing: border-box;
	border-radius: var(--ek-card-radius);
	padding: var(--ek-card-padding);
	box-shadow: var(--ek-card-shadow);
	margin-top: 3rem;
	margin-bottom: 3rem;
	margin-left: auto;
	margin-right: auto;
	width: calc(100% - 2rem);
	max-width: calc(var(--ek-content-width) + 2 * var(--ek-card-padding));
}

.ek-card:not(.has-background):not(.wp-block-image):not(.wp-block-video):not(.wp-block-cover):not(.wp-block-embed) {
	background-color: var(--ek-card-bg);
}

.ek-card:not(.has-text-color) {
	color: var(--ek-card-text);
}

/* Cards are lit by the page light (same spotlight + corner shade, placed on
   each card). Option "Card light fixed to the screen" pins it to the viewport
   on desktop so all cards share one light source – heavier, so off by default.
   Strength: Customize → Cards & shadows → "How much the page light falls on cards". */
.ek-card:not(.wp-block-image):not(.wp-block-video):not(.wp-block-cover):not(.wp-block-embed) {
	background-image:
		radial-gradient(
			circle at var(--ek-light-x, 50%) var(--ek-light-y, 30%),
			rgba(var(--ek-light-rgb, 255, 255, 255), calc(var(--ek-card-light, 0.7) * 0.4)) 0%,
			rgba(var(--ek-light-rgb, 255, 255, 255), 0) var(--ek-light-size, 75%)
		),
		radial-gradient(
			ellipse farthest-corner at var(--ek-light-x, 50%) var(--ek-light-y, 30%),
			rgba(var(--ek-vignette-rgb, 0, 0, 0), 0) var(--ek-vignette-start, 30%),
			rgba(var(--ek-vignette-rgb, 0, 0, 0), calc(var(--ek-vignette-strength, 0.55) * var(--ek-card-light, 0.7))) 100%
		);
}

@media (hover: hover) and (pointer: fine) {
	.ek-card-light-fixed .ek-card:not(.wp-block-image):not(.wp-block-video):not(.wp-block-cover):not(.wp-block-embed) {
		background-attachment: fixed;
	}
}

/* ----------------------------------------------------------------------
   Card top with a tab  (class ek-tab-left / ek-tab-right)
   The top edge steps down with a smooth S-curve – like folder tabs.
   Built from mask layers: body + rounded corner + tab + SVG curve.
   Height / width: Customize → Cards & shadows.
   ---------------------------------------------------------------------- */

.ek-card.ek-card:is(.ek-tab-left, .ek-tab-right) {
	padding-top: calc(var(--ek-card-padding) + var(--ek-tab-height));
	box-shadow: none; /* the shadow is added on a wrapper and follows the shape */
}

.ek-card.ek-tab-left {
	-webkit-mask:
		linear-gradient(#000 0 0) 0 var(--ek-tab-height) / calc(100% - var(--ek-card-radius) + 1px) calc(100% - var(--ek-tab-height)) no-repeat,
		linear-gradient(#000 0 0) 100% 100% / var(--ek-card-radius) calc(100% - var(--ek-tab-height) - var(--ek-card-radius) + 1px) no-repeat,
		radial-gradient(circle at 0 100%, #000 calc(var(--ek-card-radius) - 0.5px), transparent calc(var(--ek-card-radius) + 0.5px)) 100% var(--ek-tab-height) / var(--ek-card-radius) var(--ek-card-radius) no-repeat,
		linear-gradient(#000 0 0) 0 0 / calc(var(--ek-tab-width) + 1px) calc(var(--ek-tab-height) + 1px) no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 49' preserveAspectRatio='xMinYMin meet'%3E%3Cpath d='M0 0C48 0 48 48 96 48V49H0Z'/%3E%3C/svg%3E") 100% 0 / calc(100% - var(--ek-tab-width)) calc(var(--ek-tab-height) + 1px) no-repeat;
	mask:
		linear-gradient(#000 0 0) 0 var(--ek-tab-height) / calc(100% - var(--ek-card-radius) + 1px) calc(100% - var(--ek-tab-height)) no-repeat,
		linear-gradient(#000 0 0) 100% 100% / var(--ek-card-radius) calc(100% - var(--ek-tab-height) - var(--ek-card-radius) + 1px) no-repeat,
		radial-gradient(circle at 0 100%, #000 calc(var(--ek-card-radius) - 0.5px), transparent calc(var(--ek-card-radius) + 0.5px)) 100% var(--ek-tab-height) / var(--ek-card-radius) var(--ek-card-radius) no-repeat,
		linear-gradient(#000 0 0) 0 0 / calc(var(--ek-tab-width) + 1px) calc(var(--ek-tab-height) + 1px) no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 49' preserveAspectRatio='xMinYMin meet'%3E%3Cpath d='M0 0C48 0 48 48 96 48V49H0Z'/%3E%3C/svg%3E") 100% 0 / calc(100% - var(--ek-tab-width)) calc(var(--ek-tab-height) + 1px) no-repeat;
}

.ek-card.ek-tab-right {
	-webkit-mask:
		linear-gradient(#000 0 0) 100% var(--ek-tab-height) / calc(100% - var(--ek-card-radius) + 1px) calc(100% - var(--ek-tab-height)) no-repeat,
		linear-gradient(#000 0 0) 0 100% / var(--ek-card-radius) calc(100% - var(--ek-tab-height) - var(--ek-card-radius) + 1px) no-repeat,
		radial-gradient(circle at 100% 100%, #000 calc(var(--ek-card-radius) - 0.5px), transparent calc(var(--ek-card-radius) + 0.5px)) 0 var(--ek-tab-height) / var(--ek-card-radius) var(--ek-card-radius) no-repeat,
		linear-gradient(#000 0 0) 100% 0 / calc(var(--ek-tab-width) + 1px) calc(var(--ek-tab-height) + 1px) no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 49' preserveAspectRatio='xMaxYMin meet'%3E%3Cpath d='M96 0C48 0 48 48 0 48V49H96Z'/%3E%3C/svg%3E") 0 0 / calc(100% - var(--ek-tab-width)) calc(var(--ek-tab-height) + 1px) no-repeat;
	mask:
		linear-gradient(#000 0 0) 100% var(--ek-tab-height) / calc(100% - var(--ek-card-radius) + 1px) calc(100% - var(--ek-tab-height)) no-repeat,
		linear-gradient(#000 0 0) 0 100% / var(--ek-card-radius) calc(100% - var(--ek-tab-height) - var(--ek-card-radius) + 1px) no-repeat,
		radial-gradient(circle at 100% 100%, #000 calc(var(--ek-card-radius) - 0.5px), transparent calc(var(--ek-card-radius) + 0.5px)) 0 var(--ek-tab-height) / var(--ek-card-radius) var(--ek-card-radius) no-repeat,
		linear-gradient(#000 0 0) 100% 0 / calc(var(--ek-tab-width) + 1px) calc(var(--ek-tab-height) + 1px) no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 49' preserveAspectRatio='xMaxYMin meet'%3E%3Cpath d='M96 0C48 0 48 48 0 48V49H96Z'/%3E%3C/svg%3E") 0 0 / calc(100% - var(--ek-tab-width)) calc(var(--ek-tab-height) + 1px) no-repeat;
}

.ek-card a {
	color: inherit;
}

/* Text inside a card: the card does the padding / width. */
.ek-card :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, .wp-block-table) {
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}

.ek-card > :first-child,
.ek-card > .wp-block-group__inner-container > :first-child {
	margin-top: 0;
	padding-top: 0;
}

.ek-card > :last-child,
.ek-card > .wp-block-group__inner-container > :last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Columns as a card: keep the columns gap inside. */
.ek-card.wp-block-columns {
	max-width: calc(var(--ek-wide-width) + 2 * var(--ek-card-padding));
}

/* Media cards: no padding, rounded media, default to media width. */
.ek-card.ek-card:is(.wp-block-image, .wp-block-video, .wp-block-cover, .wp-block-embed) {
	padding: 0;
	overflow: hidden;
	max-width: var(--ek-media-width);
}

.ek-card:is(.wp-block-image, .wp-block-video) :is(img, video) {
	display: block;
	width: 100%;
	height: auto;
}

/* Old image markup <div class="wp-block-image"><figure>: style the figure. */
div.wp-block-image.ek-card.ek-card {
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
}

div.wp-block-image.ek-card > figure {
	display: block;
	border-radius: var(--ek-card-radius);
	overflow: hidden;
	box-shadow: var(--ek-card-shadow);
}

/* Image card caption sits below the image inside the card. */
.ek-card.wp-block-image figcaption,
div.wp-block-image.ek-card figcaption {
	position: relative;
	right: auto;
	transform: none;
	min-width: 0;
	opacity: 0.8;
	padding: 0.6em 1em;
	margin: 0;
	background: var(--ek-card-bg);
	color: var(--ek-card-text);
}

/* Size classes still win over the card default width. */
.ek-card.ek-size-full {
	border-radius: 0;
}

/* ======================================================================
   Shadow that follows the shape  (class ek-drop-shadow)
   Put it on a Group that contains masked / cut-out blocks (or on a
   transparent PNG image): the shadow follows the visible pixels,
   including holes cut by a mask – like stacked laser-cut plates.
   ====================================================================== */

.ek-drop-shadow {
	filter:
		drop-shadow(0 1.1rem 1.4rem rgba(var(--ek-shadow-rgb), calc(0.6 * var(--ek-shadow-strength))))
		drop-shadow(0 0.3rem 0.4rem rgba(var(--ek-shadow-rgb), calc(0.4 * var(--ek-shadow-strength))));
}

.ek-drop-shadow--strong {
	filter:
		drop-shadow(0 2rem 2.4rem rgba(var(--ek-shadow-rgb), calc(0.75 * var(--ek-shadow-strength))))
		drop-shadow(0 0.6rem 0.8rem rgba(var(--ek-shadow-rgb), calc(0.5 * var(--ek-shadow-strength))));
}

/* Phones / tablets: one shadow pass instead of two (each pass is a blur of the
   whole card), and keep the shaped card on its own GPU layer while scrolling. */
@media (hover: none) {
	.ek-drop-shadow {
		filter: drop-shadow(0 0.9rem 1.1rem rgba(var(--ek-shadow-rgb), calc(0.7 * var(--ek-shadow-strength))));
	}

	.ek-drop-shadow--strong {
		filter: drop-shadow(0 1.6rem 2rem rgba(var(--ek-shadow-rgb), calc(0.85 * var(--ek-shadow-strength))));
	}

	.ek-plate {
		transform: translateZ(0);
	}
}

/* Wrapper the theme adds around masked cards ("cut-out plates"). */
.ek-plate {
	margin: 3rem auto;
	width: calc(100% - 2rem);
}

.ek-plate:not([class*="ek-size-"]) {
	max-width: calc(var(--ek-content-width) + 2 * var(--ek-card-padding));
}

.ek-plate > .ek-card.ek-card {
	margin: 0;
	width: 100%;
	max-width: none;
}

/* Masked image/video card: the shadow follows the masked picture. */
.ek-card.ek-card:is(.wp-block-image, .wp-block-video):is(.has-ek-mask, .has-ek-mask-2, .has-ek-mask-3) {
	overflow: visible;
	filter:
		drop-shadow(0 1.1rem 1.4rem rgba(var(--ek-shadow-rgb), calc(0.6 * var(--ek-shadow-strength))))
		drop-shadow(0 0.3rem 0.4rem rgba(var(--ek-shadow-rgb), calc(0.4 * var(--ek-shadow-strength))));
}

/* ======================================================================
   Layering: overlap the block above / nudge sideways
   ====================================================================== */

.ek-overlap-s,
.ek-overlap-m,
.ek-overlap-l {
	position: relative;
	z-index: 1;
}

.ek-overlap-s { margin-top: -3rem !important; }
.ek-overlap-m { margin-top: -6rem !important; }
.ek-overlap-l { margin-top: -10rem !important; }

.ek-nudge-left  { translate: -8% 0; }
.ek-nudge-right { translate: 8% 0; }

@media (max-width: 700px) {
	.ek-overlap-m { margin-top: -4rem !important; }
	.ek-overlap-l { margin-top: -6rem !important; }
	.ek-nudge-left  { translate: -3% 0; }
	.ek-nudge-right { translate: 3% 0; }
}

/* ======================================================================
   PNG alpha masks 1–3  (class has-ek-mask / has-ek-mask-2 / has-ek-mask-3,
   or block style "Logo mask" = mask 1)
   Opaque pixels = visible, transparent = hidden, semi-transparent = see-through.
   ====================================================================== */

.has-ek-mask,
.is-style-logo-mask {
	--ek-use-mask: var(--ek-mask-image);
	--ek-use-mask-size: var(--ek-mask-size);
}

.has-ek-mask-2 {
	--ek-use-mask: var(--ek-mask-image-2);
	--ek-use-mask-size: var(--ek-mask-size-2);
}

.has-ek-mask-3 {
	--ek-use-mask: var(--ek-mask-image-3);
	--ek-use-mask-size: var(--ek-mask-size-3);
}

.wp-block-image:is(.has-ek-mask, .has-ek-mask-2, .has-ek-mask-3, .is-style-logo-mask) img,
.wp-block-video:is(.has-ek-mask, .has-ek-mask-2, .has-ek-mask-3, .is-style-logo-mask) video,
.wp-block-media-text:is(.has-ek-mask, .has-ek-mask-2, .has-ek-mask-3) .wp-block-media-text__media :is(img, video),
:is(.wp-block-cover, .wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-paragraph, p, .wp-block-heading):is(.has-ek-mask, .has-ek-mask-2, .has-ek-mask-3) {
	-webkit-mask: var(--ek-use-mask) center / var(--ek-use-mask-size) no-repeat;
	mask: var(--ek-use-mask) center / var(--ek-use-mask-size) no-repeat;
}

/* A masked card's own box-shadow would be cut away – use the shape shadow instead
   (on a wrapping Group with "Shadow follows shape"). */
.ek-card:is(.has-ek-mask, .has-ek-mask-2, .has-ek-mask-3) {
	box-shadow: none;
}

/* Masked video: no black letterbox. */
.wp-block-video:is(.has-ek-mask, .has-ek-mask-2, .has-ek-mask-3, .is-style-logo-mask) video {
	background: transparent;
	object-fit: cover;
}

.wp-block-video:is(.has-ek-mask, .is-style-logo-mask) video {
	aspect-ratio: 1 / 1;
}

/* Masked image caption sits below instead of on the (hidden) edge. */
.wp-block-image:is(.has-ek-mask, .has-ek-mask-2, .has-ek-mask-3, .is-style-logo-mask) figcaption {
	position: relative;
	right: auto;
	transform: none;
	min-width: 0;
	padding-top: 0.5em;
}