/**
 * Pinterest First Editorial - Core block styles.
 *
 * Front-end presentation for the core blocks the theme must support
 * (Docs/DECISIONS.md #28; Docs/PROJECT_SPEC.md #17;
 * Docs/PERFORMANCE_AND_SEO.md #17). It is a thin layer on top of WordPress'
 * own block-library baseline: core keeps owning block mechanics (columns,
 * gallery and cover layout, responsive embeds, alignment), and this file only
 * applies the theme tokens to colour, rhythm, radius, focus and overflow so
 * editor content matches the rest of the theme.
 *
 * Loaded on singular views only (posts and pages), which are the only views
 * that render editor content, and registered as an editor style so the block
 * editor shows the same presentation. The tokens it depends on live in
 * tokens.css, which is registered for the editor alongside this file
 * (inc/setup.php; inc/enqueue.php).
 *
 * Selectors stay on the documented `wp-block-*` / `wp-element-*` class names
 * (not on a theme wrapper) so the same rules work on the front end and in the
 * editor. All values come from tokens.css (Docs/ARCHITECTURE.md, CSS Rules).
 *
 * @package Pinterest_First_Editorial
 */

/* -------------------------------------------------------------------------
 * Captions - shared by image, gallery, table, embed, audio and video blocks.
 * ---------------------------------------------------------------------- */

.wp-element-caption {
	margin-block-start: var(--pfe-space-2);
	font-size: var(--pfe-font-size-sm);
	line-height: var(--pfe-leading-normal);
	color: var(--pfe-color-text-secondary);
}

/* -------------------------------------------------------------------------
 * Image
 * ---------------------------------------------------------------------- */

.wp-block-image {
	margin-block: 0 var(--pfe-space-5);
}

.wp-block-image img {
	max-width: 100%;
	height: auto;
}

.wp-block-image.is-style-rounded img {
	border-radius: var(--pfe-radius-lg);
}

/* -------------------------------------------------------------------------
 * Gallery - core keeps the column mechanics; the theme only removes the
 * default gap overflow risk and keeps captions inside their cell.
 * ---------------------------------------------------------------------- */

.wp-block-gallery {
	margin-block: 0 var(--pfe-space-5);
}

.wp-block-gallery .wp-block-image,
.wp-block-gallery .blocks-gallery-item {
	min-width: 0;
}

.wp-block-gallery img {
	max-width: 100%;
}

/* -------------------------------------------------------------------------
 * Columns and Group - core owns the flex/gap layout; the theme guarantees the
 * cells can shrink and keeps the block rhythm.
 * ---------------------------------------------------------------------- */

.wp-block-columns,
.wp-block-group {
	margin-block: 0 var(--pfe-space-5);
}

.wp-block-column {
	min-width: 0;
}

.wp-block-group > *:last-child {
	margin-block-end: 0;
}

/* -------------------------------------------------------------------------
 * Cover - core owns the media overlay; the theme caps the media to the
 * column and keeps the inner text inside the token spacing scale.
 * ---------------------------------------------------------------------- */

.wp-block-cover {
	max-width: 100%;
}

.wp-block-cover img,
.wp-block-cover video {
	max-width: 100%;
}

.wp-block-cover .wp-block-cover__inner-container {
	max-width: var(--pfe-reading-measure);
	margin-inline: auto;
	padding: var(--pfe-space-7) var(--pfe-space-6);
}

/* -------------------------------------------------------------------------
 * Quote and Pullquote - editorial emphasis without a heavy frame.
 * ---------------------------------------------------------------------- */

.wp-block-quote {
	margin-block: 0 var(--pfe-space-5);
	padding-inline-start: var(--pfe-space-5);
	border-inline-start: 2px solid var(--pfe-color-accent);
}

.wp-block-quote cite {
	display: block;
	margin-block-start: var(--pfe-space-2);
	font-size: var(--pfe-font-size-sm);
	font-style: normal;
	color: var(--pfe-color-text-secondary);
}

.wp-block-quote.is-style-large,
.wp-block-quote.is-large {
	padding-inline-start: var(--pfe-space-6);
}

.wp-block-quote.is-style-large p,
.wp-block-quote.is-large p {
	font-size: var(--pfe-font-size-xl);
	line-height: var(--pfe-leading-snug);
}

.wp-block-pullquote {
	margin-block: var(--pfe-space-7);
	padding-block: var(--pfe-space-6);
	border: 0;
	border-block: 1px solid var(--pfe-color-border);
	text-align: start;
}

.wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.wp-block-pullquote p {
	font-size: var(--pfe-font-size-xl);
	line-height: var(--pfe-leading-snug);
}

.wp-block-pullquote cite {
	display: block;
	margin-block-start: var(--pfe-space-3);
	font-size: var(--pfe-font-size-sm);
	font-style: normal;
	color: var(--pfe-color-text-secondary);
}

/* -------------------------------------------------------------------------
 * Button - token colour, radius and the documented 44x44 minimum target.
 * The rule only applies to a button with no explicit editor colour, because a
 * preset/custom colour is emitted as a `has-*` class or an inline declaration
 * and wins by specificity.
 * ---------------------------------------------------------------------- */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--pfe-tap-target);
	max-width: 100%;
	padding: var(--pfe-space-3) var(--pfe-space-6);
	border: 1px solid var(--pfe-color-accent-strong);
	border-radius: var(--pfe-radius-sm);
	background-color: var(--pfe-color-accent-strong);
	color: var(--pfe-color-on-accent);
	font-size: var(--pfe-font-size-md);
	font-weight: var(--pfe-font-weight-semibold);
	line-height: var(--pfe-leading-normal);
	text-align: center;
	text-decoration: none;
	transition: background-color var(--pfe-transition-fast), border-color var(--pfe-transition-fast);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
	border-color: var(--pfe-color-accent-hover);
	background-color: var(--pfe-color-accent-hover);
	color: var(--pfe-color-on-accent);
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.is-style-outline {
	border-color: var(--pfe-color-accent-strong);
	background-color: transparent;
	color: var(--pfe-color-accent-strong);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: var(--pfe-color-accent-strong);
	color: var(--pfe-color-on-accent);
}

/* -------------------------------------------------------------------------
 * Separator
 * ---------------------------------------------------------------------- */

.wp-block-separator {
	margin-block: var(--pfe-space-7);
	border: 0;
	border-block-start: 1px solid var(--pfe-color-border);
}

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

/* -------------------------------------------------------------------------
 * Table - token borders and padding, scrolls inside its own box when wide
 * (Docs/IMPLEMENTATION_PLAN.md, Phase 12; Docs/DECISIONS.md #28).
 * ---------------------------------------------------------------------- */

.wp-block-table {
	max-width: 100%;
	overflow-x: auto;
	margin-block: 0 var(--pfe-space-5);
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
	padding: var(--pfe-space-2) var(--pfe-space-3);
	border: 1px solid var(--pfe-color-border);
	text-align: start;
	vertical-align: top;
}

.wp-block-table thead th {
	background-color: var(--pfe-color-surface-muted);
}

.wp-block-table figcaption {
	margin-block-start: var(--pfe-space-2);
}

/* -------------------------------------------------------------------------
 * Code / Preformatted
 * ---------------------------------------------------------------------- */

code,
kbd,
samp {
	/* Component-specific value with no token: inline code sits just below the
	 * surrounding text size, whatever that size is. */
	--pfe-code-inline-scale: 0.9em;

	font-family: var(--pfe-font-family-mono);
	font-size: var(--pfe-code-inline-scale);
}

.wp-block-code,
.wp-block-preformatted {
	max-width: 100%;
	overflow-x: auto;
	margin-block: 0 var(--pfe-space-5);
	padding: var(--pfe-space-4);
	border: 1px solid var(--pfe-color-border);
	border-radius: var(--pfe-radius-sm);
	background-color: var(--pfe-color-surface-muted);
	font-family: var(--pfe-font-family-mono);
	font-size: var(--pfe-font-size-sm);
	line-height: var(--pfe-leading-normal);
}

.wp-block-code code,
.wp-block-preformatted {
	white-space: pre;
}

/* -------------------------------------------------------------------------
 * Embed - no horizontal overflow from a provider frame.
 * ---------------------------------------------------------------------- */

.wp-block-embed {
	max-width: 100%;
	margin-block: 0 var(--pfe-space-5);
}

.wp-block-embed__wrapper {
	max-width: 100%;
}

.wp-block-embed iframe,
.wp-block-embed video,
.wp-block-embed object {
	max-width: 100%;
}

/* -------------------------------------------------------------------------
 * Audio / Video
 * ---------------------------------------------------------------------- */

.wp-block-audio,
.wp-block-video {
	margin-block: 0 var(--pfe-space-5);
}

.wp-block-audio audio,
.wp-block-video video {
	max-width: 100%;
}

/* -------------------------------------------------------------------------
 * Spacer - the block owns its own height; only the outer rhythm is capped so
 * an oversized spacer cannot widen the column.
 * ---------------------------------------------------------------------- */

.wp-block-spacer {
	max-width: 100%;
}