/* ==========================================================================
   Blog: mobile
   Everything collapses to a single column, so this file only carries the
   handful of overrides that need it.
   ========================================================================== */

@media (max-width: 991.98px) {

	.blog-card-hero {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}

	.blog-card-hero .blog-card-media {
		flex: 1 1 auto;
		max-width: 100%;
	}

	/* The 4rem either side only centres the text against the image beside it.
	   Stacked, it is just a gap under the image, so the hero sits like the
	   secondary cards below it. */

	.blog-card-hero .blog-card-body {
		padding: 0;
	}

	/* The desktop 4rem under the hero is too much once everything stacks.
	   Brought down to the row gap between the two secondary cards, so all
	   three featured cards sit evenly. */

	.blog-featured .row.mt-3 {
		margin-top: calc(var(--default-gutter-y) * 3) !important;
		row-gap: calc(var(--default-gutter-y) * 3);
	}

	/* Stacked, the secondary cards take the author below the excerpt like
	   every other card, rather than inline on the meta row. The row is
	   dissolved so its two children join the body's own flex column, and the
	   author and link are ordered to the end. Done here rather than in the
	   template so desktop keeps the inline author without a second copy of
	   the byline in the markup. */

	.blog-card-secondary .blog-card-meta-row {
		display: contents;
	}

	.blog-card-secondary .blog-card-author {
		order: 1;
	}

	.blog-card-secondary .blog-card-link {
		order: 2;
		margin-top: 0.5rem;
	}

	.blog-filters .form-select {
		min-width: 0;
		width: 100%;
	}
}

@media (max-width: 767.98px) {

	/* Single column, so the contents list sits above the body and must not
	   stick as the reader scrolls past it. */

	.blog-toc.sticky-top {
		position: static !important;
		top: auto;
	}

	/* The section's 60px above the headline reads as a gap under the
	   breadcrumb band at this width. */

	.content-section.blog-article-header {
		padding-top: calc(var(--default-gutter-y) * 2);
	}

	.blog-byline-meta {
		margin-top: calc(var(--default-gutter-y) / 1.5);
		padding-top: calc(var(--default-gutter-y) / 1.5);
	}

	.blog-article-body .row.col-gap-2 {
		row-gap: calc(var(--default-gutter-y) * 3);
	}

	.blog-byline-row {
		align-items: flex-start;
	}
}

@media (max-width: 575.98px) {

	.blog-card-meta {
		gap: 0.375rem;
	}

	.facetwp-facet-blog_pager .facetwp-load-more {
		width: 100%;
	}

	/* One card per row, so the 30px row gap is all that separates one article
	   from the next. */

	.blog-archive .blog-grid {
		row-gap: calc(var(--default-gutter-y) * 3);
	}

	.blog-author-bio-image {
		width: 88px;
		height: 88px;
	}

	.pull-quote {
		padding-left: var(--default-gutter-x);
	}

	/* Featured product, stacked: the image and the detail under it read as
	   one block, and the block is held further off the copy that follows.
	   Long enough to beat the article body's own ".row.col-gap-2" gap above,
	   which reaches this row too. */

	.blog-article-body .blog-product-card > .row.col-gap-2 {
		row-gap: var(--default-gutter-y);
	}

	.blog-content > .blog-product-card:not(:last-child) {
		margin-bottom: calc(var(--default-gutter-y) * 3.5);
	}

	.blog-share {
		gap: 0.5rem;
	}

	/* Credentials stack. The label column is 30% of the row, which at this
	   width is about 90px and wraps most of the labels onto a second line
	   while leaving the detail beside it short and ragged. */

	.blog-author-credential {
		flex-direction: column;
		gap: 0.25em;
	}

	.blog-author-credential dt {
		flex: 0 0 auto;
	}

	/* The play control is sized for a third of the container; on a card the
	   full width of the screen it no longer needs to be that large. */

	.blog-course-card-play {
		width: 56px;
		height: 56px;
		font-size: 1.2rem;
	}
}