/* ============================================
   Content Card Themed Component
   Extracted from layouts/partials/content-card.html
   ============================================ */

/* Theme Variables */
.content-card-themed {
    --card-bg: white;
    --card-padding: var(--spacing-lg);
    --card-radius: var(--border-radius);
    --card-shadow: var(--shadow-medium);
    --card-accent: var(--golden-yellow);
    --card-title-color: var(--dark-gray);
    --card-text-color: var(--dark-gray);
}

/* Highlight theme - more prominent */
.content-card-themed[data-theme="highlight"] {
    --card-bg: var(--off-white);
    --card-accent: var(--brand-red);
    --card-shadow: var(--shadow-heavy);
}

/* Minimal theme - subtle styling */
.content-card-themed[data-theme="minimal"] {
    --card-shadow: var(--shadow-light);
    --card-accent: transparent;
}

/* Core Content Card Styles */
.content-card-themed {
    color: var(--card-text-color);
    padding: var(--card-padding);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    background: var(--card-bg);
    transition: box-shadow var(--transition-medium);
    position: relative;
}

.content-card-themed::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--card-padding);
    width: 10%;
    height: 6px;
    background-color: var(--card-accent);
}

.content-card-themed h2 {
    color: var(--card-title-color);
    margin-top: 0;
}

.content-card-themed p {
    line-height: 1.7;
}

.content-card-themed p:last-child {
    margin-bottom: 0;
}

.content-card-themed .card-image {
    width: 100%;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
}

.content-card-themed .card-cta {
    margin-top: var(--spacing-lg);
}