// -------------------------------------------------------------------
// :: CATEGORY HEADER
// -------------------------------------------------------------------

.o-category-header {
	display: block;
	background-color: $dark-extra;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;

	.m-breadcrumb{
		@extend %__m-breadcrumb--light;
	}

	h1,
	h2,
	h3,
	h4 {
		color: $white;
		white-space: pre-wrap;

		padding-right: rem(60px);

		@include FLOW-at($desktop){
			padding-right: rem(300px);
		}

		text-shadow: $textshadow-readability;
	}

	&__container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: center;
		min-height: 50vh;
		position: relative;
		margin: 0 auto;
		padding: rem(40px) rem(20px);

		@include FLOW-at($desktop) {
			min-height: 45vh;
			align-content: flex-start;
			padding-top: rem(60px);
			margin: 0 7rem;
			padding: rem(40px) 0;
		}
	}

	&__search,
	&__header,
	&__topics {
		flex: 0 1 100%;
		z-index: $z-index-base;
		position: relative;
	}

	&__topics {
		margin: 0 0 rem(40px);

		@include FLOW-at($desktop) {
			flex: 0 1 70%;
		}
	}

	&__header {
		margin-bottom: rem(40px);

	}

	.a-button--favorite {
		position: absolute;
		top: 0;
		right: 0;

		@include FLOW-at($desktop) {
			position: relative;
			margin-top: rem(12px);
		}
	}

	&__search {
		position: absolute;
		top: 0;
		right: 0;
		display: none;

		.a-input__field-holder {
			float: right;
			min-width: rem(290px);
		}

		@include FLOW-at($desktop) {
			display: block;
			max-width: rem(345px);
		}
	}

	.a-topic {
		line-height: 1;
	}


}

.u-hyphen {
	display: inline;

	@include FLOW-at($tablet) {
		display: none;
	}
}