/*
 * Office Hours page (templates/page-office-hours.html, setup/content/office-hours.php). Redesign POC (soft
 * editorial): an "Office hours" opening on paper, then a 12-column spread with the intro (a statement with a
 * crimson rule) on the left and the Koalendar booking embed on the right, closed by a hairline. Phones stack.
 */

.wp-block-post-content.sr-oh-sections > * + * {
	margin-block-start: 0;
}

.sr-oh {
	--sr-gap: 1.6vw;
	--sr-hair: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent);
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sr-gap);
	align-items: start;
	margin: 0;
	padding: 4.5vw var(--sr-gutter) 8vw;
}

/* Hairline between the opening and the spread, inside the gutters. */
.sr-oh::before {
	content: "";
	position: absolute;
	top: 0;
	right: var(--sr-gutter);
	left: var(--sr-gutter);
	border-top: var(--sr-hair);
}

.sr-oh > * {
	margin: 0;
}

.sr-oh > .sr-oh__intro {
	grid-area: 1 / 1 / 2 / 5;
	position: sticky;
	top: 2rem;
	font-size: clamp(1.35rem, 1.9vw, 1.85rem);
	line-height: 1.3;
}

/* The booking calendar sits in a quiet frame: the section's hairline above, one below; no color block. */
.sr-oh > .sr-oh__booking {
	grid-area: 1 / 6 / 2 / 13;
	padding-bottom: 0.4rem;
	border-bottom: var(--sr-hair);
}

.sr-oh__booking iframe {
	display: block;
}

@media (max-width: 781px) {
	.sr-oh {
		display: block;
		padding: 32px var(--sr-gutter) 64px;
	}

	.sr-oh > .sr-oh__intro {
		position: static;
		font-size: 1.35rem;
	}

	.sr-oh > .sr-oh__booking {
		margin-top: 36px;
		padding-block: 0;
		border: 0;
	}
}