/*
 * Contact: address + networks side by side, then the schedule in a peach box over the
 * church photo — as on the live page. No form, phone or e-mail (CON-01).
 */

body.is-page-contact .contact-details,
body.is-page-contact .contact-program {
	margin-block-start: 0;
}

body.is-page-contact .contact-details__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
}

body.is-page-contact .contact-details__row > *,
body.is-page-contact .contact-details__block > * {
	margin-block: 0;
}

/* Small navy uppercase label, as the live "subheading". */
body.is-page-contact .contact-details__title {
	margin-block-end: 14px;
	font-family: var(--wp--preset--font-family--dosis);
	/* UI-49: the one section-title style (theme.json h2). */
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
}

body.is-page-contact .contact-details__address {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
	color: var(--wp--preset--color--navy);
}

body.is-page-contact .contact-details__area {
	margin-block-end: 16px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.45;
	/* UI-10: the palette's one secondary grey (5.9:1 on white), not a near-twin of the schedule grey. */
	color: var(--wp--preset--color--grey-text);
}

/* Networks: light peach tags, one column on phones, 2×2 from 480px. Rows share one height so a tag
   whose label wraps does not leave its neighbours shorter (UI-15). */
body.is-page-contact .contact-details__socials {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-auto-rows: 1fr;
	gap: 8px;
	margin: 0;
	padding: 0;
}

body.is-page-contact .contact-details__socials > li {
	display: grid;
	min-width: 0;
}

body.is-page-contact .contact-details__socials li > a {
	gap: 8px;
	min-height: 44px;
	padding: 8px 12px;
	border: 0;
	border-radius: 4px;
	background: var(--wp--preset--color--peach-light);
	/* UI-10: the palette brown (6.7:1 on peach-light), same as the icon, not a second brown. */
	color: var(--wp--preset--color--brown);
	font-size: var(--wp--preset--font-size--small);
	/* Labels wrap between words only; "anywhere" split "Instagra|m" in narrow tags (UI-15). */
	overflow-wrap: normal;
	word-break: normal;
}

body.is-page-contact .contact-details__socials li > a:is(:hover, :focus-visible) {
	background: #fbe0c2;
}

body.is-page-contact .contact-details__socials li > a:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}

body.is-page-contact .contact-details__socials li > a::before {
	width: 18px;
	height: 18px;
	color: var(--wp--preset--color--brown);
}

body.is-page-contact .contact-details__socials li > a strong {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}

/* The global new-tab arrow rule sets margin-inline-start: 0.3em and outranks the tag style's auto, so the
   arrow trailed the text at four different x positions; pinned to the right edge, as on live (UI-62). */
body.is-page-contact .contact-details__socials li > a::after {
	flex: none;
	margin-inline-start: auto;
	color: var(--wp--preset--color--navy);
}

/* Schedule: the church photo under a 90% peach veil, content left-aligned in a 4-column grid. */
body.is-page-contact .contact-program .betania-program-box {
	padding: 22px 18px !important;
	border: 0;
	border-radius: 6px;
	box-shadow: none;
	text-align: left;
	color: var(--wp--preset--color--navy);
	background:
		linear-gradient(rgb(245 230 208 / 90%), rgb(245 230 208 / 90%)),
		url("../../img/betania-church-building.jpg") center 35% / cover no-repeat;
	/* WebP is about a third of the bytes; browsers without image-set() keep the JPG above. */
	background-image:
		linear-gradient(rgb(245 230 208 / 90%), rgb(245 230 208 / 90%)),
		image-set(url("../../img/betania-church-building.webp") type("image/webp"), url("../../img/betania-church-building.jpg") type("image/jpeg"));
}

body.is-page-contact .contact-program .betania-program-box > .is-style-betania-subtitle {
	margin: 0 0 18px;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--navy);
}

body.is-page-contact .contact-program .betania-program--grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	border: 0;
}

body.is-page-contact .contact-program .betania-program__group {
	padding: 0;
}

body.is-page-contact .contact-program .betania-program--grid .betania-program__day {
	margin: 0 0 10px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: none;
	color: var(--wp--preset--color--navy);
}

body.is-page-contact .contact-program .betania-program__sessions {
	gap: 12px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.45;
	/* UI-10: navy, not a second grey. grey-text is only about 4:1 on the peach veil, so the descriptions
	   take the navy that the Acasă schedule note already uses (UI-13); weight and size keep the hierarchy. */
	color: var(--wp--preset--color--navy);
}

body.is-page-contact .contact-program .betania-program--grid .betania-program__time {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--navy);
}

body.is-page-contact .contact-program .betania-program--grid .betania-program__note {
	max-width: none;
	margin: 2px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--navy) 15%, transparent);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	text-align: left;
	color: var(--wp--preset--color--navy);
}

body.is-page-contact .contact-program .betania-program__note a {
	color: var(--wp--preset--color--brown);
}

@media (min-width: 480px) {
	body.is-page-contact .contact-details__socials {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	body.is-page-contact .contact-program .betania-program-box {
		padding: 30px 36px 28px !important;
	}

	body.is-page-contact .contact-program .betania-program--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 32px;
	}
}

@media (min-width: 992px) {
	body.is-page-contact .contact-program .betania-program--grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Address and networks side by side only once each half is wide enough for the 2×2 tags; below that the
   halves stacked at ~430px squeezed each tag to 156–214px (UI-15). */
@media (min-width: 1100px) {
	body.is-page-contact .contact-details__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 48px;
	}
}

/* The footer columns (schedule, address, links) would repeat what this page already shows; as on live, only the navy bar stays. */
body.is-page-contact .site-footer__main {
	display: none;
}