/* AI Models archive (template-parts/archive/models.php) – semantic tokens only. Cards: cards.css. */

.promptix-main:has(> .promptix-models) { padding-top: 0; }
.promptix-models { padding-bottom: 8px; }

.pxm-grad { padding-right: .06em; background: linear-gradient(90deg, var(--color-purple) 0%, var(--color-primary) 55%, var(--color-cyan) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Hero */
.pxm-hero { position: relative; overflow: hidden; padding: 18px 0 0; background: var(--gradient-soft); border-bottom: 1px solid var(--border-default); }
.pxm-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.pxm-hero.has-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg-page) 0%, color-mix(in srgb, var(--bg-page) 85%, transparent) 42%, color-mix(in srgb, var(--bg-page) 10%, transparent) 75%, transparent 100%); }
.pxm-hero > .container { position: relative; z-index: 1; }
.pxm-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.pxm-hero .breadcrumb { margin-bottom: 12px; font-size: 13px; }
.pxm-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 5px 12px 5px 6px; border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: var(--bg-card); color: var(--text-heading); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.pxm-badge__icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gradient-primary); color: var(--text-inverse); }
.pxm-hero__title { max-width: 780px; margin: 0 0 14px; color: var(--text-heading); font-size: clamp(2rem, 3.8vw, 3.125rem); font-weight: 800; font-style: italic; line-height: 1.08; letter-spacing: -.02em; }
.pxm-hero__lead { max-width: 640px; margin: 0; color: var(--text-body); font-size: 1.0625rem; }

.pxm-hero__side { display: grid; justify-items: end; gap: 14px; }
.pxm-hero__tagline { display: grid; margin: 0; color: var(--color-purple); font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 800; font-style: italic; line-height: 1.1; text-align: right; text-transform: uppercase; transform: rotate(-6deg); }
.pxm-hero__list { display: grid; gap: 8px; min-width: 200px; margin: 0; padding: 14px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--bg-card) 88%, transparent); box-shadow: var(--shadow-md); list-style: none; backdrop-filter: blur(6px); }
.pxm-hero__list li { display: flex; align-items: center; gap: 10px; color: var(--text-body); font-size: 13px; }
.pxm-hero__list .promptix-icon { flex: none; padding: 4px; border-radius: var(--radius-sm); background: var(--cycle-bg); color: var(--cycle-fg); box-sizing: content-box; }

.pxm-tabs { display: flex; gap: 8px; margin-top: 22px; padding: 10px 0 14px; overflow-x: auto; scrollbar-width: none; }
.pxm-tabs::-webkit-scrollbar { display: none; }
.pxm-tab { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading); font-size: 14px; font-weight: 500; white-space: nowrap; transition: color .2s ease, border-color .2s ease; }
.pxm-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pxm-tab.is-active { border-color: transparent; background: linear-gradient(90deg, var(--color-purple) 0%, var(--color-primary) 100%); color: var(--text-inverse); box-shadow: 0 6px 18px color-mix(in srgb, var(--color-purple) 30%, transparent); }

/* Layout + sidebar (drawer below 1024px comes from directory.css) */
.pxm-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 24px; padding-block: 24px; }
.pxm-sidebar { gap: 0; padding: 18px; }
.pxm-sidebar__search { padding-bottom: 14px; border-bottom: 1px solid var(--border-default); }
.pxm-sidebar__title { display: block; margin-bottom: 10px; color: var(--text-heading); font-size: 1rem; font-weight: 700; }
.pxm-sidebar__field { position: relative; display: block; }
.pxm-sidebar__field .promptix-icon { position: absolute; top: 50%; left: 12px; color: var(--text-muted); transform: translateY(-50%); }
.pxm-sidebar__field .input { padding-left: 36px; font-size: 13px; }
.pxm-group { padding: 12px 0; border-bottom: 1px solid var(--border-default); }
.pxm-group__title { display: flex; align-items: center; justify-content: space-between; color: var(--text-heading); font-weight: 700; list-style: none; cursor: pointer; }
.pxm-group__title::-webkit-details-marker { display: none; }
.pxm-group__title .promptix-icon { color: var(--text-muted); transition: transform .2s ease; }
.pxm-group:not([open]) .pxm-group__title .promptix-icon { transform: rotate(-90deg); }
.pxm-group__body { padding-top: 6px; }
.pxm-sidebar .promptix-facet-option { padding: 3px 0; font-size: 14px; }
.pxm-sidebar .promptix-facet-option__name { display: inline-flex; align-items: center; gap: 6px; }
.pxm-and-up { color: var(--text-secondary); font-size: 13px; }
.pxm-clear { width: 100%; margin-top: 16px; border: 0; background: linear-gradient(90deg, var(--color-purple) 0%, var(--color-primary) 100%); color: var(--text-inverse); }
.pxm-clear:hover { color: var(--text-inverse); box-shadow: var(--shadow-md); }

/* Toolbar + grid */
.pxm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.pxm-summary { margin: 0 auto 0 0; color: var(--text-secondary); font-size: 14px; }
.pxm-sort { width: auto; min-width: 200px; min-height: 40px; padding: 6px 12px; font-size: 13px; color: var(--text-heading); }
.pxm-view { display: flex; gap: 6px; }
.pxm-view button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; }
.pxm-view button[aria-pressed="true"] { border-color: transparent; background: linear-gradient(135deg, var(--color-purple), var(--color-primary)); color: var(--text-inverse); }
.promptix-models .promptix-dir__filters-btn { gap: 6px; }
.pxm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pxm-grid[aria-busy="true"] { opacity: .85; }
.promptix-models .pagination { margin-top: 28px; }

.promptix-models.is-list-view .pxm-grid { grid-template-columns: 1fr; }
.promptix-models.is-list-view .pxm-card { display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.promptix-models.is-list-view .pxm-card__media { aspect-ratio: auto; min-height: 190px; }

/* Featured workflows */
.pxm-feat { margin-top: 28px; padding-block: 24px 8px; border-top: 1px solid var(--border-default); }
.pxm-feat__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 18px; }
.pxm-feat__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--badge-purple-bg); color: var(--color-purple); }
.pxm-feat__titles { flex: 1; min-width: 220px; }
.pxm-feat__title { margin: 0; color: var(--text-heading); font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 800; }
.pxm-feat__lead { margin: 2px 0 0; color: var(--text-secondary); font-size: 14px; }
.pxm-feat__more { min-height: 40px; padding: 8px 16px; border-color: var(--border-strong); background: var(--bg-card); color: var(--text-heading); font-size: 14px; }
.pxm-feat__more:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pxm-feat__nav { display: flex; gap: 8px; }
.pxm-feat__nav button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--bg-card); color: var(--text-heading); cursor: pointer; }
.pxm-feat__nav button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pxm-feat__nav [data-md-prev] .promptix-icon { transform: rotate(180deg); }

.pxm-feat__track { display: grid; grid-auto-columns: calc((100% - 36px) / 3); grid-auto-flow: column; gap: 18px; margin: 0; padding: 0 0 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; list-style: none; }
.pxm-wf { display: flex; flex-direction: column; overflow: hidden; scroll-snap-align: start; }
.pxm-wf__media { aspect-ratio: 16 / 8; }
.pxm-stat--free { background: var(--color-success); }
.pxm-stat--paid { background: var(--color-purple); }
.pxm-stat--free .promptix-icon,
.pxm-stat--paid .promptix-icon { color: currentColor !important; }
.pxm-wf__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.pxm-wf__desc { margin: 0; color: var(--text-secondary); font-size: 13px; }
.pxm-wf__foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; }
.pxm-wf__foot .pxm-author { flex: 1; font-size: 13px; }
.pxm-star { color: var(--color-warning); }
.pxm-wf__cta { flex: none; min-height: 34px; padding: 6px 14px; border: 0; background: linear-gradient(90deg, var(--color-purple) 0%, var(--color-primary) 100%); color: var(--text-inverse); font-size: 13px; }
.pxm-wf__cta:hover { color: var(--text-inverse); box-shadow: var(--shadow-md); }

@media (max-width: 1199px) {
	.pxm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pxm-feat__track { grid-auto-columns: calc((100% - 18px) / 2); }
}

@media (max-width: 1024px) {
	.pxm-layout { grid-template-columns: 1fr; }
	.promptix-models.is-filters-open .promptix-dir__sidebar { transform: none; }
	.pxm-hero__grid { grid-template-columns: 1fr; }
	.pxm-hero__side { justify-items: start; grid-auto-flow: column; align-items: center; }
	.pxm-hero__tagline { text-align: left; transform: none; }
}

@media (max-width: 600px) {
	.pxm-grid { grid-template-columns: 1fr; }
	.pxm-hero__side { grid-auto-flow: row; }
	.pxm-sort { flex: 1; min-width: 0; }
	.pxm-feat__track { grid-auto-columns: 86%; }
	.promptix-models.is-list-view .pxm-card { grid-template-columns: 1fr; }
	.promptix-models.is-list-view .pxm-card__media { min-height: 0; aspect-ratio: 16 / 10; }
}