/**
 * Panel Base Utilities
 * ============================================================================
 * Panel-scoped utility classes for consistent panel styling.
 *
 * Load order: After 01-base.css, before individual panel CSS files
 * Dependencies: 00-tokens.css (design tokens)
 *
 * Contents:
 * 1. Panel heading (.panel-heading)
 * 2. Panel content (.panel-content, .panel-content--compact)
 */

/* ==========================================================================
   1. PANEL HEADING
   ========================================================================== */

/**
 * Panel Heading utility
 * Standard panel section heading with brand color and typography tokens.
 * Apply to h3 elements within panels.
 */
.panel-heading {
	color: var(--brand-main);
	font-size: var(--heading-section);
	font-weight: var(--font-black);
	letter-spacing: var(--heading-section-ls);
	line-height: var(--heading-section-lh);
}

@media (max-width: 480px) {
	.panel-heading {
		font-size: var(--heading-section-mobile);
		line-height: var(--heading-section-mobile-lh);
	}
}

/* ==========================================================================
   2. PANEL CONTENT
   ========================================================================== */

/**
 * Panel Content utility
 * Standard vertical padding for panel sections.
 */
.panel-content {
	padding-bottom: var(--space-11);
	padding-top: var(--space-11);
}

@media (max-width: 480px) {
	.panel-content {
		padding-bottom: var(--space-9);
		padding-top: var(--space-9);
	}
}

/**
 * Compact Panel Content variant
 * Reduced vertical padding for tighter panel layouts.
 */
.panel-content--compact {
	padding-bottom: var(--space-9);
	padding-top: var(--space-9);
}

@media (max-width: 480px) {
	.panel-content--compact {
		padding-bottom: var(--space-7);
		padding-top: var(--space-7);
	}
}