/* Account-based member favorites. Two separate concerns share this one
   small file: (1) styling for the 会员中心 "我的收藏" grid appended by
   Life_Hub_Member_Favorites::render_account_section(), and (2) the small
   auto-dismissing error notice member-favorites.js shows next to a button
   on failure. Kept as its own file (not merged into user-listing-tools.css)
   because it belongs to a separate, independent feature -- see the header
   comment in class-life-hub-member-favorites.php.

   v1.0.232: this file used to ALSO style the 收藏/已收藏 toggle button on
   listing cards/detail pages with its own look (.lhc-member-fav-button base
   rule). That control now renders using user-listing-tools.css's own
   .lhc-user-tool-button styling instead -- the user asked for exactly the
   original favorite button's look, since the anonymous version of that
   button no longer renders alongside it (see member-favorites.js's
   installCardsAndDetail()). The .lhc-member-fav-button class name is still
   used there, but purely as this script's own "already installed" marker;
   it carries styling here only in the 会员中心 remove-button context below,
   where it's scoped to .lhc-member-favorites-card specifically so it can
   never leak onto that other button. */

/* --- Small inline error notice (both contexts) ------------------------- */

.lhc-member-fav-notice {
	margin-left: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #fdf3e7;
	color: #7a4a00;
	font-size: 12px;
	line-height: 1.6;
	white-space: nowrap;
}

/* --- "我的收藏" section on the account page ---------------------------- */

body.lhc-inner-page-shell .lhc-member-favorites-section {
	box-sizing: border-box;
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 16px clamp(24px, 5vw, 56px);
}

body.lhc-inner-page-shell .lhc-member-favorites-title {
	text-align: center;
	margin-bottom: 16px;
}

body.lhc-inner-page-shell .lhc-member-favorites-empty {
	text-align: center;
}

.lhc-member-favorites-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}

.lhc-member-favorites-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--lhc-ui-line, rgba(64, 89, 142, 0.16));
	border-radius: var(--lhc-ui-radius, 8px);
	background: var(--lhc-ui-surface, #fff);
	box-shadow: 0 8px 20px rgba(36, 61, 118, 0.08);
}

/* v1.0.232: switched from aspect-ratio + a height:100% <img> (v1.0.230) to
   the classic "padding-top percentage" box instead -- the user reported the
   photo height visibly differing between cards, each apparently following
   its own source image's proportions rather than a uniform crop. The most
   likely cause is the active theme or WordPress core's own default image
   styles (many ship a plain `img { height: auto; max-width: 100% }` rule)
   loading after this stylesheet and overriding the img's height:100%, which
   aspect-ratio alone doesn't protect against. This version doesn't depend
   on the <img>'s own height at all: the wrapper's height comes purely from
   padding-top (a % of ITS OWN width, so always 4:3 regardless of what sets
   the image's height), and the image is pulled out of flow with
   position:absolute + inset:0 to fill that box -- there's no height value
   on the <img> itself left for another stylesheet to override. */
.lhc-member-favorites-card__image {
	position: relative;
	display: block;
	width: 100%;
	padding-top: 75%; /* 4:3 */
	background: #f1f4f9;
	overflow: hidden;
}

.lhc-member-favorites-card__image img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lhc-member-favorites-card__body {
	display: grid;
	gap: 6px;
	padding: 14px;
}

.lhc-member-favorites-card__body h3 {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
}

.lhc-member-favorites-card__body h3 a {
	color: var(--lhc-ui-ink, #14213d);
	text-decoration: none;
}

.lhc-member-favorites-card__body h3 a:hover {
	text-decoration: underline;
}

.lhc-member-favorites-card__meta {
	margin: 0;
	color: var(--lhc-ui-muted, #61708a);
	font-size: 13px;
}

.lhc-member-favorites-card__unavailable-text {
	margin: 0;
	color: var(--lhc-ui-muted, #61708a);
	font-size: 13px;
}

.lhc-member-favorites-card--unavailable {
	opacity: 0.7;
}

/* Scoped to .lhc-member-favorites-card so this styling can only ever apply
   to the 移除 button in this list -- never to the card/detail favorite
   toggle elsewhere, which intentionally does not use this class for its
   look anymore (see the file header comment). */
.lhc-member-favorites-card .lhc-member-fav-button {
	justify-self: start;
	margin-top: 4px;
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border: 1px solid var(--lhc-ui-line, rgba(64, 89, 142, 0.16));
	border-radius: 999px;
	background: #fff;
	color: var(--lhc-ui-ink, #14213d);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.lhc-member-favorites-card .lhc-member-fav-button:hover {
	border-color: var(--lhc-brand-blue, #1687f8);
}

.lhc-member-favorites-card .lhc-member-fav-button:focus-visible {
	outline: 2px solid var(--lhc-brand-blue, #1687f8);
	outline-offset: 1px;
}

.lhc-member-favorites-card .lhc-member-fav-button[disabled] {
	opacity: 0.6;
	cursor: default;
}

@media (max-width: 480px) {
	.lhc-member-favorites-grid {
		grid-template-columns: 1fr 1fr;
	}
}