/* ============================================
   Lungro - Global Layouts
   ============================================ */

.breadcrumb-item a { color: var(--primary); text-decoration: none; font-weight: 500; }
.breadcrumb-item a:hover { color: var(--primary-dark); }
.breadcrumb-item.active { color: var(--text-2); }
.breadcrumb-item + .breadcrumb-item::before { content: '/'; color: var(--text-3); font-size: 0.875rem; padding: 0 0.5rem; }

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

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

.page-header-title {
    font-size: 1.75rem; font-weight: 600; letter-spacing: -0.025em;
    color: var(--text-1); margin: 0;
}
.page-header-subtitle { color: var(--text-2); font-size: 0.9375rem; margin-top: 0.25rem; }

.page-header-actions {
    display: flex; align-items: center; gap: 0.75rem;
    flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end;
}

@media (max-width: 768px) {
    .page-header { flex-direction: column; align-items: stretch; }
    .page-header-actions { justify-content: flex-start; }
}

/* Filter forms (list pages) */
.filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.filter-form select { flex: 0 1 160px; min-width: 0; max-width: 220px; }
.filter-form .btn-outline-brand { flex: 0 0 auto; }

@media (min-width: 1200px) {
    .card-modern-header .filter-form { flex-wrap: nowrap; }
}

/* Active-filter chip strip (list pages) */
.filter-chips {
    padding: 0.5rem 1.25rem;
    border-top: 1px solid var(--border);
}
.filter-chip {
    text-decoration: none;
}
.filter-chip:hover {
    background: var(--primary-bg);
    text-decoration: line-through;
}
.filter-chip i { font-size: 0.6rem; margin-left: 4px; }

@media (max-width: 575.98px) {
    .filter-form select,
    .filter-form .btn-outline-brand { flex: 1 1 100%; }
}

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; }
.detail-grid.single-col { grid-template-columns: 1fr; gap: 1.25rem; }
.detail-label { font-size: 0.75rem; font-weight: 500; color: var(--text-3); margin-bottom: 0.25rem; }
.detail-value { font-size: 0.9375rem; color: var(--text-1); }

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; }
.info-grid.single-col { grid-template-columns: 1fr; gap: 1.25rem; }
.info-grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
    .detail-grid { grid-template-columns: 1fr; gap: 1rem; }
    .info-grid { grid-template-columns: 1fr; gap: 1rem; }
    .info-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    .info-grid-3 { grid-template-columns: 1fr; }
}