/**
 * WWPosts Design System — Phase 2 discovery surfaces
 * ==================================================
 * Feed post cards, show content cards, map chrome, ad slots.
 * Additive token chrome — structure/layout stay in site.css.
 */

/* -------------------------------------------------------------------------- */
/* Feed post cards (.cp-card / x-post-card)                                     */
/* Same outer glow as deep-well fields (--cp-field-glow / --cp-field-glow-focus)*/
/* overflow must stay visible or the glow is clipped (unlike inputs).          */
/* -------------------------------------------------------------------------- */
.cp-card.card {
    --cp-card-border-width: 3px;
    --cp-card-cat: var(--cp-border-strong);
    background: var(--cp-raised) !important;
    color: var(--cp-ink);
    border: var(--cp-card-border-width) solid var(--cp-card-cat, var(--cp-border)) !important;
    border-radius: var(--cp-radius-lg) !important;
    /* CRITICAL: visible — overflow:hidden clips outer glow (same as deep-well inputs) */
    overflow: visible !important;
    /* Rest state: category border only — NO outer glow (like Category field on newstyles) */
    box-shadow: var(--cp-shadow-md) !important;
    outline: none !important;
    transition:
        transform var(--cp-duration-med) var(--cp-ease-out),
        box-shadow var(--cp-duration-med) var(--cp-ease-out),
        border-color var(--cp-duration-fast) ease !important;
}

/* Business / ad shells must clip the hero — overflow:visible above squares top corners */
.cp-card.card.cp-card--business,
.cp-business-card .cp-card.card,
.cp-business-card__shell.cp-card {
    overflow: hidden !important;
}

.cp-card.cp-card--event { --cp-card-cat: var(--cp-cat-event); }
.cp-card.cp-card--trail { --cp-card-cat: var(--cp-cat-trail); }
.cp-card.cp-card--spot { --cp-card-cat: var(--cp-cat-spot); }
.cp-card.cp-card--track { --cp-card-cat: var(--cp-cat-track); }
.cp-card.cp-card--product { --cp-card-cat: var(--cp-cat-product); }
.cp-card.cp-card--compare { --cp-card-cat: var(--cp-cat-compare); }
.cp-card.cp-card--market { --cp-card-cat: var(--cp-cat-market, var(--cp-cat-marketplace)); }
.cp-card.cp-card--business { --cp-card-cat: #c4a574; }

.cp-card.cp-card--event,
.cp-card.cp-card--trail,
.cp-card.cp-card--spot,
.cp-card.cp-card--track,
.cp-card.cp-card--product,
.cp-card.cp-card--compare,
.cp-card.cp-card--market,
.cp-card.cp-card--business {
    border-color: var(--cp-card-cat) !important;
    box-shadow: var(--cp-shadow-md) !important;
}

/* Not Active (unpublished) — dashed category border so owner/staff cards read as inactive */
.cp-card.card.cp-card--not-active,
.cp-card.cp-card--not-active {
    border-style: dashed !important;
}

.card.cp-content-card.cp-content-card--not-active {
    border-style: dashed !important;
}

/* Clip media only — not the card shell */
.cp-card .cp-card-img-wrap {
    overflow: hidden !important;
    border-top-left-radius: calc(var(--cp-radius-lg, 1rem) - 2px);
    border-top-right-radius: calc(var(--cp-radius-lg, 1rem) - 2px);
    border-bottom: 1px solid var(--cp-hairline);
    background-color: var(--cp-sunken) !important;
}

/* Hover: lift + slight category glow (weaker than selected / ns-field:focus) */
.cp-card.card:hover:not(.cp-card--selected):not(.cp-card--active):not(.cp-card-selected):not(.cp-card--pin-focus) {
    transform: translateY(-4px);
    border-color: var(--cp-card-cat, var(--cp-border-strong)) !important;
    box-shadow:
        var(--cp-shadow-lg),
        0 0 0 2px color-mix(in srgb, var(--cp-card-cat) 28%, transparent),
        0 0 14px color-mix(in srgb, var(--cp-card-cat) 32%, transparent) !important;
}

/*
 * Selected = /dev/design-newstyles .ns-field--well:focus outer bloom
 *   box-shadow: 0 0 0 3px rgba(61,124,255,.32), 0 0 18px rgba(61,124,255,.18)
 * Category-tinted + boosted so Spots purple (etc.) reads clearly on dark chrome.
 * JS also sets inline box-shadow !important as a cascade backstop.
 */
.cp-card.card.cp-card--selected,
.cp-card.card.cp-card--active,
.cp-card.card.cp-card-selected,
.cp-card.card.cp-card--pin-focus,
.cp-card.cp-card--selected,
.cp-card.cp-card--active,
.cp-card.cp-card-selected,
.cp-card.cp-card--pin-focus,
.cp-card.card.cp-card--selected:hover,
.cp-card.card.cp-card--active:hover,
.cp-card.card.cp-card-selected:hover,
.cp-card.card.cp-card--pin-focus:hover,
.cp-card.cp-card--spot.cp-card--selected,
.cp-card.cp-card--spot.cp-card--pin-focus,
.cp-card.cp-card--event.cp-card--selected,
.cp-card.cp-card--trail.cp-card--selected,
.cp-card.cp-card--market.cp-card--selected {
    overflow: visible !important;
    border-color: var(--cp-card-cat) !important;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--cp-card-cat) 55%, transparent),
        0 0 18px color-mix(in srgb, var(--cp-card-cat) 55%, transparent),
        0 0 36px color-mix(in srgb, var(--cp-card-cat) 35%, transparent) !important;
    z-index: 6;
    position: relative;
}

html[data-cp-theme="dark"] .cp-card.card,
html[data-cp-theme="dark"] .cp-card {
    background: var(--cp-raised) !important;
    background-color: var(--cp-raised) !important;
}

.cp-card .card-body,
.cp-card .cp-card-content-col > .card-body,
.cp-card.cp-card--market > .card-body {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--cp-ink);
    /* Let meta + 2-line description show fully (was clipped by fixed aspect-ratio + overflow). */
    aspect-ratio: auto !important;
    overflow: visible !important;
    flex-grow: 1 !important;
    min-height: 0;
    justify-content: flex-start !important;
}

.cp-card .cp-post-card__title,
.cp-card .cp-card-title-link {
    color: var(--cp-ink) !important;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.cp-card .cp-post-card__body-excerpt {
    color: var(--cp-ink-muted) !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: none;
}

.cp-card .cp-post-card__meta-text,
.cp-card .text-body-secondary {
    color: var(--cp-ink-muted) !important;
}

.cp-card .card-footer,
.cp-card .cp-card-action-footer {
    background: transparent !important;
    background-color: transparent !important;
    border-top: 1px solid var(--cp-hairline) !important;
}

/* -------------------------------------------------------------------------- */
/* Show-page content card — same surface + category border as feed postcards   */
/* -------------------------------------------------------------------------- */
.card.cp-content-card {
    --cp-card-border-width: 3px;
    --cp-card-cat: var(--cp-border-strong);
    background: var(--cp-raised) !important;
    background-color: var(--cp-raised) !important;
    color: var(--cp-ink);
    border: var(--cp-card-border-width) solid var(--cp-card-cat, var(--cp-border)) !important;
    border-radius: var(--cp-radius-lg) !important;
    box-shadow: var(--cp-shadow-md) !important;
    overflow: hidden;
}

.card.cp-content-card.cp-content-card--event { --cp-card-cat: var(--cp-cat-event); }
.card.cp-content-card.cp-content-card--trail { --cp-card-cat: var(--cp-cat-trail); }
.card.cp-content-card.cp-content-card--spot { --cp-card-cat: var(--cp-cat-spot); }
.card.cp-content-card.cp-content-card--track { --cp-card-cat: var(--cp-cat-track); }
.card.cp-content-card.cp-content-card--product { --cp-card-cat: var(--cp-cat-product); }
.card.cp-content-card.cp-content-card--compare { --cp-card-cat: var(--cp-cat-compare); }
.card.cp-content-card.cp-content-card--market { --cp-card-cat: var(--cp-cat-market, var(--cp-cat-marketplace)); }

.card.cp-content-card.cp-content-card--event,
.card.cp-content-card.cp-content-card--trail,
.card.cp-content-card.cp-content-card--spot,
.card.cp-content-card.cp-content-card--track,
.card.cp-content-card.cp-content-card--product,
.card.cp-content-card.cp-content-card--compare,
.card.cp-content-card.cp-content-card--market {
    border-color: var(--cp-card-cat) !important;
}

.card.cp-content-card .card-header {
    border-bottom: 1px solid var(--cp-border) !important;
    box-shadow: var(--cp-elev-lip);
}

.card.cp-content-card .list-group-item {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--cp-ink);
    border-color: var(--cp-hairline) !important;
}

.card.cp-content-card .card-footer.cp-action-footer {
    background: transparent !important;
    background-color: transparent !important;
    border-top: 1px solid var(--cp-border) !important;
}

/* -------------------------------------------------------------------------- */
/* Map + ads shell                                                             */
/* -------------------------------------------------------------------------- */
.cp-map-template-map-canvas-wrap,
.cp-map.cp-map-hero,
.cp-map-template-map-card .cp-map-template-map-canvas {
    border-radius: var(--cp-radius-md);
}

.cp-map-template-map-canvas-wrap {
    border: 1px solid var(--cp-border) !important;
    box-shadow: var(--cp-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    overflow: hidden;
    background: var(--cp-sunken) !important;
}

.cp-map-template-controls {
    gap: 0.5rem;
}

.cp-map-template-controls .btn,
.cp-map-template-controls .form-check {
    border-radius: var(--cp-radius-sm);
}

.cp-map-ad:not(:has(> .cp-ad-card-root)):not(:has(> .cp-business-card)):not(:has(> .cp-card)):not(:has(> .cp-sponsored-card)):not(:has(> .cp-ad-slot-cta)):not(:has(> a.cp-ad-slot-cta)) {
    border: 1px dashed var(--cp-border-strong) !important;
    border-radius: var(--cp-radius-md) !important;
    background: color-mix(in srgb, var(--cp-sunken) 80%, transparent) !important;
    color: var(--cp-ink-muted);
}

/* Ad / business cards — one face color (no grey details slab).
   Map ad shells use Smart Zoom --cp-ad-fr-bg via site.css — exclude them from --cp-raised. */
.cp-business-card > .card:not(.cp-map-slot-ad-card__shell),
.cp-sponsored-card,
.cp-ad-card-root .card:not(.cp-map-slot-ad-card__shell) {
    background: var(--cp-raised) !important;
    background-color: var(--cp-raised) !important;
    border-radius: var(--cp-radius-md) !important;
    /* Do not force overflow:hidden / flat shadow — clips deep-well-style field glow */
    overflow: visible !important;
}

.cp-map-slot-ad-card:not([data-cp-ad-card]) {
    background: var(--cp-raised) !important;
    background-color: var(--cp-raised) !important;
    border-radius: var(--cp-radius-md) !important;
    overflow: visible !important;
}

.cp-business-card > .card.cp-map-slot-ad-card__shell,
.cp-map-slot-ad-card[data-cp-ad-card],
.cp-ad-card-root .card.cp-map-slot-ad-card__shell {
    border-radius: var(--cp-radius-md) !important;
}

/* Ad card action bar — equal-width Hide / Pin / … buttons (grid beats flex content sizing) */
.cp-map-slot-ad-card__actions.cp-card-action-footer,
.cp-map-slot-ad-card[data-cp-ad-card] .cp-card-action-footer,
.cp-ad-card-root .cp-map-slot-ad-card__actions.cp-card-action-footer,
.cp-business-card .cp-card-action-footer {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(var(--cp-card-action-btn-min, 5.25rem), 1fr)) !important;
    gap: var(--cp-card-action-gap, 0.3rem) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

.cp-map-slot-ad-card__actions.cp-card-action-footer > .cp-card-action-col,
.cp-business-card .cp-card-action-footer > .cp-card-action-col {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.cp-map-slot-ad-card__actions.cp-card-action-footer > .cp-card-action-col > .btn,
.cp-map-slot-ad-card__actions.cp-card-action-footer > .cp-card-action-col > a.btn,
.cp-business-card .cp-card-action-footer > .cp-card-action-col > .btn,
.cp-business-card .cp-card-action-footer > .cp-card-action-col > a.btn {
    width: 100% !important;
    max-width: none !important;
}

.cp-business-card > .card.cp-card--business {
    --cp-card-cat: #c4a574;
    border: 3px solid var(--cp-card-cat) !important;
    box-shadow: var(--cp-shadow-md) !important;
}

.cp-business-card__body:not(.cp-map-slot-ad-card__body),
.cp-ad-card-root .card-body:not(.cp-map-slot-ad-card__body),
.cp-business-card .card-body:not(.cp-map-slot-ad-card__body),
.cp-business-card .card-footer:not(.cp-map-slot-ad-card__actions),
.cp-ad-card-root .card-footer:not(.cp-map-slot-ad-card__actions) {
    background: transparent !important;
    background-color: transparent !important;
}

.cp-business-card > .card:hover:not(.cp-card--selected):not(.cp-card--pin-focus):not(.cp-card--active),
.cp-sponsored-card:hover,
.cp-ad-card-root .card:hover {
    border-color: var(--cp-card-cat, var(--cp-border-strong)) !important;
    box-shadow:
        var(--cp-shadow-lg),
        0 0 0 2px color-mix(in srgb, var(--cp-card-cat, #c4a574) 28%, transparent),
        0 0 14px color-mix(in srgb, var(--cp-card-cat, #c4a574) 32%, transparent) !important;
}

.cp-business-card > .card.cp-card--selected,
.cp-business-card > .card.cp-card--pin-focus,
.cp-business-card > .card.cp-card--active {
    border-color: var(--cp-card-cat, #c4a574) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--cp-card-cat, #c4a574) 70%, #fff),
        0 0 0 0.35rem color-mix(in srgb, var(--cp-card-cat, #c4a574) 40%, transparent),
        0 0 28px color-mix(in srgb, var(--cp-card-cat, #c4a574) 75%, transparent),
        0 0 52px color-mix(in srgb, var(--cp-card-cat, #c4a574) 45%, transparent) !important;
}

.cp-business-card__ad-badge,
.cp-card-img-type-badge {
    border-radius: var(--cp-radius-sm) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* -------------------------------------------------------------------------- */
/* Feed bands                                                                  */
/* -------------------------------------------------------------------------- */
.cp-home-feed-band,
.cp-recent-shell.cp-home-feed-band,
.cp-home-section {
    background-color: var(--cp-page-surface-bg, var(--cp-base)) !important;
}

.cp-highlight-card {
    box-shadow: var(--cp-shadow-sm) !important;
    border-radius: var(--cp-radius-md);
}

@media (prefers-reduced-motion: reduce) {
    .cp-card.card,
    .cp-card.card:hover,
    .cp-business-card > .card:hover,
    .cp-sponsored-card:hover {
        transition: none !important;
        transform: none !important;
    }
}