/*
 * FILE: public/assets/css/collections.css
 * Elegant Encasements — Collections Styles
 */

.collections-hero { padding: calc(80px + var(--space-20)) 0 var(--space-16); background: var(--color-black-mid); position: relative; overflow: hidden; }
.collections-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-gold-dim), transparent); }
.collections-intro { max-width: 560px; }

.collections-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); padding-block: var(--space-16); }
.collections-grid .card-collection--featured { grid-column: 1 / -1; aspect-ratio: 21 / 7; }
.collections-grid .card-collection--featured .card-collection__name { font-size: var(--text-4xl); }

.collection-header { position: relative; min-height: 55vh; display: flex; align-items: flex-end; padding-bottom: var(--space-16); background: var(--color-black-mid); overflow: hidden; padding-top: 80px; }

.collection-header__bg { position: absolute; inset: 0; }
.collection-header__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.collection-header__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.2) 100%); }
.collection-header__content { position: relative; z-index: 2; }

.collection-header__badge { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--space-4); }
.collection-header__badge::before { content: ''; display: block; width: 24px; height: 1px; background: var(--color-gold); }

.collection-header__title { font-family: var(--font-heading); font-size: var(--text-hero); font-weight: 300; color: var(--color-cream); margin-bottom: var(--space-5); line-height: 1; }
.collection-header__desc  { font-size: var(--text-lg); font-weight: 300; color: var(--color-parchment); max-width: 560px; margin-bottom: var(--space-8); }

.collection-stats { display: flex; gap: var(--space-10); align-items: center; }
.collection-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.collection-stat__value { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--color-gold); line-height: 1; }
.collection-stat__label { font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-muted); }
.collection-stat-divider { width: 1px; height: 40px; background: var(--color-border-gold); }

.collection-items { padding-block: var(--space-16); }
.collection-items-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); }

@media (max-width: 900px) {
    .collections-grid { grid-template-columns: 1fr 1fr; }
    .collection-header__title { font-size: var(--text-4xl); }
    .collections-grid .card-collection--featured { grid-column: 1 / -1; aspect-ratio: 4/2; }
}

@media (max-width: 600px) {
    .collections-grid { grid-template-columns: 1fr; gap: var(--space-3); }
    .collection-header__title { font-size: var(--text-3xl); }
    .collection-stats { gap: var(--space-6); flex-wrap: wrap; }
}