/**
 * Feature Cards style: Photo Cards
 *
 * The pair, the scrim, the watermark, the sunray, the ghost button and the callout hover are
 * all .card.feature's, and .card.feature is live outside this module — so this file only holds
 * what the module does differently at its breakpoints. The cards carry .callout, so the hover is
 * the one the story detail draws.
 */

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem/16)) {

	/* The body is a hover reveal, and a touch device has no hover — so the global rule stands it
	   permanently open there instead. From here down the comp does without it either way. Held
	   collapsed rather than removed, so it stays in the card's accessible name. */
	.module.feature-cards.style-feature .card.feature .description,
	.module.feature-cards.style-feature .card.feature:is(:hover, :focus-within) .description {
		grid-template-rows: 0fr;
		margin-top: 0;
		opacity: 0;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ 651-950 - Tablet Sizes, the pair side by side */
/***************************************************************************************************************************************************************************************/

/* Bounded, unlike everything else in the ladder, because this is about two cards being beside
   each other. Above 950 the headings run to a similar depth and the bottom-set block reads as one
   line off the foot of both photographs. Here one heading takes a line the other does not, and
   bottom-setting starts that card's copy higher than its neighbour's for no reason a reader can
   see — so the content fills the card, both headings start on the padding, and the button keeps
   the foot. What differs between the two falls in the gap between the copy and its button, which
   is empty, rather than above the copy, which is where it shows. Below 651 the cards stack and
   there is no neighbour to line up with, so the copy goes back to sitting on the foot of its own
   photograph rather than floating a card's height above its button. */
@media only screen and (min-width: calc(651rem/16)) and (max-width: calc(950rem/16)) {

	.module.feature-cards.style-feature .card.feature .content {
		flex: 1;
		justify-content: flex-start;
	}

	.module.feature-cards.style-feature .card.feature .content > .btn {
		margin-top: auto;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem/16)) {

	/* The pill is a step closer to the copy it labels than the copy is to its button. Taken off the
	   pill rather than out of the content's gap, which sets both steps. */
	.module.feature-cards.style-feature .card.feature .content > .pill {
		margin-bottom: calc(var(--text-spacing-small) - var(--text-spacing-medium));
	}

}