/*
 * GLEAM — Catalog (Rent & Shop pages)
 * Depends on gleam.css (tokens, g-fade-in, g-fadeUp keyframes)
 */

/* ═══════════════════════════════════════════════════════════════
   CATALOG HERO  (rent & shop section landing)
═══════════════════════════════════════════════════════════════ */

.g-catalog-hero {
    position: relative;
    width: 100%;
    height: 72vh;
    min-height: 460px;
    overflow: hidden;
    background: var(--g-ink);
}

.g-catalog-hero__bg {
    position: absolute;
    inset: -6%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: g-fade-in 2.0s ease both;
}

.g-catalog-hero--rent .g-catalog-hero__bg {
    background-color: #180306;
    background-image: linear-gradient(170deg, #2a0a10 0%, #1a0508 100%);
}

.g-catalog-hero--purchase .g-catalog-hero__bg {
    background-color: #0f0d0b;
    background-image: linear-gradient(170deg, #181310 0%, #0f0d0b 100%);
}

.g-catalog-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(11, 8, 9, 0.92) 0%,
            rgba(11, 8, 9, 0.44) 38%,
            rgba(11, 8, 9, 0.06) 100%);
}

.g-catalog-hero__content {
    position: relative;
    z-index: 20;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 6vw 4.5rem;
    max-width: 700px;
}

.g-catalog-hero__eyebrow {
    font-family: var(--g-font-ui);
    font-size: 0.50rem;
    font-weight: 400;
    letter-spacing: 0.44em;
    text-transform: uppercase;
    color: var(--g-blush);
    opacity: 0.78;
    margin-bottom: 1.2rem;
    animation: g-fadeUp 1.0s var(--g-ease-out) 0.3s both;
}

.g-catalog-hero__title {
    font-family: var(--g-font-serif);
    font-style: italic;
    font-size: clamp(4rem, 6vw, 9rem);
    font-weight: 300;
    line-height: 0.85;
    letter-spacing: 0.03em;
    color: var(--g-cream);
    margin: 0 0 1.6rem;
    animation: g-fadeUp 1.2s var(--g-ease-out) 0.15s both;
}

.g-catalog-hero__desc {
    font-family: var(--g-font-ui);
    font-size: 0.74rem;
    font-weight: 300;
    line-height: 2.0;
    letter-spacing: 0.08em;
    color: var(--g-cream);
    opacity: 0.50;
    margin: 0 0 1.6rem;
    max-width: 280px;
    animation: g-fadeUp 1.0s var(--g-ease-out) 0.5s both;
}

.g-catalog-hero__scroll {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--g-font-ui);
    font-size: 0.48rem;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    color: var(--g-cream);
    opacity: 0.28;
    animation: g-fadeUp 0.9s var(--g-ease-out) 0.9s both;
}

/* Section switcher — bottom right corner of hero */
.g-catalog-hero__switch {
    position: absolute;
    bottom: 3rem;
    right: 6vw;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    font-family: var(--g-font-ui);
    font-size: 0.52rem;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    animation: g-fadeUp 0.9s var(--g-ease-out) 0.6s both;
}

.g-catalog-hero__switch-btn {
    color: var(--g-cream);
    text-decoration: none;
    opacity: 0.35;
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    transition: opacity 0.3s, border-color 0.3s;
}

.g-catalog-hero__switch-btn:hover {
    opacity: 0.80;
}

.g-catalog-hero__switch-btn.active {
    opacity: 1;
    border-bottom-color: var(--g-wine-60);
}

.g-catalog-hero__switch-sep {
    color: var(--g-blush-30);
}


/* ═══════════════════════════════════════════════════════════════
   CATALOG BODY  (below hero)
═══════════════════════════════════════════════════════════════ */

.g-catalog-body {
    background: var(--g-cream);
    padding: 56px 6vw 80px;
    min-height: 60vh;
}

.g-catalog-header {
    margin-bottom: 36px;
}

.g-catalog-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--g-font-ui);
    font-size: 0.50rem;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--g-wine);
    margin-bottom: 8px;
}

.g-catalog-label-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--g-wine);
    display: inline-block;
    flex-shrink: 0;
}

.g-catalog-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid var(--g-warm-gray);
    padding-bottom: 20px;
}

.g-catalog-h {
    font-family: var(--g-font-serif);
    font-style: italic;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 300;
    letter-spacing: 0.04em;
    color: var(--g-ink);
    margin: 0;
}

.g-catalog-count {
    font-family: var(--g-font-ui);
    font-size: 0.60rem;
    letter-spacing: 0.18em;
    color: var(--g-wine);
    text-transform: uppercase;
}

/* Filters */
.g-catalog-filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 0 28px;
    border-bottom: 1px solid var(--g-warm-gray);
    margin-bottom: 36px;
}

.g-catalog-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.g-catalog-cat {
    font-family: var(--g-font-ui);
    font-size: 0.52rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 7px 16px;
    border: 1px solid var(--g-warm-gray);
    background: transparent;
    color: var(--g-ink);
    opacity: 0.55;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.22s;
}

.g-catalog-cat:hover {
    opacity: 1;
    border-color: var(--g-wine-60);
}

.g-catalog-cat.active {
    background: var(--g-ink);
    color: var(--g-cream);
    border-color: var(--g-ink);
    opacity: 1;
}

.g-catalog-select {
    font-family: var(--g-font-ui);
    font-size: 0.52rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 7px 28px 7px 12px;
    border: 1px solid var(--g-warm-gray);
    background: transparent;
    color: var(--g-ink);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236B091C'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.2s;
}

.g-catalog-select:focus {
    outline: none;
    border-color: var(--g-wine);
}

/* ── Section-specific catalog body accents ─────────────────── */

/* Rent — cream background, wine accents (default) */
.g-catalog-body--rent {
    background: var(--g-cream);
}

/* Purchases — off-white background, ink accents */
.g-catalog-body--purchase {
    background: #fafaf8;
}
.g-catalog-body--purchase .g-catalog-label      { color: var(--g-ink); }
.g-catalog-body--purchase .g-catalog-label-dot  { background: var(--g-ink); }
.g-catalog-body--purchase .g-catalog-count      { color: var(--g-ink); opacity: .45; }
.g-catalog-body--purchase .g-catalog-cat.active {
    background: var(--g-ink); color: var(--g-cream); border-color: var(--g-ink);
}
.g-catalog-body--purchase .g-catalog-cat:hover  { border-color: var(--g-ink); opacity: .8; }

/* ── Empty state ──────────────────────────────────────────── */
.g-catalog-empty {
    text-align: center;
    padding: 80px 0;
    font-family: var(--g-font-ui);
    font-size: 0.60rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--g-wine);
    opacity: 0.60;
}

/* Responsive */
@media (max-width: 768px) {
    .g-catalog-hero {
        height: 55vh;
        min-height: 340px;
    }

    .g-catalog-hero__content {
        padding: 0 1.4rem 3.5rem;
    }

    .g-catalog-hero__switch {
        right: 1.4rem;
        bottom: 2rem;
    }

    .g-catalog-body {
        padding: 40px 1.4rem 60px;
    }
}