/* Group stylesheet for the widgets that read the post being shown. The row, the disc and the
	card shapes they borrow live in alovesinh-base.css. */

.alovesinh-article-head.alovesinh-article-head h1 {
	margin: 16px 0;
	font-size: clamp( 30px, 4vw, 46px );
	color: var( --alv-c-ink );
}

.alovesinh-post-standfirst {
	font-size: var( --alv-fs-4 );
	line-height: var( --alv-lh-relaxed );
	color: var( --alv-c-text-muted );
}

/* The picture stops short of the measure the words run to, which is what marks it as the article's
	opening plate. Carried on the widget because the frame around it is the one the prose uses. */
.alovesinh-post-image {
	padding-inline: 40px;
}

.alovesinh-post-image-caption {
	margin-top: var( --alv-sp-2 );
	font-size: var( --alv-fs-2 );
	line-height: var( --alv-lh-body );
	color: var( --alv-c-text-muted );
}

/* Cropped rather than left at its own proportions: an author uploads whatever the camera gave
	them, and an uncropped cover pushes the opening paragraph off the first screen. */
.alovesinh-article-cover img {
	display: block;
	width: 100%;
	aspect-ratio: var( --alv-ratio-cover );
	object-fit: cover;
}

.alovesinh-post-meta {
	font-size: var( --alv-fs-2 );
	color: var( --alv-c-text-muted );
}

/* Pushed to the foot of the card whatever the summary above it runs to, so a row of cards keeps
	its bylines on one line. */
.alovesinh-post-meta-card {
	margin-top: auto;
	padding-top: var( --alv-sp-2 );
	border-top: var( --alv-bd-hairline ) solid var( --alv-c-border );
}

/* Dashed, unlike the card's solid rule: this line closes the heading rather than the card, and
	the source design keeps the two apart. */
.alovesinh-post-meta-article {
	flex-wrap: wrap;
	margin-top: var( --alv-sp-4 );
	padding-top: var( --alv-sp-3 );
	border-top: var( --alv-bd-hairline ) dashed var( --alv-c-border );
}

/* Smaller than the disc the review cards use, and filled with the brand rather than a per-person
	colour: a byline disc stands beside the name it belongs to, so it is a mark rather than a face. */
.alovesinh-post-meta .alovesinh-initial {
	--alv-initial-size: 32px;

	font-size: var( --alv-fs-2 );
	background: linear-gradient( 135deg, var( --alv-c-brand ) 0%, var( --alv-c-brand-deep ) 100% );
}

/* No size is set here: the widget asks WordPress for the portrait at one measure and it arrives
	carrying it, so a number typed here too would be the one that silently wins. */
.alovesinh-post-meta img.alovesinh-post-meta-avatar {
	flex-shrink: 0;
	height: auto;
	aspect-ratio: 1;
	border-radius: var( --alv-r-circle );
	object-fit: cover;
}

/* The name sits above the role rather than beside it, which is what parts this byline from the
	caption under a card: here the person is the claim, not a credit line. */
.alovesinh-post-meta-name {
	display: block;
	font-size: var( --alv-fs-3 );
	color: var( --alv-c-ink );
}

/* The source design sets the blog list one step wider apart than the shared grid — 32px, not 20 —
	so six articles read as six pieces rather than one slab. */
.alovesinh-post-grid {
	--alv-grid-gap: var( --alv-sp-4 );
}

/* No frame of its own: the section it sits in already carries the design's measure and gutter, and
	repeating them here took another 48px off the two columns. */
.alovesinh-post-featured {
	/* The lead article runs wider than the grid below it and gives the picture the larger share,
		which is what marks it as the piece the blog is leading on rather than the first of six. */
	--alv-split-cols: 1.1fr 1fr;
}

/* Named twice to outrank the shared card's own gap and padding, which the body inside it would
	otherwise inherit through the split. */
.alovesinh-post-featured-frame.alovesinh-post-featured-frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var( --alv-r-4 );
	background: var( --alv-c-bg-light );
	box-shadow: var( --alv-sh-3 );
}

/* Accent rather than brand, unlike every other chip on the page: this one is a flag on a
	photograph and has to read against whatever the picture puts behind it. */
.alovesinh-post-featured-flag {
	position: absolute;
	top: var( --alv-sp-3 );
	left: var( --alv-sp-3 );
	padding: var( --alv-sp-1 ) var( --alv-sp-2 );
	border-radius: var( --alv-r-pill );
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-bold );
	color: var( --alv-c-white );
	background: var( --alv-c-accent );
	box-shadow: 0 8px 16px color-mix( in srgb, var( --alv-c-accent ) 30%, transparent );
}

.alovesinh-post-featured-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.alovesinh-post-featured-title {
	margin: var( --alv-sp-3 ) 0 var( --alv-sp-2 );
	font-size: clamp( 26px, 2.6vw, 34px );
	color: var( --alv-c-ink );
}

.alovesinh-post-featured-excerpt {
	margin: 0 0 var( --alv-sp-3 );
	font-size: 17px;
	line-height: var( --alv-lh-relaxed );
	color: var( --alv-c-text-2 );
}

/* The by-line inside the lead keeps the rule that parts it from the copy, but not the push to
	the foot that a card needs: nothing here is stretching to meet a neighbour. */
.alovesinh-post-featured .alovesinh-post-meta {
	align-self: stretch;
	margin-top: 0;
	padding-top: var( --alv-sp-2 );
	border-top: var( --alv-bd-hairline ) solid var( --alv-c-border );
}

.alovesinh-post-featured-actions {
	flex-wrap: wrap;
	margin-top: 14px;
}

/* The tablet pair is written out too: the split atom stacks every panel at 980, and a portrait
	this narrow leaves room for the biography beside it long past that width. */
.alovesinh-post-author {
	/* A narrow first column holding a portrait, not a half-and-half split: the copy beside it is a
		paragraph of biography and would set in a ribbon at half the width of the article. */
	--alv-author-photo: 120px;
	--alv-split-cols: var( --alv-author-photo ) minmax( 0, 1fr );
	--alv-split-cols-md: var( --alv-author-photo ) minmax( 0, 1fr );
	--alv-split-gap: var( --alv-sp-4 );
	--alv-split-gap-md: var( --alv-sp-4 );
	--alv-box-pad: var( --alv-sp-4 );
}

/* The element name rides along because Elementor ships `.elementor img { border-radius: 0;
	height: auto }`, which a single class loses to: the portrait comes back square and as tall as
	the file it was cropped from. */
.alovesinh-post-author img.alovesinh-post-author-photo {
	width: var( --alv-author-photo );
	height: var( --alv-author-photo );
	border-radius: var( --alv-r-circle );
	object-fit: cover;
}

.alovesinh-post-author-name {
	margin: 0 0 var( --alv-sp-1 );
	color: var( --alv-c-ink );
}

.alovesinh-post-author-bio {
	margin: 0 0 var( --alv-sp-2 );
	font-size: var( --alv-fs-3 );
	line-height: var( --alv-lh-relaxed );
	color: var( --alv-c-text-2 );
}

@media ( max-width: 560px ) {

	/* A 120px portrait beside the copy leaves the biography about twenty characters a line on a
		phone, so the panel stacks and the portrait centres over the words it belongs to. */
	.alovesinh-post-author {
		--alv-split-cols-md: minmax( 0, 1fr );
		--alv-split-gap-md: var( --alv-sp-3 );
		--alv-box-pad: var( --alv-sp-3 );

		text-align: center;
	}

	.alovesinh-post-author img.alovesinh-post-author-photo {
		margin: 0 auto;
	}
}