/**
 * connect/static/connect/css/pages/listing_detail.css
 * Listing detail page — base layout + the enhanced hero section.
 * Requires base.css (tokens, .review-card, buttons, badges).
 */

/* ═══════════════════════════════════════════════════════════════════════════
   LISTING DETAIL
   ═══════════════════════════════════════════════════════════════════════════ */

.listing-detail-layout { display: grid; grid-template-columns: 1fr 360px; gap: 36px; align-items: start; }

@media (max-width: 1023px) { .listing-detail-layout { grid-template-columns: 1fr; } }

.listing-detail-title { font-size: 1.5rem; margin-bottom: 12px; }
.listing-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.listing-detail-description { font-size: 15px; color: var(--color-text-2); line-height: 1.8; white-space: pre-wrap; }
.listing-detail-sidebar { position: sticky; top: calc(var(--topbar-height) + 24px); }

/* Featured image on detail page */
.listing-detail-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    border: 1px solid var(--color-border);
}

.seller-info-card { display: flex; align-items: flex-start; gap: 16px; padding: 22px; background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: 20px; }
.seller-info-details { flex: 1; }
.seller-info-name { font-family: var(--font-heading); font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.seller-info-headline { font-size: 13px; color: var(--color-text-2); margin-bottom: 8px; }
.seller-info-stats { display: flex; gap: 16px; flex-wrap: wrap; }
.seller-stat { font-size: 13px; color: var(--color-text-2); display: flex; align-items: center; gap: 5px; }

.purchase-card { background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.purchase-card-header { padding: 22px 26px 18px; border-bottom: 1px solid var(--color-border-subtle); }
.purchase-price { font-family: var(--font-mono); font-size: 1.875rem; font-weight: 700; color: var(--color-text-1); }
.purchase-currency { font-size: 13px; color: var(--color-text-3); margin-top: 2px; }
.purchase-card-body { padding: 22px 26px; }
.purchase-note { font-size: 12px; color: var(--color-text-3); margin-top: 14px; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════════════════
   ENHANCED LISTING DETAIL — hero layout
   ═══════════════════════════════════════════════════════════════════════════ */

.listing-hero {
    position: relative;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 28px;
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
}

.listing-hero-image {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
}

.listing-hero-placeholder {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--color-text-3);
    background-color: rgba(124, 106, 245, 0.06);
}

.listing-hero-badge {
    position: absolute;
    top: 16px;
    left: 16px;
}