/**
 * 3MW Media Kit - Frontend Styles
 *
 * Archive card CTA buttons, white card backgrounds, and gated-content modal
 * (styled to match the child theme's HCP popup).
 * Hand-authored source served directly (no build step in this plugin).
 */

/* White card backgrounds on the Media Kit grid. Scoped selectors + the column
   wrapper to win over the grid's default nested background. Body included so no
   grey shows through the card padding. */
.card.card--media_kit,
.dynamic-archive-grid-wrapper article.card--media_kit .card-body,
.column-card:has(.card--media_kit) {
	background-color: var(--color-white);
}

/* Equal-height cards across a grid row: the grid row stretches its columns, so
   make the column a flex container and the card fill it. This gives the card
   body a full height to distribute, so the CTA buttons can pin to the bottom. */
.row.archive-grid-row > [class*="col-"]:has(.card--media_kit) {
	display: flex;
}

.card--media_kit {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}

.card--media_kit .card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* Excerpt above buttons: give the excerpt a lower order and push buttons last.
   Override the theme's 3-line clamp so the FULL excerpt/body shows. */
.card--media_kit.card .card-excerpt {
	order: 1;
	display: block;
	-webkit-line-clamp: none;
	max-height: none;
	overflow: visible;
}

/* margin-top:auto pushes the button group to the bottom of the card body so
   button rows line up across a row of cards. */
.card--media_kit.card .media-kit-card__buttons {
	order: 2;
	margin-top: auto;
	padding-top: var(--space-md);
}

/* CTA button group rendered by templates/card.php (1-2 buttons). */
.media-kit-card__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.media-kit-card__buttons .btn {
	flex: 1 1 auto;
	text-align: center;
}

/* ---------------------------------------------------------------------------
   Gated content modal - matches the child theme HCP popup styling.
   --------------------------------------------------------------------------- */
.media-kit-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	background-color: rgb(0 0 0 / 55%);
	padding: var(--space-md);
}

.media-kit-modal.is-open {
	display: flex;
}

.media-kit-modal__dialog {
	position: relative;
	background-color: var(--color-white);
	border-radius: var(--radius-card);
	box-shadow: 0 8px 32px rgb(0 0 0 / 18%);
	max-width: 620px;
	width: 100%;
	max-height: 90vh;

	/* Scrolling belongs to __scroll below. A rounded box that is also the
	 * scroll container paints its scrollbar in the border box and squares off
	 * the corners on that edge, so the radius and the overflow must stay on
	 * separate elements. `hidden` also clips the inner wrapper to the radius. */
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.media-kit-modal__scroll {
	overflow-y: auto;
	overscroll-behavior: contain;

	/* Padding moved off __dialog so the scrollbar tracks the full inner height
	 * rather than floating inside a padded box. */
	padding: var(--space-xl) var(--space-lg);
}

.media-kit-modal__close {
	position: absolute;
	top: var(--space-sm);
	right: var(--space-sm);

	/* Stays above the scrolling wrapper so it remains clickable as content
	 * passes underneath. */
	z-index: 1;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-size: var(--font-size-lead);
	line-height: 1;
	color: var(--color-text-primary);
}

.media-kit-modal__content {
	margin-bottom: var(--space-md);
}

/* Prevent body scroll when the modal is open (mirrors .hcp-popup-active). */
body.media-kit-modal-active {
	overflow: hidden;
}