/* ============================================
   Page Header Themed Component
   Extracted from layouts/partials/page-header.html
   ============================================ */

/* Theme Variables */
.page-header-themed {
    --header-title-color: var(--dark-gray);
    --header-accent-color: var(--brand-red);
    --header-subtitle-color: var(--medium-gray);
    --header-caption-color: var(--medium-gray);
    --header-caption-bg: rgba(255, 255, 255, 0.9);
}

/* Dark theme - for dark hero images */
.page-header-themed[data-theme="dark"] {
    --header-title-color: white;
    --header-accent-color: var(--golden-yellow);
    --header-subtitle-color: var(--off-white);
}

/* Minimal theme - no caption background */
.page-header-themed[data-theme="minimal"] {
    --header-caption-bg: transparent;
    --header-caption-color: var(--dark-gray);
}

/* Core Header Styles */
.page-header-themed .main-title {
    color: var(--header-title-color);
}

.page-header-themed .main-title .paris-text {
    color: var(--header-accent-color);
}

.page-header-themed .course-subtitle {
    color: var(--header-subtitle-color);
}

.page-header-themed .header-caption {
    color: var(--header-caption-color);
    background: var(--header-caption-bg);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
}

.page-header-themed figure {
    width: 100%;
}

.page-header-themed img.image-insert-md {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 32px;
}

/* Hide hero image when hideHeroImage: true in frontmatter */
.page-header-no-image figure {
    display: none;
}

/* Split layout: H1 left, image right */
.page-header-split-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl, 3rem);
    padding-bottom: var(--spacing-lg, 2rem);
}

.page-header-split-text {
    flex: 1;
    min-width: 0;
}

.page-header-split-image {
    flex: 1;
    min-width: 0;
}

.page-header-split-image figure {
    margin: 0;
    width: 100%;
}

.page-header-split-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 32px;
}

@media (max-width: 768px) {
    .page-header-split-row {
        flex-direction: column;
    }
}