/* Queenston Listings — Branded Card Grid v1.0.0 */

#qlist-root {
    padding: 40px 0 48px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

.qlist-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(var(--qlist-cols, 3), 1fr);
}

@media (max-width: 900px) { .qlist-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .qlist-grid { grid-template-columns: 1fr; } }

/* Outer card wrapper */
.qlist-card {
    background: #fff;
    border: 1px solid rgba(12,28,52,0.12);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.qlist-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(12,28,52,0.14);
}

.qlist-card--featured {
    border: 2px solid var(--qlist-gold, #b89a3e);
}

/* Gold bar for featured */
.qlist-feat-bar {
    background: var(--qlist-gold, #b89a3e);
    padding: 7px 16px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.qlist-feat-bar__star {
    font-size: 13px;
    color: var(--qlist-navy, #0c1c34);
}

.qlist-feat-bar__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--qlist-navy, #0c1c34);
}

/* Navy header */
.qlist-card__head {
    background: var(--qlist-navy, #0c1c34);
    padding: 18px 18px 15px;
}

.qlist-card__type {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.qlist-card__type--sell { color: #e8a07a; }
.qlist-card__type--buy  { color: #7ecaaa; }
.qlist-card__type--both { color: #d4b86a; }

.qlist-card__title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 1.35;
}

/* AUM section */
.qlist-card__aum-wrap {
    padding: 16px 18px 12px;
    border-bottom: 1px solid #f0ede8;
}

.qlist-card__aum {
    font-size: 30px;
    font-weight: 700;
    color: var(--qlist-navy, #0c1c34);
    letter-spacing: -1px;
    line-height: 1;
}

.qlist-card__aum-label {
    font-size: 11px;
    color: #aaa;
    margin-top: 3px;
    letter-spacing: 0.03em;
}

/* Stats */
.qlist-card__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid #f0ede8;
}

.qlist-card__stat {
    padding: 11px 8px;
    border-right: 1px solid #f0ede8;
    text-align: center;
}

.qlist-card__stat:last-child { border-right: none; }

.qlist-card__stat-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--qlist-navy, #0c1c34);
}

.qlist-card__stat-label {
    font-size: 10px;
    color: #aaa;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Notes */
.qlist-card__notes {
    padding: 12px 18px;
    font-size: 12px;
    color: #666;
    line-height: 1.55;
    flex: 1;
    border-bottom: 1px solid #f0ede8;
}

/* CTA */
.qlist-card__cta {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qlist-btn {
    width: 100%;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: all 0.15s;
    letter-spacing: 0.01em;
}

.qlist-btn--primary {
    background: var(--qlist-gold, #b89a3e);
    color: var(--qlist-navy, #0c1c34);
}

.qlist-btn--primary:hover {
    filter: brightness(1.1);
}

.qlist-btn--outline {
    background: transparent;
    color: var(--qlist-navy, #0c1c34);
    border: 1.5px solid #ddd;
}

.qlist-btn--outline:hover {
    border-color: var(--qlist-gold, #b89a3e);
    color: var(--qlist-gold, #b89a3e);
}

/* Footer */
.qlist-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 11px;
    color: #bbb;
    letter-spacing: 0.04em;
}

/* Modal backdrop — normal-flow faux viewport */
.qlist-modal-bg {
    min-height: 460px;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    margin-top: 20px;
    padding: 20px;
}

.qlist-modal {
    background: #fff;
    border-radius: 14px;
    padding: 28px 30px;
    max-width: 400px;
    width: 100%;
    position: relative;
}

.qlist-modal__close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #aaa;
    padding: 4px 8px;
    line-height: 1;
}
.qlist-modal__close:hover { color: #333; }

.qlist-modal__bar {
    height: 4px;
    border-radius: 4px;
    background: var(--qlist-gold, #b89a3e);
    margin-bottom: 20px;
}

.qlist-modal__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--qlist-gold, #b89a3e);
    margin-bottom: 4px;
}

.qlist-modal__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--qlist-navy, #0c1c34);
    margin-bottom: 18px;
    line-height: 1.35;
}

.qlist-modal__name { font-size: 15px; font-weight: 600; color: var(--qlist-navy, #0c1c34); margin-bottom: 2px; }
.qlist-modal__role { font-size: 12px; color: #888; margin-bottom: 14px; }

.qlist-modal__contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #444;
    margin-bottom: 10px;
    text-decoration: none;
}
.qlist-modal__contact-row:hover { color: var(--qlist-gold, #b89a3e); }

.qlist-modal__contact-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--qlist-cream, #f8f4ee);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}

.qlist-modal__cal-btn {
    display: block;
    width: 100%;
    padding: 11px;
    text-align: center;
    border-radius: 8px;
    background: var(--qlist-navy, #0c1c34);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
    margin-top: 16px;
    transition: opacity 0.15s;
}
.qlist-modal__cal-btn:hover { opacity: 0.85; }

.qlist-modal__nda {
    margin-top: 12px;
    font-size: 11px;
    color: #bbb;
    text-align: center;
    line-height: 1.5;
}