/* ============================================================
   product-listing.css  —  Art Gallery Edition
   Tailwind + DaisyUI   |   .NET MVC Razor
   Aesthetic: editorial / museum catalogue — spare, typographic,
   generous white space, every element deliberate.
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────────── */

:root {
    --font-display : 'Poppins', sans-serif;
    --font-body    : 'DM Sans', system-ui, sans-serif;
    --font-title: 'Cormorant Garamond', 'Georgia', serif;

    --ink          : #1a1a18;       /* near-black, warmer than pure black */
    --ink-mid      : #5a5a55;       /* secondary text */
    --ink-faint    : #a8a8a0;       /* placeholders, dividers */
    --accent       : #b5924c;       /* antique gold — the one chromatic note */
    --accent-hover : #9a7a3c;

    --transition   : 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ── Page shell ─────────────────────────────────────────────── */

.art-page {
    font-family    : var(--font-body);
    color          : var(--ink);
    /* no background — inherits from body / layout */
}

.art-container {
    max-width : 1360px;
    margin    : 0 auto;
    padding   : 0 2.5rem;   /* 40px gutters */
}


/* ── Header ─────────────────────────────────────────────────── */

.art-header {
    padding-top : 3.5rem;
}

.art-header-top {
    display         : flex;
    align-items     : flex-end;
    justify-content : space-between;
    margin-bottom   : 2rem;
}

.art-eyebrow {
    font-family    : var(--font-body);
    font-size      : 0.65rem;
    font-weight    : 500;
    letter-spacing : 0.18em;
    text-transform : uppercase;
    color          : var(--ink-faint);
    margin-bottom  : 0.35rem;
}

.art-title {
    font-family  : var(--font-title);
    font-size    : clamp(2rem, 4vw, 3.25rem);
    font-weight  : 300;
    line-height  : 1;
    letter-spacing: -0.01em;
    font-style   : italic;
    margin       : 0;
}

.art-count {
    font-family    : var(--font-body);
    font-size      : 0.75rem;
    letter-spacing : 0.1em;
    color          : var(--ink-faint);
    text-transform : uppercase;
    padding-bottom : 0.25rem; /* align with title baseline */
}

/* Controls row */
.art-header-bottom {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    flex-wrap       : wrap;
    gap             : 1rem;
    padding-bottom  : 1.5rem;
}

/* Category pills */
.art-pills {
    display  : flex;
    gap      : 0.5rem;
    flex-wrap: wrap;
}

.art-pill {
    font-family    : var(--font-body);
    font-size      : 0.72rem;
    font-weight    : 400;
    letter-spacing : 0.1em;
    text-transform : uppercase;
    color          : var(--ink-mid);
    border         : 1px solid var(--ink-faint);
    background     : transparent;
    padding        : 0.35rem 0.9rem;
    cursor         : pointer;
    transition     : color var(--transition), border-color var(--transition);
}

.art-pill:hover {
    color         : var(--ink);
    border-color  : var(--ink);
}

.art-pill.is-active {
    color         : var(--accent);
    border-color  : var(--accent);
}

/* Sort select */
.art-sort {
    font-family    : var(--font-body);
    font-size      : 0.72rem;
    letter-spacing : 0.08em;
    text-transform : uppercase;
    color          : var(--ink-mid);
    border         : none;
    border-bottom  : 1px solid var(--ink-faint);
    background     : transparent;
    padding        : 0.25rem 1.5rem 0.25rem 0;
    appearance     : none;
    cursor         : pointer;
    outline        : none;
    /* Custom arrow */
    background-image   : url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a8a8a0' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat  : no-repeat;
    background-position: right 0 center;
}

.art-sort:focus {
    border-bottom-color: var(--ink);
}

/* Hairline rule under header */
.art-rule {
    border     : none;
    border-top : 1px solid var(--ink-faint);
    margin     : 0;
    opacity    : 0.5;
}


/* ── Main content ───────────────────────────────────────────── */

.art-main {
    padding-top    : 3.5rem;
    padding-bottom : 6rem;
}


/* ── Product Grid — 4 col desktop ───────────────────────────── */

.art-grid {
    display               : grid;
    grid-template-columns : repeat(1, 1fr);
    gap                   : 3.5rem 2rem;   /* generous row gap, tighter col gap */
}

@media (min-width: 600px) {
    .art-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
    .art-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
    .art-grid {
        grid-template-columns : repeat(4, 1fr);
        gap                   : 4rem 2.25rem;
    }
}


/* ── Art Card ───────────────────────────────────────────────── */

.art-card {
    display        : flex;
    flex-direction : column;
    gap            : 0;
}

/* Image frame */
.art-frame {
    display        : block;
    position       : relative;
    overflow       : hidden;
    /* variable-height — art proportions vary. constrain with aspect-ratio */
    aspect-ratio   : 1;
    background     : #f4f3f0;  /* warm off-white mat */
    text-decoration: none;
}

.art-img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    display    : block;
    transition : transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
                 filter    0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.art-card:hover .art-img {
    transform : scale(1.04);
    filter    : brightness(0.92);
}

/* Hover overlay */
.art-frame-overlay {
    position        : absolute;
    inset           : 0;
    display         : flex;
    align-items     : flex-end;
    justify-content : center;
    padding-bottom  : 1.5rem;
    opacity         : 0;
    transition      : opacity var(--transition);
    pointer-events  : none;
}

.art-card:hover .art-frame-overlay {
    opacity: 1;
}

.art-view-label {
    font-family    : var(--font-body);
    font-size      : 0.65rem;
    font-weight    : 500;
    letter-spacing : 0.18em;
    text-transform : uppercase;
    color          : #fff;
    border-bottom  : 1px solid rgba(255,255,255,0.5);
    padding-bottom : 2px;
}

/* Sold / New badge */
.art-badge {
    position       : absolute;
    top            : 0.85rem;
    left           : 0.85rem;
    font-family    : var(--font-body);
    font-size      : 0.6rem;
    font-weight    : 500;
    letter-spacing : 0.15em;
    text-transform : uppercase;
    padding        : 0.25rem 0.55rem;
}

.art-badge--sold {
    background : rgba(26, 26, 24, 0.7);
    color      : #e8e5df;
}

.art-badge--new {
    background : var(--accent);
    color      : #fff;
}


/* ── Caption (museum label) ─────────────────────────────────── */

.art-caption {
    padding    : 1rem 0 0;
    display    : flex;
    flex-direction: column;
    gap        : 0.85rem;
    border-top : 1px solid var(--ink-faint);
    margin-top : 0;
    opacity    : 0.4;    /* subtle at rest — label shouldn't compete with the art */
    transition : opacity var(--transition);
}

.art-card:hover .art-caption {
    opacity: 1;
}

.art-caption-row {
    display         : flex;
    justify-content : space-between;
    align-items     : flex-start;
    gap             : 0.5rem;
}

.art-caption-meta {
    display       : flex;
    flex-direction: column;
    gap           : 0.15rem;
}

.art-work-title {
    font-family    : var(--font-display);
    font-size      : 1.05rem;
    font-weight    : 400;
    /*font-style     : italic;*/
    color          : var(--ink);
    text-decoration: none;
    line-height    : 1.2;
    transition     : color var(--transition);
}

.art-work-title:hover {
    color: var(--accent);
}

.art-artist {
    font-family    : var(--font-body);
    font-size      : 0.72rem;
    font-weight    : 500;
    letter-spacing : 0.04em;
    color          : var(--ink);
    margin         : 0;
}

.art-medium {
    font-family : var(--font-body);
    font-size   : 0.68rem;
    color       : var(--ink-faint);
    margin      : 0;
}

/* Wishlist / save icon */
.art-save {
    flex-shrink : 0;
    background  : transparent;
    border      : none;
    cursor      : pointer;
    color       : var(--ink-faint);
    padding     : 0.1rem;
    line-height : 1;
    transition  : color var(--transition), transform var(--transition);
}

.art-save:hover {
    color     : var(--accent);
    transform : scale(1.15);
}

/* Footer row: price + acquire */
.art-caption-footer {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
}

.art-price {
    font-family    : var(--font-display);
    font-size      : 1.15rem;
    font-weight    : 300;
    letter-spacing : 0.02em;
    color          : var(--ink);
}

.art-price--sold {
    font-family    : var(--font-body);
    font-size      : 0.68rem;
    letter-spacing : 0.12em;
    text-transform : uppercase;
    color          : var(--ink-faint);
}

/* Acquire CTA — understated, gallery-appropriate */
.art-acquire {
    font-family    : var(--font-body);
    font-size      : 0.65rem;
    font-weight    : 500;
    letter-spacing : 0.14em;
    text-transform : uppercase;
    color          : var(--ink);
    background     : transparent;
    border         : none;
    border-bottom  : 1px solid var(--ink);
    padding        : 0 0 2px;
    cursor         : pointer;
    transition     : color var(--transition), border-color var(--transition);
}

.art-acquire:hover {
    color         : var(--accent);
    border-color  : var(--accent);
}


/* ── Empty state ────────────────────────────────────────────── */

.art-empty {
    text-align    : center;
    padding       : 6rem 0;
}

.art-empty-title {
    font-family  : var(--font-display);
    font-size    : 1.6rem;
    font-style   : italic;
    font-weight  : 300;
    color        : var(--ink-mid);
    margin-bottom: 0.5rem;
}

.art-empty-sub {
    font-size : 0.8rem;
    color     : var(--ink-faint);
}


/* ── Pagination ─────────────────────────────────────────────── */

.art-pagination {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 0.25rem;
    margin-top      : 5rem;
}

.art-pg-btn {
    font-family    : var(--font-body);
    font-size      : 0.75rem;
    letter-spacing : 0.08em;
    color          : var(--ink-mid);
    background     : transparent;
    border         : 1px solid transparent;
    width          : 2.25rem;
    height         : 2.25rem;
    display        : flex;
    align-items    : center;
    justify-content: center;
    cursor         : pointer;
    transition     : color var(--transition), border-color var(--transition);
}

.art-pg-btn:hover {
    color        : var(--ink);
    border-color : var(--ink-faint);
}

.art-pg-btn.is-active {
    color        : var(--accent);
    border-color : var(--accent);
}

.art-pg-ellipsis {
    color     : var(--ink-faint);
    font-size : 0.85rem;
    padding   : 0 0.25rem;
    user-select: none;
}