/**
 * TGJ Quote Block Styles
 * Mobile-first: min-width queries on the theme's breakpoints only.
 *
 * The band owns the background and vertical spacing, the wrap the width and
 * gutter (tgj-theme/docs/tgj-block-layout.md); the block sets the type, on
 * the theme's tokens.
 *
 * Uses shared variables from journal-blocks-variables.css
 */

@import url('journal-blocks-variables.css');

.jc-block.tgj-quote {
	text-align: center;
}

.jc-block.tgj-quote .tgj-quote__container {
	margin-top: 0;
	margin-bottom: 0;
}

.jc-block.tgj-quote .tgj-quote__quote,
.jc-block.tgj-quote .tgj-quote__quote p {
	margin: 0;
	padding: 0;
	border: none;
	font-family: var(--font-heading);
	font-feature-settings: 'liga' off, 'clig' off;
	font-size: var(--tgj-large-title);
	font-style: normal;
	line-height: var(--tgj-lh-large-title);
	color: inherit;
	text-wrap: pretty;
}

.jc-block.tgj-quote .tgj-quote__caption {
	margin-top: var(--space-24);
}

.jc-block.tgj-quote .tgj-quote__attribution {
	font-family: var(--font-heading);
	font-feature-settings: 'liga' off, 'clig' off;
	font-size: var(--tgj-subhead);
	font-style: normal;
	line-height: var(--tgj-lh-subhead);
	color: inherit;
	text-wrap: pretty;
}

.jc-block.tgj-quote .tgj-quote__attribution::before {
	content: '\2014';
}

/* Editor: no band element, so stand in for its spacing */
.wp-block[data-type="journal-blocks/tgj-quote"] .tgj-quote {
	padding: var(--space-64) var(--gutter, 20px);
}

/* Editor: checkerboard swatch for the Transparent color option */
.components-color-palette__item[aria-label="Transparent"] {
	background-image:
		linear-gradient(45deg, #ccc 25%, transparent 25%),
		linear-gradient(-45deg, #ccc 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #ccc 75%),
		linear-gradient(-45deg, transparent 75%, #ccc 75%);
	background-size: 8px 8px;
	background-position: 0 0, 0 4px, 4px -4px, -4px 0;
	background-color: #fff !important;
}