/*
 * coc/address-card — mobile-first card styles.
 * Spec §4: cards stack vertically on iPhone SE (375px); ECharts canvases auto-resize.
 * Brand palette is intentionally inherited from the theme via currentColor + CSS vars.
 */

.coc-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem 1.25rem 1.25rem;
    margin: 1rem 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.coc-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.coc-card__title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.coc-card__actions {
    display: flex;
    gap: 0.5rem;
}

.coc-card__btn {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    color: #1f2937;
    cursor: pointer;
    transition: background 0.15s ease;
}

.coc-card__btn:hover { background: #e5e7eb; }
.coc-card__btn:focus { outline: 2px solid #2563eb; outline-offset: 2px; }

.coc-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* Anchors absolute-positioned loading/error overlays so toggling
     * their visibility doesn't reflow surrounding card content (CLS fix
     * 2026-06-19). */
    position: relative;
}

.coc-card__kpi {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0;
    /* Reserve placeholder height so populated KPIs don't bump the chart
     * downward after data lands. Covers label + value + single ctx line. */
    min-height: 90px;
}

.coc-card__kpi-label {
    font-size: 0.8125rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.coc-card__kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: #111827;
}

.coc-card__ctx {
    font-size: 0.875rem;
    color: #374151;
    margin-top: 0.25rem;
}

.coc-card__chart {
    width: 100%;
    height: 240px;
    min-height: 240px;
}

/* Card 2 (Property Tax) stacks two charts: historical line + breakdown bar.
 * min-height covers both stacked rows (260 + 180 + gap). */
.coc-card--2 .coc-card__chart {
    height: auto;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Phase 4 cards (POI grid, parks list, featured carousel, claim CTA) grow with
 * content — but we still need to reserve a placeholder so the empty 240px
 * default doesn't snap to natural height when JS hydrates. CLS fix
 * 2026-06-19. Replaces the prior inline JS `style.height='auto'` overrides. */
.coc-card--4 .coc-card__chart,
.coc-card--5 .coc-card__chart,
.coc-card--6 .coc-card__chart {
    height: auto;
    min-height: 280px;
}
.coc-card--2 .coc-card__chart-row {
    width: 100%;
}
.coc-card--2 .coc-card__chart-row--history {
    height: 260px;
    min-height: 260px;
}
.coc-card--2 .coc-card__chart-row--breakdown {
    height: 180px;
    min-height: 180px;
}

.coc-card__note {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
    text-align: center;
    padding: 2rem 1rem;
}

.coc-card__loading,
.coc-card__error {
    /* Absolute overlay — when JS toggles these hidden after data lands,
     * the surrounding card content stays put. Keeps CLS contribution to 0. */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    text-align: center;
    width: max-content;
    max-width: 90%;
    pointer-events: none;
}

.coc-card__loading {
    font-size: 0.875rem;
    color: #6b7280;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
}

.coc-card__error {
    font-size: 0.875rem;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 0.625rem 0.875rem;
    pointer-events: auto;
}

.coc-card__foot {
    margin-top: 0.75rem;
    padding-top: 0.625rem;
    border-top: 1px solid #f3f4f6;
}

.coc-card__source {
    font-size: 0.75rem;
    color: #6b7280;
}

/* Primary CTA button (Card #6 empty state, Card #7) */
.coc-card__btn--primary {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
    padding: 0.5rem 1rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}
.coc-card__btn--primary:hover { background: #1d4ed8; border-color: #1d4ed8; }

/* ---------- Card 4: Daily Essentials POI grid ---------- */
.coc-poi-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}
.coc-poi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    padding: 0.625rem 0.75rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.8125rem;
    min-height: 88px;
}
.coc-poi__icon { font-size: 1.25rem; line-height: 1; }
.coc-poi__label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
    color: #6b7280;
}
.coc-poi__name {
    color: #111827;
    font-weight: 600;
    line-height: 1.2;
    word-break: break-word;
}
a.coc-poi__name { text-decoration: none; color: #1d4ed8; }
a.coc-poi__name:hover { text-decoration: underline; }
.coc-poi__distance { color: #6b7280; font-size: 0.75rem; }
.coc-poi--empty, .coc-poi--soon {
    opacity: 0.55;
    background: #f3f4f6;
    border-style: dashed;
}

/* ---------- Card 5: Parks list ---------- */
.coc-park-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.coc-park {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: 'name badge' 'meta badge';
    align-items: center;
    column-gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
}
.coc-park__name { grid-area: name; font-weight: 600; color: #14532d; }
.coc-park__meta { grid-area: meta; font-size: 0.8125rem; color: #166534; }
.coc-park__badge {
    grid-area: badge;
    font-size: 0.6875rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #14532d;
    background: #dcfce7;
    border: 1px solid #86efac;
}
.coc-park__badge--medium { background: #bbf7d0; }
.coc-park__badge--large  { background: #86efac; color: #052e16; }

/* Clickable park rows — only when paired with the hero map. JS sets
 * data-coc-park-wired on rows that successfully bound a handler, so the
 * cursor/hover affordance never appears for rows that wouldn't do anything. */
.coc-park[data-coc-park-wired="1"] {
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.coc-park[data-coc-park-wired="1"]:hover {
    background: #dcfce7;
    border-color: #86efac;
}
.coc-park[data-coc-park-wired="1"]:focus {
    outline: 2px solid #15803d;
    outline-offset: 2px;
}
.coc-park[data-coc-park-wired="1"] .coc-park__name::after {
    content: ' ↑';
    color: #15803d;
    font-weight: 400;
    opacity: 0.6;
}

/* ---------- Card 6: Featured-near carousel ---------- */
.coc-fbiz-carousel {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.coc-fbiz {
    flex: 0 0 240px;
    scroll-snap-align: start;
}
.coc-fbiz__link {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    border: 2px solid #facc15;
    background: linear-gradient(180deg, #fefce8 0%, #ffffff 60%);
    border-radius: 10px;
    color: #1f2937;
    text-decoration: none;
    height: 100%;
}
.coc-fbiz__link:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.08); transform: translateY(-1px); }
.coc-fbiz__ribbon {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: linear-gradient(180deg, #fde047 0%, #ca8a04 100%);
    color: #422006;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.coc-fbiz__photo {
    display: block;
    height: 96px;
    background: #f3f4f6 center/cover no-repeat;
    border-radius: 6px;
    margin-bottom: 0.25rem;
}
.coc-fbiz__name {
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1.2;
    color: #111827;
}
.coc-fbiz__meta { font-size: 0.8125rem; color: #6b7280; }
.coc-fbiz__distance {
    font-size: 0.75rem;
    color: #374151;
    margin-top: auto;
}
.coc-fbiz__distance--service { font-style: italic; color: #6b7280; }
.coc-featured-empty { text-align: center; padding: 1rem 0.5rem; }
.coc-featured-empty__cta { margin-top: 0.5rem; }

/* Commercial-address fallback (class-commercial-redirect.php replaces the
 * card stack with this notice when address_type=commercial and there's no
 * business in the directory to redirect to). */
.coc-commercial-not-available {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin: 1.5rem 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.coc-commercial-not-available h2 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0 0 0.75rem;
    color: #1f2937;
}
.coc-commercial-not-available p {
    margin: 0 0 0.75rem;
    color: #374151;
    line-height: 1.55;
}
.coc-commercial-not-available a {
    color: #2563eb;
    text-decoration: underline;
}
.coc-commercial-not-available__cta {
    display: inline-block;
    background: #2563eb;
    color: #fff !important;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none !important;
    font-weight: 600;
    margin-right: 0.5rem;
}
.coc-commercial-not-available__cta:hover { background: #1d4ed8; }

/* ---------- Phase 5: Hero map (Leaflet) ---------- */
.coc-card--hero-map {
    padding: 0.75rem 0.75rem 1rem;
    margin-top: 0;
}
.coc-card--hero-map .coc-card__head {
    padding: 0 0.5rem;
}
.coc-card--hero-map .coc-card__body {
    gap: 0.5rem;
}
.coc-card--hero-map .coc-card__foot {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.coc-hero-map {
    width: 100%;
    height: 480px;
    min-height: 320px;
    border-radius: 8px;
    overflow: hidden;
    background: #e5e7eb;
}
.coc-hero-map .leaflet-control-layers {
    font-size: 0.8125rem;
}
.coc-hero-map .leaflet-popup-content {
    font-size: 0.875rem;
    line-height: 1.4;
    margin: 0.5rem 0.625rem;
}
.coc-hero-map .leaflet-popup-content a {
    color: #1d4ed8;
    text-decoration: underline;
}
.coc-hero-map__pin {
    background: transparent !important;
    border: 0 !important;
}

/* Mobile (iPhone SE 375px) */
@media (max-width: 480px) {
    .coc-card { padding: 0.875rem 1rem 1rem; margin: 0.75rem 0; border-radius: 10px; }
    .coc-card__title { font-size: 1rem; }
    .coc-card__kpi-value { font-size: 1.5rem; }
    .coc-card__chart { height: 200px; min-height: 200px; }
    .coc-card__actions { width: 100%; justify-content: flex-end; margin-top: 0.25rem; }
    /* Mobile overflow fix (2026-06-23): long inline labels (e.g. "$857,212",
     * "Source: Calgary Open Data 4bsw-nn7w (current) + 4ur7-wsgc (history)")
     * + ECharts legend/axis text were bleeding past the right edge at 375px.
     * Combined causes: (a) flex children default to min-width: auto and refuse
     * to shrink past content width, (b) ECharts canvases render legend rows +
     * axis labels wider than the container, (c) ctx text was inline (<span>)
     * so width constraints didn't propagate. Card-level overflow-x: hidden is
     * the safety net that guarantees nothing bleeds past the card edge. */
    .coc-card { overflow-x: hidden; }
    .coc-card__body,
    .coc-card__kpi,
    .coc-card__chart { min-width: 0; }
    .coc-card__chart { overflow: hidden; }
    .coc-card__ctx,
    .coc-card__source {
        display: block;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .coc-card__kpi-value { overflow-wrap: anywhere; }
    /* Phase 4 cards override the fixed chart height — they auto-fit content,
     * with reserved min-heights to keep CLS at 0 on hydrate. */
    .coc-card--2 .coc-card__chart { min-height: 400px; }
    .coc-card--4 .coc-card__chart,
    .coc-card--5 .coc-card__chart,
    .coc-card--6 .coc-card__chart { height: auto; min-height: 260px; }
    /* Card 4 mobile: 2-up grid per spec §4 mobile rule. */
    .coc-poi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Card 6 carousel — slightly narrower tiles on small screens. */
    .coc-fbiz { flex-basis: 200px; }
    /* Phase 5: hero map shrinks but keeps a workable interaction surface. */
    .coc-hero-map { height: 320px; min-height: 280px; }
    .coc-card--hero-map { padding: 0.5rem 0.5rem 0.875rem; }
}