/*-------------------------------------------------------------------------------------------------------

ROOT

-------------------------------------------------------------------------------------------------------*/

:root {
	--blogs-page-size: calc(min(1vw / var(--optimal-aspect-ratio), 1vh) * var(--zoom-multiplier));
	--blogs-page-vertical: calc(var(--fixed-content-padding) / 0.75);

	--blogs-page-gap: 5;
	--blogs-section-spacing: 2;

	--blogs-page-width: 37.5;
	--blogs-page-aspect: 0.875;

	--blogs-page-padding: 1.125;
	--blogs-page-thumbnail-size: 57.5%;
	--blogs-page-headline-size: 1.75;
	--blogs-page-article-size: 1.25;
	--blogs-page-date-size: 1.125;

	--blogs-page-radius: 1.25;
}

/*-------------------------------------------------------------------------------------------------------

BLOG POST

-------------------------------------------------------------------------------------------------------*/

#blogs {
	display: flex !important;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	
	background: rgb(255, 255, 255);
	border-top: calc(1px / var(--zoom-multiplier, 1)) solid rgb(240, 240, 240);

	height: auto;
	padding: var(--blogs-page-vertical) var(--page-content-padding);
	gap: calc(var(--blogs-page-size) * var(--blogs-page-gap));
}

#blogs > .content {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;

	position: relative;

	width: 100vw;
	height: calc(var(--blogs-page-size) * var(--blogs-page-width) / var(--blogs-page-aspect));
	margin: 0 calc(var(--page-content-padding) * -1);
}

/* GEARS */

#blogs-container {
	--prefix-translate: 0px;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;

	position: absolute;

	width: auto;
	height: auto;
	padding: 0 var(--page-content-padding);
	gap: calc(var(--blogs-page-size) * var(--blogs-section-spacing));

	bottom: 0;
	left: 0;
	
	-webkit-transform: translateX(clamp(-100%, var(--prefix-translate), 0%));
	-moz-transform: translateX(clamp(-100%, var(--prefix-translate), 0%));
	-o-transform: translateX(clamp(-100%, var(--prefix-translate), 0%));
	transform: translateX(clamp(-100%, var(--prefix-translate), 0%));

	transition: -webkit-transform var(--transition-long),
		-moz-transform var(--transition-long),
		-o-transform var(--transition-long),
		transform var(--transition-long);
}

/* BLOG CARD */

#blogs-container > .blog-post {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;

	position: relative;
	cursor: pointer;

	flex-shrink: 0;
	flex-grow: 0;

	width: calc(var(--blogs-page-size) * var(--blogs-page-width));
	height: calc(var(--blogs-page-size) * var(--blogs-page-width) / var(--blogs-page-aspect));
	
	transition: margin var(--transition-medium);
}

#blogs-container > .blog-post::after {
    content: "";
    position: absolute;
    
    top: 0;
    left: 50%;
    
    width: calc(100% + var(--blogs-page-size) * var(--blogs-section-spacing));
    height: 100%;
    
    transform: translateX(-50%);
    z-index: -1;
}

#blogs-container > .blog-post:active,
#blogs-container > .blog-post::after:active {
    cursor: none;
}

#blogs-container > .blog-post > .blog-thumbnail {
	background: rgba(250, 250, 250);
	border-radius: var(--base-page-radius);

	flex-shrink: 0;
	flex-grow: 0;

	width: 100%;
	height: var(--blogs-page-thumbnail-size);
	
	transition: -webkit-filter var(--transition-medium),
    	-moz-filter var(--transition-medium),
    	-o-filter var(--transition-medium),
    	filter var(--transition-medium);
}

#blogs-container > .blog-post > .blog-thumbnail:not(.skeleton-object) {
    -webkit-filter: brightness(0.95);
    -moz-filter: brightness(0.95);
    -o-filter: brightness(0.95);
	filter: brightness(0.95);
}

#blogs-container > .blog-post:hover > .blog-thumbnail {
    -webkit-filter: brightness(0.75);
    -moz-filter: brightness(0.75);
    -o-filter: brightness(0.75);
	filter: brightness(0.75);
}

#blogs-container > .blog-post > .blog-headline {
	color: rgba(0, 0, 0, 1);

	font-size: calc(var(--blogs-page-size) * var(--blogs-page-headline-size));
	font-weight: var(--font-weight-bold);

	letter-spacing: calc(var(--blogs-page-size) * var(--blogs-page-headline-size) * var(--base-page-letter-spacing));
	line-height: calc(var(--blogs-page-size) * var(--blogs-page-headline-size));
	white-space: nowrap;

    text-overflow: ellipsis;
    overflow: hidden;

	flex-shrink: 0;
	flex-grow: 0;
	
	max-width: 100%;
}

#blogs-container > .blog-post > .blog-article {
    --font-size: calc(var(--blogs-page-size) * var(--blogs-page-article-size));
    --line-height: calc(var(--font-size) + var(--font-size) / 1.5);
    
	color: rgba(0, 0, 0, 0.75);

	font-size: var(--font-size);

	letter-spacing: calc(var(--font-size) * var(--base-page-letter-spacing));
	line-height: var(--line-height);
	white-space: normal;
	
	text-overflow: ellipsis;
	overflow: hidden;

	flex-shrink: 0;
	flex-grow: 0;

	width: 100%;
	height: calc(var(--line-height) * 3);
}

#blogs-container > .blog-post > .blog-date {
	color: rgba(0, 0, 0, 0.5);

	font-size: calc(var(--blogs-page-size) * var(--blogs-page-date-size));

	letter-spacing: calc(var(--blogs-page-size) * var(--blogs-page-date-size) * var(--base-page-letter-spacing));

	flex-shrink: 0;
	flex-grow: 0;
}

/* ARROWS */

#left-arrow,
#right-arrow {
	--prefix-opacity: 0;
	
	background-color: rgba(255, 255, 255, 1);

	position: absolute;

	width: var(--page-content-padding);
	height: calc(var(--blogs-page-size) * var(--blogs-page-width) / 0.875);
	bottom: 0;

	z-index: 15;
}

#left-arrow > img,
#right-arrow > img {
	position: absolute;
	
	-o-object-fit: contain;
	object-fit: contain;
	
	-o-object-position: center;
	object-position: center;

    pointer-events: all;

	opacity: var(--prefix-opacity);

	width: 33.33%;
	height: 5%;

	left: 50%;
	top: 50%;

	transition: opacity var(--transition-medium),
		-webkit-transform var(--transition-medium),
		-moz-transform var(--transition-medium),
		-o-transform var(--transition-medium),
		-ms-transform var(--transition-medium),
		transform var(--transition-medium);
}

#left-arrow:hover > img,
#right-arrow:hover > img {
	opacity: calc(var(--prefix-opacity, 0) / 0.5);
}

#left-arrow::before,
#right-arrow::before {
	content: "";
	position: absolute;

	opacity: calc(var(--prefix-opacity, 0) / 0.75);
	pointer-events: none;

	width: 100%;
	height: 100%;

	top: 0;

	transition: opacity var(--transition-medium);
}

#right-arrow {
	right: 0;
}

#right-arrow > img {
	-webkit-transform: scaleX(1) translate(-50%, -50%);
	-moz-transform: scaleX(1) translate(-50%, -50%);
	-o-transform: scaleX(1) translate(-50%, -50%);
	-ms-transform: scaleX(1) translate(-50%, -50%);
	transform: scaleX(1) translate(-50%, -50%);
}

#right-arrow::before {
	background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	right: 100%;
}

#left-arrow {
	left: 0;
}

#left-arrow > img {
	-webkit-transform: scaleX(-1) translate(50%, -50%);
	-moz-transform: scaleX(-1) translate(50%, -50%);
	-o-transform: scaleX(-1) translate(50%, -50%);
	-ms-transform: scaleX(-1) translate(50%, -50%);
	transform: scaleX(-1) translate(50%, -50%);
}

#left-arrow::before {
	background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	left: 100%;
}

#right-arrow:hover > img {
	-webkit-transform: scaleX(1) translate(-45%, -50%);
	-moz-transform: scaleX(1) translate(-45%, -50%);
	-o-transform: scaleX(1) translate(-45%, -50%);
	-ms-transform: scaleX(1) translate(-45%, -50%);
	transform: scaleX(1) translate(-45%, -50%);
}

#left-arrow:hover > img {
	-webkit-transform: scaleX(-1) translate(55%, -50%);
	-moz-transform: scaleX(-1) translate(55%, -50%);
	-o-transform: scaleX(-1) translate(55%, -50%);
	-ms-transform: scaleX(-1) translate(55%, -50%);
	transform: scaleX(-1) translate(55%, -50%);
}

@media (max-width: 75vh) {
	:root {
		--blogs-page-size: min(calc(1vw / var(--optimal-aspect-ratio)), 1vh);

		--blogs-page-vertical: calc(var(--fixed-content-padding) / 0.75);

		--blogs-page-gap: 5;
		--blogs-section-spacing: 2;

		--blogs-page-width: 75;
		--blogs-page-aspect: 0.875;

		--blogs-page-padding: 1.125;
		--blogs-page-thumbnail-size: 57.5%;
		--blogs-page-headline-size: 4;
		--blogs-page-article-size: 2.75;
		--blogs-page-date-size: 2;

		--blogs-page-radius: 1.25;
	}
    
	#blogs-container {
		transition: none;
	}

	#blogs .arrow-button img {
		display: none;
	}
	
	#blogs .arrow-button::before {
	    content: none;
	}
}