/* ============================================
   "For Sale" list (news template layout 7)
   One wide card per piece: artwork left, information right (stacked on small screens).
   Uses the shared card look from updates_list.css (.content-card, badges, .post-date).
   ============================================ */

/* The shared card hover is big; keep it calm on these large cards */
.forsale-card.content-card:hover {
    transform: translateY(-4px);
}

.forsale-media {
    height: 100%;
    overflow: hidden;
    background: #f4efe6;
}

.forsale-media a {
    display: block;
    height: 100%;
}

/* Same portrait frame for every piece so the cards line up */
.forsale-card .forsale-image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.forsale-card .forsale-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 1.75rem;
}

@media (min-width: 992px) {
    .forsale-card .forsale-body {
        padding: 2.5rem 3rem;
    }
}

.forsale-meta {
    margin-bottom: 1rem;
}

.forsale-title {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    color: #2c2c2c;
    margin-bottom: 0.75rem;
}

@media (min-width: 992px) {
    .forsale-title {
        font-size: 2rem;
    }
}

.forsale-teaser {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* One row per marketplace: price/edition, then the button */
.forsale-offers {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.forsale-offer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

/* "1/1 · 0.2 SOL" */
.forsale-price {
    min-width: 8.5rem;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.06em;
    color: #9a7208;
}

.forsale-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.forsale-offers .btn,
.forsale-actions .btn {
    font-size: 0.95rem;
    padding: 0.55rem 1.4rem;
}