/*
Article specific styles
Purpose: Styles for the article template
*/

/* Custom color overrides for articles */
body {
    background-color: var(--custom-background-color, rgba(var(--dark), 1));
    color: var(--custom-text-color, rgba(var(--light), 0.75));
}

/* Override all text elements to use custom text color if set */
h1, h2, h3, h4, h5, h6, p, a, .link--back-to-portfolio, .link--project-url {
    color: var(--custom-text-color, inherit);
}

/* Ensure links maintain proper contrast */
a:hover {
    color: var(--custom-text-color, var(--light));
    opacity: 0.8;
}

.link--back-to-portfolio {
	position: fixed;
	top: var(--main-top);
	left: var(--main-left);
	z-index: 999;
}

.wrap--article {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	width: 80vw;
	gap: var(--size-2xl);
}

.wrap--article-header {
	display: grid;
	grid-template-columns: 4fr 2.5fr;
	grid-template-areas:
		"content meta"
		"preview preview";
	gap: var(--size-s);
	margin-top: var(--size-xl);
}
.wrap--article-header--content {
	grid-area: content;
	display: flex;
	flex-direction: column;
	gap: var(--size-s);
}
.wrap--article-header--meta {
	grid-area: meta;
	display: flex;
	flex-direction: column;
}

.wrap--article-header--content h1 {
	font-size: var(--txt-m);
	line-height: var(--size-m);
	margin: 0;
}

.wrap--article-header--content h2 {
	font-size: var(--txt-m);
	line-height: var(--size-m);
	font-weight: 400;
	margin: 0;
}

.link--project-url {
	font-size: var(--txt-m);
	line-height: var(--size-m);
	font-weight: 400;
	margin: 0;
}

.wrap--article-header img {
	grid-area: preview;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.wrap--article-content {
    width: auto;
	overflow: hidden;
}

.wrap--article-content p,
.wrap--article-content h2,
.wrap--article-content h3,
.wrap--article-content h4,
.wrap--article-content h5,
.wrap--article-content h6,
.wrap--article-content ul,
.wrap--article-content ol,
.wrap--article-content li {
	max-width: 75ch;
    width: 100%;
}

.wrap--article-content p img {
	width: 100%;
	height: 100%;
	margin: var(--size-s) 0;
}

.muse-video-player {
	margin-bottom: var(--size-s); 
}

/* 1. Landscape screen */
@media screen and (max-aspect-ratio: 3/2) {
	.wrap--article-header {
		grid-template-columns: 4fr 2fr;
	}
}

/* 2. Square screen */
@media screen and (max-aspect-ratio: 3/2.6) {
	.wrap--article-header {
		grid-template-columns: 4fr 1fr;
	}
}

/* 3. Vertical screen (Portrait) */
@media screen and (max-aspect-ratio: 2.6/3) {
	.wrap--article-header {
		display: flex;
		flex-direction: column;
	}
}