/*
 * Eyeroc Creative Director: page styles.
 * Tokens (colors, type, spacing, radii) come from tokens.json; this file holds
 * the layout rules theme.json cannot express. Loaded only on pages using the
 * "Creative Director (full page)" template.
 */

/* Page shell (replaces what a block theme's templates provided). */
body.cd-page { margin: 0; }
:where(.cd-site) > * { margin-block: 0; }
.cd-site .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 1440px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Block style variations (registered by the plugin). */
.is-style-eyebrow {
	background-color: var(--wp--preset--color--cd-card-2);
	color: var(--wp--preset--color--cd-text-main);
	border-radius: var(--wp--preset--border-radius--cd-sm);
	padding: 5px 10px;
	font-size: var(--wp--preset--font-size--cd-eyebrow);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.wp-block-button.is-style-square > .wp-block-button__link {
	background-color: var(--wp--custom--color--square);
	color: var(--wp--custom--color--white);
	border-radius: var(--wp--preset--border-radius--cd-sm);
	padding: 14px 32px;
	font-weight: 600;
}

img { max-width: 100%; display: block; }

/* ---------- Buttons: pill with white arrow disc ---------- */
.wp-block-button:not(.is-style-square) > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
}
.wp-block-button:not(.is-style-square) > .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wp--custom--color--white);
	/* Arrow is cut out of the disc so it always shows the button's own background. */
	--arrow: 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.5'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
	-webkit-mask: var(--arrow) center / 14px no-repeat, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: var(--arrow) center / 14px no-repeat, linear-gradient(#000 0 0);
	mask-composite: exclude;
}
.wp-block-button.is-style-square > .wp-block-button__link:hover,
.wp-block-button.is-style-square > .wp-block-button__link:focus {
	background: var(--wp--custom--color--square-hover);
	color: var(--wp--custom--color--white);
}

/* Eyebrow chip sizes to its text. */
.is-style-eyebrow { width: fit-content; }

/* ---------- Image placeholders ----------
   Media slots are Cover blocks. While empty they show the starter's dashed box;
   once an image is added the dashes and the [label] disappear on their own. */
.cd-ph { overflow: hidden; }
.cd-ph::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border: 2px dashed var(--cd-ph-dash, var(--wp--preset--color--cd-line));
	border-radius: inherit;
	pointer-events: none;
}
.cd-ph:has(.wp-block-cover__image-background, .wp-block-cover__video-background)::after { content: none; }
.cd-ph--plain::after { content: none; }
.cd-ph--coral  { --cd-ph-dash: var(--wp--preset--color--cd-coral-soft); --cd-ph-label: var(--wp--custom--color--ph-coral); }
.cd-ph--accent { --cd-ph-label: var(--wp--custom--color--ph-accent); }
.cd-ph--cream  { --cd-ph-label: var(--wp--custom--color--ph-cream); }
.cd-ph--gold   { --cd-ph-label: var(--wp--custom--color--ph-gold); }
.cd-ph--dark   { --cd-ph-dash: var(--wp--custom--color--dash-dark); --cd-ph-label: var(--wp--custom--color--ph-dark); }
.cd-ph--avatar { --cd-ph-dash: var(--wp--custom--color--dash-avatar); }
.cd-ph__label {
	color: var(--cd-ph-label, var(--wp--custom--color--placeholder-text));
	font-size: var(--wp--preset--font-size--cd-small);
	text-align: center;
}
.cd-ph:has(.wp-block-cover__image-background, .wp-block-cover__video-background) .cd-ph__label { display: none; }

/* ---------- Header / navigation ---------- */
.cd-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--cd-accent); }
.cd-nav .wp-block-navigation__container { gap: clamp(16px, 2.4vw, 32px); }

/* The starter hides nav links at 640px; core's toggle switches at 600px, so extend it. */
@media (min-width: 600px) and (max-width: 640px) {
	.cd-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.cd-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* ---------- 1. Hero ---------- */
.cd-hero.wp-block-cover { align-items: stretch; }
.cd-hero > .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
}
.cd-hero { --cd-ph-dash: var(--wp--custom--color--hero-dash); }
.cd-hero__body { max-width: 700px; }
.cd-hero .cd-hero__label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	color: var(--wp--preset--color--cd-hero-line);
	font-size: var(--wp--preset--font-size--cd-body-sm);
	pointer-events: none;
	z-index: 0;
}
.cd-hero > .wp-block-cover__inner-container > :not(.cd-hero__label) { position: relative; z-index: 1; }
.cd-hero .cd-hero__foot { margin-top: auto !important; }

.cd-logos .cd-ph {
	width: 110px;
	min-height: 44px !important;
	padding: 4px !important;
	border-radius: var(--wp--preset--border-radius--cd-xs);
	--cd-ph-dash: var(--wp--preset--color--cd-hero-line);
}
.cd-logos .cd-ph__label { color: var(--wp--preset--color--cd-hero-line); }

/* ---------- 2. Story ---------- */
.cd-story__aside { max-width: 400px; }
.cd-story-grid > .wp-block-column > * { height: 100%; }

/* ---------- Video boxes (Story card, Feature band) ----------
   Poster image = the Cover's background. The play button's link holds the
   YouTube/Vimeo URL; assets/js/video-lightbox.js opens it in a modal. */
.cd-video.wp-block-cover { align-items: stretch; }
.cd-video > .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--cd-12);
}
.cd-video .cd-video__play { margin: 0; }
.wp-block-button.cd-play > .wp-block-button__link {
	width: 72px;
	height: 72px;
	min-height: 0;
	padding: 0;
	border-radius: 50%;
	justify-content: center;
	font-size: 0;
	cursor: pointer;
	transition: transform .2s ease, background-color .2s ease;
}
.wp-block-button.cd-play > .wp-block-button__link::after {
	width: 24px;
	height: 24px;
	margin-left: 4px;
	border-radius: 0;
	background: var(--wp--custom--color--white);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3.5v17L20.5 12z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3.5v17L20.5 12z'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask-composite: source-over;
	mask-composite: add;
}
/* The whole box is the click target (front end only, so the editor can still select the Cover). */
body:not(.editor-styles-wrapper) .cd-video .cd-play > .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: -100vmax;
}
.cd-video:hover .cd-play > .wp-block-button__link { transform: scale(1.06); background: var(--wp--custom--color--accent-hover); }
.cd-video .cd-play > .wp-block-button__link:focus-visible { outline: 2px solid var(--wp--custom--color--white); outline-offset: 4px; }

.cd-lightbox {
	width: min(1100px, 92vw);
	max-width: none;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}
.cd-lightbox::backdrop { background: rgb(10 10 10 / .88); }
.cd-lightbox__frame {
	aspect-ratio: 16 / 9;
	max-height: 85vh;
	background: var(--wp--preset--color--cd-ink-2);
	border-radius: var(--wp--preset--border-radius--cd-inner);
	overflow: hidden;
}
.cd-lightbox__frame iframe,
.cd-lightbox__frame video { display: block; width: 100%; height: 100%; border: 0; }
.cd-lightbox__close {
	position: absolute;
	top: -52px;
	right: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--cd-accent);
	cursor: pointer;
}
.cd-lightbox__close svg { width: 18px; height: 18px; stroke: var(--wp--custom--color--white); stroke-width: 2.5; fill: none; }
.cd-lightbox__close:hover { background: var(--wp--custom--color--accent-hover); }
html.cd-lightbox-open { overflow: hidden; }
/* Image lightbox (Designer showcase): sized to the photo, uncropped. */
.cd-lightbox--image { width: auto; }
.cd-lightbox--image .cd-lightbox__frame { aspect-ratio: auto; max-height: none; background: transparent; }
.cd-lightbox--image .cd-lightbox__frame img {
	display: block;
	width: auto;
	height: auto;
	max-width: 92vw;
	max-height: 85vh;
	border-radius: var(--wp--preset--border-radius--cd-inner);
}

/* Once a looping video is set, the lightbox play button isn't needed. */
.cd-ph:has(.wp-block-cover__video-background) .cd-video__play { display: none; }

/* ---------- 3. Feature band ---------- */
.cd-band__copy { max-width: 560px; flex: 0 1 560px; }
/* Landscape 16:9 video box: stays beside the copy and grows toward it. */
.cd-band__img.wp-block-cover {
	flex: 1 1 440px;
	max-width: 760px;
	aspect-ratio: 16 / 9;
	min-height: 0;
	margin-left: auto;
}

/* ---------- 4. Feature strip (overlaps the band on purpose) ---------- */
.cd-strip { position: relative; z-index: 2; }
.cd-features { overflow: hidden; }
.cd-features > .cd-feature { border-right: 1px solid var(--wp--custom--color--slate-line); }
.cd-features > .cd-feature:last-child { border-right: 0; }
.cd-feature__link a:hover { color: var(--wp--preset--color--cd-accent); }

/* ---------- 5. Selected work ---------- */
:is(.cd-work-card, .cd-inline).wp-block-cover { align-items: stretch; background-color: var(--wp--preset--color--cd-card); }
:is(.cd-work-card, .cd-inline) > .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
}
:is(.cd-work-card, .cd-inline) .wp-block-post-title { margin: 0; }
/* Card = video thumbnail. The play button's link comes from the project's
   Video URL field (block binding). Without a video, the play button hides
   and the whole card links to the project instead. */
:is(.cd-work-card, .cd-inline) > .wp-block-cover__inner-container { gap: var(--wp--preset--spacing--cd-4); }
:is(.cd-work-card, .cd-inline) .cd-video__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
:is(.cd-work-card, .cd-inline) .cd-play > .wp-block-button__link { pointer-events: auto; width: 60px; height: 60px; }
:is(.cd-work-card, .cd-inline) .cd-play > .wp-block-button__link::after { width: 20px; height: 20px; }
body:not(.editor-styles-wrapper) :is(.cd-work-card, .cd-inline):has(.cd-play a:not([href]), .cd-play a[href=""]) .cd-video__play { display: none; }
:is(.cd-work-card, .cd-inline) .wp-block-post-title { position: relative; z-index: 2; }
body:not(.editor-styles-wrapper) :is(.cd-work-card, .cd-inline):has(.cd-play a:not([href]), .cd-play a[href=""]) .wp-block-post-title a::before {
	content: "";
	position: absolute;
	inset: -100vmax;
}
:is(.cd-work-card, .cd-inline) .wp-block-post-terms { position: relative; z-index: 2; }
:is(.cd-work-card, .cd-inline) .wp-block-post-terms a:hover { color: var(--wp--preset--color--cd-accent); }
:is(.cd-work-card, .cd-inline):hover { --cd-ph-dash: var(--wp--preset--color--cd-accent); }
:is(.cd-work-card, .cd-inline):has(.wp-block-cover__image-background):hover::after { content: ""; border-style: solid; }
/* Keep titles legible once a featured image is set. */
:is(.cd-work-card, .cd-inline):has(.wp-block-cover__image-background) > .wp-block-cover__background {
	opacity: 1;
	background: linear-gradient(to top, rgb(0 0 0 / .6), transparent 55%);
}

/* Inline click-to-play (no lightbox): the player sits over the thumbnail and
   under the card's text; clicks always land on the card, never the player. */
:is(.cd-work-card, .cd-inline) { cursor: pointer; }
/* Bottom-left content position shrinks the inner container to its text; make
   it span the card so the play icon centers and the whole card is clickable. */
.wp-block-cover:is(.cd-work-card, .cd-inline).has-custom-content-position.has-custom-content-position > .wp-block-cover__inner-container { width: 100%; }
:is(.cd-work-card, .cd-inline).is-playing::after { content: none; }
:is(.cd-work-card, .cd-inline) .cd-inline-player {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	background: #000;
	pointer-events: none;
}
/* .cd-inline boxes show the whole frame (no crop); any gap is black. */
.cd-inline .cd-inline-player { object-fit: contain; }
:is(.cd-work-card, .cd-inline) > .wp-block-cover__inner-container > *,
:is(.cd-work-card, .cd-inline) > .wp-block-cover__background { transition: opacity .3s ease; }
:is(.cd-work-card, .cd-inline).is-playing > .wp-block-cover__background,
:is(.cd-work-card, .cd-inline).is-playing > .wp-block-cover__inner-container > :not(.cd-video__play) { opacity: 0; }
:is(.cd-work-card, .cd-inline).is-playing .cd-play > .wp-block-button__link { opacity: 0; transition: opacity .2s ease; }
:is(.cd-work-card, .cd-inline).is-playing:hover .cd-play > .wp-block-button__link { opacity: 1; }
:is(.cd-work-card, .cd-inline).is-playing .cd-play > .wp-block-button__link::after {
	margin-left: 0;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6zM14 4h4v16h-4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6zM14 4h4v16h-4z'/%3E%3C/svg%3E");
}

/* ---------- Photo masonry (Photography page) ----------
   A Gallery block laid out as CSS columns: photos keep their own shape and
   stack top-to-bottom per column. Overrides core's flex gallery sizing. */
.cd-masonry.wp-block-gallery.has-nested-images {
	display: block;
	columns: var(--cd-cols, 4);
	column-gap: var(--wp--preset--spacing--cd-16);
}
/* Follow the gallery's Columns setting (core adds columns-N). */
.cd-masonry.columns-1 { --cd-cols: 1; }
.cd-masonry.columns-2 { --cd-cols: 2; }
.cd-masonry.columns-3 { --cd-cols: 3; }
.cd-masonry.columns-4 { --cd-cols: 4; }
.cd-masonry.columns-5 { --cd-cols: 5; }
.cd-masonry.columns-6 { --cd-cols: 6; }
.cd-masonry.columns-7 { --cd-cols: 7; }
.cd-masonry.columns-8 { --cd-cols: 8; }
.cd-masonry.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	display: block;
	width: 100%;
	margin: 0 0 var(--wp--preset--spacing--cd-16);
	break-inside: avoid;
	border-radius: var(--wp--preset--border-radius--cd-inner);
	overflow: hidden;
}
.cd-masonry.wp-block-gallery.has-nested-images figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .4s ease;
}
.cd-masonry figure.wp-block-image:hover img { transform: scale(1.03); }
/* No text on the photos. */
.cd-masonry figure.wp-block-image figcaption,
.cd-masonry > figcaption { display: none; }

/* ---------- Designer showcase (Designer page) ----------
   Options on the left, framed image on the right. assets/js/showcase.js pairs
   them by order: clicking option N shows image N. In the editor every image
   box stays visible, stacked, so each one can be filled. */
.cd-option {
	position: relative;
	padding: 14px 18px 14px 58px;
	border: 1px solid transparent;
	border-radius: var(--wp--preset--border-radius--cd-inner);
	transition: background-color .2s ease, border-color .2s ease;
}
.cd-option > * { margin: 0; }
/* Small round button: ring + chevron, filled with the accent when selected. */
.cd-option::before,
.cd-option::after {
	content: "";
	position: absolute;
	left: 18px;
	top: 14px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
}
.cd-option::before {
	border: 1.5px solid var(--wp--preset--color--cd-line);
	box-sizing: border-box;
	transition: background-color .2s ease, border-color .2s ease;
}
.cd-option::after {
	background: var(--wp--preset--color--cd-text-mute);
	-webkit-mask: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 7l5 5-5 5'/%3E%3C/svg%3E") center / 14px no-repeat;
	mask: 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 7l5 5-5 5'/%3E%3C/svg%3E") center / 14px no-repeat;
	transition: background-color .2s ease;
}
body:not(.editor-styles-wrapper) .cd-option { cursor: pointer; }
body:not(.editor-styles-wrapper) .cd-option:hover { background: var(--wp--preset--color--cd-card); }
body:not(.editor-styles-wrapper) .cd-option:hover::before { border-color: var(--wp--preset--color--cd-accent); }
.cd-option:focus-visible { outline: 2px solid var(--wp--preset--color--cd-accent); outline-offset: 2px; }
.cd-option.is-active {
	background: var(--wp--preset--color--cd-card);
	border-color: var(--wp--preset--color--cd-line);
}
.cd-option.is-active::before { background: var(--wp--preset--color--cd-accent); border-color: var(--wp--preset--color--cd-accent); }
.cd-option.is-active::after { background: var(--wp--custom--color--white); }

/* Frame around the image, like a device screen. */
.cd-showcase__media {
	padding: var(--wp--preset--spacing--cd-14);
	background: var(--wp--preset--color--cd-card);
	border: 1px solid var(--wp--preset--color--cd-line);
	border-radius: var(--wp--preset--border-radius--cd-lg);
	box-shadow: 0 30px 80px rgb(0 0 0 / .45);
}
.cd-showcase__img.wp-block-cover { aspect-ratio: 3 / 2; min-height: 0; width: 100%; }
/* Show the image as uploaded, without the placeholder overlay on top. */
.cd-showcase__img:has(.wp-block-cover__image-background) > .wp-block-cover__background { opacity: 0; }

/* Click the image to open it large (assets/js/showcase.js), with an
   expand badge in the corner as the hint. */
.cd-showcase__img.has-lightbox { cursor: zoom-in; }
.cd-showcase__img.has-lightbox::before {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgb(10 10 10 / .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 16px no-repeat;
	transition: transform .2s ease, background-color .2s ease;
}
.cd-showcase__img.has-lightbox:hover::before { transform: scale(1.08); background-color: var(--wp--preset--color--cd-accent); }
.cd-showcase__img.has-lightbox:focus-visible { outline: 2px solid var(--wp--preset--color--cd-accent); outline-offset: 4px; }

/* Front end: images share one spot; only the selected one shows. Before the
   script runs, the first image shows. */
body:not(.editor-styles-wrapper) .cd-showcase__media { display: grid; }
body:not(.editor-styles-wrapper) .cd-showcase__media > .cd-showcase__img {
	grid-area: 1 / 1;
	margin: 0 !important;
	transition: opacity .45s ease, transform .45s ease, visibility 0s;
}
body:not(.editor-styles-wrapper) .cd-showcase:not(.is-ready) .cd-showcase__img:not(:first-child),
body:not(.editor-styles-wrapper) .cd-showcase.is-ready .cd-showcase__img:not(.is-active) {
	opacity: 0;
	visibility: hidden;
	transform: scale(.98);
	transition: opacity .45s ease, transform .45s ease, visibility 0s .45s;
}

/* ---------- 6. Services bento ---------- */
.cd-bento__top > .wp-block-column > * { height: 100%; }
.cd-bento__wide { overflow: hidden; }
.cd-bento__cut.wp-block-cover {
	min-height: 100% !important;
	clip-path: polygon(22% 0, 100% 0, 100% 100%, 22% 100%, 0 50%);
}
.cd-bento__cell .wp-block-heading { font-weight: 700; }

/* ---------- 7. Contact + testimonial ---------- */
.cd-form { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--cd-16); }
.cd-form label {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--cd-6);
	font-size: var(--wp--preset--font-size--cd-small);
	color: var(--wp--preset--color--cd-text-mute);
}
.cd-form input,
.cd-form textarea {
	border: 0;
	background: var(--wp--preset--color--cd-field);
	color: var(--wp--preset--color--cd-text-main);
	font: 400 var(--wp--preset--font-size--cd-body-sm)/1.5 var(--wp--preset--font-family--cd-body);
	padding: 14px 20px;
}
.cd-form input { height: 48px; padding-block: 0; border-radius: var(--wp--preset--border-radius--cd-pill); }
.cd-form textarea { min-height: 160px; border-radius: var(--wp--preset--border-radius--cd-lg); resize: vertical; }
.cd-form input:focus,
.cd-form textarea:focus { outline: 2px solid var(--wp--preset--color--cd-accent); outline-offset: 2px; }
.cd-form .wp-block-button { align-self: flex-start; }
.cd-form .wp-block-button__link { border: 0; cursor: pointer; }
.cd-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cd-form__status:empty { display: none; }
.cd-form__status { margin: 0; font-size: var(--wp--preset--font-size--cd-body-sm); color: var(--wp--preset--color--cd-text-mute); }

.cd-testi__grid > .wp-block-column > * { height: 100%; }
.cd-testi blockquote { margin: 0; padding: 0; border: 0; }
.cd-testi blockquote p { margin: 0; }
.cd-stars { display: flex; gap: 4px; }
.cd-stars svg { width: 16px; height: 16px; fill: var(--wp--preset--color--cd-gold); }
.cd-avatar.wp-block-cover { width: 44px; height: 44px; min-height: 44px; padding: 0; flex: none; border-radius: 50%; }

/* Button without the arrow disc (form submit, as in the starter). */
.wp-block-button.cd-btn--plain > .wp-block-button__link::after { content: none; }

/* ---------- Responsive (starter's breakpoints) ---------- */
/* Laptop step for the masonry. Not in the editor, whose canvas is narrowed by
   the sidebar, so the Columns setting shows as chosen while editing. */
@media (max-width: 1280px) {
	:where(body:not(.editor-styles-wrapper)) .cd-masonry.wp-block-gallery.has-nested-images { columns: min(var(--cd-cols, 4), 3); }
}
@media (max-width: 1024px) {
	.cd-strip { margin-top: -80px !important; }
	.cd-features { grid-template-columns: 1fr !important; }
	.cd-features > .cd-feature { border-right: 0; border-bottom: 1px solid var(--wp--custom--color--slate-line); }
	.cd-features > .cd-feature:last-child { border-bottom: 0; }
	.cd-bento__row { grid-template-columns: 1fr !important; }
	.cd-testi__head .wp-block-heading { text-align: left; }
	.cd-stack-lg.wp-block-columns { flex-wrap: wrap !important; }
	.cd-stack-lg.wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
	.cd-story-grid > .wp-block-column > * { min-height: 260px !important; }
	.cd-masonry.wp-block-gallery.has-nested-images { columns: min(var(--cd-cols, 4), 2); }
}
@media (max-width: 640px) {
	.cd-header > .wp-block-buttons { margin-left: auto; }
	.cd-header > .cd-nav { order: 3; }
	.cd-work-grid { grid-template-columns: 1fr !important; }
	.cd-bento__wide { grid-template-columns: 1fr !important; }
	.cd-bento__cut.wp-block-cover { clip-path: none; min-height: 140px !important; }
	.cd-hero.wp-block-cover { min-height: auto !important; padding-bottom: var(--wp--preset--spacing--cd-28) !important; }
	.cd-masonry.wp-block-gallery.has-nested-images { column-gap: var(--wp--preset--spacing--cd-8); }
	.cd-masonry.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { margin-bottom: var(--wp--preset--spacing--cd-8); }
	.cd-option { padding: 12px 12px 12px 50px; }
	.cd-option::before,
	.cd-option::after { left: 12px; top: 12px; }
	.cd-showcase__media { padding: var(--wp--preset--spacing--cd-8); }
}