/**
 * Card Component Styles — Ontwo Theme
 *
 * Generic card component for displaying content items (posts, events, search results)
 * Provides consistent visual hierarchy with optional image and meta information
 *
 * Structure:
 * - .card (wrapper)
 *   - .card__link (anchor wrapper)
 *     - .card__image (optional image container)
 *     - .card__content (text container)
 *       - .card__title (heading)
 *       - .card__excerpt (optional description)
 *       - .card__meta (optional meta info)
 *
 * Usage:
 * - Works in vertical lists (stacked)
 * - Works in grid layouts (grid-template-columns applied by parent)
 * - No layout/grid rules defined here
 * - No responsive rules (added separately)
 *
 * Design reference: legacy _posts.scss (.post, .post__*)
 */

/* ==========================================================================
   Card Wrapper
   ========================================================================== */

/**
 * .card
 * Container for the card component
 * Provides spacing and border for list contexts
 */
.card {
	margin: var(--spacing-half) 0;
	padding: var(--spacing-half) 0;
	border-top: 1px solid var(--color-border);
}

/**
 * Remove top border and padding from first card
 * Cleaner visual in lists
 */
.card:first-of-type {
	border-top: none;
	padding-top: 0;
}

/**
 * Add bottom border to last card
 * Visual closure for lists
 */
.card:last-of-type {
	border-bottom: 1px solid var(--color-border);
}

/* ==========================================================================
   Card Link Wrapper
   ========================================================================== */

/**
 * .card__link
 * Main clickable area
 * Reset link styling, entire card is interactive
 */
.card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* ==========================================================================
   Card Image
   ========================================================================== */

/**
 * .card__image
 * Optional image container
 * Provides spacing below image
 */
.card__image {
	margin-bottom: var(--spacing-half);
}

/**
 * Image element
 * Responsive and properly contained
 */
.card__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   Card Content
   ========================================================================== */

/**
 * .card__content
 * Text content wrapper
 * Contains title, excerpt, and meta
 */
.card__content {
	/* No specific styling needed, structural only */
}

/* ==========================================================================
   Card Title
   ========================================================================== */

/**
 * .card__title
 * Card heading (h2-h6)
 * Inherits heading styles from base.css, override specifics here
 */
.card__title {
	font-size: var(--font-size-large);
	font-weight: var(--font-weight-medium);
	color: var(--color-black);
	margin: 0;
	line-height: var(--line-height-heading);
}

/**
 * Title hover state
 * Provide visual feedback when card is hovered
 */
.card__link:hover .card__title {
	color: var(--color-primary);
}

/* ==========================================================================
   Card Excerpt
   ========================================================================== */

/**
 * .card__excerpt
 * Optional description/excerpt text
 * Provides spacing above
 */
.card__excerpt {
	margin-top: calc(var(--spacing-half) / 2);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-body);
}

/**
 * Paragraphs in excerpt
 * Reset margins for consistent spacing
 */
.card__excerpt p {
	margin: 0;
}

/**
 * Multiple paragraphs in excerpt
 * Add spacing between paragraphs
 */
.card__excerpt p + p {
	margin-top: var(--spacing-small);
}

/* ==========================================================================
   Card Meta
   ========================================================================== */

/**
 * .card__meta
 * Optional metadata (date, author, category, etc.)
 * Smaller, secondary text styling
 */
.card__meta {
	margin-top: 1em;
	font-size: var(--font-size-small);
	line-height: var(--line-height-base);
	color: var(--color-body);
}

/**
 * Time/date elements in meta
 * Emphasize with primary color
 */
.card__meta time {
	color: var(--color-primary);
	font-weight: var(--font-weight-medium);
}