/*
 * Pattern styles: the registered block styles that the patterns use.
 *
 * One place for every look that a pattern needs beyond what the block settings give. Each style is
 * registered in inc/block-styles.php (the name below is .is-style-{name}) and shows in the Styles panel,
 * so a pattern never carries a custom class and any block can use them. Loaded on the front end only on a
 * page that prints one of them (inc/assets.php) and always in the editor.
 *
 * Index:
 *   core/column         photo-fill
 *   core/group          grid-2, boxed-grid, boxed-cell, rule-top, numbered-row, soft-box (extras)
 *   core/paragraph      quote-large, quote-large-mark, quote-name, quote-role, number-index, number-large, icon-large,
 *                       link-underline, link-arrow
 *   core/read-more      link-arrow
 *   core/post-template  list-ruled, list-spaced, list-boxed
 */

/* ---- Column: Photo fill ----
	 A photo column that grows to the height of the column beside it; a caption under the photo keeps its
	 height and the photo takes the rest. */
.wp-block-column.is-style-photo-fill { display: flex; flex-direction: column; }
.is-style-photo-fill > .wp-block-image { flex: 1 1 auto; width: 100%; margin: 0; }
.is-style-photo-fill > .wp-block-image img { display: block; width: 100%; height: 100%; min-height: 20rem; object-fit: cover; }
@media (max-width: 48.8125rem) {
	.is-style-photo-fill > .wp-block-image img { height: auto; aspect-ratio: 4 / 3; }
}

/* ---- Group: Two-column grid ----
	 A grid layout of two columns that becomes one column on a phone. Set the number of columns in the
	 block's own layout settings; this style only adds the phone behavior and keeps columns inside it flush. */
@media (max-width: 40em) {
	.wp-block-group.is-style-grid-2 { grid-template-columns: minmax(0, 1fr); }
}
.is-style-grid-2 > .wp-block-columns { margin-bottom: 0; }
.is-style-grid-2 > .wp-block-columns .wp-block-image { margin: 0; }
.is-style-grid-2 > .wp-block-columns .wp-block-image img { display: block; width: 100%; }
/* A cell that ends in a Rule on top (a quote and then who said it) keeps that rule at the bottom, so
	 the rules of the cells in one row line up whatever the length of the text above. */
.is-style-grid-2 > .wp-block-group:has(> .is-style-rule-top) { display: flex; flex-direction: column; }
.is-style-grid-2 > .wp-block-group:has(> .is-style-rule-top) > * { width: 100%; }
.is-style-grid-2 > .wp-block-group > .is-style-rule-top { margin-top: auto; }
/* Cards in the grid share the height of their row, with the last line (who said it) at the bottom. */
.is-style-grid-2 > .wp-block-group.is-style-card { display: flex; flex-direction: column; }
.is-style-grid-2 > .wp-block-group.is-style-card > * { width: 100%; }
.is-style-grid-2 > .wp-block-group.is-style-card > :last-child { margin-top: auto; padding-top: var(--wp--preset--spacing--sm); }

/* ---- Group: Boxed grid + Boxed cell ----
	 A grid drawn with one hairline between cells: the grid has a line on top and on the left, each cell a
	 line on its right and below, so no line is ever drawn twice. */
.wp-block-group.is-style-boxed-grid {
	gap: 0;
	border-top: 0.0625rem solid var(--wp--preset--color--foreground);
	border-left: 0.0625rem solid var(--wp--preset--color--foreground);
}
.is-style-boxed-grid > .is-style-boxed-cell {
	margin: 0;
	border-right: 0.0625rem solid var(--wp--preset--color--foreground);
	border-bottom: 0.0625rem solid var(--wp--preset--color--foreground);
}
.is-style-boxed-cell > * + * { margin-top: var(--wp--preset--spacing--xs); }
.is-style-boxed-cell > .wp-block-image + .is-style-number-index { margin-top: var(--wp--preset--spacing--md); }
.is-style-boxed-cell .wp-block-image { margin: 0; }
.is-style-boxed-cell .wp-block-image img { display: block; width: 100%; }
.is-style-boxed-cell h3 { margin-top: var(--wp--preset--spacing--2-xs); }
@media (max-width: 40em) {
	.wp-block-group.is-style-boxed-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Group: Rule on top ----
	 A hairline ink rule above the content, with space under it. */
.wp-block-group.is-style-rule-top {
	border-top: 0.0625rem solid var(--wp--preset--color--foreground);
	padding-top: var(--wp--preset--spacing--md);
}
.is-style-rule-top > * + * { margin-top: 0; }

/* ---- Group: Soft box, extras ----
	 The base look is in the theme stylesheet. Inside a Soft box a photo on top runs flush, and the script
	 accent sits between it and the title. */
.is-style-soft-box > .wp-block-image { margin: 0; }
.is-style-soft-box > .wp-block-image img { display: block; width: 100%; }
.is-style-soft-box > .is-style-script {
	display: block;
	margin: var(--wp--preset--spacing--md) 0 var(--wp--preset--spacing--xs);
	font-size: 1.125rem;
	line-height: 1.4;
}
.is-style-soft-box > .is-style-script + h3 { margin-top: 0; }

/* ---- Paragraph: Large quote + Large quote with mark ----
	 A client quote in the headings font. The marked one opens with a large quotation mark in the primary
	 color. Weight and line height can be changed in the block's typography settings. */
p.is-style-quote-large,
p.is-style-quote-large-mark {
	margin: 0 0 var(--wp--preset--spacing--md);
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 600;
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
	line-height: 1.35;
	letter-spacing: -0.01em;
}
p.is-style-quote-large-mark { position: relative; padding-top: 3rem; }
p.is-style-quote-large-mark:before {
	content: "\201C";
	position: absolute;
	top: 0;
	left: -0.05em;
	font-size: 4.5rem;
	line-height: 1;
	font-weight: 800;
	color: var(--wp--preset--color--primary);
	opacity: 0.4;
}

/* ---- Paragraph: Quote name + Quote role ----
	 Under a quote: a small uppercase name, then a muted line saying who they are. */
p.is-style-quote-name {
	margin: 0;
	font-family: var(--wp--preset--font-family--headings);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
p.is-style-quote-role {
	margin: 0.25rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* ---- Paragraph: Large number + Group: Numbered row ----
	 A step or a claim: a large number in the headings font, then its text beside it. */
.wp-block-group.is-style-numbered-row {
	display: grid;
	grid-template-columns: clamp(3rem, 2rem + 3vw, 4.5rem) minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--md);
	align-items: start;
}
.is-style-numbered-row > * { margin: 0; }
p.is-style-number-large {
	margin: 0;
	text-align: left;
	font-family: var(--wp--preset--font-family--headings);
	font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
}

/* ---- Paragraph: Large icon ----
	 A dashicon bigger than its default, in the color of the text (set the text color for the icon's color). */
p.is-style-icon-large { margin: 0; line-height: 1; }
p.is-style-icon-large .dashicons {
	width: 1.75rem;
	height: 1.75rem;
	font-size: 1.75rem;
}

/* ---- Paragraph: Number index ---- */
p.is-style-number-index { letter-spacing: 0.16em; margin: 0; }

/* ---- Paragraph / Read more: Link with underline, Link with arrow ----
	 Underline: a bold link with a line under it that thickens on hover. Arrow: a bold plain link that
	 underlines on hover; on a Read more block it adds the arrow. */
p.is-style-link-underline { margin-top: var(--wp--preset--spacing--sm); }
p.is-style-link-underline a {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 0.0625rem solid currentColor;
	padding-bottom: 0.125rem;
	transition: var(--flair-motion-fast, 0.18s) var(--flair-motion-ease, ease);
}
p.is-style-link-underline a:is(:hover, :focus-visible) { border-bottom-width: 0.1875rem; }
p.is-style-link-arrow { margin-top: var(--wp--preset--spacing--xs); }
p.is-style-link-arrow a { color: inherit; font-weight: 600; text-decoration: none; }
p.is-style-link-arrow a:is(:hover, :focus-visible) { text-decoration: underline; }
.wp-block-read-more.is-style-link-arrow {
	margin-top: var(--wp--preset--spacing--xs);
	margin-inline-start: 0 !important;
	text-align: left;
	text-transform: none;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}
.wp-block-read-more.is-style-link-arrow:after { content: " \2192"; }
.wp-block-read-more.is-style-link-arrow:hover { text-decoration: underline; }

/* ---- Post template: lists of posts ----
	 Ruled: one hairline between entries. Spaced: air instead of rules. Boxed: each entry in a Soft box
	 (the Soft box is set on the group inside the template). No format icons in these lists: they stay plain. */
:where(.wp-block-post-template.is-style-list-ruled, .wp-block-post-template.is-style-list-spaced, .wp-block-post-template.is-style-list-boxed) > li { margin: 0; }
.wp-block-post-template.is-style-list-ruled { gap: 0; }
.wp-block-post-template.is-style-list-spaced { gap: var(--wp--preset--spacing--3-xl); }
.wp-block-post-template.is-style-list-spaced > li + li { margin-top: var(--wp--preset--spacing--3-xl); }
.wp-block-post-template.is-style-list-boxed { gap: var(--wp--preset--spacing--md); }
.wp-block-post-template.is-style-list-boxed > li + li { margin-top: var(--wp--preset--spacing--md); }
.wp-block-post-template.is-style-list-ruled > li + li {
	margin-top: var(--wp--preset--spacing--xl);
	padding-top: var(--wp--preset--spacing--xl);
	border-top: 0.0625rem solid var(--wp--preset--color--border);
}
:is(.is-style-list-ruled, .is-style-list-spaced) > li > * + * { margin-top: var(--wp--preset--spacing--xs); }
.wp-block-post-template:is(.is-style-list-ruled, .is-style-list-spaced, .is-style-list-boxed) .flair-format-icon { display: none; }
.wp-block-post-template:is(.is-style-list-ruled, .is-style-list-spaced, .is-style-list-boxed) .wp-block-post-title { margin-block: 0; }
.wp-block-post-template:is(.is-style-list-ruled, .is-style-list-spaced, .is-style-list-boxed) .wp-block-post-title a { color: inherit; text-decoration: none; }
.wp-block-post-template:is(.is-style-list-ruled, .is-style-list-spaced, .is-style-list-boxed) .wp-block-post-title a:hover { text-decoration: underline; }
.wp-block-post-template:is(.is-style-list-ruled, .is-style-list-spaced, .is-style-list-boxed) .wp-block-post-terms a { color: inherit; text-decoration: none; }