/* ==========================================================================
   Page Header
   ========================================================================== */

.wc-page-header {

	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem;

	margin-bottom: 2rem;

}

.wc-page-header__content {

	flex: 1;
	min-width: 0;

}

.wc-page-header__title {

	margin: 0;

	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;

	color: var(--wc-color-text);

}

.wc-page-header__description {

	margin-top: .5rem;

	font-size: .95rem;
	line-height: 1.6;

	color: var(--wc-color-text-light);

	max-width: 700px;

}

.wc-page-header__actions {

	display: flex;
	align-items: center;
	gap: .75rem;

	flex-shrink: 0;

}

/* ==========================================================================
   Meta
   ========================================================================== */

.wc-page-header__meta{

	display:flex;
	align-items:center;
	gap:1rem;

	margin-top:1rem;

	flex-wrap:wrap;

}

/* ==========================================================================
   Stats
   ========================================================================== */

.wc-page-header__stat{

	display:flex;
	flex-direction:column;

}

.wc-page-header__stat-value{

	font-size:1.15rem;
	font-weight:700;

	color:var(--wc-color-text);

}

.wc-page-header__stat-label{

	font-size:.8rem;

	color:var(--wc-color-text-light);

}

/* ==========================================================================
   Divider
   ========================================================================== */

.wc-page-header--border{

	padding-bottom:1.5rem;

	border-bottom:1px solid var(--wc-color-border);

}

/* ==========================================================================
   Compact
   ========================================================================== */

.wc-page-header--compact{

	margin-bottom:1.25rem;

}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:768px){

	.wc-page-header{

		flex-direction:column;
		align-items:stretch;

		gap:1.5rem;

	}

	.wc-page-header__actions{

		width:100%;

		flex-wrap:wrap;

	}

	.wc-page-header__actions .wc-button{

		flex:1;

	}

	.wc-page-header__meta{

		gap:.75rem;

	}

}