/*
 * BFUSA Animal Adoptions - front-end grid + popup.
 *
 * The card is modelled on the light "single-card__free_white" card used on
 * bornfreeusa.org/more-ways-to-give/. Every value below was measured off that
 * page rather than eyeballed:
 *
 *   card       #fff, radius 4px, box-shadow 0 0 4px #545451, overflow hidden
 *   card:hover box-shadow 0 8px 16px rgba(0,0,0,.2)
 *   media      210px tall, background-size cover
 *   content    padding 0 25px, title padding-top 20px, desc padding-top 8px
 *   title      20px, line-height normal, #1d1d1b
 *   desc       16px, line-height 1.4, #353638
 *   button     transparent, 2px solid #1d1d1b, radius 0, 10px 30px, uppercase,
 *              16px/600, and a fill that wipes in over .4s cubic-bezier(.42,0,.58,1)
 *
 * Type is deliberately inherited rather than declared: the theme serves
 * futura-pt from Typekit, and hardcoding it here would either duplicate a
 * licensed font or fall back to the wrong one when Push10's build lands.
 */

.bfusa-adoptions {
	/* Brand. Gold matches .button--yellow and the active state on the client's
	   current donation form; #f59f1a is that button's hover. */
	--bfusa-accent: #f1c205;
	--bfusa-accent-hover: #f59f1a;
	--bfusa-ink: #1d1d1b;
	--bfusa-body-text: #353638;
	--bfusa-card-bg: #fff;
	--bfusa-focus: #569fd3;

	--bfusa-gap: 20px;
	--bfusa-radius: 4px;
	--bfusa-shadow: 0 0 4px #545451;
	--bfusa-shadow-hover: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
	--bfusa-media-height: 210px;
	--bfusa-pad: 25px;
	--bfusa-ease: cubic-bezier(0.42, 0, 0.58, 1);

	/* How far the photo pushes past its frame on hover. The theme's own rule
	   asks for 1.2, but see the note on .bfusa-card:hover .bfusa-card__img. */
	--bfusa-zoom: 1.08;

	/* The floor that stops a card from becoming a sliver. The old
	   `repeat(3, 1fr)` had no floor, so a single card in a narrow content
	   column rendered ~124px wide and several hundred tall. auto-fill keeps
	   the empty tracks, so one card stays card-sized instead of stretching to
	   the full width the way auto-fit would. */
	--bfusa-card-min: 16rem;

	display: grid;
	gap: var(--bfusa-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--bfusa-card-min)), 1fr));
	margin: 1.5rem 0;
}

/* The column setting now sets the card's minimum width rather than a hard
   track count, so the grid lands on the requested number of columns at the
   width that setting implies and sheds columns on its own below it. No media
   queries needed, and no configuration can produce a sliver. */
.bfusa-adoptions--cols-1 { --bfusa-card-min: 100%; }
.bfusa-adoptions--cols-2 { --bfusa-card-min: 22rem; }
.bfusa-adoptions--cols-3 { --bfusa-card-min: 16rem; }
.bfusa-adoptions--cols-4 { --bfusa-card-min: 13rem; }
.bfusa-adoptions--cols-5 { --bfusa-card-min: 11rem; }
.bfusa-adoptions--cols-6 { --bfusa-card-min: 9.5rem; }

.bfusa-card {
	display: flex;
	flex-direction: column;
	background: var(--bfusa-card-bg);
	border-radius: var(--bfusa-radius);
	box-shadow: var(--bfusa-shadow);
	overflow: hidden;
	color: var(--bfusa-ink);
	transition: box-shadow 0.3s var(--bfusa-ease);
}

.bfusa-card:hover {
	box-shadow: var(--bfusa-shadow-hover);
}

.bfusa-card__media {
	height: var(--bfusa-media-height);
	overflow: hidden;
	flex: 0 0 auto;
}

.bfusa-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--bfusa-ease);
}

/*
 * The photo zoom.
 *
 * Worth knowing: this does not currently happen on bornfreeusa.org. The theme
 * ships `.single-card__free:hover .post-box__image__inner { transform: scale(1.2) }`
 * and then immediately overrides it with an identical selector setting
 * `transform: none`. Confirmed by hovering a live card and reading the computed
 * transform, which comes back as the identity matrix. So the effect was
 * designed, shipped dead, and never seen. Rebuilding it here is a deliberate
 * choice, not a match - dial --bfusa-zoom to 1 to drop it.
 */
.bfusa-card:hover .bfusa-card__img {
	transform: scale(var(--bfusa-zoom));
}

.bfusa-card__body {
	display: flex;
	flex-direction: column;
	padding: 20px var(--bfusa-pad) var(--bfusa-pad);
	flex: 1 1 auto;
}

.bfusa-card__title {
	margin: 0;
	padding: 0 0 0.5rem;
	font-size: 20px;
	line-height: normal;
	color: var(--bfusa-ink);
}

.bfusa-card__desc {
	margin: 0 0 0.5rem;
	padding-top: 8px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--bfusa-body-text);
	/* Pushes the button to the bottom so buttons line up across a row whose
	   descriptions differ in length. The client writes these, so they will. */
	flex: 1 1 auto;
}

/*
 * The button and its wipe.
 *
 * The theme animates a `:before` from width 0 to 100%, anchored right then
 * left. Same visual here with a background-size transition instead, which
 * needs no pseudo-element stacking and so can't be clipped by a card that
 * sets its own overflow or z-index.
 */
.bfusa-card__btn {
	display: block;
	width: 100%;
	margin-top: auto;
	padding: 10px 30px;
	border: 2px solid var(--bfusa-ink);
	border-radius: 0;
	background-color: transparent;
	background-image: linear-gradient(to right, var(--bfusa-ink), var(--bfusa-ink));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	color: var(--bfusa-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-size 0.4s var(--bfusa-ease), color 0.4s var(--bfusa-ease);
}

.bfusa-card__btn:hover,
.bfusa-card__btn:focus-visible,
a.bfusa-card__btn:hover,
a.bfusa-card__btn:focus-visible {
	background-size: 100% 100%;
	color: #fff;
	text-decoration: none;
}

.bfusa-card__btn:focus-visible {
	outline: 3px solid var(--bfusa-focus);
	outline-offset: 2px;
}

/* Hovering anywhere on the card fills the button, which is what makes the
   whole card feel clickable rather than just its bottom 40 pixels. */
.bfusa-card:hover .bfusa-card__btn {
	background-size: 100% 100%;
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.bfusa-card,
	.bfusa-card__img,
	.bfusa-card__btn,
	.bfusa-modal__backdrop,
	.bfusa-modal__dialog {
		transition: none;
	}

	.bfusa-card:hover .bfusa-card__img {
		transform: none;
	}

	/* The dialog still has to arrive; it just arrives instantly. JS drops its
	   close delay to zero to match. */
	.bfusa-modal__dialog {
		transform: none;
	}
}

/* ---------------------------------------------------------------- Popup -- */

.bfusa-modal[hidden] {
	display: none;
}

.bfusa-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;

	--bfusa-focus: #569fd3;
	--bfusa-ink: #1d1d1b;
	--bfusa-body-text: #353638;
	--bfusa-ease: cubic-bezier(0.42, 0, 0.58, 1);

	/* Lifted from the Popup Maker lightbox on bornfreeusa.org's homepage, so
	   the adoption popup reads as the same furniture as the one people
	   already meet there. Measured on #popmake-24519. */
	--bfusa-modal-border: 8px solid #000;
	--bfusa-modal-radius: 3px;
	--bfusa-modal-shadow: 0 0 30px 0 #020202;
	--bfusa-modal-overlay: rgba(0, 0, 0, 0.36);
	/* The theme's own light-panel colour: #f5f5f5 is used 18 times across
	   app.css, more than any other off-white, so the panel reads as part of
	   the site rather than a shade invented for this popup. */
	--bfusa-aside-bg: #f5f5f5;
	--bfusa-close-bg: #000;
	--bfusa-close-fg: #fff;
}

.bfusa-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--bfusa-modal-overlay);
	opacity: 0;
	transition: opacity 0.18s ease-out;
}

/*
 * Open and close.
 *
 * The dialog lifts a few pixels and settles rather than sliding any real
 * distance - at this speed anything larger reads as sluggish. JS adds
 * .is-open a frame after unhiding, and holds the element in the DOM for the
 * duration below before hiding it again. Keep 0.18s in step with MOTION_MS
 * in frontend.js.
 */
.bfusa-modal.is-open .bfusa-modal__backdrop {
	opacity: 1;
}

/*
 * Two columns: the animal on the left, the form on the right.
 *
 * The height is capped rather than left to the content because an iframe can't
 * report the height of a cross-origin page, and sizing to the form would need
 * a postMessage handshake on every EN page. Only the two columns scroll, never
 * the dialog, so there is never a scrollbar inside a scrollbar.
 */
.bfusa-modal__dialog {
	position: relative;
	z-index: 1;
	display: grid;
	/* Even halves, replacing the fixed 20rem left column.
	   Two equal fr rather than two literal 50% tracks: percentages resolve
	   against the container before the gap is subtracted, so 50% + 50% + gap
	   overflows by exactly the gap. minmax(0, …) rather than a bare 1fr so a
	   long unbroken word in the bio can't push its column past half. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	/* No gap: the columns carry their own padding and the left one has its own
	   background, so a gutter would put a white stripe down the middle of what
	   should read as two solid halves. */
	gap: 0;
	/* Themes don't all set border-box, and without it the border is added to
	   the height cap, which pushes the dialog past the viewport. */
	box-sizing: border-box;
	width: 100%;
	max-width: 64rem;
	height: min(90vh, 52rem);
	height: min(90dvh, 52rem);
	/* Visible, not hidden: the close button straddles the top-right corner and
	   would be clipped otherwise. Each column clips its own overflow instead. */
	overflow: visible;
	background: #fff;
	border: var(--bfusa-modal-border);
	border-radius: var(--bfusa-modal-radius);
	box-shadow: var(--bfusa-modal-shadow);
	opacity: 0;
	transform: translateY(8px) scale(0.985);
	transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

.bfusa-modal.is-open .bfusa-modal__dialog {
	opacity: 1;
	transform: none;
}

/* Straddles the top-right corner: 26px wide, offset by half that, so the
   circle sits centred on the corner of the black border. Same as the homepage
   popup, down to the white ring that keeps it legible against a dark photo. */
.bfusa-modal__close {
	position: absolute;
	top: -13px;
	right: -13px;
	z-index: 2;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 2px solid var(--bfusa-close-fg);
	border-radius: 26px;
	background: var(--bfusa-close-bg);
	color: var(--bfusa-close-fg);
	box-shadow: 0 0 15px 1px rgba(2, 2, 2, 0.75);
	/* Centring the glyph with line-height doesn't work here: the content box is
	   22px once the 2px ring is subtracted, so a 24px line-height pushes the ×
	   below centre. Flex centring measures the glyph itself instead. */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.bfusa-modal__close:focus-visible {
	outline: 3px solid var(--bfusa-focus);
	outline-offset: 2px;
}

/* The left column scrolls as a unit. The description used to carry its own
   11rem cap and its own scrollbar; with the bio in a column of its own that
   cap is no longer earning anything. */
.bfusa-modal__aside {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 1.5rem;
	background: var(--bfusa-aside-bg);
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Casts a faint shadow onto the form column so the panel reads as sitting
	   above it. z-index is what makes it visible: without a stacking order the
	   form column paints over the shadow. */
	position: relative;
	z-index: 1;
	box-shadow: 4px 0 10px -2px rgba(0, 0, 0, 0.12);
}

.bfusa-modal__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 4px;
	margin-bottom: 1rem;
	flex: 0 0 auto;
}

.bfusa-modal__img[hidden] {
	display: none;
}

/*
 * Type in the popup is inherited, not declared.
 *
 * The heading is a real h2, so it picks up whatever the host theme sizes an h2
 * at - 30px/42px futura-pt at weight 600 on bornfreeusa.org, matching the
 * homepage lightbox. The body copy inherits the theme's paragraph metrics the
 * same way. Declaring sizes here would have locked the popup to the current
 * theme's scale and broken the match the moment Push10's build lands.
 */
.bfusa-modal__title {
	margin: 0 0 0.5rem;
	color: var(--bfusa-ink);
	flex: 0 0 auto;
}

/* The long description is built from text nodes, so line breaks the client
   typed in the admin field survive only if the CSS honours them. Without this,
   a bio and its stats collapse into one run-on paragraph. */
.bfusa-modal__desc {
	margin: 0;
	white-space: pre-line;
	color: var(--bfusa-body-text);
	flex: 0 1 auto;
}

/* No padding: the EN template already insets its own content by 1.5rem, so
   adding more here would double it and cost the form width it needs. */
.bfusa-modal__frame {
	position: relative;
	min-height: 0;
	width: 100%;
	overflow: hidden;
}

.bfusa-modal__iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* The EN page sits behind Cloudflare, so first paint can lag a beat. Hide the
   blank frame until it loads rather than showing an empty white box. */
.bfusa-modal__loading {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	margin: 0;
	text-align: center;
	color: var(--bfusa-ink);
}

.bfusa-modal.is-loading .bfusa-modal__loading {
	display: flex;
}

.bfusa-modal.is-loading .bfusa-modal__iframe {
	visibility: hidden;
}

body.bfusa-modal-open {
	overflow: hidden;
}

/* ------------------------------------------------- Form-fills-the-popup -- */

/*
 * One column, all of it the form.
 *
 * The client's own Engaging Networks pages already show the photo, the bio and
 * the stat block beside the fields, so the plugin's panel is dropped and the
 * iframe takes the whole dialog. The panel markup isn't rendered at all in this
 * mode, so there is nothing here to hide - only the track count to change.
 *
 * Width matters more than it looks: those pages go two-column at min-width 900px
 * and stack below it. The 64rem cap leaves 1008px of iframe once the 8px border
 * on each side is subtracted, so the form lands in its wide layout on any
 * viewport past roughly 932px and stacks gracefully under that.
 */
.bfusa-modal--full .bfusa-modal__dialog {
	grid-template-columns: minmax(0, 1fr);
	/* No overflow declaration on purpose. The dialog stays visible so the close
	   button can straddle the corner; the frame clips its own iframe, and any
	   scrolling happens inside the form's own page. */
}

/* Visually hidden, still read aloud. Defined here rather than borrowing the
   theme's .screen-reader-text so the dialog keeps its accessible name whatever
   Push10's build ships. */
.bfusa-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Below this the two columns don't both fit, so stack them and let the whole
   dialog scroll: the form is the thing people came for, and a 20rem column
   squeezed to 8rem serves nobody. */
@media (max-width: 860px) {
	/*
	 * Both rows size to their content and the dialog is what scrolls.
	 *
	 * The previous `auto minmax(24rem, 1fr)` overlapped badly on a phone: the
	 * dialog height is fixed at 100dvh, the fr row claimed its 24rem minimum,
	 * and the auto row was compressed to what was left. The aside is
	 * overflow: visible with a z-index above the form, so its bio spilled
	 * straight over the amount buttons instead of being clipped or scrolled.
	 * Caught at 375px; invisible at every width above 860.
	 */
	.bfusa-modal__dialog {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		overflow-y: auto;
	}

	/* A definite height, because the iframe inside is height: 100% and would
	   collapse against an auto-sized row. */
	.bfusa-modal__frame {
		height: min(32rem, 80vh);
	}

	/* Stacked, the dialog is what scrolls, which means it also clips. Bring
	   the close button inside the border so it can't be cut off. */
	.bfusa-modal__close {
		top: 8px;
		right: 8px;
	}

	.bfusa-modal__aside {
		overflow: visible;
		padding: 1rem;
		/* Undoes the min-height: 0 the desktop rule needs.
		   That zero removes the automatic minimum on this grid row, so with a
		   fixed-height dialog the row was handed whatever the form row didn't
		   want - 238px for 512px of bio - and overflow: visible painted the
		   difference straight over the amount buttons. `auto` restores the
		   min-content floor, the rows add up past the dialog, and the dialog
		   scrolls, which is what it is set up to do. */
		min-height: auto;
		/* Stacked, the form is below rather than beside, so the shadow moves
		   with it. */
		box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.12);
	}

	/* Stacked, the photo is above the form rather than beside it, so every
	   pixel it takes is a pixel the form loses on the first screen. Measured
	   at 800px wide it was rendering 405px tall, which pushed the amount
	   fields below the fold before the donor had done anything. */
	.bfusa-modal__img {
		aspect-ratio: auto;
		height: 10rem;
	}
}

/*
 * Narrow, with the form filling the popup.
 *
 * The stacking rules above exist to keep a 20rem panel from being squeezed to
 * nothing, and there is no panel here - so undo them. The frame fills the
 * dialog at every width and the form's own page is what scrolls, which is also
 * what stops the dialog and the frame from both growing a scrollbar. Measured:
 * the Presley page is 1207px tall at 375px wide, so it will scroll on a phone
 * however the dialog is sized.
 */
@media (max-width: 860px) {
	.bfusa-modal--full .bfusa-modal__dialog {
		grid-template-rows: minmax(0, 1fr);
		overflow: hidden;
	}

	.bfusa-modal--full .bfusa-modal__frame {
		height: 100%;
	}
}

/* Full-screen on phones: a centered card wastes space a long form needs. */
@media (max-width: 600px) {
	.bfusa-modal {
		padding: 0;
	}

	.bfusa-modal__dialog {
		max-width: none;
		height: 100vh;
		height: 100dvh;
		border-radius: 0;
		/* Full-bleed on a phone, so the heavy border is just lost screen
		   width. The overlay isn't visible behind it either way. */
		border-width: 0;
	}
}