/* ═══════════════════════════════════════════════════════════════════════════
   UNIFIED CONTENT CARD SYSTEM
   Consolidated styles for all content types: Article, Conversation, Event, Build
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   BASE CARD STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.content-card {
    position: relative;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--ds-radius, 1rem);
    overflow: hidden;
    transition: transform var(--ds-transition, 0.2s ease), box-shadow var(--ds-transition, 0.2s ease);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ds-shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.1));
}

/* Keep stretched-link above passive card wrappers but below explicit controls. */
.content-card .stretched-link::after {
    z-index: 2;
}

.content-card-footer,
.interaction-bar {
    position: relative;
}

.content-card-footer a,
.content-card-footer button,
.interaction-bar .interaction-btn {
    position: relative;
    z-index: 3;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD VARIANTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tall card for carousels */
.content-card-tall {
    min-height: 320px;
}

@media (max-width: 575px) {
    .content-card-tall {
        min-height: 280px;
    }
}

/* Urgent card (for Needs Your Help sections) */
.content-card-urgent {
    min-height: 320px;
    border-left: 4px solid var(--bs-danger);
}

@media (max-width: 575px) {
    .content-card-urgent {
        min-height: 280px;
    }
}

/* Accent card (for Recently Updated) */
.content-card-accent {
    border-left: 4px solid var(--bs-success);
}

/* Compact card for grids */
.content-card-compact {
    min-height: auto;
}

/* Browse card for discovery/marketplace-style grids */
.content-card-browse {
    min-height: auto;
    display: block;
    height: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.content-card-browse:hover {
    transform: none;
    box-shadow: none;
}

.content-card-browse-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: 0.75rem;
    background: var(--bs-tertiary-bg);
}

.content-card-browse-img {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.content-card-browse-img--photo,
.content-card-browse-img--placeholder {
    object-fit: cover;
    object-position: center center;
}

.content-card-browse-img--illustration {
    object-fit: contain;
    object-position: center center;
    padding: 0.5rem;
    box-sizing: border-box;
    background: #ebe4d9;
}

.content-card-browse-pill {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1;
    margin: 0;
    padding: 0.28rem 0.5rem;
    border-radius: 0.2rem;
    background: rgba(22, 32, 44, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #f2eadf;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(10, 15, 22, 0.28);
}

.content-card-browse-body {
    min-height: 5rem;
    padding: 0.55rem 0.1rem 0.2rem;
}

.content-card-browse-title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.25;
    color: var(--bs-body-color);
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
}

.content-card-browse-title a {
    color: inherit;
    text-decoration: none;
}

.content-card-browse-excerpt {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--bs-secondary-color);
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}

.content-card-browse-excerpt--empty {
    visibility: hidden;
}

.content-card-browse-secondary {
    margin: 0.2rem 0 0;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.content-card-browse-price {
    margin: 0.2rem 0 0;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bs-body-color);
}

.content-card-browse-title-row {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    min-width: 0;
}

.content-card-browse-save {
    align-items: center;
    color: var(--bs-body-color);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1rem;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

.content-card-browse-media-meta {
    bottom: 0.75rem;
    display: flex;
    gap: 0.4rem;
    position: absolute;
    right: 0.75rem;
    z-index: 1;
}

.content-card-browse-media-meta:not(:has(.content-card-browse-media-chip)) {
    display: none;
}

.content-card-browse-media-chip {
    align-items: center;
    background: rgba(15, 23, 42, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 750;
    gap: 0.35rem;
    line-height: 1;
    padding: 0.42rem 0.58rem;
}

.content-card-browse-date-badge {
    align-items: center;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0.8rem;
    bottom: 0.75rem;
    box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.16);
    color: #0f172a;
    display: inline-flex;
    flex-direction: column;
    gap: 0.05rem;
    justify-content: center;
    left: 0.75rem;
    min-height: 4.25rem;
    min-width: 4.25rem;
    padding: 0.45rem;
    position: absolute;
    text-align: center;
    z-index: 1;
}

.content-card-browse-date-badge span,
.content-card-browse-date-badge small {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
}

.content-card-browse-date-badge strong {
    font-size: 1.65rem;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1;
}

.content-card-browse-tags,
.content-card-browse-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.content-card-browse-tags {
    margin-top: 0.6rem;
}

.content-card-browse-tags span {
    background: rgba(var(--bs-primary-rgb), 0.08);
    border-radius: 999px;
    color: var(--bs-body-color);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    padding: 0.36rem 0.55rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-card-browse-meta-line {
    color: var(--bs-secondary-color);
    font-size: 0.76rem;
    font-weight: 650;
    margin-top: auto;
    padding-top: 0.85rem;
}

.content-card-browse-meta-line span {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
    min-width: 0;
}

@media (max-width: 575px) {
    .content-card-browse-image::after {
        content: none;
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD IMAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.content-card-image {
    height: 140px;
    background-size: cover;
    background-position: center;
    background-color: var(--bs-body-tertiary-bg);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE IMAGE NORMALIZATION (Landing Page Consistency)
   ═══════════════════════════════════════════════════════════════════════════
   On mobile (≤575px), all card images share:
   - Same aspect ratio (4:3)
   - Same crop behavior (cover, centered)
   - Same corner radius (matches card border)
   - Subtle bottom gradient for text readability
   - Capped at ~35-40% of card height
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 575px) {
    .content-card-image {
        /* Unified aspect ratio across all mobile card images */
        aspect-ratio: 4 / 3;
        height: auto;
        width: 100%;
        
        /* Ensure crisp corners that match card radius */
        border-radius: 1rem 1rem 0 0;
        
        /* Add subtle bottom gradient for text readability when needed */
        position: relative;
    }
    
    .content-card-image::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40%;
        background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.15));
        pointer-events: none;
        border-radius: 0 0 0 0;
    }
}

.content-card-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-body-secondary);
    font-size: 2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD BODY
   ═══════════════════════════════════════════════════════════════════════════ */

.content-card-body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Category/Topic badge - inline, not full width */
.content-card-body .badge {
    display: inline-flex;
    align-items: center;
    width: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD TITLE
   ═══════════════════════════════════════════════════════════════════════════ */

.content-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.content-card-title a {
    color: var(--bs-body-color);
    text-decoration: none;
}

/* No color change on hover - cards use stretched-link for full clickability */
.content-card-title a:hover {
    color: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD TEXT/EXCERPT
   ═══════════════════════════════════════════════════════════════════════════ */

.content-card-text {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    line-height: 1.5;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.content-card-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    background: var(--bs-body-tertiary-bg);
    flex-shrink: 0;
}

.content-card-author {
    color: var(--bs-body-color);
    font-weight: 500;
}

.content-card-stats {
    color: var(--bs-secondary-color);
}

.content-card-stats i {
    margin-right: 0.25rem;
}

.content-card-time {
    color: var(--bs-secondary-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVENT POSTER VARIANT (Dark overlay with background image)
   ═══════════════════════════════════════════════════════════════════════════ */

.content-card-poster {
    position: relative;
    border-radius: var(--ds-radius, 1rem);
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: var(--bs-body-tertiary-bg);
    transition: transform var(--ds-transition-slow, 0.3s ease), box-shadow var(--ds-transition-slow, 0.3s ease);
    border: none;
}

a.content-card-poster,
a.content-card-poster:hover,
a.content-card-poster:focus,
a.content-card-poster:visited {
    --bs-link-color-rgb: 255, 255, 255;
    --bs-link-hover-color-rgb: 255, 255, 255;
    color: white !important;
    text-decoration: none !important;
}

@media (max-width: 575px) {
    .content-card-poster {
        min-height: 280px;
    }
}

.content-card-poster::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
}

.content-card-poster:hover {
    transform: translateY(-6px);
    box-shadow: var(--ds-shadow-hover, 0 8px 32px rgba(0, 0, 0, 0.12));
}

/* Date badge overlay - top left */
.content-card-poster-date {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: rgba(111, 66, 193, 0.15);
    border-radius: 0.75rem;
    box-shadow: var(--ds-shadow-md, 0 4px 16px rgba(0, 0, 0, 0.06));
}

.content-card-poster-date .date-month {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--bs-purple, #6f42c1);
}

.content-card-poster-date .date-day {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bs-purple, #6f42c1);
}

/* Content at bottom of poster — z-index: 2 lifts text above the ::before
   gradient overlay (z-index: 1). Safe because poster cards use a wrapping
   <a> tag, not stretched-link. */
.content-card-poster-content {
    position: relative;
    z-index: 2;
    padding: 1.25rem;
    color: white;
}

/* Type pill (Virtual / In-Person) */
.content-card-type-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.5rem;
}

.content-card-poster-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
    color: white;
    text-decoration: none;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.content-card-poster-meta {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HORIZONTAL VARIANT (Side-by-side image + text)
   ═══════════════════════════════════════════════════════════════════════════ */

.content-card-horizontal {
    flex-direction: row;
    min-height: auto;
}

.content-card-horizontal .content-card-image {
    height: auto;
    min-height: 200px;
    border-radius: 1rem 0 0 1rem;
}

.content-card-horizontal .content-card-body {
    padding: 1.5rem;
}

.content-card-horizontal .content-card-title {
    font-size: 1.25rem;
}

@media (max-width: 767px) {
    .content-card-horizontal {
        flex-direction: column;
    }
    
    .content-card-horizontal .content-card-image {
        min-height: 160px;
        border-radius: 1rem 1rem 0 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TITLE VARIANT (Minimal, text-focused)
   ═══════════════════════════════════════════════════════════════════════════ */

.content-card-title {
    min-height: auto;
}

.content-card-title .content-card-image {
    height: 80px;
}

.content-card-title .content-card-body {
    padding: 1rem;
}

.content-card-title .content-card-title {
    font-size: 0.95rem;
}

.content-card-title .content-card-text {
    font-size: 0.8rem;
    line-clamp: 1;
    -webkit-line-clamp: 1;
}

.content-card-title .content-card-footer {
    padding: 0.5rem 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EDITORIAL VARIANT (Text-only, for related content sections)
   ═══════════════════════════════════════════════════════════════════════════ */

.content-card-editorial {
    min-height: auto;
    background: var(--bs-body-bg);
    border: none;
    border-radius: 0.75rem;
}

.content-card-editorial:hover {
    transform: none;
    box-shadow: none;
    background: var(--bs-tertiary-bg);
}

.content-card-editorial .content-card-body {
    padding: 1rem 1.25rem;
}

.content-card-editorial .content-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

.content-card-editorial .content-card-text {
    font-size: 0.8rem;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GRID SECTION SPACING
   ═══════════════════════════════════════════════════════════════════════════ */

.content-grid-section .row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

@media (min-width: 768px) {
    .content-grid-section .row {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 1.5rem;
    }
}

/* Carousel container: uses .ds-carousel-container from ds/ds.css */

/* ═══════════════════════════════════════════════════════════════════════════
   INTERACTION FOOTER (Like, Comment, Bookmark, Share)
   ═══════════════════════════════════════════════════════════════════════════ */

.content-card-interactions {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bs-body-tertiary-bg);
}

.content-card-interactions-left,
.content-card-interactions-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Interaction button base */
.content-card-interaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.5rem;
    border: none;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.content-card-interaction-btn:hover {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.content-card-interaction-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.25);
}

/* Like button states */
.content-card-interaction-btn[data-action="like"]:hover {
    color: var(--bs-danger);
}

.content-card-interaction-btn[data-action="like"].active {
    color: var(--bs-danger);
}

.content-card-interaction-btn[data-action="like"].active i {
    animation: heartPulse 0.3s ease;
}

@keyframes heartPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Comment button */
.content-card-interaction-btn[data-action="comment"]:hover {
    color: var(--bs-primary);
}

/* Bookmark button states */
.content-card-interaction-btn[data-action="bookmark"]:hover {
    color: var(--bs-warning);
}

.content-card-interaction-btn[data-action="bookmark"].active {
    color: var(--bs-warning);
}

/* Share button */
.content-card-interaction-btn[data-action="share"]:hover {
    color: var(--bs-info);
}

/* Interaction count */
.content-card-interaction-count {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

/* Compact interaction bar (for smaller cards) */
.content-card-interactions-compact {
    padding: 0.5rem 1rem;
    gap: 0.5rem;
}

.content-card-interactions-compact .content-card-interaction-btn {
    padding: 0.25rem 0.375rem;
    font-size: 0.75rem;
}

/* Icon-only mode for very compact cards */
.content-card-interaction-btn.icon-only .content-card-interaction-count {
    display: none;
}

/* Disabled state */
.content-card-interaction-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.content-card-interaction-btn:disabled:hover {
    background: transparent;
    color: var(--bs-secondary-color);
}