.bkbg-arh-wrap { box-sizing: border-box; } .bkbg-arh-wrap *, .bkbg-arh-wrap *::before, .bkbg-arh-wrap *::after { box-sizing: inherit; } .bkbg-arh-inner { margin: 0 auto; } /* ── Category badge ── */ .bkbg-arh-category-row { margin-bottom: 16px; } .bkbg-arh-category { display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.5; } /* ── Headline ── */ .bkbg-arh-headline { font-family: var(--bkbg-arh-headline-font-family, inherit); font-size: var(--bkbg-arh-headline-font-size-d, var(--bkbg-arh-headline-font-size, var(--bkbg-arh-headline-sz, 48px))); font-weight: var(--bkbg-arh-headline-font-weight, 800); font-style: var(--bkbg-arh-headline-font-style, normal); text-transform: var(--bkbg-arh-headline-text-transform, none); text-decoration: var(--bkbg-arh-headline-text-decoration, none); line-height: var(--bkbg-arh-headline-line-height-d, var(--bkbg-arh-headline-line-height, 1.15)); letter-spacing: var(--bkbg-arh-headline-letter-spacing-d, var(--bkbg-arh-headline-letter-spacing, normal)); word-spacing: var(--bkbg-arh-headline-word-spacing-d, var(--bkbg-arh-headline-word-spacing, normal)); margin: 0 0 20px; } /* ── Subheadline ── */ .bkbg-arh-sub { font-family: var(--bkbg-arh-sub-font-family, inherit); font-size: var(--bkbg-arh-sub-font-size-d, var(--bkbg-arh-sub-font-size, var(--bkbg-arh-sub-sz, 20px))); font-weight: var(--bkbg-arh-sub-font-weight, 400); font-style: var(--bkbg-arh-sub-font-style, normal); text-transform: var(--bkbg-arh-sub-text-transform, none); text-decoration: var(--bkbg-arh-sub-text-decoration, none); line-height: var(--bkbg-arh-sub-line-height-d, var(--bkbg-arh-sub-line-height, 1.6)); letter-spacing: var(--bkbg-arh-sub-letter-spacing-d, var(--bkbg-arh-sub-letter-spacing, normal)); word-spacing: var(--bkbg-arh-sub-word-spacing-d, var(--bkbg-arh-sub-word-spacing, normal)); margin: 0 0 28px; } /* ── Meta bar ── */ .bkbg-arh-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 20px; } .bkbg-arh-author { display: flex; align-items: center; gap: 10px; } .bkbg-arh-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .bkbg-arh-avatar-placeholder { width: 40px; height: 40px; border-radius: 50%; background: #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .bkbg-arh-author-name { font-size: 14px; font-weight: 600; margin: 0; line-height: 1.3; } .bkbg-arh-author-role { font-size: 12px; margin: 0; line-height: 1.3; } .bkbg-arh-meta-aside { display: flex; align-items: center; gap: 8px; font-size: 13px; } .bkbg-arh-sep { opacity: 0.4; } /* ── Hero image ── */ .bkbg-arh-hero { margin-top: 32px; width: 100%; display: block; object-fit: cover; max-height: 480px; } /* ── Centered variant ── */ .bkbg-arh-inner--centered { text-align: center; } .bkbg-arh-inner--centered .bkbg-arh-meta { justify-content: center; } /* ── Responsive ── */ @media (max-width: 1024px) { .bkbg-arh-headline { font-size: var(--bkbg-arh-headline-font-size-t, var(--bkbg-arh-headline-font-size-d, var(--bkbg-arh-headline-font-size, var(--bkbg-arh-headline-sz, 48px)))); line-height: var(--bkbg-arh-headline-line-height-t, var(--bkbg-arh-headline-line-height-d, var(--bkbg-arh-headline-line-height, 1.15))); letter-spacing: var(--bkbg-arh-headline-letter-spacing-t, var(--bkbg-arh-headline-letter-spacing-d, var(--bkbg-arh-headline-letter-spacing, normal))); word-spacing: var(--bkbg-arh-headline-word-spacing-t, var(--bkbg-arh-headline-word-spacing-d, var(--bkbg-arh-headline-word-spacing, normal))); } .bkbg-arh-sub { font-size: var(--bkbg-arh-sub-font-size-t, var(--bkbg-arh-sub-font-size-d, var(--bkbg-arh-sub-font-size, var(--bkbg-arh-sub-sz, 20px)))); line-height: var(--bkbg-arh-sub-line-height-t, var(--bkbg-arh-sub-line-height-d, var(--bkbg-arh-sub-line-height, 1.6))); letter-spacing: var(--bkbg-arh-sub-letter-spacing-t, var(--bkbg-arh-sub-letter-spacing-d, var(--bkbg-arh-sub-letter-spacing, normal))); word-spacing: var(--bkbg-arh-sub-word-spacing-t, var(--bkbg-arh-sub-word-spacing-d, var(--bkbg-arh-sub-word-spacing, normal))); } } @media (max-width: 767px) { .bkbg-arh-headline { font-size: var(--bkbg-arh-headline-font-size-m, var(--bkbg-arh-headline-font-size-t, var(--bkbg-arh-headline-font-size-d, var(--bkbg-arh-headline-font-size, var(--bkbg-arh-headline-sz, 48px))))); line-height: var(--bkbg-arh-headline-line-height-m, var(--bkbg-arh-headline-line-height-t, var(--bkbg-arh-headline-line-height-d, var(--bkbg-arh-headline-line-height, 1.15)))); letter-spacing: var(--bkbg-arh-headline-letter-spacing-m, var(--bkbg-arh-headline-letter-spacing-t, var(--bkbg-arh-headline-letter-spacing-d, var(--bkbg-arh-headline-letter-spacing, normal)))); word-spacing: var(--bkbg-arh-headline-word-spacing-m, var(--bkbg-arh-headline-word-spacing-t, var(--bkbg-arh-headline-word-spacing-d, var(--bkbg-arh-headline-word-spacing, normal)))); } .bkbg-arh-sub { font-size: var(--bkbg-arh-sub-font-size-m, var(--bkbg-arh-sub-font-size-t, var(--bkbg-arh-sub-font-size-d, var(--bkbg-arh-sub-font-size, var(--bkbg-arh-sub-sz, 20px))))); line-height: var(--bkbg-arh-sub-line-height-m, var(--bkbg-arh-sub-line-height-t, var(--bkbg-arh-sub-line-height-d, var(--bkbg-arh-sub-line-height, 1.6)))); letter-spacing: var(--bkbg-arh-sub-letter-spacing-m, var(--bkbg-arh-sub-letter-spacing-t, var(--bkbg-arh-sub-letter-spacing-d, var(--bkbg-arh-sub-letter-spacing, normal)))); word-spacing: var(--bkbg-arh-sub-word-spacing-m, var(--bkbg-arh-sub-word-spacing-t, var(--bkbg-arh-sub-word-spacing-d, var(--bkbg-arh-sub-word-spacing, normal)))); } } @media (max-width: 600px) { .bkbg-arh-headline { font-size: var(--bkbg-arh-headline-font-size-m, var(--bkbg-arh-headline-font-size-t, var(--bkbg-arh-headline-font-size-d, var(--bkbg-arh-headline-font-size, var(--bkbg-arh-headline-sz, 48px))))) !important; } .bkbg-arh-meta { flex-direction: column; align-items: flex-start; gap: 12px; } .bkbg-arh-inner--centered .bkbg-arh-meta { align-items: center; } }