/**
 * Styles for the HOYALAN blocks. Theme colours are used where available, with
 * brand fallbacks so the blocks still look right under another theme.
 */

.hoyalan-svg-icon {
	flex: none;
}

/* Icon with label */
.wp-block-hoyalan-icon {
	align-items: center;
	display: flex;
	font-weight: 500;
	gap: 0.75rem;
}

.wp-block-hoyalan-icon .hoyalan-svg-icon {
	color: var(--wp--preset--color--gold, #c5a15b);
	height: 2rem;
	width: 2rem;
}

/* Activity cards */
.hoyalan-card-grid {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 640px) {

	.hoyalan-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1080px) {

	.hoyalan-card-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.hoyalan-card {
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--wp--preset--color--gold, #c5a15b);
	border-radius: var(--wp--custom--radius, 6px);
	color: var(--wp--preset--color--ink, #27384a);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.hoyalan-card__media img {
	aspect-ratio: 16 / 10;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.hoyalan-card__body {
	display: flex;
	flex: 1;
	gap: 0.875rem;
	padding: 1.125rem 1.25rem 1.25rem;
}

.hoyalan-card__icon {
	color: var(--wp--preset--color--gold-dark, #8a6a2b);
}

.hoyalan-card__icon .hoyalan-svg-icon {
	height: 2.5rem;
	width: 2.5rem;
}

.hoyalan-card__title {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 0.25rem;
}

.hoyalan-card__title a {
	color: var(--wp--preset--color--navy, #10345b);
	text-decoration: none;
}

.hoyalan-card__title a:hover {
	text-decoration: underline;
}

.hoyalan-card__text {
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	line-height: 1.45;
	margin: 0;
}

/* Team */
.hoyalan-team-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.hoyalan-person {
	background: var(--wp--preset--color--light-gray, #eef2f6);
	border-block-start: 4px solid var(--wp--preset--color--gold, #c5a15b);
	border-radius: var(--wp--custom--radius, 6px);
	padding: 1.5rem;
}

.hoyalan-person__photo {
	border-radius: 50%;
	display: block;
	height: 96px;
	object-fit: cover;
	width: 96px;
}

.hoyalan-person__photo--empty {
	align-items: center;
	background: var(--wp--preset--color--navy, #10345b);
	color: var(--wp--preset--color--white, #fff);
	display: flex;
	font-size: 2.25rem;
	font-weight: 700;
	justify-content: center;
}

.hoyalan-person__name {
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	margin: 1rem 0 0.125rem;
}

.hoyalan-person__role {
	color: var(--wp--preset--color--gold-dark, #8a6a2b);
	font-weight: 600;
	margin: 0 0 0.5rem;
}

.hoyalan-person__bio {
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}

/* Contact details */
.hoyalan-contact__list {
	display: grid;
	gap: 0.625rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hoyalan-contact__list li {
	align-items: flex-start;
	display: flex;
	gap: 0.625rem;
}

.hoyalan-contact .hoyalan-svg-icon {
	height: 1.25rem;
	margin-block-start: 0.125rem;
	width: 1.25rem;
}

.hoyalan-contact__list .hoyalan-svg-icon {
	color: var(--wp--preset--color--gold, #c5a15b);
}

/* stylelint-disable-next-line no-descending-specificity -- Unrelated to the card link rule. */
.hoyalan-contact__list a {
	text-decoration: none;
}

.hoyalan-contact__list a:hover {
	text-decoration: underline;
}

.hoyalan-contact__social {
	display: flex;
	gap: 0.75rem;
	margin-block-start: 1rem;
}

.hoyalan-contact__social a:hover {
	color: var(--wp--preset--color--gold, #c5a15b);
}

/* The contact block on a light page needs darker icons. */
.hoyalan-page-content .hoyalan-contact__list .hoyalan-svg-icon {
	color: var(--wp--preset--color--gold-dark, #8a6a2b);
}

/* Donate */
.hoyalan-donate__notice {
	background: var(--wp--preset--color--light-gray, #eef2f6);
	border-inline-start: 4px solid var(--wp--preset--color--gold, #c5a15b);
	border-radius: var(--wp--custom--radius, 6px);
	color: var(--wp--preset--color--navy, #10345b);
	font-weight: 600;
	margin: 0;
	padding: 1rem 1.25rem;
}

.hoyalan-donate__link {
	display: inline-block;
	text-decoration: none;
}