/**
 * Home quote card (interim).
 *
 * The same rules that live in the refreshed theme's global.css, carried here
 * because this install is still on the pre-refresh build -- its global.css is
 * 18KB against the refresh's 79KB, so copying that file would ship a great
 * deal of unrelated, unshipped work. Delete this stylesheet and its enqueue in
 * wp-content/mu-plugins/wyp-stories-hero-interim.php once global.css ships.
 *
 * One addition over the theme copy: the refresh's global.css carries
 *
 *     body.home .wp-block-quote:has(.wp-block-image) { margin-left: 0 !important }
 *
 * which left-aligns the quote beside the card, and every desktop offset below
 * is measured from that. This install has no such rule, so the blockquote
 * would centre in its column and the geometry would sit ~52px to the right.
 * It is restated here, scoped to this card, so the file stands on its own. The
 * same goes for the `p strong` reset that keeps the quote in Pitch.
 *
 * @package ashp-wyp
 */

/* The quote copy is wrapped in <strong>, and the base `p strong` rule puts
   that in Eina Bold. The refresh's global.css undoes it so the quote keeps
   Pitch; this install has no such rule, so it is restated here. */
body.home .wp-block-group .wp-block-quote:has(.wyp-card-flat) p strong {
	font-family: inherit;
	font-weight: inherit;
}

/* Restates the refresh's left-align, scoped to this card only. Everything the
   desktop block below positions is measured from the blockquote's edge. */
@media (width >= 1200px) {
	body.home .wp-block-group .wp-block-quote:has(.wyp-card-flat) {
		margin-inline-start: 0 !important;
		margin-left: 0 !important;
		margin-inline-end: auto;
	}
}

/* This card ships from Figma with the 5deg tilt and orange gradient already
	 baked into the PNG, so is-style-card must not apply them a second time.
	 The export is the rotated card's bounding box (668x850), so the box has to
	 keep that ratio or object-fit: cover crops the corners off. */
.wp-block-image.is-style-card.wyp-card-flat {
	  width: 333.72px;
	  height: 424.62px;
	  transform: none;
	  clip-path: none;
}

.wp-block-image.is-style-card.wyp-card-flat:after {
	  content: none;
}

/* Type is per the Figma text node and is the same at every width -- the
	 inherited 1.5em quote size is far too large against a 333px card.

	 Selectors are deliberately long: the Customizer's "home card" block styles
	 .home .wp-block-quote:has(.wp-block-image) at (0,3,1)/(0,4,0) and loads
	 after this file, so matching its specificity would lose the tie. Those
	 rules were written for the tilted card and still own every other quote. */
.home .wp-block-group .wp-block-quote:has(.wyp-card-flat) p {
	  font-size: 16px;
	  line-height: 1.2;
	  letter-spacing: -0.02em;
	  text-align: center;
}

/* Geometry from the Figma "Left Module" frame, which is 720 wide -- exactly
	 half of the 1440 artboard, so at that viewport these land 1:1 on the design.
	 Offsets are absolute because the figure's containing block is the 431px
	 blockquote: a percentage would cap at 431 - 300 = 131px.

	 The one departure is the lockup's top: the frame puts it at 240, which is
	 74 from the blockquote, and it sits 9px higher by eye. */
@media (width >= 1200px) {
	  .home .wp-block-quote:has(.wyp-card-flat) .wp-block-image.wyp-card-flat {
		  margin-top: -112px;
		  margin-left: 290.41px;
	  }

	  .home .wp-block-group .wp-block-quote:has(.wyp-card-flat) p {
		  top: 65px;
		  bottom: auto;
		  left: 15px;
		  width: 228px;
		  max-width: none;
	  }

	  /* Quote mark stays flush left while the copy centres under it. */
	  .home .wp-block-group .wp-block-quote:has(.wyp-card-flat) p:before {
		  margin-bottom: 13px;
	  }

	  /* The Figma row is 550 tall; the shared column padding (123px top and
		 bottom) makes it 644.62. The top stays -- 123 + the blockquote's 43px
		 margin - the card's 112px pull is exactly the 54px the design has above
		 the card -- so only the foot is over. 28.38 + that same 43px margin
		 gives the design's 71.38 below the card, landing the row on 550.
		 Scoped by :has() so the site-wide column padding is left alone. */
	  .home .wp-block-columns:has(.wyp-card-flat) .wp-block-column:first-child > .wp-block-group {
		  padding-bottom: 28.38px;
	  }
}

/* Narrower than the design's only artboard, the column cannot hold the copy
	 beside the card, and the Customizer's bottom-anchored placement lands it
	 across her face. Dropping out of absolute positioning puts it back in flow
	 under the card, which the blockquote's flex column already centres. */
@media (width < 1200px) {
	  /* Relative rather than static: the card is position: relative, so an
		 in-flow sibling paints underneath it and the overlap would swallow the
		 quote mark -- z-index only bites on a positioned element. The offsets
		 are zeroed because the rules this drops out of leave top/bottom/left
		 behind, and relative would consume them. */
	  .home .wp-block-group .wp-block-quote:has(.wyp-card-flat) p {
		  position: relative;
		  top: auto;
		  bottom: auto;
		  left: auto;
		  z-index: 9;
		  width: auto;
		  max-width: 334px;
		  margin-top: -24px;
	  }

	  .home .wp-block-group .wp-block-quote:has(.wyp-card-flat) p:before {
		  margin-left: auto;
	  }

	  /* Stacked, the lockup should centre in the panel. Two things pull it left:
		 the home-page rule above zeroes the blockquote's start margin so the
		 quote lines up with the eyebrow in the side-by-side layout, and the base
		 rule gives the figure margin-left: auto, which shoves it to the
		 blockquote's right edge. Neither applies once the columns stack. */
	  body.home .wp-block-group .wp-block-quote:has(.wyp-card-flat) {
		  margin-inline-start: auto !important;
		  margin-left: auto !important;
		  margin-inline-end: auto;
	  }

	  body.home .wp-block-quote:has(.wyp-card-flat) .wp-block-image.wyp-card-flat {
		  margin-left: auto;
		  margin-right: auto;
	  }
}

/* Same imbalance as the desktop row, one breakpoint down: the shared 123px
	 foot plus the blockquote's 43px margin left 166px under the copy against
	 66px above the card. 23 + 43 evens it up. The stacked layout below 782px
	 already sits at 103/123, so it keeps its own padding. */
@media (782px <= width < 1200px) {
	  .home .wp-block-columns:has(.wyp-card-flat) .wp-block-column:first-child > .wp-block-group {
		  padding-bottom: 23px;
	  }
}