/**
 * Slabwork: block styles (S-01 through S-09) and image treatments
 * (I-01 through I-12). No inline_style is passed at registration for any
 * of these, so this stylesheet is what makes every one of them cacheable.
 */

/* ----------------------------------------------------------------------
 * Header navigation counter
 * ------------------------------------------------------------------- */

.is-style-slabwork-counted {
	counter-reset: slabwork-nav;
}

.is-style-slabwork-counted .wp-block-navigation-item {
	counter-increment: slabwork-nav;
}

.is-style-slabwork-counted .wp-block-navigation-item__content::before {
	content: counter( slabwork-nav, decimal-leading-zero ) "\00a0\00a0";
	color: var( --wp--preset--color--accent-ink );
}

/* ----------------------------------------------------------------------
 * S-01 Slab card
 * ------------------------------------------------------------------- */

.is-style-slabwork-slab-card {
	position: relative;
	background: var( --wp--custom--color--paper );
	border: 1px solid var( --wp--preset--color--contrast );
	padding: var( --wp--preset--spacing--m );
	padding-inline-end: calc( var( --wp--preset--spacing--m ) + 12px );
	overflow: hidden;
	isolation: isolate;
}

.is-style-slabwork-slab-card::before {
	content: "";
	position: absolute;
	inset: 12px -12px -14px 12px;
	background: var( --wp--custom--color--slab-face-right );
	z-index: -1;
}

.is-style-slabwork-slab-card::after {
	content: "";
	position: absolute;
	left: -20px;
	top: 24px;
	width: 120px;
	height: 7px;
	background: var( --wp--preset--color--primary );
	transform: rotate( 24deg );
	transform-origin: left center;
}

/* ----------------------------------------------------------------------
 * S-02 Inverted band (colours handled by the theme.json group variation;
 * spacing/geometry corrections only here)
 * ------------------------------------------------------------------- */

.is-style-slabwork-inverted {
	padding-inline: var( --wp--preset--spacing--m );
}

/* ----------------------------------------------------------------------
 * S-03 Crossed quote
 * ------------------------------------------------------------------- */

.is-style-slabwork-crossed {
	position: relative;
	border: 0;
	padding: 14px 0;
	margin-inline: 0;
}

.is-style-slabwork-crossed::before {
	content: "";
	position: absolute;
	left: -60px;
	top: 54px;
	width: calc( 100% + 120px );
	height: 16px;
	background: var( --wp--preset--color--primary );
	transform: rotate( -24deg );
	z-index: 0;
}

.is-style-slabwork-crossed > * {
	position: relative;
	z-index: 1;
}

.is-style-slabwork-crossed cite {
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--mono-s );
	font-style: normal;
	color: var( --wp--preset--color--secondary );
}

/* ----------------------------------------------------------------------
 * S-04 Separators: hairline, notch, beam
 * ------------------------------------------------------------------- */

.wp-block-separator.is-style-slabwork-hairline {
	border: 0;
	border-top: 1px solid var( --wp--preset--color--contrast );
	margin-block: var( --wp--preset--spacing--l );
}

.wp-block-separator.is-style-slabwork-notch {
	border: 0;
	height: 5px;
	background: linear-gradient(
		to right,
		var( --wp--preset--color--primary ) 0 48px,
		var( --wp--preset--color--contrast ) 48px 48px
	);
}

.wp-block-separator.is-style-slabwork-beam {
	position: relative;
	border: 0;
	height: 26px;
	background: transparent;
}

.is-style-slabwork-beam::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 10px;
	height: 7px;
	background: var( --wp--preset--color--contrast );
}

.is-style-slabwork-beam::after {
	content: "";
	position: absolute;
	left: 33%;
	top: 8px;
	width: 150px;
	height: 11px;
	background: var( --wp--preset--color--primary );
	transform: rotate( -24deg );
}

/* ----------------------------------------------------------------------
 * S-05 Plan markers
 * ------------------------------------------------------------------- */

.is-style-slabwork-markers {
	list-style: none;
	padding-inline-start: 0;
}

.is-style-slabwork-markers li {
	display: flex;
	gap: 14px;
	align-items: baseline;
}

.is-style-slabwork-markers li::before {
	content: "";
	flex: 0 0 11px;
	width: 11px;
	height: 11px;
	margin-top: 0.45em;
	background: var( --wp--preset--color--contrast );
}

.is-style-slabwork-markers li:first-child::before {
	background: var( --wp--preset--color--primary );
}

.is-style-slabwork-markers li.is-open::before {
	background: transparent;
	border: 1.5px solid var( --wp--preset--color--contrast );
}

/* ----------------------------------------------------------------------
 * S-06 Plane image
 * ------------------------------------------------------------------- */

.is-style-slabwork-plane {
	position: relative;
	margin-block-end: 24px;
}

.is-style-slabwork-plane img {
	transform: skewY( -6deg );
	display: block;
}

.is-style-slabwork-plane::before,
.is-style-slabwork-plane::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: -16px;
	width: 60%;
	height: 20px;
}

.is-style-slabwork-plane::before {
	background: var( --wp--custom--color--slab-face-left );
	clip-path: polygon( 0 0, 100% 40%, 100% 100%, 0 60% );
}

.is-style-slabwork-plane::after {
	inset-inline-start: 55%;
	width: 45%;
	background: var( --wp--custom--color--slab-face-right );
	clip-path: polygon( 0 40%, 100% 0, 100% 60%, 0 100% );
}

@media ( max-width: 781px ) {
	.is-style-slabwork-plane img {
		transform: none;
		clip-path: var( --slabwork-crop );
	}

	.is-style-slabwork-plane::before,
	.is-style-slabwork-plane::after {
		display: none;
	}
}

/* ----------------------------------------------------------------------
 * S-07 Buttons: solid, outline, copper
 * ------------------------------------------------------------------- */

.wp-block-button__link {
	border-radius: 0;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: var( --wp--preset--spacing--m );
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 500;
}

.is-style-slabwork-solid .wp-block-button__link {
	background: var( --wp--preset--color--contrast );
	color: var( --wp--preset--color--base );
	border: 1.5px solid var( --wp--preset--color--contrast );
}

.is-style-slabwork-outline .wp-block-button__link {
	background: transparent;
	color: var( --wp--preset--color--contrast );
	border: 1.5px solid var( --wp--preset--color--contrast );
}

.is-style-slabwork-inverted .is-style-slabwork-outline .wp-block-button__link {
	color: var( --wp--preset--color--base );
	border-color: var( --wp--preset--color--base );
}

.is-style-slabwork-copper .wp-block-button__link {
	background: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	border: 1.5px solid var( --wp--preset--color--primary );
}

@media ( max-width: 781px ) {
	.wp-block-buttons {
		flex-direction: column;
		align-items: stretch !important;
		gap: 12px !important;
	}

	.wp-block-buttons .wp-block-button__link {
		width: 100%;
	}
}

/* ----------------------------------------------------------------------
 * S-08 Paragraph: figure caption, eyebrow
 * ------------------------------------------------------------------- */

.is-style-slabwork-figure {
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--mono-s );
	color: var( --wp--preset--color--secondary );
}

.is-style-slabwork-eyebrow {
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--mono-s );
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var( --wp--preset--color--accent-ink );
}

.is-style-slabwork-inverted .is-style-slabwork-eyebrow {
	color: var( --wp--preset--color--accent-light );
}

/* ----------------------------------------------------------------------
 * S-09 Slab table
 * ------------------------------------------------------------------- */

.is-style-slabwork-slab-table table {
	border-collapse: collapse;
	width: 100%;
}

.is-style-slabwork-slab-table thead th {
	background: var( --wp--preset--color--contrast );
	color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--mono-s );
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: left;
	padding: 10px 8px;
}

.is-style-slabwork-slab-table td {
	padding: 10px 8px;
	border-bottom: 1px solid var( --wp--preset--color--tertiary );
}

.is-style-slabwork-slab-table tbody tr:last-child td {
	border-bottom: 2px solid var( --wp--preset--color--contrast );
}

.is-style-slabwork-slab-table td.slabwork-num {
	font-family: var( --wp--preset--font-family--mono );
	font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------
 * Image treatments (I-01 through I-12)
 * ------------------------------------------------------------------- */

.is-style-slabwork-slab-crop img {
	clip-path: var( --slabwork-crop );
}

.is-style-slabwork-plane-mount {
	position: relative;
	margin-block-end: 24px;
}

.is-style-slabwork-plane-mount img {
	transform: skewY( -6deg );
	display: block;
}

.is-style-slabwork-bar-across {
	position: relative;
	overflow: hidden;
}

.is-style-slabwork-bar-across::after {
	content: "";
	position: absolute;
	left: -12%;
	top: 58%;
	width: 124%;
	height: 20px;
	background: var( --wp--preset--color--primary );
	transform: rotate( -24deg );
}

.is-style-slabwork-off-register {
	position: relative;
}

.is-style-slabwork-off-register::before {
	content: "";
	position: absolute;
	inset: 16px -18px -16px 18px;
	border: 2px solid var( --wp--preset--color--contrast );
	z-index: -1;
}

.is-style-slabwork-coarse-screen img {
	filter: grayscale( 1 ) contrast( 1.15 );
}

.is-style-slabwork-coarse-screen {
	position: relative;
}

.is-style-slabwork-coarse-screen::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient( var( --wp--preset--color--base ) 1px, transparent 1.5px );
	background-size: 8px 8px;
	opacity: 0.35;
	pointer-events: none;
}

/*
 * I-07 Letterform mask. The heading's own background must be set to the
 * same image as the cover (the editor's "Apply the image as a background"
 * step, documented in readme.md) so background-clip can cut the letterforms
 * out of it. color is the solid fallback for browsers without support.
 */
.is-style-slabwork-letterform-mask .wp-block-cover__inner-container :is( h1, h2, h3 ) {
	color: var( --wp--preset--color--contrast );
	background-position: center;
	background-size: cover;
}

@supports ( background-clip: text ) or ( -webkit-background-clip: text ) {
	.is-style-slabwork-letterform-mask .wp-block-cover__inner-container :is( h1, h2, h3 )[style*="background-image"] {
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
	}
}

.is-style-slabwork-index-caption {
	position: relative;
}

.is-style-slabwork-index-caption figcaption {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	max-width: 60%;
	margin: 0;
	background: var( --wp--preset--color--contrast );
	color: var( --wp--preset--color--base );
	padding: var( --wp--preset--spacing--xs ) var( --wp--preset--spacing--s );
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--mono-s );
}

.is-style-slabwork-diagonal-diptych.wp-block-gallery {
	gap: 8px;
}

.is-style-slabwork-diagonal-diptych .wp-block-image img {
	clip-path: var( --slabwork-crop );
}

.is-style-slabwork-notch-corner {
	position: relative;
	background: var( --wp--preset--color--primary );
}

.is-style-slabwork-notch-corner img {
	clip-path: polygon( 0 0, 100% 0, 100% calc( 100% - 56px ), calc( 100% - 72px ) 100%, 0 100% );
}

.is-style-slabwork-contact-sheet.wp-block-gallery {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 12px;
	counter-reset: slabwork-frame;
}

.is-style-slabwork-contact-sheet .wp-block-image {
	position: relative;
	counter-increment: slabwork-frame;
}

.is-style-slabwork-contact-sheet .wp-block-image::after {
	content: counter( slabwork-frame, decimal-leading-zero );
	position: absolute;
	bottom: 6px;
	right: 6px;
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--mono-s );
	color: var( --wp--preset--color--base );
	background: var( --wp--custom--color--ink );
	padding: 2px 6px;
}

.is-style-slabwork-contact-sheet .wp-block-image:nth-child( odd ) img {
	filter: none;
}

.is-style-slabwork-contact-sheet .wp-block-image.is-style-slabwork-contact-sheet-featured {
	outline: 5px solid var( --wp--preset--color--primary );
	outline-offset: -5px;
}

@media ( min-width: 782px ) {
	.is-style-slabwork-contact-sheet.wp-block-gallery {
		grid-template-columns: repeat( 6, 1fr );
	}
}

.is-style-slabwork-full-bleed-plate {
	position: relative;
}

.is-style-slabwork-full-bleed-plate .wp-block-cover__inner-container {
	background: var( --wp--custom--color--paper );
	color: var( --wp--preset--color--contrast );
	max-width: max-content;
	padding: var( --wp--preset--spacing--m );
	margin-inline-start: 32px;
	margin-block-start: 48px;
}

/* At and below 781px, geometry-heavy treatments fall back to a plain
 * slab crop so nothing important is cut off on a phone. */
@media ( max-width: 781px ) {
	.is-style-slabwork-plane-mount img,
	.is-style-slabwork-off-register img,
	.is-style-slabwork-notch-corner img,
	.is-style-slabwork-diagonal-diptych .wp-block-image img {
		transform: none;
		clip-path: var( --slabwork-crop );
	}

	.is-style-slabwork-plane-mount::before,
	.is-style-slabwork-plane-mount::after,
	.is-style-slabwork-off-register::before,
	.is-style-slabwork-bar-across::after {
		display: none;
	}

	.is-style-slabwork-notch-corner {
		background: transparent;
	}
}