$o-faq-bp1: 740;

.o-faq {
	@include vspacing('padding-top' 1, 'padding-bottom' 1.5);
	@include contain;
	@include template(filters, suggest, main);
}


.o-faq__intro {
	margin-bottom: space(6);
}


.o-faq__title {
	@include font-family(secondary);
	@include font-size(xxl);
	@include font-weight(regular);
	color: palette(alt, 400);
	align-self: end;
}


.o-faq__description {
	margin-top: space(4);

	@include mq(800) {
		width: column(7, 12);
	}

	@include mq(1200) {
		width: 50%;
	}
}


.o-faq__grid {
	display: grid;
	grid-template-rows: auto 1fr;
	grid-row-gap: space(6);
	grid-template-areas:
		"filters"
		"main"
		"suggest";

	@include mq($o-faq-bp1) {
		grid-template-columns: 3fr 1fr 8fr;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"filters .  main"
			"suggest .  main";
	}
}


.o-faq__subheader {
	@include font-family(primary);
	@include font-size(xl);
	@include font-weight(bold);
	margin-bottom: space(3);
	color: palette(secondary, 700);
}

.o-faq__main {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "full";
}

.o-faq__category {
	pointer-events: none;
	grid-area: full;
	opacity: 0;
	transition: opacity 125ms linear;

	// becomes visible
	&.is-active {
		pointer-events: auto;
		opacity: 1;
		transition: opacity 125ms linear 175ms;
	}
}

.o-faq__suggest {
	@include mq($max: $o-faq-bp1) {
		margin: auto;
	}

	.ie & {
		margin-top: 40px;
	}
}