/* ==========================================================================
   Listings Page Styles — ColdStorage Canada
   Page-specific styles for /listings/index.html. Mobile-first; tablet at
   768px, desktop at 1024px. All values reference design-system.css custom
   properties.
   ========================================================================== */


/* ==========================================================================
   Listings Hero — compact dark page banner
   The .hero base class in components.css positions content with padding-top
   equal to the nav height; we override .hero-content padding here so the
   compact hero looks balanced rather than top-heavy.
   ========================================================================== */
.listings-hero .hero-content {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
}

.listings-count-hero {
    color: var(--color-neutral-300);
    font-size: var(--text-lg);
    margin-top: var(--space-2);
}


/* ==========================================================================
   Filter Bar — sticky search & filter container
   Sticks to the top of the viewport just below the fixed nav once the
   user scrolls past the hero. Drop shadow lifts it visually off the
   content scrolling underneath.
   ========================================================================== */
#filter-bar {
    position: sticky;
    top: var(--nav-height);
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    z-index: 100;
    border-bottom: 1px solid var(--color-neutral-100);
}


/* ==========================================================================
   Search wrapper and input
   The magnifier glyph sits inside the input via absolute positioning;
   the input itself has a left padding large enough to clear the icon.
   ========================================================================== */
.search-wrapper {
    position: relative;
    margin-bottom: var(--space-2);
}

.search-icon {
    position: absolute;
    left: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-neutral-400);
    font-size: var(--text-base);
    line-height: 1;
    pointer-events: none;
    /* Use system emoji fonts so the glyph renders consistently */
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.search-input {
    /* .form-input from components.css provides border, radius, focus ring,
       and padding. We add extra left padding to clear the search icon. */
    padding-left: var(--space-5);
}


/* ==========================================================================
   Filter row — wrapping flex of dropdowns
   Each dropdown grows to fill available width on mobile (one per row at
   narrow widths), wrapping into multiple rows on tablet and desktop.
   ========================================================================== */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.filter-select {
    /* Inherits .form-input + .form-select from components.css for borders,
       focus ring, and the custom dropdown chevron. We override just the
       sizing rules so each select fills the row correctly. */
    flex: 1 1 100%;
    min-width: 160px;
}

@media (min-width: 480px) {
    .filter-select {
        /* Two-up at small widths */
        flex: 1 1 calc(50% - var(--space-1));
    }
}

@media (min-width: 768px) {
    .filter-select {
        /* Three-up at tablet width */
        flex: 1 1 calc(33.333% - var(--space-1));
    }
}

@media (min-width: 1024px) {
    .filter-select {
        /* All five fit on one row at desktop width, each fluid */
        flex: 1 1 0;
    }
}


/* ==========================================================================
   Filter meta row — results count + clear button
   ========================================================================== */
.filter-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-neutral-600);
}

.filter-meta #results-count {
    flex: 1;
}


/* ==========================================================================
   Off-market CTA section
   Caps the supporting copy width so a single-line headline doesn't drag
   a long paragraph across the full container at desktop sizes.
   ========================================================================== */
.off-market-copy {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--space-2);
    margin-bottom: var(--space-4);
    color: var(--color-neutral-600);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}


/* ==========================================================================
   Pagination
   Centered horizontal row of page buttons rendered by JavaScript. The
   .pagination-wrapper is empty on first paint — buttons appear once
   listings are rendered and pagination is needed.
   ========================================================================== */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-8);
}

.page-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    cursor: pointer;
    background-color: var(--color-white);
    color: var(--color-neutral-900);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: 1;
    transition: var(--transition-base);
}

.page-btn:hover,
.page-btn:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-accent);
    outline: none;
}

.page-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.page-btn.active {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

.page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================================================
   Empty State
   Shown inside #listings-grid when filters return zero results, or when
   the dataset itself is empty. Spans the full grid width via grid-column
   so the panel reads as a centered block, not a card-sized cell.
   ========================================================================== */
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.empty-icon {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: var(--space-3);
    /* Use system emoji fonts for consistent rendering across platforms */
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.empty-state h3 {
    color: var(--color-neutral-900);
    margin-bottom: var(--space-2);
}

.empty-state p {
    color: var(--color-neutral-600);
    margin-bottom: var(--space-3);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================================
   Pagination Ellipsis
   The "..." gap that appears between numbered page buttons when the
   total page count exceeds the visible window.
   ========================================================================== */
.page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-neutral-400);
    font-size: var(--text-base);
    user-select: none;
}

/* ==========================================================================
   Listing Detail — Breadcrumb wrapper
   The breadcrumb component itself lives in components.css; here we just
   give the surrounding nav a faint background bar so it reads as its own
   stripe between the main nav and the gallery hero.
   ========================================================================== */
.breadcrumb-nav {
    background-color: var(--color-neutral-100);
    padding-top: var(--nav-height);
    padding-bottom: 0;
}

.breadcrumb-nav .breadcrumb {
    /* Convert the inline-flex breadcrumb from components.css into a wrapping
       horizontal list so long property titles don't overflow on mobile */
    flex-wrap: wrap;
}


/* ==========================================================================
   CTA spacing helper
   Used on the primary CTA inside the sticky info card to put a small gap
   between it and the next button below. Replaces the inline margin-bottom
   that was in the original spec to keep us Rule 1-compliant.
   ========================================================================== */
.cta-spaced {
    margin-bottom: var(--space-2);
}


/* ==========================================================================
   Listing Detail — Gallery
   Full-width main image with a horizontal thumbnail strip below. Status
   and featured badges sit overlaid on the main image's top-left corner.
   ========================================================================== */
.listing-gallery {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.gallery-main {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-2);
    background-color: var(--color-neutral-100);
}

.gallery-main-img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
}

/* Smaller hero on mobile so the gallery doesn't dominate the viewport */
@media (max-width: 767px) {
    .gallery-main-img {
        height: 280px;
    }
}

.gallery-badges {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    z-index: 1;
}

/* Horizontal-scrolling thumbnail strip */
.gallery-thumbs {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    /* Smooth touch scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar visually but keep scroll behavior */
    scrollbar-width: thin;
    padding-bottom: var(--space-1);
}

.gallery-thumb {
    width: 100px;
    height: 70px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0.7;
    flex-shrink: 0;
    border: none;
    background-color: var(--color-neutral-100);
    transition: opacity var(--transition-base);
}

.gallery-thumb:hover,
.gallery-thumb:focus-visible {
    opacity: 1;
    outline: none;
}

.gallery-thumb.active {
    opacity: 1;
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.gallery-thumb:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}


/* ==========================================================================
   Listing Detail — Header section
   Two-column layout on desktop (main info + sticky info card).
   Single column on mobile, with the info card stacked beneath the main info.
   ========================================================================== */
.listing-header {
    background-color: var(--color-white);
}

.listing-header-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 1024px) {
    .listing-header-grid {
        grid-template-columns: 1fr 380px;
        gap: var(--space-6);
    }
}


/* ==========================================================================
   Listing Detail — Main info column (left side)
   ========================================================================== */
.listing-main-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.listing-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
}

.listing-location {
    font-size: var(--text-lg);
    color: var(--color-neutral-600);
    margin-top: var(--space-1);
    margin-bottom: var(--space-1);
}

.listing-temp-zones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

.listing-date {
    font-size: var(--text-sm);
    color: var(--color-neutral-400);
    margin-top: var(--space-2);
}


/* ==========================================================================
   Listing Detail — Sticky info card (right side, desktop only)
   On desktop, sticks below the nav as the user scrolls. On mobile, the
   sticky behavior is removed since the card stacks at full width.
   ========================================================================== */
.listing-info-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    box-shadow: var(--shadow-lg);
    align-self: start;
}

@media (min-width: 1024px) {
    .listing-info-card {
        position: sticky;
        top: calc(var(--nav-height) + var(--space-2));
    }
}


/* ==========================================================================
   Listing Detail — Price + Quick Specs
   ========================================================================== */
.listing-price {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--color-accent);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-3);
}

.listing-quick-specs {
    border-top: 1px solid var(--color-neutral-300);
    border-bottom: 1px solid var(--color-neutral-300);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
    list-style: none;
}

.listing-quick-specs li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-neutral-600);
}

.listing-quick-specs li > span:last-child {
    color: var(--color-neutral-900);
    font-weight: var(--font-semibold);
}

/* CFIA approved row sits between specs and CTAs */
.listing-cfia-row {
    margin-bottom: var(--space-3);
}


/* ==========================================================================
   Listing Detail — Broker card
   Inline avatar + contact details. Avatar is an emoji glyph for now; will
   be swapped for a real photo once team headshots are uploaded to R2.
   ========================================================================== */
.broker-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-neutral-300);
}

.broker-avatar {
    font-size: var(--text-3xl);
    line-height: 1;
    flex-shrink: 0;
    /* Use system emoji fonts so the glyph renders consistently */
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.broker-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    /* Allow long emails to wrap inside the narrow info card */
    word-break: break-word;
}

.broker-info strong {
    color: var(--color-neutral-900);
    font-size: var(--text-base);
    line-height: var(--leading-tight);
}

.broker-info p {
    font-size: var(--text-sm);
    color: var(--color-neutral-600);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-1);
}

.broker-info a {
    font-size: var(--text-sm);
    color: var(--color-accent);
    line-height: var(--leading-normal);
    transition: color var(--transition-base);
}

.broker-info a:hover,
.broker-info a:focus-visible {
    color: var(--color-secondary);
    outline: none;
}

/* ==========================================================================
   Listing Detail — Tabs
   Horizontal tab nav with bottom-border indicator on the active tab.
   On mobile, the nav scrolls horizontally so the four tabs always fit.
   The matching panels show/hide via .active class + the `hidden` attribute,
   so they're invisible without JavaScript too.
   ========================================================================== */
.listing-tabs-section {
    background-color: var(--color-white);
}


/* ==========================================================================
   Listing Detail — Description and Highlights inside Overview tab
   ========================================================================== */
.tab-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.listing-description-text {
    color: var(--color-neutral-900);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
}

.listing-highlights-heading {
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
}

.listing-highlights {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.listing-highlights li {
    position: relative;
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    padding-left: var(--space-3);
    color: var(--color-neutral-900);
    line-height: var(--leading-relaxed);
}

.listing-highlights li::before {
    content: "\2713";  /* checkmark */
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: var(--font-bold);
}


/* ==========================================================================
   Listing Detail — Specs Table
   Used by both the Specifications tab and the Financial tab. Two-column
   layout (label / value) with thin row dividers.
   ========================================================================== */
.specs-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-3);
}

.specs-table th,
.specs-table td {
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-neutral-300);
    text-align: left;
    vertical-align: top;
}

.specs-table th {
    font-weight: var(--font-semibold);
    width: 200px;
    color: var(--color-neutral-600);
    font-size: var(--text-sm);
}

.specs-table td {
    color: var(--color-neutral-900);
    font-size: var(--text-base);
}

/* On mobile the 200px label column gets too cramped — let it shrink */
@media (max-width: 600px) {
    .specs-table th {
        width: 40%;
    }
}


/* ==========================================================================
   Listing Detail — Map Placeholder
   Static block that hints at a map without loading any third-party tiles.
   Reserved area when JavaScript / Cloudflare integration adds a real map.
   ========================================================================== */
.map-placeholder {
    background-color: var(--color-neutral-100);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    text-align: center;
    color: var(--color-neutral-600);
    margin-top: var(--space-3);
}

.map-placeholder-icon {
    display: block;
    font-size: var(--text-3xl);
    line-height: 1;
    margin-bottom: var(--space-2);
    /* Use system emoji fonts for consistent rendering across platforms */
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}


/* ==========================================================================
   Listing Detail — Inquiry Form section
   Two-column layout at desktop: form on the left, "what happens next"
   sidebar on the right. Stacks on mobile with the sidebar below the form.
   ========================================================================== */
.inquiry-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 1024px) {
    .inquiry-grid {
        grid-template-columns: 1fr 360px;
        gap: var(--space-6);
    }
}

.inquiry-form-wrapper h2 {
    margin-bottom: var(--space-1);
}

.inquiry-form-wrapper > p {
    margin-bottom: var(--space-3);
}


/* ==========================================================================
   Listing Detail — "What Happens Next" sidebar
   Numbered steps + a soft guarantee block. Sits inside .inquiry-grid's
   right column on desktop, below the form on mobile.
   ========================================================================== */
.inquiry-sidebar {
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    align-self: start;
}

.inquiry-sidebar h3 {
    margin-bottom: var(--space-2);
}

.inquiry-steps {
    list-style: decimal;
    padding-left: var(--space-3);
    margin-top: var(--space-2);
    margin-bottom: 0;
}

.inquiry-steps li {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-neutral-900);
}

.inquiry-guarantee {
    background-color: var(--color-accent-light);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-top: var(--space-4);
}

.inquiry-guarantee strong {
    display: block;
    color: var(--color-neutral-900);
    margin-bottom: var(--space-1);
}

.inquiry-guarantee p {
    color: var(--color-neutral-600);
    font-size: var(--text-sm);
    margin: 0;
}


/* ==========================================================================
   Form Honeypot
   Hidden anti-spam field — positioned off-screen rather than display:none
   so naive form-fillers still see and fill it. Duplicated here from
   home.css so the listings page doesn't depend on the homepage's stylesheet.
   ========================================================================== */
.form-honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* End of file */