/**
 * Styles for the block patterns (About, Donate, Contact pages) and core
 * buttons. Loaded on the site and inside the editor.
 */

/* Wide sections: container width inside page content */
.entry-content > .torath-wide,
.torath-wide { max-width: var(--container, 1200px); margin-block: 0; padding: 56px var(--gutter, 24px); }

/* Full-width bands with alternate background */
.entry-content > .torath-band,
.torath-band {
	max-width: none;
	margin-inline: calc(-1 * var(--gutter, 24px));
	padding-block: 72px;
	/* Line the content up with the header: (viewport - container) / 2 + gutter. */
	padding-inline: max(var(--gutter, 24px), calc((100% + 2 * var(--gutter, 24px) - var(--container, 1200px)) / 2 + var(--gutter, 24px)));
	background-color: var(--c-alt, #EFE2C8);
}

/* Two columns, vertically centred */
.wp-block-columns.torath-split { gap: 56px; margin: 0; }
/* Core forces align-items on columns, so align each column instead. */
.wp-block-columns.torath-split > .wp-block-column { align-self: center; }
.torath-band .wp-block-columns.torath-split > .wp-block-column { align-self: flex-start; }
.wp-block-column > :first-child, .torath-box > :first-child, .torath-band > :first-child { margin-top: 0; }
.wp-block-column > :last-child, .torath-box > :last-child { margin-bottom: 0; }

/* Small uppercase label */
p.eyebrow { margin: 0 0 12px; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--c-highlight, #8A4A1C); }

/* Framed photo */
.wp-block-image.torath-framed { border: 1px solid var(--c-primary, #A67C3D); outline: 1px solid var(--c-sand, #D9BE8C); outline-offset: 10px; margin: 11px; }
.wp-block-image.torath-framed img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Timeline */
.torath-timeline { border-inline-start: 2px solid var(--c-primary, #A67C3D); padding-inline-start: 28px; }
.torath-timeline__item { position: relative; padding-bottom: 28px; }
.torath-timeline__item:last-child { padding-bottom: 0; }
.torath-timeline__item::before {
	content: ""; position: absolute; inset-inline-start: -36px; top: 8px; width: 14px; height: 14px;
	background: var(--c-primary, #A67C3D); transform: rotate(45deg);
}
.torath-timeline__item:last-child::before { background: var(--c-accent, #0E7C8C); }
.torath-timeline__item h3 { margin: 0 0 4px; font-size: 22px; }
.torath-timeline__item p { margin: 0; }

/* Boxes: mission, vision, values, donation methods, contact */
.wp-block-columns.torath-cards { gap: 28px; margin: 0; }
.torath-box,
.torath-cards > .wp-block-column {
	background: var(--c-surface, #FBF6EC);
	border: 1px solid var(--c-sand, #D9BE8C);
	border-top: 4px solid var(--c-primary, #A67C3D);
	border-radius: var(--radius, 0);
	padding: 32px;
}
.torath-cards > .wp-block-column > .torath-box { border: 0; padding: 0; background: none; }
.torath-box h3, .torath-cards h3 { margin-top: 0; font-size: 24px; }
.torath-cards ul { padding-inline-start: 1.1em; margin: 0; }
.torath-note { margin-top: 28px; padding: 16px 20px; background: var(--c-surface, #FBF6EC); border-inline-start: 3px solid var(--c-accent, #0E7C8C); }

/* Team */
.wp-block-columns.torath-team { gap: 24px; margin: 24px 0 0; }
.torath-team .wp-block-image { margin: 0 0 12px; }
.torath-team .wp-block-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.torath-team h3 { margin: 0; font-size: 18px; }
.torath-role { margin: 0; font-size: 14px; color: var(--c-muted, #6B5640); }
@media (min-width: 600px) and (max-width: 900px) {
	.wp-block-columns.torath-team { flex-wrap: wrap !important; }
	.wp-block-columns.torath-team > .wp-block-column { flex-basis: calc(50% - 12px) !important; }
}

/* Core buttons in the theme style */
.wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px;
	background: var(--c-accent, #0E7C8C); color: var(--c-on-accent, #fff);
	border: 1.5px solid transparent; border-radius: var(--radius, 0);
	font-family: var(--font-body); font-weight: 600; font-size: 15px; text-decoration: none;
}
.wp-block-button__link:hover { background: var(--c-accent-hover, #0A5F6B); color: var(--c-on-accent, #fff); }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; border-color: var(--c-heading, #3E2A14); color: var(--c-heading, #3E2A14); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: color-mix(in srgb, var(--c-heading, #3E2A14) 8%, transparent); }

.wp-block-separator { border: 0; border-top: 1px solid var(--c-sand, #D9BE8C); }
.wp-block-pullquote { border-block: 3px solid var(--c-primary, #A67C3D); }
.wp-block-gallery { gap: 12px; }