/**
 * Responsive card and filter templates.
 * These are compiled, Tailwind-style component rules: mobile-first spacing,
 * breakpoint variants and token-driven colors without a frontend CDN runtime.
 */

/* Editorial template — reference-inspired: dark frame, simple header, image-led. */
.card-template-editorial .pixsp-grid {
    grid-auto-rows: auto;
}
.card-template-editorial .pixsp-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 1.5rem;
    background: var(--pixsp-card-bg, #111);
    box-shadow: none;
}
.card-template-editorial .pixsp-card-header {
    min-height: 5.7rem;
    padding: 1.25rem 1.5rem;
}
.card-template-editorial .pixsp-card-title,
.card-template-editorial .pixsp-card-year {
    color: #fff;
}
.card-template-editorial .pixsp-card-project-icon { color: var(--pixsp-icon, #a3ff35); }
.card-template-editorial .pixsp-card-image-wrapper {
	/* Override the legacy flex-grow rule so normal cards do not gain blank
	   image space. The image itself is always cropped, never letterboxed. */
	flex: 0 0 auto !important;
	width: 100%;
	aspect-ratio: 1.35 / 1;
	min-height: 0;
	margin: 0;
	overflow: hidden;
	border-radius: 1.25rem;
	background: #282828;
}
.card-template-editorial .pixsp-card-image,
.card-template-editorial .pixsp-card-placeholder-bg {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center;
	border-radius: inherit;
}
.card-template-editorial .pixsp-card-body {
    padding: 1rem 1.5rem 1.5rem;
    background: #111;
}
.card-template-editorial .pixsp-card:hover {
    transform: translateY(-.35rem);
    border-color: #a3ff35;
    box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,.3);
}

/* Minimal template — clean light/dark settings aware detail presentation. */
.card-template-minimal .pixsp-grid { grid-auto-rows: auto; }
.card-template-minimal .pixsp-card { border-radius: 1rem; box-shadow: none; }
.card-template-minimal .pixsp-card-header { padding: 1rem 1.125rem .75rem; }
.card-template-minimal .pixsp-card-image-wrapper { flex: 0 0 auto !important; aspect-ratio: 16 / 10; min-height: 0; margin: 0 1.125rem; overflow: hidden; }
.card-template-minimal .pixsp-card-image { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center; }
.card-template-minimal .pixsp-card-body { padding: 1rem 1.125rem 1.25rem; }

/* Overlay template — title and metadata are over the artwork. */
.card-template-overlay .pixsp-grid { grid-auto-rows: auto; }
.card-template-overlay .pixsp-card { min-height: 23rem; overflow: hidden; border-radius: 1.25rem; }
.card-template-overlay .pixsp-card-header { position: absolute; inset: auto 0 0; z-index: 3; padding: 1.5rem; }
.card-template-overlay .pixsp-card-title, .card-template-overlay .pixsp-card-year { color: #fff; }
.card-template-overlay .pixsp-card-image-wrapper { position: absolute; inset: 0; margin: 0; border-radius: 0; }
.card-template-overlay .pixsp-card-overlay { opacity: 1; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.78)); }
.card-template-overlay .pixsp-card-body { display: none; }

/* Functional grid layouts and every card-size selection from the editor. */
.layout-grid .pixsp-grid { grid-auto-rows: auto; }
.layout-grid .pixsp-card { min-height: 0; }
.layout-bento .pixsp-card-1x2, .layout-bento .pixsp-card-tall { grid-row: span 2; }
.layout-bento .pixsp-card-2x1, .layout-bento .pixsp-card-wide { grid-column: span 2; }
.layout-bento .pixsp-card-2x2 { grid-column: span 2; grid-row: span 2; }
.layout-bento .pixsp-card-hero { grid-column: 1 / -1; grid-row: span 2; }
.layout-bento .pixsp-card-square { aspect-ratio: 1; }
/* Tall editorial cards use their full cell for the artwork rather than
   reserving an empty column of background below a short image. */
.card-template-editorial.layout-bento .pixsp-card-1x2 .pixsp-card-image-wrapper,
.card-template-editorial.layout-bento .pixsp-card-tall .pixsp-card-image-wrapper,
.card-template-editorial.layout-bento .pixsp-card-2x2 .pixsp-card-image-wrapper,
.card-template-editorial.layout-bento .pixsp-card-hero .pixsp-card-image-wrapper {
	flex: 1 1 auto !important;
	aspect-ratio: auto;
}
.layout-masonry .pixsp-grid { display: block; column-count: var(--pixsp-columns-desktop, 3); column-gap: var(--pixsp-gap); }
.layout-masonry .pixsp-card { display: inline-flex; width: 100%; margin: 0 0 var(--pixsp-gap); break-inside: avoid; }
.layout-list .pixsp-grid { display: flex; flex-direction: column; grid-auto-rows: auto; }
.layout-list .pixsp-card { display: grid; grid-template-columns: minmax(12rem, .85fr) minmax(0, 1.15fr); min-height: 16rem; }
.layout-list .pixsp-card-header { grid-column: 2; grid-row: 1; }
.layout-list .pixsp-card-image-wrapper { grid-column: 1; grid-row: 1 / span 2; margin: 1rem 0 1rem 1rem; min-height: 0; }
.layout-list .pixsp-card-body { grid-column: 2; grid-row: 2; }

/* Card-specific animation classes work with or without GSAP. */
@keyframes pixsp-card-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pixsp-card-slide-up { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes pixsp-card-zoom { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes pixsp-card-flip { from { opacity: 0; transform: perspective(800px) rotateY(-16deg); } to { opacity: 1; transform: perspective(800px) rotateY(0); } }
.pixsp-card.anim-fade { animation: pixsp-card-fade .45s both; }
.pixsp-card.anim-slide-up { animation: pixsp-card-slide-up .55s cubic-bezier(.16,1,.3,1) both; }
.pixsp-card.anim-zoom { animation: pixsp-card-zoom .5s cubic-bezier(.16,1,.3,1) both; }
.pixsp-card.anim-flip { transform-origin: center; animation: pixsp-card-flip .65s cubic-bezier(.16,1,.3,1) both; }

@media (max-width: 992px) {
    .layout-masonry .pixsp-grid { column-count: var(--pixsp-columns-tablet, 2); }
    .layout-bento .pixsp-card-hero { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .layout-masonry .pixsp-grid { column-count: var(--pixsp-columns-mobile, 1); }
    .layout-bento .pixsp-card-1x2, .layout-bento .pixsp-card-tall, .layout-bento .pixsp-card-2x1, .layout-bento .pixsp-card-wide, .layout-bento .pixsp-card-2x2, .layout-bento .pixsp-card-hero { grid-column: auto; grid-row: auto; }
    .layout-list .pixsp-card { display: flex; min-height: 0; }
    .layout-list .pixsp-card-image-wrapper { min-height: 12rem; margin: 0 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .pixsp-card.anim-fade, .pixsp-card.anim-slide-up, .pixsp-card.anim-zoom, .pixsp-card.anim-flip { animation: none; opacity: 1; transform: none; }
}

/* Removed legacy hover decoration; hide it too in cached/old markup. */
.pixsp-glow-spot { display: none !important; }

/* Reference-inspired filter tabs. */
.filter-template-underline .pixsp-filters-wrapper { margin-top: .25rem; }
.filter-template-underline .pixsp-filter-group-label { display: none; }
.filter-template-underline .pixsp-filters-row { gap: 2rem; padding: 1.25rem 0 1.75rem; }
.filter-template-underline .pixsp-filter-chip {
    padding: 0 0 .55rem;
    color: color-mix(in srgb, var(--pixsp-text) 46%, transparent);
    font-size: clamp(1rem, 1.5vw, 1.35rem);
    font-weight: 500;
}
.filter-template-underline .pixsp-filter-chip.active { color: var(--pixsp-text); border-bottom-color: var(--pixsp-text); }
.filter-template-underline .chip-count { display: none; }

.filter-template-pills .pixsp-filters-row { gap: .65rem; }
.filter-template-pills .pixsp-filter-chip { padding: .55rem .9rem; border: 1px solid var(--pixsp-border); border-radius: 9999px; }
.filter-template-pills .pixsp-filter-chip.active { background: var(--pixsp-text); border-color: var(--pixsp-text); color: var(--pixsp-bg); }

.filter-template-compact .pixsp-filters-row { gap: .5rem; }
.filter-template-compact .pixsp-filter-chip { padding: .38rem .65rem; border: 1px solid var(--pixsp-border); border-radius: .5rem; font-size: .8125rem; }

@media (max-width: 640px) {
    .card-template-editorial .pixsp-card { border-radius: 1.125rem; }
    .card-template-editorial .pixsp-card-header { min-height: 4.25rem; padding: .875rem 1rem; }
    .card-template-editorial .pixsp-card-body { padding: .875rem 1rem 1rem; }
    .filter-template-underline .pixsp-filters-row { gap: 1.25rem; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 1rem; }
    .filter-template-underline .pixsp-filter-chip { font-size: 1rem; }
}