/* ==========================================================================
   Province Page Styles — ColdStorage Canada
   Page-specific styles for /provinces/[name].html. Mobile-first; tablet at
   768px, desktop at 1024px. All values reference design-system.css custom
   properties (no hard-coded colors or sizes — Rule 2).
   ========================================================================== */


/* ==========================================================================
   Province Hero
   The base .hero + .hero-standard classes from components.css handle the
   container + overlay positioning. We override only what's province-specific:
   text alignment of the CTAs and the cap on subtitle width.
   ========================================================================== */
.province-hero .hero-subtitle {
    /* Cap subtitle width so it doesn't stretch to a thin one-line ribbon
       on wide desktops — improves readability. */
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-4);
}

.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}


/* ==========================================================================
   Stats Snapshot Bar — 6-up grid
   Mobile: 2 columns. Tablet: 3. Desktop: 6 across one row.
   The base .stats-bar styling from components.css gives us the dark navy
   background + padding; we add the 6-up grid layout here.
   ========================================================================== */
.stats-grid-6 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4) var(--space-2);
}

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

@media (min-width: 1024px) {
    .stats-grid-6 {
        grid-template-columns: repeat(6, 1fr);
        gap: var(--space-2);
    }
}


/* ==========================================================================
   Market Overview — Two-column grid
   Single column on mobile/tablet, prose + 320px sidebar on desktop.
   ========================================================================== */
.province-overview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

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


/* ==========================================================================
   Prose container — paragraph spacing inside the market summary
   ========================================================================== */
.prose p {
    margin-bottom: var(--space-3);
    line-height: var(--leading-relaxed);
    color: var(--color-neutral-900);
}

.prose p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   Key Cities — pill tags
   Horizontal wrap of city name pills. JS populates as <span>s with the
   .province-city class so each pill carries the same styling.
   ========================================================================== */
.province-cities {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
}

.province-city {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-900);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}


/* ==========================================================================
   Demand Drivers — bullet list with arrow markers
   Removes default list-style and uses ::before to render an accent-coloured
   arrow flush-left, with the text indented to clear it.
   ========================================================================== */
.demand-drivers-heading {
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
}

.demand-drivers {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.demand-drivers 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);
}

.demand-drivers li::before {
    content: "\2192";  /* right-arrow glyph */
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: var(--font-bold);
}


/* ==========================================================================
   Province Sidebar — column container for the two cards
   ========================================================================== */
.province-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}


/* ==========================================================================
   Sidebar cards — generic white box used for operators + regulatory notes
   ========================================================================== */
.sidebar-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.sidebar-card h3 {
    margin-top: 0;
    margin-bottom: var(--space-3);
}

.sidebar-card p {
    color: var(--color-neutral-900);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-3);
}


/* ==========================================================================
   Operator List — divided rows inside the operators sidebar card
   ========================================================================== */
.operator-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.operator-list li {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-neutral-100);
    color: var(--color-neutral-900);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.operator-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.operator-list li:first-child {
    padding-top: 0;
}


/* ==========================================================================
   Services in This Market — section heading + service cards
   The .card-service base styling lives in components.css. We add the
   internal bullet list styling here since it's province-page specific.
   ========================================================================== */
.services-heading {
    text-align: center;
    margin-bottom: var(--space-6);
}

.services-grid {
    /* Override the base grid-2 to stack on mobile/tablet so cards have room */
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.service-bullets {
    list-style: none;
    padding-left: 0;
    margin-top: var(--space-2);
    margin-bottom: var(--space-4);
}

.service-bullets 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);
}

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


/* ==========================================================================
   Province Listings — section header (title + view-all link)
   ========================================================================== */
.province-listings-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.province-listings-header h2 {
    margin: 0;
}


/* ==========================================================================
   Contact CTA Section
   Caps the supporting copy width and adds breathing room between the
   heading, paragraph, and button.
   ========================================================================== */
.contact-cta-copy {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--space-2);
    margin-bottom: var(--space-4);
    color: var(--color-neutral-300);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}


/* ==========================================================================
   Breadcrumb wrapper
   Adds a faint background bar so the breadcrumb reads as its own stripe
   between the main nav and the hero. The breadcrumb component itself is
   styled in components.css.
   ========================================================================== */
.breadcrumb-nav {
    background-color: var(--color-neutral-100);
    padding-top: var(--nav-height);
    padding-bottom: 0;
}

.breadcrumb-nav .breadcrumb {
    flex-wrap: wrap;
}

/* End of file */