/*
 * Media Store — Archive Page Styles
 * Loaded only on music_store_item archive pages.
 */

/* --------------------------------------------------------------------------
   Archive page wrapper
   -------------------------------------------------------------------------- */
.mst-archive-page {
	padding:    24px 24px 48px;
	max-width:  1400px;
	margin:     0 auto;
}

/* --------------------------------------------------------------------------
   Archive header: title + search + chips
   -------------------------------------------------------------------------- */
.mst-archive-hdr {
	margin-bottom: 32px;
}

.mst-archive-hdr__title {
	font-size:      clamp(1.5rem, 3vw, 2.25rem);
	font-weight:    800;
	letter-spacing: -.03em;
	color:          var(--mst-text-1, #f0f0f5);
	margin-bottom:  20px;
}

/* ── Archive search bar ── */
.mst-archive-hdr__search {
	margin-bottom: 16px;
}

.mst-archive-search {
	display:        flex;
	align-items:    center;
	gap:            10px;
	background:     rgba(255,255,255,.06);
	border:         1px solid rgba(255,255,255,.09);
	border-radius:  14px;
	padding:        0 16px;
	height:         52px;
	max-width:      680px;
	transition:     border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.mst-archive-search:focus-within {
	background:   rgba(255,255,255,.09);
	border-color: var(--mst-accent, #5c6ef4);
	box-shadow:   0 0 0 3px rgba(92,110,244,.15);
}

.mst-archive-search__icon {
	flex-shrink: 0;
	color:       rgba(255,255,255,.3);
}

.mst-archive-search__input {
	flex:        1;
	background:  none;
	border:      none;
	outline:     none;
	color:       #f0f0f5;
	font-size:   1rem;
	font-family: inherit;
	padding:     0;
}

.mst-archive-search__input::placeholder {
	color: rgba(255,255,255,.28);
}

.mst-archive-search__input::-webkit-search-cancel-button {
	display: none;
}

.mst-archive-search__clear {
	flex-shrink:  0;
	display:      flex;
	align-items:  center;
	justify-content: center;
	width:        24px;
	height:       24px;
	border-radius: 50%;
	background:   rgba(255,255,255,.1);
	color:        rgba(255,255,255,.55);
	transition:   background 140ms ease;
}
.mst-archive-search__clear:hover { background: rgba(255,255,255,.2); }

/* ── Filter chips ── */
.mst-archive-hdr__chips {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
	margin-bottom: 12px;
}

/* ── Results count ── */
.mst-archive-hdr__count {
	font-size:  0.8125rem;
	color:      rgba(255,255,255,.4);
	min-height: 1.2em;
}

/* --------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */
.mst-archive-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap:                   20px;
	margin-bottom:         32px;
}

/* Wider min for landscape (video) items */
.mst-archive-grid--type-video {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.mst-archive-grid--type-book {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* Book card format badge (Book 2.2) */
.mst-card--book .mst-card__cover { position: relative; }
.mst-card__format-badge {
	position: absolute; top: 8px; left: 8px; z-index: 2;
	padding: 2px 7px; border-radius: 6px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
	background: rgba(0,0,0,0.6); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* --------------------------------------------------------------------------
   Infinite scroll states
   -------------------------------------------------------------------------- */
.mst-load-sentinel {
	height: 1px;
	margin: 0;
	padding: 0;
}

.mst-load-spinner-wrap {
	display:         flex;
	justify-content: center;
	align-items:     center;
	padding:         32px 0;
}

.mst-load-end {
	text-align:  center;
	padding:     24px 0 8px;
	font-size:   0.875rem;
	color:       rgba(255,255,255,.3);
}

.mst-load-error {
	text-align:  center;
	padding:     16px;
	font-size:   0.875rem;
	color:       rgba(240,100,80,.8);
	background:  rgba(240,100,80,.08);
	border-radius: 8px;
	margin:      16px 0;
}

/* Load More fallback button */
.mst-load-more-btn {
	display:      block;
	margin:       24px auto 0;
	padding:      10px 28px;
	border-radius: 999px;
	background:   rgba(255,255,255,.07);
	border:       1px solid rgba(255,255,255,.1);
	color:        rgba(255,255,255,.7);
	font-size:    0.875rem;
	font-weight:  600;
	cursor:       pointer;
	transition:   background 140ms ease, color 140ms ease;
}
.mst-load-more-btn:hover {
	background: rgba(255,255,255,.12);
	color:      #f0f0f5;
}

/* --------------------------------------------------------------------------
   Empty / no results state
   -------------------------------------------------------------------------- */
.mst-archive-empty {
	padding:    64px 24px;
	text-align: center;
}

.mst-archive-empty__icon {
	color:         rgba(255,255,255,.15);
	margin-bottom: 16px;
}

.mst-archive-empty__text {
	font-size: 1rem;
	color:     rgba(255,255,255,.4);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.mst-archive-page { padding: 16px 16px 48px; }
	.mst-archive-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
	.mst-archive-search { height: 46px; }
}

@media (max-width: 480px) {
	.mst-archive-grid { grid-template-columns: repeat(2, 1fr); }
	.mst-archive-grid--type-video { grid-template-columns: 1fr; }
}