/* ===========================
   Common Styles for All Pages
   (about, projects, contacts)
   =========================== */

/* Page Header - Shared across all secondary pages */
.page-header {
    padding: calc(var(--spacing-xl) + 60px) 0 var(--spacing-lg);
    position: relative;
}

.page-header-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.page-title {
    font-size: var(--font-size-xl);
    color: var(--text-primary);
    font-weight: 600;
}

.page-path {
    display: inline-block;
}

.page-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.dots-page-header {
    width: 103px;
    height: 103px;
    position: absolute;
    right: 100px;
    top: 50%;
    transform: translateY(-50%);
}

/* Common Timeline Tags */
.timeline-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

/* Common Responsive Styles for Page Headers */
@media (max-width: 768px) {
    .dots-page-header {
        width: 64px;
        height: 64px;
        right: 20px;
    }
}

@media (max-width: 480px) {
    .page-header {
        padding: calc(var(--spacing-lg) + 60px) 0 var(--spacing-md);
    }

    .page-title {
        font-size: var(--font-size-lg);
    }
}