/* ==========================================================================
   craftsman.css — Genva Interior

   Ported from the mock.

   Three things in the reference were empty elements: the hairline beside the
   years badge, the quote mark over the panel, and the two point icons. All
   four are pseudo elements here, so the pattern is six editable blocks with
   nothing in it a shop owner can delete by accident.

   core/quote brings its own margin and left border. Both are cleared before
   the panel is drawn, or the reference's tinted box would sit inside a stray
   quote rule.
   ========================================================================== */

.craftsman {
	--icon-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M9.5 5C6.5 6.6 5 9.2 5 12.8V19h6.2v-6.2H8.3c0-2.4.9-4 2.7-4.9zm9 0C15.5 6.6 14 9.2 14 12.8V19h6.2v-6.2h-2.9c0-2.4.9-4 2.7-4.9z'/%3E%3C/svg%3E");
	--icon-care: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5z'/%3E%3C/svg%3E");
	--icon-self: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cpath d='m16 11 2 2 4-4'/%3E%3C/svg%3E");

	background: var(--surface-container-lowest);
	border-radius: var(--rounded-xl);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.craftsman__grid {
	display: grid;
	grid-template-columns: 1fr;
}

/* The two columns start at 782px rather than the reference's 1024px. Between
   those two widths the reference left one column, and a 4:5 portrait as wide
   as a tablet came out over a thousand pixels tall. Narrowing the photo is
   the right fix here rather than changing its shape: this is a person, and a
   landscape crop of a standing figure cuts the head off. */
@media (width >= 782px) {

	.craftsman__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.craftsman__figure {
		grid-column: span 5 / span 5;
		aspect-ratio: auto;
	}

	.craftsman__body {
		grid-column: span 7 / span 7;
	}
}

.craftsman__grid > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   Photo
   -------------------------------------------------------------------------- */
/* The caption is laid over the photograph by putting both in the same grid
   cell rather than by taking the caption out of flow. Absolute positioning
   needs a positioned ancestor, and the site editor wraps every block in
   elements of its own: the caption lost its anchor there and fell below the
   picture. A grid cell is decided by the parent, so no amount of wrapping in
   between can move it. Every overlay in this theme that sits on a block —
   rather than on a pseudo element — is built this way. */
.craftsman__figure {
	position: relative;
	aspect-ratio: 4 / 5;
	display: grid;
	grid-template-areas: "stack";
}

.craftsman__figure > * {
	grid-area: stack;
}

.craftsman__figure .wp-block-image {
	margin: 0;
	width: 100%;
	height: 100%;
}

.craftsman__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.craftsman__figcaption {
	align-self: end;
	justify-self: start;
	z-index: 2;
	margin: 0;
	transform: translate(1rem, -1rem);
	background: rgba(25, 28, 30, 0.8);
	backdrop-filter: blur(12px);
	color: var(--on-primary);
	padding: 0.375rem 0.75rem;
	border-radius: var(--rounded);
}

/* --------------------------------------------------------------------------
   Text
   -------------------------------------------------------------------------- */
.craftsman__body {
	padding: var(--space-xl);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Wider padding once there is room for it. Declared after the base rule,
   not before: both are one class deep, so at equal specificity the later
   rule is the one that wins. */
@media (width >= 1024px) {

	.craftsman__body {
		padding: var(--space-2xl);
	}
}

@media (width < 782px) {

	.craftsman__body {
		padding: var(--space-md);
	}
}

.craftsman__body > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.craftsman__tagrow {
	margin-bottom: var(--space-xs);
}

:root :where(.is-layout-flex).craftsman__tagrow {
	gap: 0.5rem;
}

.craftsman__tagrow .eyebrow {
	margin-bottom: 0;
}

/* The hairline the reference drew with an empty span. */
.craftsman__years::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 2rem;
	height: 1px;
	margin-right: 0.5rem;
	background: var(--outline-variant);
}

.craftsman__years {
	background: var(--secondary-fixed);
	color: var(--on-secondary-fixed);
	padding: 0.125rem 0.5rem;
	border-radius: var(--rounded);
	font-weight: 700;
	margin: 0;
}

.craftsman__role {
	color: var(--on-surface-variant);
	margin-bottom: 0.25rem;
}

.craftsman__name {
	color: var(--on-surface);
	margin-bottom: var(--space-lg);
}

/* --------------------------------------------------------------------------
   Quote

   core/quote ships a left border and its own margins. Both are cleared so the
   tinted panel of the reference is what shows.
   -------------------------------------------------------------------------- */
.craftsman__quote {
	position: relative;
	background: var(--surface-container-low);
	padding: var(--space-lg);
	border: none;
	border-radius: var(--rounded);
	margin: 0 0 var(--space-md);
}

@media (width < 782px) {

	.craftsman__quote {
		padding: var(--space-md);
	}
}

/* The mark is two pseudo elements: a white disc, then the glyph on top of it.
   A mask cannot do both at once, because it clips the element's background
   to the glyph's shape and leaves nothing to act as the disc.

   The order matters and is the reason no z-index is needed: ::before paints
   before the content, ::after paints after it, so the disc is laid down first
   and the glyph lands on top of it. Sending the disc behind with a negative
   z-index would drop it under the panel's own background instead, where only
   the sliver poking past the corner would ever show. */
.craftsman__quote::before {
	content: "";
	position: absolute;
	top: -0.75rem;
	left: -0.5rem;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--rounded-full);
	background: var(--surface-container-lowest);
	box-shadow: var(--shadow-xs);
}

.craftsman__quote::after {
	content: "";
	position: absolute;
	top: -0.75rem;
	left: -0.5rem;
	width: 2.25rem;
	height: 2.25rem;
	background-color: var(--outline-variant);
	mask-image: var(--icon-quote);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: 1.75rem;
}

.craftsman__quote p {
	color: var(--on-surface);
	padding-left: 0.5rem;
	margin: 0;
}

@media (width < 782px) {

	.craftsman__quote p {
		font-size: var(--body-md-size);
		line-height: var(--body-md-line);
	}
}

/* --------------------------------------------------------------------------
   Points
   -------------------------------------------------------------------------- */
.craftsman__points {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-sm);
	padding-top: var(--space-sm);
}

@media (width >= 640px) {

	.craftsman__points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.craftsman__points > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.craftsman__point {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--on-surface-variant);
	margin: 0;
}

.craftsman__point::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--secondary);
	mask-image: var(--craftsman-icon);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.craftsman__point--care { --craftsman-icon: var(--icon-care); }
.craftsman__point--self { --craftsman-icon: var(--icon-self); }

/* The editor's block gap fell on the second of the two points, dropping the
   right-hand one below the left, and on the caption over the photograph. */
.craftsman__figcaption.craftsman__figcaption,
.craftsman__point.craftsman__point {
	margin-block: 0;
}