/*
 * Apelle uno - block styles and design system (since 1.3.0).
 * The colours come from the Customizer (Appearance > Customize > Colors)
 * and are printed as CSS custom properties.
 */
:root {
	--apelleuno-accent: #4b2a7b;
	--apelleuno-accent-2: #6a43a3;
	--apelleuno-accent-soft: #f6f3fa;
	--apelleuno-highlight: #f2c14e;
	--apelleuno-highlight-soft: #fdf6e3;
	--apelleuno-ink: #23202b;
	--apelleuno-muted: #625d6e;
	--apelleuno-line: #e4e0ea;
	--apelleuno-radius: 14px;
	--apelleuno-shadow: 0 2px 10px rgba(40, 20, 70, .07);
}

/* Buttons */
.wp-block-button__link,
.wp-element-button {
	background-color: var(--apelleuno-accent);
	color: #fff;
	border-radius: 8px;
	padding: .6em 1.2em;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-element-button:hover,
.wp-element-button:focus {
	background-color: var(--apelleuno-accent-2);
	color: #fff;
	text-decoration: none;
}
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button__link.is-style-outline {
	background-color: transparent;
	color: var(--apelleuno-accent);
	border: 2px solid currentColor;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--apelleuno-accent-soft);
}

/* Small label */
.is-style-apelleuno-eyebrow {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--apelleuno-accent);
	margin-bottom: .4rem;
}

/* Section title with a line */
.is-style-apelleuno-section {
	display: flex;
	align-items: center;
	gap: .75rem;
	color: var(--apelleuno-accent);
	margin-top: 2rem;
	margin-bottom: 1rem;
}
.is-style-apelleuno-section::after {
	content: "";
	flex: 1;
	border-bottom: 2px solid var(--apelleuno-line);
}

/* Hero */
.wp-block-group.is-style-apelleuno-hero {
	background: linear-gradient(135deg, var(--apelleuno-accent) 0%, var(--apelleuno-accent-2) 100%);
	color: #fff;
	border-radius: var(--apelleuno-radius);
	padding: 1.8rem 2rem;
	margin-bottom: 1.6rem;
}
.wp-block-group.is-style-apelleuno-hero h1,
.wp-block-group.is-style-apelleuno-hero h2,
.wp-block-group.is-style-apelleuno-hero h3 {
	color: #fff;
	margin-top: 0;
}
.wp-block-group.is-style-apelleuno-hero a:not(.wp-block-button__link) {
	color: var(--apelleuno-highlight);
}
.wp-block-group.is-style-apelleuno-hero .is-style-apelleuno-eyebrow {
	color: var(--apelleuno-highlight);
}
.wp-block-group.is-style-apelleuno-hero .wp-block-button__link {
	background-color: #fff;
	color: var(--apelleuno-accent);
}
.wp-block-group.is-style-apelleuno-hero .wp-block-button__link:hover {
	background-color: var(--apelleuno-highlight-soft);
}
.wp-block-group.is-style-apelleuno-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: #fff;
}
.wp-block-group.is-style-apelleuno-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, .12);
}
.wp-block-group.is-style-apelleuno-hero > *:last-child {
	margin-bottom: 0;
}

/* Card */
.wp-block-group.is-style-apelleuno-card {
	background: #fff;
	color: var(--apelleuno-ink);
	border: 1px solid var(--apelleuno-line);
	border-radius: var(--apelleuno-radius);
	box-shadow: var(--apelleuno-shadow);
	padding: 1.2rem 1.3rem;
	height: 100%;
}
.wp-block-group.is-style-apelleuno-card h2,
.wp-block-group.is-style-apelleuno-card h3 {
	color: var(--apelleuno-accent);
	margin-top: 0;
}
.wp-block-group.is-style-apelleuno-card > .wp-block-image:first-child {
	margin: -1.2rem -1.3rem 1rem;
}
.wp-block-group.is-style-apelleuno-card > .wp-block-image:first-child img {
	border-radius: var(--apelleuno-radius) var(--apelleuno-radius) 0 0;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Soft and highlighted boxes */
.wp-block-group.is-style-apelleuno-box,
.wp-block-group.is-style-apelleuno-highlight {
	background: var(--apelleuno-accent-soft);
	color: var(--apelleuno-ink);
	border-radius: 12px;
	padding: 1.1rem 1.3rem;
	margin-bottom: 1rem;
}
.wp-block-group.is-style-apelleuno-highlight {
	background: var(--apelleuno-highlight-soft);
	border-left: 4px solid var(--apelleuno-highlight);
}
.wp-block-group.is-style-apelleuno-box h3,
.wp-block-group.is-style-apelleuno-highlight h3 {
	color: var(--apelleuno-accent);
	margin-top: 0;
}
.wp-block-group.is-style-apelleuno-card > *:last-child,
.wp-block-group.is-style-apelleuno-box > *:last-child,
.wp-block-group.is-style-apelleuno-highlight > *:last-child {
	margin-bottom: 0;
}

/* Latest posts as cards */
.wp-block-latest-posts.is-style-apelleuno-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.2rem;
	padding: 0;
	margin: 0 0 1.5rem;
}
.wp-block-latest-posts.is-style-apelleuno-cards li {
	list-style: none;
	margin: 0;
	background: #fff;
	border: 1px solid var(--apelleuno-line);
	border-radius: var(--apelleuno-radius);
	box-shadow: var(--apelleuno-shadow);
	padding: 1rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	overflow: hidden;
}
.wp-block-latest-posts.is-style-apelleuno-cards .wp-block-latest-posts__featured-image {
	margin: -1rem -1.1rem .5rem;
	float: none;
}
.wp-block-latest-posts.is-style-apelleuno-cards .wp-block-latest-posts__featured-image img {
	width: 100%;
	height: 170px;
	max-width: none;
	object-fit: cover;
}
.wp-block-latest-posts.is-style-apelleuno-cards .wp-block-latest-posts__post-title {
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.25;
	color: var(--apelleuno-accent);
	text-decoration: none;
}
.wp-block-latest-posts.is-style-apelleuno-cards .wp-block-latest-posts__post-date {
	font-size: .82rem;
	color: var(--apelleuno-muted);
}

/* Quote */
.wp-block-quote {
	border-left: 4px solid var(--apelleuno-highlight);
	background: var(--apelleuno-accent-soft);
	border-radius: 0 12px 12px 0;
	padding: 1rem 1.3rem;
	margin: 1.5rem 0;
	font-style: italic;
	color: var(--apelleuno-ink);
}
.wp-block-quote cite {
	display: block;
	margin-top: .5rem;
	font-style: normal;
	font-size: .88rem;
	color: var(--apelleuno-muted);
}

/* Separator */
.wp-block-separator {
	border: 0;
	border-top: 2px solid var(--apelleuno-line);
}

/* Columns: equal height cards */
.wp-block-columns > .wp-block-column > .wp-block-group.is-style-apelleuno-card {
	height: 100%;
}

@media (max-width: 600px) {
	.wp-block-group.is-style-apelleuno-hero {
		padding: 1.4rem 1.2rem;
	}
}