/*
 * Detroit Alley Cats -- Cats: card, grid, filter and cat page styles.
 *
 * Class names follow the homepage redesign (cat-card and its elements). Values read the
 * redesign's ACSS token names with fallbacks, so the current theme uses the fallbacks and
 * the redesign's tokens replace them with no change here. Every selector is wrapped in
 * :where(), which gives it no specificity, so theme and Bricks classes override it.
 * Sizes assume 1rem = 10px, as in both the Balance theme and the redesign.
 */

/* Grid */
:where(.cat-grid) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
	gap: var(--grid-gap, 2.8rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.cat-grid__none, .cat-grid__empty) {
	margin: var(--space-m, 1.6rem) 0;
	font-size: var(--text-l, 1.6rem);
}

:where(.cat-grid__empty) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-s, 1.2rem);
}

:where(.cat-grid__empty p) { margin: 0; }

:where(.cat-grid__empty[hidden], .cat-filters[hidden]) { display: none; }

/* Card: the redesign's "Meet a few of our cats" card */
:where(.cat-card) {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	border: 1px solid var(--neutral-medium, #d6d3cd);
	border-radius: var(--radius, 0);
	background: var(--white, #ffffff);
	overflow: hidden;
}

:where(.cat-card)::before { content: none; }

:where(.cat-card[hidden]) { display: none; }

:where(.cat-card__photo) {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--neutral-light, #e9e7e3);
}

:where(.cat-card__photo--empty) {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--base-semi-light, #595959);
	font-size: var(--text-xs, 1.3rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

:where(.cat-card__body) {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: var(--space-xs, 0.8rem);
	padding: var(--content-gap, 2rem);
}

:where(.cat-card__badge) {
	align-self: flex-start;
	margin: 0;
	padding: var(--space-xxs, 0.4rem) var(--space-xs, 0.8rem);
	background: var(--primary, #0d0d0d);
	color: var(--white, #ffffff);
	font-size: var(--text-xs, 1.3rem);
	font-weight: 600;
	line-height: 1.4;
}

:where(.cat-card__badge--adopted, .cat-card__badge--status) {
	background: var(--white, #ffffff);
	color: var(--primary, #0d0d0d);
	box-shadow: inset 0 0 0 var(--btn-border-width, 0.15rem) currentColor;
}

:where(.cat-card__name) {
	margin: 0;
	font-family: var(--heading-font-family, inherit);
	font-size: var(--h5, 2.4rem);
	font-weight: var(--heading-font-weight, 400);
	line-height: var(--heading-line-height, 1.15);
}

/* Name with the age beside it; also used by the featured cat. */
:where(.cat-card__heading) {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--space-xs, 0.8rem);
}

:where(.cat-card__age) {
	color: var(--base-semi-dark, #333333);
	font-family: var(--text-font-family, inherit);
	font-size: var(--text-l, 1.6rem);
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
}

/* Keywords on the card, the featured cat and the cat page */
:where(.cat-keywords) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xxs, 0.4rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.cat-keywords[hidden]) { display: none; }

:where(.cat-keywords__item) {
	margin: 0;
	padding: var(--space-xxs, 0.4rem) var(--space-xs, 0.8rem);
	background: var(--neutral-light, #e9e7e3);
	color: var(--base, #1a1a1a);
	font-size: var(--text-xs, 1.3rem);
	font-weight: 500;
	line-height: 1.4;
}

:where(.cat-card__meta) {
	margin: 0;
	color: var(--base-semi-dark, #333333);
	font-size: var(--text-s, 1.4rem);
	font-weight: 500;
}

:where(.cat-card__text) {
	margin: 0;
	color: var(--base-medium, #4d4d4d);
	font-size: var(--text-m, 1.5rem);
	line-height: 1.5;
}

:where(.cat-card__link) { margin-top: auto; }

/* The Meet link covers its whole card, so a click anywhere on the card opens the cat's page. */
:where(.cat-card__link, .featured-cat__link)::after {
	content: "";
	position: absolute;
	inset: 0;
}

:where(.cat-card:hover .cat-card__name, .featured-cat:hover .featured-cat__name) { text-decoration: underline; }

/* Redesign link and button patterns, used inside the plugin's own markup only */
:where(.cat-listing, .cat-profile, .cat-profile__back, .featured-cat, .adopt-page) :where(.arrow-link) {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs, 0.8rem);
	min-height: var(--target-s, 4.4rem);
	color: var(--base-dark, #111111);
	font-size: var(--text-m, 1.5rem);
	font-weight: 600;
}

:where(.cat-listing, .cat-profile, .featured-cat, .adopt-page) :where(.btn--primary) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--btn-min-height, 4.8rem);
	padding-inline: var(--btn-padding-inline, 2.4rem);
	border: var(--btn-border-width, 0.15rem) solid var(--primary, #0d0d0d);
	border-radius: var(--radius, 0);
	background: var(--primary, #0d0d0d);
	color: var(--white, #ffffff);
	font: inherit;
	font-size: var(--btn-font-size, 1.5rem);
	font-weight: var(--btn-font-weight, 600);
	text-decoration: none;
	cursor: pointer;
}

:where(.cat-listing, .cat-profile, .featured-cat, .adopt-page) :where(.btn--primary:hover, .btn--primary:focus-visible) {
	background: var(--primary-hover, #333333);
	color: var(--white, #ffffff);
}

:where(.cat-listing, .cat-profile, .adopt-page) :where(.btn--primary.btn--outline) {
	background: transparent;
	color: var(--primary, #0d0d0d);
	font-weight: var(--btn-outline-font-weight, 500);
}

:where(.cat-listing, .cat-profile, .adopt-page) :where(.btn--primary.btn--outline:hover, .btn--primary.btn--outline:focus-visible) {
	background: var(--primary, #0d0d0d);
	color: var(--white, #ffffff);
}

/* Filter bar */
:where(.cat-filters) { margin-bottom: 0; }

/* One row: Age, Sex, Bonded pair, with the labels level and the checkboxes centered on the Age field. One column on phones. */
:where(.cat-filters__form) {
	display: grid;
	grid-template-columns: repeat(3, max-content);
	align-items: start;
	gap: var(--space-m, 1.6rem) var(--space-xxl, 4.8rem);
	margin: var(--space-s, 1.2rem) 0 0;
	padding: var(--space-m, 1.6rem);
	border: 1px solid var(--neutral-medium, #d6d3cd);
	background: var(--neutral-ultra-light, #f2f1ee);
}

@media (max-width: 700px) {
	:where(.cat-filters__form) { grid-template-columns: minmax(0, 1fr); }
}

/* "Filter cats" toggle: details/summary around the form */
:where(.cat-filters__panel) { margin-bottom: var(--space-m, 1.6rem); }

:where(.cat-filters__toggle) {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs, 0.8rem);
	min-height: var(--btn-min-height, 4.8rem);
	padding-inline: var(--space-m, 1.6rem);
	border: var(--btn-border-width, 0.15rem) solid var(--primary, #0d0d0d);
	background: var(--white, #ffffff);
	color: var(--primary, #0d0d0d);
	font-size: var(--btn-font-size, 1.5rem);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

:where(.cat-filters__toggle)::-webkit-details-marker { display: none; }

:where(.cat-filters__toggle:hover) { background: var(--primary, #0d0d0d); color: var(--white, #ffffff); }

:where(.cat-filters__active) { font-weight: 500; }

:where(.cat-filters__chevron) { transition: transform 0.2s ease; }

:where(.cat-filters__panel[open] .cat-filters__chevron) { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
	:where(.cat-filters__chevron) { transition: none; }
}

:where(.cat-filters__group) {
	display: flex;
	flex-direction: column;
	gap: var(--space-xxs, 0.4rem);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

:where(fieldset.cat-filters__group) { flex-direction: row; flex-wrap: wrap; gap: var(--space-xxs, 0.4rem) var(--space-m, 1.6rem); }

:where(fieldset.cat-filters__group) :where(.cat-filters__label) { width: 100%; }

:where(.cat-filters__label) {
	margin: 0 0 var(--space-xxs, 0.4rem);
	padding: 0;
	color: var(--base, #1a1a1a);
	font-size: var(--text-s, 1.4rem);
	font-weight: 600;
}

/* A legend ignores the flex gap, so its margin carries the label-to-field space that the Age group gets from margin plus gap. */
:where(fieldset.cat-filters__group) :where(.cat-filters__label) { margin-bottom: var(--space-xs, 0.8rem); }

:where(.cat-filters__option) {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs, 0.8rem);
	min-height: var(--target-s, 4.4rem);
	color: var(--base, #1a1a1a);
	font-size: var(--text-m, 1.5rem);
	cursor: pointer;
}

:where(.cat-filters__option input) {
	width: 2rem;
	height: 2rem;
	margin: 0;
	accent-color: var(--primary, #0d0d0d);
}

:where(.cat-filters__select) {
	min-height: var(--target-s, 4.4rem);
	padding: 0 var(--space-s, 1.2rem);
	border: 1px solid var(--base-medium, #4d4d4d);
	border-radius: var(--radius, 0);
	background: var(--white, #ffffff);
	color: var(--base, #1a1a1a);
	font: inherit;
	font-size: var(--text-m, 1.5rem);
}

:where(.cat-filters__count) {
	margin: 0 0 var(--space-l, 2.4rem);
	color: var(--base-semi-dark, #333333);
	font-size: var(--text-m, 1.5rem);
	font-weight: 500;
}

:where(.cat-filters :focus-visible, .cat-listing :focus-visible, .cat-profile :focus-visible, .featured-cat :focus-visible, .adopt-page :focus-visible) {
	outline: var(--focus-width, 0.3rem) solid var(--focus-color, #0d0d0d);
	outline-offset: var(--focus-offset, 0.3rem);
}

/* Single cat page: photo and details on the left, story on the right */
:where(.cat-profile) {
	display: grid;
	gap: var(--container-gap, 4rem);
	margin-bottom: var(--space-xl, 3.2rem);
}

@media (min-width: 768px) {
	:where(.cat-profile) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
}

:where(.cat-profile__aside) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-s, 1.2rem);
}

:where(.cat-profile__photo) {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

:where(.cat-profile__badges) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs, 0.8rem);
}

:where(.cat-profile__meta) {
	margin: 0;
	color: var(--base-semi-dark, #333333);
	font-size: var(--text-l, 1.6rem);
	font-weight: 500;
}

:where(.cat-profile__notes) {
	margin: 0;
	color: var(--base-medium, #4d4d4d);
	font-size: var(--text-m, 1.5rem);
	line-height: 1.5;
}

/* "Good with" pills use the redesign's chip-list component */
:where(.cat-profile) :where(.chip-list) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs, 0.8rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.cat-profile) :where(.chip-list__item) {
	margin: 0;
	padding: var(--space-xs, 0.8rem) var(--space-s, 1.2rem);
	background: var(--primary, #0d0d0d);
	color: var(--white, #ffffff);
	font-size: var(--text-s, 1.4rem);
	font-weight: 500;
	line-height: 1.2;
}

:where(.cat-profile__apply) { margin-top: var(--space-xs, 0.8rem); }

/* Screen-reader-only text, under the redesign's ACSS class name */
:where(.cat-profile, .featured-cat) :where(.hidden-accessible) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:where(.cat-profile__back) { margin: var(--space-l, 2.4rem) 0 0; }

/* Featured cat: one large card for a random available cat ([featured_cat]) */
:where(.featured-cat) {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--neutral-medium, #d6d3cd);
	background: var(--white, #ffffff);
}

:where(.featured-cat__photo) {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	max-height: 52rem;
	object-fit: contain;
	background: var(--neutral-light, #e9e7e3);
}

/* The whole photo shows, uncropped; a very tall photo is scaled down to fit 52rem. */
:where(.featured-cat__photo.cat-card__photo--empty) { display: flex; aspect-ratio: 4 / 3; }

:where(.featured-cat__body) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs, 0.8rem);
	padding: var(--content-gap, 2rem);
}

:where(.featured-cat [hidden]) { display: none; }

:where(.featured-cat .eyebrow) {
	margin: 0;
	color: var(--base-medium, #4d4d4d);
	font-size: var(--text-xs, 1.3rem);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

:where(.featured-cat__name) {
	margin: 0;
	font-family: var(--heading-font-family, inherit);
	font-size: var(--h4, 2.6rem);
	font-weight: var(--heading-font-weight, 400);
	line-height: var(--heading-line-height, 1.15);
}

:where(.featured-cat__meta) {
	margin: 0;
	color: var(--base-semi-dark, #333333);
	font-size: var(--text-m, 1.5rem);
	font-weight: 500;
}

:where(.featured-cat__text) {
	margin: 0;
	color: var(--base-medium, #4d4d4d);
	font-size: var(--text-l, 1.6rem);
	line-height: 1.55;
}

:where(.featured-cat__actions) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs, 0.8rem) var(--space-l, 2.4rem);
	margin-top: var(--space-xs, 0.8rem);
}

/*
 * Adoptable Cats page sections, as in the redesign's Adoptable Cats page: adoption details
 * beside the featured cat, the cat listing, and the closing apply band. The page content
 * wraps them in .adopt-page. From 768px the featured cat sits to the left of the details.
 */
:where(.adopt-page .intro__grid) {
	display: grid;
	gap: var(--container-gap, 4rem);
	align-items: start;
	margin-bottom: var(--space-xxl, 4.8rem);
}

@media (min-width: 768px) {
	:where(.adopt-page .intro__grid) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-xl, 3.2rem); }
}

:where(.adopt-page .intro__content) { display: flex; flex-direction: column; gap: var(--content-gap, 2rem); }

:where(.adopt-page .intro__actions) { display: flex; flex-wrap: wrap; gap: var(--space-s, 1.2rem); }

:where(.adopt-page .accordion-group) { border-bottom: 1px solid var(--neutral-medium, #d6d3cd); }

:where(.adopt-page .accordion) { margin: 0; border-top: 1px solid var(--neutral-medium, #d6d3cd); }

:where(.adopt-page .accordion__summary) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m, 1.6rem);
	min-height: var(--target-l, 5.2rem);
	padding-block: var(--space-s, 1.2rem);
	font-family: var(--heading-font-family, inherit);
	font-size: var(--h6, 2.2rem);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

:where(.adopt-page .accordion__summary)::-webkit-details-marker { display: none; }

:where(.adopt-page .accordion__summary:hover) { color: var(--base-semi-light, #595959); }

:where(.adopt-page .accordion__chevron) { flex-shrink: 0; transition: transform 0.2s ease; }

:where(.adopt-page .accordion[open] .accordion__chevron) { transform: rotate(180deg); }

:where(.adopt-page .accordion__panel) { display: flex; flex-direction: column; gap: var(--space-s, 1.2rem); padding-bottom: var(--space-l, 2.4rem); }

:where(.adopt-page .accordion__text) { margin: 0; color: var(--base-semi-dark, #333333); font-size: var(--text-l, 1.6rem); line-height: 1.6; }

:where(.adopt-page .accordion__links) { display: flex; flex-wrap: wrap; gap: 0 var(--space-l, 2.4rem); }

@media (prefers-reduced-motion: reduce) {
	:where(.adopt-page .accordion__chevron) { transition: none; }
}

:where(.adopt-page .check-list) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-s, 1.2rem) var(--space-l, 2.4rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* One column on phones, and beside the featured cat until the details column is wide enough. */
@media (max-width: 600px), (min-width: 768px) and (max-width: 1099px) {
	:where(.adopt-page .check-list) { grid-template-columns: minmax(0, 1fr); }
}

:where(.adopt-page .check-list__item) { display: flex; align-items: flex-start; gap: var(--space-xs, 0.8rem); margin: 0; font-size: var(--text-l, 1.6rem); line-height: 1.4; }

:where(.adopt-page .check-list__item svg) { flex-shrink: 0; margin-top: 0.1rem; }

:where(.adopt-page .check-list__item--wide) { grid-column: 1 / -1; }

:where(.adopt-page .price-list) { margin: 0; }

:where(.adopt-page .price-list__row) {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-m, 1.6rem);
	padding-block: var(--space-s, 1.2rem);
	border-bottom: 1px solid var(--neutral-medium, #d6d3cd);
}

:where(.adopt-page .price-list__row:last-child) { padding-bottom: 0; border-bottom: 0; }

:where(.adopt-page .price-list__term) { margin: 0; font-size: var(--text-l, 1.6rem); font-weight: 500; }

:where(.adopt-page .price-list__note) { display: block; color: var(--base-medium, #4d4d4d); font-size: var(--text-s, 1.4rem); font-weight: 400; }

:where(.adopt-page .price-list__price) { margin: 0; font-family: var(--heading-font-family, inherit); font-size: var(--h6, 2.2rem); white-space: nowrap; }

/* Listing: the "Filter cats" toggle sits level with the heading, on the right; phones keep it in the flow. */
:where(.adopt-page .listing) { position: relative; padding-top: var(--space-xxl, 4.8rem); border-top: 1px solid var(--neutral-medium, #d6d3cd); }

:where(.adopt-page .listing__header) { margin-bottom: var(--space-l, 2.4rem); }

:where(.adopt-page .section-heading) { margin: 0 0 var(--space-xs, 0.8rem); font-family: var(--heading-font-family, inherit); font-size: var(--h3, 3.2rem); font-weight: var(--heading-font-weight, 400); }

:where(.adopt-page .section-intro) { margin: 0; color: var(--base-medium, #4d4d4d); font-size: var(--text-xl, 1.7rem); line-height: 1.6; }

@media (min-width: 601px) {
	:where(.adopt-page .listing__header) { padding-right: 20rem; }
	:where(.adopt-page .listing .cat-filters__toggle) { position: absolute; top: var(--space-xxl, 4.8rem); right: 0; }
	:where(.adopt-page .listing .cat-filters__panel[open] .cat-filters__form) { margin-top: 0; }
}

/* Apply band: closing call to action, a black box inside the content area */
:where(.adopt-page .apply-band) {
	--focus-color: var(--white, #ffffff);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--content-gap, 2rem) var(--container-gap, 4rem);
	margin-top: var(--space-xxl, 4.8rem);
	padding: var(--space-xl, 3.2rem);
	background: var(--primary, #0d0d0d);
	color: var(--white, #ffffff);
}

:where(.adopt-page .apply-band__content) { display: flex; flex-direction: column; gap: var(--space-xs, 0.8rem); max-width: 48rem; }

:where(.adopt-page .apply-band .section-heading) { margin: 0; color: var(--white, #ffffff); }

:where(.adopt-page .apply-band__text) { margin: 0; color: var(--on-primary-text, #e6e6e6); font-size: var(--text-xl, 1.7rem); line-height: 1.6; }

:where(.adopt-page .apply-band__actions) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s, 1.2rem) var(--space-l, 2.4rem); }

:where(.adopt-page .btn--white) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--btn-min-height, 4.8rem);
	padding-inline: var(--btn-padding-inline, 2.4rem);
	background: var(--white, #ffffff);
	color: var(--primary, #0d0d0d);
	font-size: var(--btn-font-size, 1.5rem);
	font-weight: var(--btn-font-weight, 600);
	text-decoration: none;
}

:where(.adopt-page .btn--white:hover, .adopt-page .btn--white:focus-visible) { background: var(--white-hover, #e6e6e6); color: var(--primary, #0d0d0d); }

:where(.adopt-page .arrow-link--light) { color: var(--white, #ffffff); white-space: nowrap; }

:where(.adopt-page .arrow-link--light:hover) { color: var(--on-primary-link-hover, #d9d9d9); }