/* webroot/css/catalogue.css - listing grid + tier styles */

.listings { padding: 2rem; }
.listings h2 { margin-bottom: 1rem; font-family: "Chelsea Market", serif; }

/* grid */
.listings-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: stretch;
}

/* card baseline */
.listing-card {
    position: relative;
    background: #fff;
    border-radius: 8px;
    padding: 1rem;
    box-sizing: border-box;
    width: calc(33.333% - 0.833rem); /* 3 columns desktop */
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    display: flex;
    flex-direction: column;
    min-height: 360px;
}

/* responsive */
@media (max-width: 1000px) {
    .listing-card { width: calc(50% - 0.625rem); } /* 2 columns */
}
@media (max-width: 640px) {
    .listing-card { width: 100%; } /* single column */
}

/* thumbnail */
.thumb { margin-bottom: 0.75rem;}
.thumb-img { margin-left: 1.3rem; width: 100%; height: 160px; object-fit: unset; border-radius: 6px; }
img { object-fit: contain;}

/* title & meta */
.listing-title { font-size: 1.1rem; margin: 0.5rem 0; }
.meta { margin-bottom: 0.5rem; color: #333; font-size: 0.95rem; }
.badge { background: #f1f1f1; padding: 4px 8px; border-radius: 999px; margin-right: 6px; font-size: 0.85rem; }

/* service pill */
.service-pill { display:inline-block; margin:4px 6px 0 0; padding: 6px 10px; border-radius: 999px; background:#f4f7fb; font-size:0.85rem; }

/* actions */
.card-actions { margin-top: auto; display:flex; gap:8px; align-items:center; }

/* tier badge (top-right) */
.card-header { display:flex; justify-content:flex-end; }
.tier-badge {
    font-weight:700; padding:6px 10px; border-radius:16px; font-size:0.9rem;
}

/* Tier-specific looks */
.listing-card.free { border: 2px solid #d1d5db; background:#f9fafb; }
/*.listing-card.free .tier-badge { background:#e6e7e9; color:#0b0b0b; } */

.listing-card.enhanced { border:2px solid rgba(0, 60, 128, 0.4); background: linear-gradient(180deg, #f0fbff,#fff); box-shadow: 0 2px 6px rgba(59, 190, 246, 0.23); }
.listing-card.enhanced .tier-badge { background: rgba(0, 60, 128, 0.45); color:#ffffff; }

.listing-card.featured { border:2px solid rgba(0, 0, 255, 0.68); background: #f0f3ff; box-shadow: 0 4px 12px rgba(245,158,11,0.08); }
.listing-card.featured .tier-badge { background: rgba(0, 0, 255, 0.71); color:#fff; }

.listing-card.premium {
    border-width: 3px;
    border-style: solid;
    border-image: linear-gradient(90deg, #f6d24c, #fb8465) 1;
    background: linear-gradient(180deg, #fbf2e4,#fffdfa);
    box-shadow: 0 10px 30px rgba(250, 160, 60, 0.27);
}
.listing-card.premium .tier-badge { background: linear-gradient(90deg,#f59e0b,#ff6b6b); color:#fff; }

/* hover effect */
.listing-card:hover { transform: translateY(-6px); box-shadow: 0 14px 36px rgba(22,28,36,0.08); }

/* utility */
.button.primary { background:#3b82f6; color:#fff; padding:8px 12px; border-radius:6px; text-decoration:none; }
.button.small { padding:6px 10px; border-radius:6px; text-decoration:none; background:#e9eefb; }
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-toggle {
    background: #f5f5f5;
    border: 1px solid #ccc;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
}
.dropdown-menu {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 5px;
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.dropdown.open .dropdown-menu {
    display: block;
}
.button-accessibility {
    background-color: var(--bodyTextColorWhite);
    color: var(--bodyTextColor);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9rem;
    line-height: 2.4rem;
}
.button-accessibility:hover {
    background-color: #d1d1d1;
    color: var(--bodyTextColor);
}