/* Fonts */

@font-face {
	font-family: 'BrooklynStencil-Light';
	src: url('../fonts/BrooklynStencil-Light.woff2') format('woff2'),
	     url('../fonts/BrooklynStencil-Light.woff') format('woff');
}

/* Basic constants */
/* : root { */
/*	   --atze-red: hsl(356, 95%, 46%); */
/* } */

/* Basic styles */

/** COLUMNS - LAPTOP */

@media only screen and (max-width: 1281px) {
	.anna-columns-l-2 {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* Basic Animations */

@keyframes fade-in {
	0% {
		visibility:hidden;
		opacity:0
	}
	to {
		visibility:visible;
		opacity:1
	}
}
@keyframes fade-out {
	0% {
		visibility:visible;
		opacity:1
	}
	to {
		visibility:hidden;
		opacity:0
	}
}
@keyframes slide-up {
	0% {
		transform:translateY(100%)
	}
	to {
		transform:translateY(0)
	}
}


/* Tripartite */

.anna.logue.codes .tripartite-container {
	position: relative;

	height: 100svh;
	width: 100%;
	
	display: grid;
	align-items: initial;

	grid-template-areas: "schools families evenings";
	grid-template: 1fr / 33.3% 33.4% 33.3%;
	transition: grid-template 1s ease;
}

.anna.logue.codes .tripartite-container.first {
	grid-template: 1fr / 80% 10% 10%;
}
.anna.logue.codes .tripartite-container.second {
	grid-template: 1fr / 10% 80% 10%;
}
.anna.logue.codes .tripartite-container.third {
	grid-template: 1fr / 10% 10% 80%;
}

.anna.logue.codes .tripartite-category {
	/* position: relative; */

	display: grid;
	align-items: initial;

	grid-template-areas: "one";

	place-items: stretch;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	user-select: none;
}
.anna.logue.codes .tripartite-backlayer {
	grid-area: one;

	display: block;
	align-items: initial;

	transition: all .75s ease-in-out;
}
.anna.logue.codes .tripartite-category.active .tripartite-backlayer {
	backdrop-filter: blur(1.5rem) brightness(60%);
}

.anna.logue.codes .tripartite-overlay {
	grid-area: one;

	display: grid;
	align-items: initial;

	place-items: center;
	color: white;
	/* writing-mode: vertical-lr; */
	/* text-orientation: upright; */
	text-shadow: black 0em 0em .5em;
	pointer-events: none;
	animation: fade-in .75s ease-in forwards;
}

.anna.logue.codes .tripartite-overlay h2 {
	transition: font-size .75s ease;
}

.anna.logue.codes .tripartite-overlay p {
	display: none;
}

.anna.logue.codes .tripartite-content {
	display: block;
	align-items: initial;

	position: absolute;
	visibility: hidden;
	padding: 25rem 2em 1em 2em;
	width: 80vw;
	color: white;
	/* user-select: none; */
	pointer-events: none;
}
.anna.logue.codes .tripartite-content * {
	pointer-events: auto;
}

.anna.logue.codes .tripartite-posts {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 1em;
	width: 75%;
	float: left;
}
.anna.logue.codes .tripartite-posts div {
	display: grid;
}

.anna.logue.codes .tripartite-posts img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0.6rem;
}
.anna.logue.codes .tripartite-posts a {
	color: #fffff0;
	display: grid;
	grid-template-rows: auto 1fr;
}
.anna.logue.codes .tripartite-posts a h1 {
	font-size: clamp(1.7rem, calc(1.7rem + ((1vw - 0.37rem) * 0.5806)), 2.6rem);
	margin-top: 0.25em;
}
.anna.logue.codes .tripartite-posts .oxy-repeater-pages-wrap {
	display: none;
}
.anna.logue.codes .tripartite-posts-all {
	display: inline-block;
	width: 25%;
	margin-top: 4em;

}
.anna.logue.codes .tripartite-posts-all img {
	position: absolute;
}


.anna.logue.codes .tripartite-category.active .tripartite-overlay {
	animation: fade-out .75s ease-out forwards;
}
.anna.logue.codes .tripartite-category.active .tripartite-content {
	animation: fade-in .75s ease-in forwards 0.25s;
}

.anna.logue.codes .tripartite-category.fading-out .content {
	animation: fade-out .75s ease-out forwards;
}

.anna.logue.codes .tripartite-second .tripartite-content {
	left: 10vw;
}
.anna.logue.codes .tripartite-third .tripartite-content {
	left: 20vw;
}

@media (orientation: landscape) {
	.anna.logue.codes .tripartite-container:has(.active) .tripartite-category:not(.active) .tripartite-overlay h2 {
		font-size: 2vw;
	}
}

@media (orientation: portrait) {

	.anna.logue.codes .tripartite-container {
		grid-template: 33.3% 33.4% 33.3% / 1fr;
	}
	.anna.logue.codes .tripartite-container.first {
		grid-template: 80% 10% 10% / 1fr;
	}
	.anna.logue.codes .tripartite-container.second {
		grid-template: 10% 80% 10% / 1fr;
	}
	.anna.logue.codes .tripartite-container.third {
		grid-template: 10% 10% 80% / 1fr;
	}

	.anna.logue.codes .tripartite-overlay {
		writing-mode: horizontal-tb;
	}

	.anna.logue.codes .tripartite-second .tripartite-content {
		left: 0;
		top: 10svh;
	}
	.anna.logue.codes .tripartite-third .tripartite-content {
		left: 0;
		top: 20svh;
	}
}

/* Quick fixes */
.ct-inner-content::before ,
.ct-inner-content::after {
	display: none;
}