/* Template card (template-parts/template-card.php): homepage "Explore", gallery, category pages, related cards on
   the template page. One copy for every page that renders cards (enqueued in functions.php).
   Royal Original tokens only (styles/tokens.css). Page-specific states (gallery loading) stay in templates.css. */

/* ---------------------------------------------------------------------
 * Template card (book p09, p10, p15): 3:4 top crop, 12px radius, 1px border, shadow only on hover, lift 2px.
 * Title + category below. Preview / Edit: over a surface scrim on hover or focus-within (hover screens),
 * always visible below the title on touch screens.
 * ------------------------------------------------------------------ */
.tcard-t {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto;
	grid-template-areas: "media" "body" "actions"; min-width: 0;
	background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden;
}
.tcard-t__thumb {
	grid-area: media; position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
	background: var(--t-bg, var(--color-surface-tint)); border-bottom: 1px solid var(--color-border);
}
.tcard-t__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* No screenshot yet: a mini email drawn in the template's own colors. */
.tcard-t__ph { position: absolute; inset: 12% 14% 0; display: grid; align-content: start; gap: 10px; padding: 14%; background: var(--t-card, var(--color-surface)); border-radius: 8px 8px 0 0; }
.tcard-t__ph i { height: 10px; border-radius: 5px; background: var(--color-border); }
.tcard-t__ph i:first-child { height: 60px; }
.tcard-t__ph b { width: 50%; height: 22px; border-radius: 11px; background: var(--t-accent, var(--color-primary)); }
/* Failed image: the title stays below, the frame offers Retry preview. */
.tcard-t__fail {
	position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: var(--space-3);
	padding: var(--space-4); text-align: center; color: var(--color-text-muted); background: var(--color-surface-tint);
}
.tcard-t__fail[hidden] { display: none; }
.tcard-t__thumb.is-failed img { visibility: hidden; }

.tcard-t__body { grid-area: body; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-1); padding: var(--space-4); }
.tcard-t__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); min-width: 0; }
.tcard-t__head .tcard-t__title { min-width: 0; }
.tcard-t__title { font-family: var(--font-body); font-size: 18px; font-weight: var(--font-weight-label); line-height: 1.3; letter-spacing: 0; }
.tcard-t__link { color: var(--color-text); text-decoration: none; }
/* Stretched link: the whole card opens the template; the action links sit above it. */
.tcard-t__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.tcard-t__link:focus-visible { outline: none; box-shadow: none; }
.tcard-t:has(.tcard-t__link:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; box-shadow: 0 0 0 3px var(--color-surface); }
/* Categories: one line, primary first, max 2 + "+N". Each pill shrinks with an ellipsis, so a narrow card never wraps.
   z-index 2 keeps the links above the stretched title link. 28px tall pills keep a 24px+ target (WCAG 2.5.8). */
.tcard-t__cats {
	position: relative; z-index: 2; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-1);
	min-width: 0; margin: var(--space-1) 0 0; padding: 0; list-style: none;
}
.tcard-t__cats > li { display: flex; min-width: 0; flex: 0 1 auto; }
.tcard-t__cats > li:first-child { flex-shrink: 0; max-width: calc(100% - 48px); } /* the primary keeps its full name */
.tcard-t__cats > li:only-child { max-width: 100%; }
.tcard-t__cats > li.tcard-t__more { flex: none; }
.tcard-t__cat, .tcard-t__more {
	display: block; min-width: 0; max-width: 100%; min-height: 28px; padding: 2px 8px;
	overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
	font-size: var(--font-size-small); line-height: 24px; color: var(--color-text-muted); text-decoration: none;
	background: var(--color-surface-tint); border-radius: var(--radius-pill);
}
.tcard-t__cat.is-primary { color: var(--color-primary); }
/* Phones: 44px to tap, the same 28px pill to see (the pill is drawn inside the link, the extra height is taken back). */
@media (pointer: coarse) {
	.tcard-t__cat { position: relative; z-index: 0; min-height: 44px; margin-block: -8px; padding-block: 0; line-height: 44px; background: none; }
	.tcard-t__cat::before { content: ''; position: absolute; z-index: -1; inset: 8px 0; background: var(--color-surface-tint); border-radius: var(--radius-pill); }
}
.tcard-t__cat:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 1px; }
@media (hover: hover) { .tcard-t__cat:hover { color: var(--color-primary-hover); text-decoration: underline; text-underline-offset: .2em; } }

.tcard-t__actions {
	grid-area: actions; position: relative; z-index: 2;
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); padding: 0 var(--space-4) var(--space-4);
}
.tcard-t__actions .btn { min-width: 0; padding: 0 12px; }

/* Wishlist heart (inc/wishlist.php, scripts/wishlist.js): at the right of the title, outside the image. 44px target with no
   disc, above the stretched link (z-index 1). The extra height is taken back, so the title row keeps its own height. */
.wl-btn {
	position: relative; z-index: 3; flex: none; margin: -10px -10px -10px 0;
	display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
	color: var(--color-text-muted); background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.wl-btn__dot { display: grid; place-items: center; }
.wl-btn .icon { width: 20px; height: 20px; transition: color var(--motion-duration-fast) var(--motion-ease), fill var(--motion-duration-fast) var(--motion-ease); }
.wl-btn:focus-visible { outline-offset: -1px; box-shadow: none; }
.wl-btn[aria-pressed="true"], .wl-action[aria-pressed="true"] .icon { color: var(--color-primary); }
.wl-btn[aria-pressed="true"] .icon, .wl-action[aria-pressed="true"] .icon { fill: currentColor; }
@media (hover: hover) {
	.wl-btn:hover { color: var(--color-primary); }
}
@media (prefers-reduced-motion: no-preference) {
	.wl-btn.is-pop .icon, .wl-action.is-pop .icon { animation: wl-pop var(--motion-duration-base) var(--motion-ease); }
}
@keyframes wl-pop { 50% { transform: scale(1.2); } }
.wl-modal .modal__title { padding-right: var(--space-7); }
.wl-modal p { margin-top: var(--space-3); color: var(--color-text-muted); }
/* Without JS a heart cannot work: hide it. */
html:not(.js) .wl-btn, html:not(.js) .wl-action { display: none; }

@media (hover: hover) {
	.tcard-t { transition: transform var(--motion-duration-base) var(--motion-ease); }
	.tcard-t:hover { box-shadow: var(--shadow-card); }
	.tcard-t:hover .tcard-t__title a { text-decoration: underline; text-underline-offset: .2em; }
	/* Overlay mode: the actions sit on the thumbnail, over a surface scrim. */
	.tcard-t__actions {
		grid-area: media; align-self: stretch; align-content: center; justify-content: center;
		grid-auto-flow: row; grid-template-columns: minmax(0, 160px); padding: var(--space-5);
		background: color-mix(in srgb, var(--color-surface) 86%, transparent);
		opacity: 0; pointer-events: none;
		transition: opacity var(--motion-duration-fast) var(--motion-ease);
	}
	.tcard-t:hover .tcard-t__actions, .tcard-t:focus-within .tcard-t__actions { opacity: 1; pointer-events: auto; }
	.lib-results.is-loading .tcard-t__actions { opacity: 0; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.tcard-t:hover { transform: translateY(-2px); }
}