/*
 * CPC Core block styles: structure and accessibility.
 * Colors, type and spacing come from the active theme's theme.json presets,
 * with fallbacks so the blocks still work under any theme.
 */

.cpc-section,
.cpc-form-wrap,
.cpc-spotlight,
.cpc-image-slot {
	--cpc-ink: var(--wp--preset--color--ink, #1e2a31);
	--cpc-navy: var(--wp--preset--color--navy, #364b56);
	--cpc-accent: var(--wp--preset--color--copper, #9c7860);
	--cpc-accent-text: var(--wp--preset--color--copper-deep, #7a5a45);
	--cpc-surface: var(--wp--preset--color--panel, #fcfaf5);
	--cpc-line: var(--wp--preset--color--line, #cfd6da);
	--cpc-error: var(--wp--preset--color--error, #a4262c);
	--cpc-gap: var(--wp--preset--spacing--40, 1.5rem);
	--cpc-radius: var(--wp--custom--radius--card, 6px);
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.cpc-section__heading { margin-block: 0 var(--cpc-gap); }
.cpc-section__more { margin-block-start: var(--cpc-gap); }

/* Cards ---------------------------------------------------------------- */

.cpc-cards,
.cpc-gallery {
	display: grid;
	gap: var(--cpc-gap);
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 600px) {
	.cpc-cards:not(.cpc-cols-1),
	.cpc-gallery:not(.cpc-cols-1) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Same selectors as above, so the block's column count wins on wider screens. */
@media (min-width: 960px) {
	.cpc-cards:not(.cpc-cols-1),
	.cpc-gallery:not(.cpc-cols-1) { grid-template-columns: repeat(var(--cpc-columns, 3), minmax(0, 1fr)); }
}

/* Four-column grids show three across on small laptops, where four would
   squeeze card text into narrow columns. */
@media (min-width: 960px) and (max-width: 1199px) {
	.cpc-cards.cpc-cols-4,
	.cpc-gallery.cpc-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cpc-card { display: flex; }

.cpc-card__inner {
	background: var(--cpc-surface);
	border: 1px solid var(--cpc-line);
	border-radius: var(--cpc-radius);
	color: var(--cpc-ink);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	width: 100%;
}

.cpc-card__inner:hover { border-color: var(--cpc-accent); box-shadow: 0 6px 18px rgb(30 42 49 / 0.08); }

.cpc-card__inner:focus-within {
	outline: 3px solid var(--cpc-navy);
	outline-offset: 2px;
}

.cpc-card__media { aspect-ratio: 4 / 3; background: var(--cpc-line); overflow: hidden; }
.cpc-card__media img { display: block; height: 100%; object-fit: cover; width: 100%; }

/* Catalog cards show the whole product on white. The makers' product photos
   are square, so tall items such as bottles aren't cropped. */
.cpc-card--inspiration .cpc-card__media { aspect-ratio: 1; background: #fff; }
.cpc-card--inspiration .cpc-card__media img { object-fit: contain; }

.cpc-card__body { display: flex; flex: 1; flex-direction: column; gap: 0.5rem; padding: var(--wp--preset--spacing--30, 1rem) var(--wp--preset--spacing--40, 1.25rem) var(--wp--preset--spacing--40, 1.25rem); }
.cpc-card__title { font-size: var(--wp--preset--font-size--large, 1.25rem); margin: 0; }
.cpc-card__excerpt,
.cpc-card__meta { margin: 0; }
.cpc-card__meta { color: var(--cpc-accent-text); font-size: var(--wp--preset--font-size--small, 0.875rem); margin-top: auto; }

.cpc-card__link { color: inherit; text-decoration: none; }
.cpc-card__link:focus { outline: none; }
/* One link per card, whole card clickable. */
.cpc-card__link::after { content: ""; inset: 0; position: absolute; }
.cpc-card__inner:hover .cpc-card__link { text-decoration: underline; text-decoration-color: var(--cpc-accent); text-underline-offset: 0.2em; }

.cpc-capability-group + .cpc-capability-group { margin-top: var(--wp--preset--spacing--60, 3rem); }
.cpc-capability-group__title a { color: inherit; }

/* Directory ------------------------------------------------------------ */

.cpc-directory { display: grid; gap: var(--cpc-gap); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }

@media (min-width: 600px) {
	.cpc-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
	.cpc-directory { grid-template-columns: repeat(var(--cpc-columns, 4), minmax(0, 1fr)); }
}

.cpc-directory__item {
	background: var(--cpc-surface);
	border: 1px solid var(--cpc-line);
	border-top: 3px solid var(--cpc-accent);
	border-radius: var(--cpc-radius);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--30, 1rem) var(--wp--preset--spacing--40, 1.25rem);
	scroll-margin-top: 6rem;
}
.cpc-directory__title { font-size: var(--wp--preset--font-size--large, 1.25rem); margin: 0; }
.cpc-directory__title a { color: inherit; }
.cpc-directory__summary { margin: 0; }
.cpc-directory__actions { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: auto 0 0; font-weight: 600; }
.cpc-directory__item:target { outline: 3px solid var(--cpc-navy); outline-offset: 2px; }

.cpc-directory--compact .cpc-directory__item { border-width: 0 0 1px; border-radius: 0; background: none; padding: 0.75rem 0; }
.cpc-directory--compact .cpc-directory__link { font-size: var(--wp--preset--font-size--large, 1.25rem); font-weight: 700; }

/* Photo tiles: a photo and a name, the whole tile one link. Two across on
   phones keeps eight services from becoming a long scroll. */
.cpc-directory--tiles .cpc-directory__item { padding: 0; }
.cpc-directory__tile {
	border-radius: inherit;
	color: inherit;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--30, 1rem);
	text-decoration: none;
}
.cpc-directory__tile .cpc-directory__media { margin: 0; }
.cpc-directory__tile .cpc-directory__title { font-weight: 700; line-height: 1.25; padding-inline: 0.25rem; }
.cpc-directory__tile:hover .cpc-directory__title,
.cpc-directory__tile:focus-visible .cpc-directory__title {
	text-decoration: underline;
	text-decoration-color: var(--cpc-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}
.cpc-directory__tile:focus-visible { outline: 3px solid var(--cpc-navy); outline-offset: 2px; }
@media (max-width: 599px) {
	.cpc-directory--tiles { gap: var(--wp--preset--spacing--30, 1rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cpc-directory__tile .cpc-directory__title { font-size: var(--wp--preset--font-size--medium, 1rem); }
}

/* Review placeholders: "Photo needed" slots (never on production) ------- */

.cpc-asset-slot {
	aspect-ratio: var(--cpc-slot-ratio, 4 / 3);
	background-color: var(--cpc-surface);
	background-image: repeating-linear-gradient(135deg, rgb(156 120 96 / 0.09) 0 12px, transparent 12px 24px);
	border: 2px dashed var(--cpc-accent);
	border-radius: var(--cpc-radius);
	box-sizing: border-box;
	color: var(--cpc-ink);
	display: flex;
	margin: 0;
	width: 100%;
}
.cpc-asset-slot__inner { align-items: flex-start; display: flex; flex-direction: column; gap: 0.4rem; justify-content: center; padding: clamp(0.75rem, 3vw, 1.5rem); }
.cpc-asset-slot__tag { background: var(--cpc-navy); border-radius: 3px; color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.2rem 0.5rem; text-transform: uppercase; }
.cpc-asset-slot__title { font-size: var(--wp--preset--font-size--large, 1.25rem); font-weight: 700; line-height: 1.2; }
.cpc-asset-slot__guide { font-size: var(--wp--preset--font-size--small, 0.875rem); max-width: 42ch; }
.cpc-asset-slot__size { color: var(--cpc-accent-text); font-size: var(--wp--preset--font-size--small, 0.875rem); font-weight: 600; }
.cpc-asset-slot--compact .cpc-asset-slot__inner { gap: 0.25rem; padding: 0.75rem 1rem; }
.cpc-asset-slot--compact .cpc-asset-slot__title { font-size: var(--wp--preset--font-size--medium, 1rem); }
.cpc-asset-slot--compact .cpc-asset-slot__guide { display: none; }
.cpc-card__media .cpc-asset-slot { border-radius: 0; border-width: 0 0 2px; height: 100%; overflow: hidden; }

.has-navy-background-color .cpc-asset-slot {
	background-color: rgb(255 255 255 / 0.06);
	background-image: repeating-linear-gradient(135deg, rgb(244 240 231 / 0.08) 0 12px, transparent 12px 24px);
	border-color: var(--wp--preset--color--cream, #f4f0e7);
	color: #fff;
}
.has-navy-background-color .cpc-asset-slot__tag { background: var(--wp--preset--color--cream, #f4f0e7); color: var(--cpc-navy); }
.has-navy-background-color .cpc-asset-slot__size { color: var(--wp--preset--color--cream, #f4f0e7); }

.cpc-card__draft {
	background: var(--cpc-accent-text);
	border-radius: 3px;
	color: #fff;
	display: inline-block;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	margin-left: 0.25rem;
	padding: 0.1rem 0.45rem;
	vertical-align: middle;
}

.cpc-directory__media { margin: 0 0 0.25rem; }
.cpc-directory__media img { aspect-ratio: 4 / 3; border-radius: 4px; display: block; height: auto; object-fit: cover; width: 100%; }

.cpc-image-slot__figure { margin: 0; }
.cpc-image-slot__figure img { aspect-ratio: var(--cpc-slot-ratio, 3 / 2); border-radius: var(--cpc-radius); display: block; height: auto; object-fit: cover; width: 100%; }

/* Spotlight ------------------------------------------------------------ */

.cpc-spotlight__figure { margin: 0; }
.cpc-spotlight__figure img { border-radius: var(--cpc-radius); display: block; height: auto; width: 100%; }
.cpc-spotlight__figure figcaption { font-size: var(--wp--preset--font-size--small, 0.875rem); margin-top: 0.5rem; }

/* Guides --------------------------------------------------------------- */

.cpc-byline { font-size: var(--wp--preset--font-size--small, 0.875rem); margin: 0; }
.cpc-byline__author { font-weight: 600; }

/* Gallery -------------------------------------------------------------- */

.cpc-gallery figure { margin: 0; }
.cpc-gallery a { display: block; border-radius: var(--cpc-radius); overflow: hidden; }
.cpc-gallery img { aspect-ratio: 1; display: block; height: auto; object-fit: cover; width: 100%; }
.cpc-gallery figcaption { font-size: var(--wp--preset--font-size--small, 0.875rem); margin-top: 0.5rem; }

/* Gallery lightbox (assets/js/lightbox.js). A native modal dialog in the top
   layer, so it sits above the sticky header. */
.cpc-lightbox {
	background: transparent;
	border: 0;
	box-sizing: border-box;
	color: #fff;
	height: 100%;
	inset: 0;
	margin: 0;
	max-height: none;
	max-width: none;
	padding: 3.75rem 4.5rem 2.5rem;
	width: 100%;
}
.cpc-lightbox::backdrop { background: rgb(18 26 31 / 0.96); }
.cpc-lightbox__figure { align-items: center; display: flex; flex-direction: column; gap: 0.75rem; height: 100%; justify-content: center; margin: 0; }
.cpc-lightbox__img { border-radius: 4px; height: auto; max-height: calc(100% - 2.5rem); max-width: 100%; object-fit: contain; width: auto; }
.cpc-lightbox__caption { color: var(--wp--preset--color--cream, #f4f0e7); font-size: var(--wp--preset--font-size--small, 0.875rem); max-width: 40rem; text-align: center; }
.cpc-lightbox__count { font-size: var(--wp--preset--font-size--small, 0.875rem); left: 1rem; margin: 0; position: absolute; top: 1.25rem; }
.cpc-lightbox button {
	align-items: center;
	background: rgb(255 255 255 / 0.12);
	border: 1px solid rgb(255 255 255 / 0.35);
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	position: absolute;
}
.cpc-lightbox button:hover { background: rgb(255 255 255 / 0.22); }
.cpc-lightbox button:focus-visible { outline: 3px solid var(--wp--preset--color--cream, #f4f0e7); outline-offset: 2px; }
.cpc-lightbox button[hidden] { display: none; }
.cpc-lightbox__close { font-weight: 600; padding: 0 1.1rem; right: 1rem; top: 0.75rem; }
.cpc-lightbox__prev,
.cpc-lightbox__next { font-size: 1.4rem; height: 3rem; top: 50%; transform: translateY(-50%); width: 3rem; }
.cpc-lightbox__prev { left: 0.75rem; }
.cpc-lightbox__next { right: 0.75rem; }
html.cpc-lightbox-open { overflow: hidden; }
@media (max-width: 599px) {
	/* Phones: the photo uses the full width; previous and next sit at the bottom. */
	.cpc-lightbox { padding: 3.75rem 0.75rem 5rem; }
	.cpc-lightbox__prev,
	.cpc-lightbox__next { bottom: 1rem; top: auto; transform: none; }
	.cpc-lightbox__prev { left: calc(50% - 3.5rem); }
	.cpc-lightbox__next { left: calc(50% + 0.5rem); right: auto; }
}
@media (prefers-reduced-motion: no-preference) {
	.cpc-lightbox[open] { animation: cpc-lightbox-in 0.15s ease-out; }
	@keyframes cpc-lightbox-in { from { opacity: 0; } }
}

/* Field sections ------------------------------------------------------- */

.cpc-faq__item { border-bottom: 1px solid var(--cpc-line); }
.cpc-faq__item summary {
	cursor: pointer;
	font-weight: 600;
	list-style-position: outside;
	padding: 1rem 0;
}
.cpc-faq__item summary:focus-visible { outline: 3px solid var(--cpc-navy); outline-offset: 2px; }
.cpc-faq__answer { padding-bottom: 1rem; }
.cpc-faq__answer > :first-child { margin-top: 0; }

.cpc-list { display: grid; gap: var(--cpc-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); list-style: none; margin: 0; padding: 0; }
.cpc-list__item { border-top: 3px solid var(--cpc-accent); padding-top: 0.75rem; }
.cpc-list__title { font-size: var(--wp--preset--font-size--medium, 1.125rem); margin: 0 0 0.25rem; }

.cpc-facts,
.cpc-facts-list,
.cpc-confirmation__summary { margin: 0; }
.cpc-facts__row,
.cpc-confirmation__summary > div { border-bottom: 1px solid var(--cpc-line); display: grid; gap: 0.25rem 1rem; grid-template-columns: minmax(8rem, 1fr) 2fr; padding: 0.6rem 0; }
.cpc-facts dt,
.cpc-confirmation__summary dt { font-weight: 600; }
.cpc-facts dd,
.cpc-confirmation__summary dd { margin: 0; }

.cpc-facts-list__row { margin-bottom: 0.75rem; }
.cpc-facts-list dt { font-size: var(--wp--preset--font-size--small, 0.875rem); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.cpc-facts-list dd { margin: 0; }
.cpc-facts-list address { font-style: normal; }
.cpc-facts-list__note { display: block; font-size: var(--wp--preset--font-size--small, 0.875rem); }

.cpc-story__part + .cpc-story__part { margin-top: var(--cpc-gap); }

.cpc-testimonial { border-left: 4px solid var(--cpc-accent); margin: 0; padding-left: var(--cpc-gap); }
.cpc-testimonial blockquote { font-size: var(--wp--preset--font-size--large, 1.25rem); margin: 0; }

.cpc-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.cpc-tags li { border: 1px solid var(--cpc-line); border-radius: 999px; font-size: var(--wp--preset--font-size--small, 0.875rem); padding: 0.2rem 0.75rem; }

.cpc-supplier-links { list-style: none; margin: 0; padding: 0; }
.cpc-supplier-links li { margin-bottom: 0.75rem; }
.cpc-supplier-links__note,
.cpc-supplier-ref__note { font-size: var(--wp--preset--font-size--small, 0.875rem); }

.cpc-notice { border-left: 4px solid var(--cpc-accent); background: var(--cpc-surface); padding: 1rem 1.25rem; }

/* Filters -------------------------------------------------------------- */

.cpc-filters { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: var(--cpc-gap); }
.cpc-filters__field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 12rem; }
.cpc-filters__field label { font-weight: 600; }
.cpc-results-count { font-size: var(--wp--preset--font-size--small, 0.875rem); }

/* Forms ---------------------------------------------------------------- */

/* The hidden attribute must win over the display rules below. */
.cpc-form-wrap [hidden] { display: none !important; }

.cpc-form { display: grid; gap: var(--wp--preset--spacing--40, 1.5rem); max-width: 44rem; }
.cpc-form__required-note,
.cpc-form__fineprint { font-size: var(--wp--preset--font-size--small, 0.875rem); margin: 0; }
.cpc-form__description { margin: 0; }
.cpc-form--newsletter { max-width: 32rem; }
.cpc-form__step { border: 0; display: grid; gap: var(--wp--preset--spacing--40, 1.5rem); margin: 0; min-width: 0; padding: 0; }
.cpc-form__legend { font-family: var(--wp--preset--font-family--display, inherit); font-size: var(--wp--preset--font-size--x-large, 1.5rem); font-weight: 700; margin-bottom: 0.5rem; padding: 0; }
.cpc-form__step-number { color: var(--cpc-accent-text); }
.cpc-form__progress { color: var(--cpc-accent-text); font-weight: 600; margin: 0; }
.cpc-form__context { border-left: 4px solid var(--cpc-accent); margin: 0; padding-left: 1rem; }

.cpc-field { display: flex; flex-direction: column; gap: 0.35rem; }
.cpc-field__label { font-weight: 600; }
.cpc-field__required { font-weight: 400; }
.cpc-field__hint { font-size: var(--wp--preset--font-size--small, 0.875rem); margin: 0; }
.cpc-field__error { color: var(--cpc-error); font-weight: 600; margin: 0; }
.cpc-field__group { border: 0; display: flex; flex-direction: column; gap: 0.5rem; margin: 0; min-width: 0; padding: 0; }
.cpc-field__group legend { margin-bottom: 0.35rem; padding: 0; }

.cpc-form input[type="text"],
.cpc-form input[type="email"],
.cpc-form input[type="tel"],
.cpc-form input[type="date"],
.cpc-form select,
.cpc-form textarea,
.cpc-filters select {
	background: var(--cpc-surface);
	border: 1px solid var(--cpc-ink);
	border-radius: 4px;
	color: var(--cpc-ink);
	font: inherit;
	box-sizing: border-box;
	max-width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	width: 100%;
}

.cpc-form input[type="file"] { font: inherit; max-width: 100%; }

/* Send us your logo: a big button stands in for the file input on phones. */
.cpc-form .cpc-file__input { height: 1px; opacity: 0; overflow: hidden; position: absolute; width: 1px; }
.cpc-file__button { box-sizing: border-box; cursor: pointer; display: inline-block; margin-top: 0.25rem; max-width: 100%; text-align: center; }
.cpc-file__input:focus-visible + .cpc-file__button { outline: 3px solid var(--cpc-navy); outline-offset: 2px; }
.cpc-file__names { font-size: var(--wp--preset--font-size--small, 0.875rem); margin: 0.5rem 0 0; overflow-wrap: anywhere; }
.cpc-file__names:empty { display: none; }
.cpc-form--artwork textarea { min-height: 5rem; }
@media (max-width: 600px) { .cpc-file__button { display: block; width: 100%; } }
.cpc-form textarea { min-height: 9rem; resize: vertical; }

.cpc-form :is(input, select, textarea):focus-visible,
.cpc-filters select:focus-visible {
	outline: 3px solid var(--cpc-navy);
	outline-offset: 2px;
}

.cpc-field.has-error :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea) {
	border: 2px solid var(--cpc-error);
}

.cpc-choice { align-items: center; display: flex; gap: 0.6rem; min-height: 2.75rem; }
.cpc-choice input { accent-color: var(--cpc-navy); flex: none; height: 1.25rem; margin: 0; width: 1.25rem; }

.cpc-form__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cpc-button--secondary { background: transparent !important; border: 2px solid currentColor !important; color: var(--cpc-navy) !important; }

.cpc-error-summary {
	border: 3px solid var(--cpc-error);
	border-radius: 4px;
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
	max-width: 44rem;
	padding: 1rem 1.25rem;
}
.cpc-error-summary:focus { outline: 3px solid var(--cpc-navy); outline-offset: 2px; }
.cpc-error-summary h3 { font-size: var(--wp--preset--font-size--large, 1.25rem); margin: 0 0 0.5rem; }
.cpc-error-summary ul { margin: 0; padding-left: 1.25rem; }
.cpc-error-summary a { color: var(--cpc-error); font-weight: 600; }

.cpc-form__review { border: 1px solid var(--cpc-line); border-radius: var(--cpc-radius); padding: 1rem 1.25rem; }
.cpc-form__review:focus { outline: 3px solid var(--cpc-navy); outline-offset: 2px; }
.cpc-form__review dl > div { border-bottom: 1px solid var(--cpc-line); display: grid; gap: 0.25rem 1rem; grid-template-columns: minmax(8rem, 1fr) 2fr; padding: 0.5rem 0; }
.cpc-form__review dd { margin: 0; white-space: pre-wrap; }

.cpc-confirmation { border-top: 6px solid var(--cpc-accent); background: var(--cpc-surface); border-radius: var(--cpc-radius); max-width: 44rem; padding: var(--wp--preset--spacing--40, 1.5rem); }
.cpc-confirmation__title:focus { outline: none; }
.cpc-confirmation__ref { font-weight: 600; }

/* Honeypot: off-screen for people and assistive tech. */
.cpc-hp { height: 1px; left: -10000px; overflow: hidden; position: absolute; width: 1px; }

/* Editor-only placeholder text. */
.cpc-placeholder { border: 1px dashed currentColor; font-size: 0.875rem; opacity: 0.75; padding: 1rem; }

@media (prefers-reduced-motion: reduce) {
	.cpc-card__inner { transition: none; }
}