<template>
  <div class="page-header">
    <h1>{{ title }}</h1>
    <p v-if="subtitle" class="subtitle">{{ subtitle }}</p>
    <slot />
  </div>
</template>

<script setup>
defineProps({
  title: { type: String, required: true },
  subtitle: { type: String, default: '' },
})
</script>

<style scoped>
.page-header {
  padding: var(--page-pad-y) var(--page-pad-x) 16px;
  border-bottom: 1px dashed var(--border);
}
.page-header h1 {
  font-family: 'Brygada 1918', serif;
  font-size: 28px;
  font-weight: 600;
  color: var(--text-bright);
  line-height: 1.2;
}
.subtitle {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 4px;
}
</style>
