/* Lens — Testimonial band: portrait beside the quote, and no hairline.
 *
 * Base pattern: patterns/solutions-testimonial-band.php
 * Base styles:  assets/css/sections/solutions-testimonial-band.css
 *               plus src/blocks/testimonial-card/style.scss
 * Comp:         node 2427:13719 (band), 2427:13720 (row), 2427:13725 (portrait)
 *
 * OPT-IN LIST, not a modifier class on the markup — the mechanism documented at
 * the top of assets/css/sections/solutions-hero-contained-square.css. Every
 * selector compounds this page's hook with the base section class, so two
 * classes outweigh the base's single-class rules regardless of source order and
 * the shared pattern stays page-agnostic.
 *
 * Consumers:
 *   .infinitus-section--lens-testimonial   Lens
 *
 * WHY THIS FILE EXISTS. Lens is the first consumer of this band to ship a
 * portrait, and the first to omit the heading. Both uncovered a gap rather than
 * a bug in the base:
 *
 *   1. PORTRAIT. .infinitus-testimonial-card__figure is `display: flex;
 *      flex-direction: column`, so the default `align-items: stretch` sizes the
 *      image to the card's full width. The card block gives __media only
 *      `height: auto; max-width: 100%`, which cannot resist that. A 572x579
 *      asset therefore rendered 1240x1255 — upscaled 2.2x, blurry, and adding
 *      about 1,100px of height to the section (measured 1883px against the
 *      comp's 634).
 *
 *   2. HAIRLINE. The band hangs its rule on the slider header's own
 *      border-block-end. With the heading omitted, as node 2427:13720 draws it,
 *      the header collapses to a bare 1px Neutral 600 line above the quote —
 *      measured 25px tall, which is sp-6 padding plus the 1px border.
 *
 * The header element is kept and only its border and padding are zeroed, NOT
 * display:none: the base file's own comment records that the slider's arrows
 * join that row once a second quote exists, and hiding it would take them with
 * it. A second approved quote is an editor content change here, so it has to
 * keep working.
 */

/* The comp draws no rule above the quote. */
.infinitus-section--lens-testimonial.infinitus-section--solutions-testimonial-band
	.infinitus-testimonial-slider__header {
	border-block-end: 0;
	padding-block-end: 0;
}

/* Node 2427:13725 is 286.66 wide; the asset is 572x579, so 287px is an exact
   2x. Capped rather than fixed so the stacked layout below can shrink it. */
.infinitus-section--lens-testimonial.infinitus-section--solutions-testimonial-band
	.infinitus-testimonial-card__media {
	max-width: 287px;
	width: 100%;
}

/* Tablet and below — the portrait drops under the attribution.
 *
 * The grid below is >=1025 only, so here the figure is the card block's own
 * `display: flex; flex-direction: column` with no gap: the base gives __media
 * nothing but `height: auto; max-width: 100%`, so the portrait printed flush
 * against the cite (measured 0px). sp-8 rather than the sp-6 the base uses
 * between the quote and the attribution — the portrait is the next block, not
 * the next line of the same one, and the step is what keeps it from reading as
 * part of the byline. */
@media (max-width: 1024.98px) {
	.infinitus-section--lens-testimonial.infinitus-section--solutions-testimonial-band
		.infinitus-testimonial-card__media {
		margin-block-start: var(--wp--preset--spacing--sp-8);
	}
}

@media (min-width: 1025px) {
	/* Node 2427:13721 lays the row out 816 / 137 / 287 across the 1240
	   container. DOM order is quote, attribution, portrait; grid places the
	   portrait in its own column spanning both text rows without reordering
	   anything, so the reading order the base pattern established is kept. */
	.infinitus-section--lens-testimonial.infinitus-section--solutions-testimonial-band
		.infinitus-testimonial-card__figure {
		align-items: start;
		column-gap: 137px;
		display: grid;
		grid-template-columns: minmax(0, 816px) 287px;
		grid-template-rows: auto auto;
	}

	.infinitus-section--lens-testimonial.infinitus-section--solutions-testimonial-band
		.infinitus-testimonial-card__quote {
		grid-column: 1;
		grid-row: 1;
	}

	.infinitus-section--lens-testimonial.infinitus-section--solutions-testimonial-band
		.infinitus-testimonial-card__details {
		grid-column: 1;
		grid-row: 2;
	}

	.infinitus-section--lens-testimonial.infinitus-section--solutions-testimonial-band
		.infinitus-testimonial-card__media {
		align-self: start;
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

/* Customer logo (BugHerd 535295 #83).
 *
 * The base band draws the slot 192x21 — a bare wordmark's proportions. This
 * asset is the 1-colour white lockup WITH the tagline, 838x148 (5.66:1), so at
 * 21px tall "WHERE CLARITY BEGINS" resolves to about 3px and is unreadable.
 * Sized off the tagline instead: 40px of lockup puts the tagline near 7px,
 * which is the smallest it reads at. Width follows from the ratio rather than
 * being capped, so the aspect is the asset's own. */
.infinitus-section--lens-testimonial.infinitus-section--solutions-testimonial-band
	.infinitus-testimonial-card__logo {
	height: 40px;
	width: auto;
}

@media (min-width: 1025px) {
	/* The figure is a 2x2 grid above (quote, attribution | portrait spanning
	   both rows). The logo is a third text-column row — without an explicit
	   placement it auto-flows into the next free cell, which is the column the
	   portrait occupies. */
	.infinitus-section--lens-testimonial.infinitus-section--solutions-testimonial-band
		.infinitus-testimonial-card__logo {
		grid-column: 1;
		grid-row: 3;
	}
}