/**
 * Post templates, from Media templates 50:2: the patterns for the kinds of
 * posts on this site. Each works at phone width.
 */

/* Short vertical video: the upright player beside its note, which wraps
   under it when there is no room. */
.abhinav-media-short > .resha-video {
	flex: 0 0 calc(var(--wp--preset--spacing--128) * 2 - var(--wp--preset--spacing--16));
}

.abhinav-media-short__note {
	flex: 1 1 calc(var(--wp--preset--spacing--128) * 2);
	min-width: 0;
}

.abhinav-media-short__note > * {
	margin-block: 0;
}

.abhinav-media-short__note > * + * {
	margin-block-start: var(--wp--preset--spacing--8);
}

/* Step by step: each step ruled off, its number counted by the page and set
   large beside it. The count restarts in every set of steps. */
.abhinav-steps {
	counter-reset: abhinav-step;
}

.abhinav-step {
	position: relative;
	padding: calc(var(--wp--preset--spacing--12) + var(--wp--preset--spacing--2)) 0 0 var(--wp--preset--spacing--64);
	border-top: var(--wp--custom--stroke--construction) solid var(--wp--preset--color--line-subtle);
	counter-increment: abhinav-step;
}

.abhinav-steps > .abhinav-step + .abhinav-step {
	margin-block-start: calc(var(--wp--preset--spacing--12) + var(--wp--preset--spacing--2));
}

.abhinav-step::before {
	content: counter(abhinav-step);
	position: absolute;
	left: 0;
	top: calc(var(--wp--preset--spacing--12) + var(--wp--preset--spacing--2));
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--heading-l);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.083;
}

.abhinav-step > * {
	margin-block: 0;
}

/* Until a screenshot or photo is added, its place shows as a tint. */
.abhinav-step .wp-block-image img,
.abhinav-before-after .wp-block-image img,
.abhinav-photo-set .wp-block-image img {
	background-color: var(--wp--preset--color--line-subtle);
}

@media (max-width: 599px) {
	.abhinav-step {
		padding-left: var(--wp--preset--spacing--48);
	}
}

/* Code walkthrough: the rows sit close, code first. */
.abhinav-code-walkthrough .wp-block-columns {
	margin-block: 0;
}

.abhinav-code-walkthrough .wp-block-code {
	margin: 0;
}

.abhinav-code-walkthrough .wp-block-column > p {
	margin-block: 0;
}

/* Before and after: the label under each image is a label, not a caption. */
.abhinav-before-after .wp-block-columns {
	margin-block: 0;
}

.wp-block-image.abhinav-labelled .wp-element-caption {
	margin-top: var(--wp--preset--spacing--8);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.005em;
	line-height: 1.429;
}

/* Talk or slides: the first slide, then the talk beside it. */
.abhinav-talk .wp-block-media-text__content {
	padding: 0 0 0 var(--wp--preset--spacing--24);
}

.abhinav-talk .wp-block-media-text__content > * {
	margin-block: 0;
}

.abhinav-talk .wp-block-media-text__content > * + * {
	margin-block-start: var(--wp--preset--spacing--8);
}

.abhinav-talk .wp-block-buttons {
	padding-top: var(--wp--preset--spacing--4);
}

.abhinav-talk .wp-block-media-text__media {
	background-color: var(--wp--preset--color--line-subtle);
}

@media (max-width: 599px) {
	.abhinav-talk .wp-block-media-text__content {
		padding: var(--wp--preset--spacing--16) 0 0;
	}
}

/* Diagram: the drawing in a ruled frame, centred, at most 560 wide. */
.wp-block-image.abhinav-diagram__drawing {
	display: block;
	margin: 0;
	padding: var(--wp--preset--spacing--24);
	border: var(--wp--custom--stroke--construction) solid var(--wp--preset--color--line-subtle);
	text-align: center;
}

.wp-block-image.abhinav-diagram__drawing img {
	width: 100%;
	max-width: calc(var(--wp--preset--spacing--128) * 4 + var(--wp--preset--spacing--48));
}

.abhinav-diagram > p {
	margin-block: 0;
}

/* Photo set: the lead photo and the grid sit 8 apart. */
.abhinav-photo-set > * {
	margin-block: 0;
}

.abhinav-photo-set > * + * {
	margin-block-start: var(--wp--preset--spacing--8);
}

.abhinav-photo-set > p {
	margin-block-start: var(--wp--preset--spacing--16);
}

/* Marathi post: the English summary box is roomier than the default note. */
.wp-block-group.abhinav-summary {
	padding: var(--wp--preset--spacing--16) calc(var(--wp--preset--spacing--16) + var(--wp--preset--spacing--4));
}

.abhinav-summary > * {
	margin-block: 0;
}

.abhinav-summary > * + * {
	margin-block-start: var(--wp--preset--spacing--4);
}

/* Every photo in the grid keeps the 4:3 crop, including one left alone on
   its row when the grid drops to two columns on a phone. */
.abhinav-photo-set .wp-block-gallery .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}