/*
Theme Name: ericville25
Author: eric@ericwittke.com
File: bricks.css
Description: Modern Grid System for Visual Tiles.
*/

/* * -------------------------------------------------------------------------
 * Grid Layout (Mobile First)
 * -------------------------------------------------------------------------
 */

:where(.bricks-grid) {
	display: grid;
	grid-template-columns: 1fr; /* Default: 1 Column */
	gap: var(--space-m);
	padding: 0;
	margin-bottom: var(--space-xl);
	list-style: none;
}
@media (min-width: 700px) {
	:where(.bricks-grid) {
		gap: var(--space-lg);
	}
}

:where(.bricks-grid) .brick-item {
	display: block;
	width: 100%;
	perspective: 1000px; /* Setup for 3D hover effects */
}

/* * -------------------------------------------------------------------------
 * Responsive Columns
 * -------------------------------------------------------------------------
 */

/* Small Phone: 1 Column */

:where(.bricks-grid:not(.list-view)) {
	grid-template-columns: repeat(1, 1fr);
}

/* Small Tablet / Large Phone: 2 Columns */
@media (min-width: 700px) {
	:where(.bricks-grid:not(.list-view)) {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Tablet: 3 Columns */
@media (min-width: 900px) {
	:where(.bricks-grid:not(.list-view)) {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Desktop: 4 Columns */
/* @media (min-width: 1200px) {
	:where(.bricks-grid:not(.list-view)) {
		grid-template-columns: repeat(4, 1fr);
	}
} */

/* * -------------------------------------------------------------------------
 * Card Component
 * -------------------------------------------------------------------------
 */

.brick-card {
	display: flex;
	flex-direction: column; /* Stack image on top of text */
	height: 100%; /* Ensures card fills the grid row height */
	
	text-decoration: none;
	background: transparent;
	
	/* Animation Base */
/* 	transform-style: preserve-3d; */
	transition: transform var(--motion-medium) ease-out;
}

/* Hover Effect: Scale Up */
@media (min-width: 650px) {
	.brick-card:where(:hover, :focus) {
		transform: scale(1.03);
		z-index: 10;
	}
	.brick-card:active {
		transform: scale(0.98);
	}
}

/* * -------------------------------------------------------------------------
 * Card Media (Image)
 * -------------------------------------------------------------------------
 */

.brick-media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-s);
	background-color: var(--color-gray-800);
	box-shadow: var(--shadow-medium);
	pointer-events: none;
	aspect-ratio: 8 / 5;
	width: 100%;
	outline: 0 solid transparent;
	transition:
		outline var(--motion-fast) ease-out,
		box-shadow var(--motion-fast) ease-out;
}
:where(.inverse) .brick-media {
	box-shadow: var(--shadow-heavy);
}

.brick-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.brick-card:where(:hover) .brick-media {
	box-shadow: var(--shadow-medium-elevated);
}
.brick-card:where(:active) .brick-media {
	box-shadow: none;
}

:where(.inverse) .brick-card:where(:hover) .brick-media {
	box-shadow: var(--shadow-heavy-elevated);
}
:where(.inverse) .brick-card:where(:active) .brick-media {
	box-shadow: none;
}

/* * -------------------------------------------------------------------------
 * Card Content
 * -------------------------------------------------------------------------
 */

.brick-content {
	display: flex;
	flex-direction: column;
	flex-grow: 1; /* Pushes content to fill space */
	padding-top: var(--space-s);
	gap: var(--space-xs);
}

/* Title */
.brick-title {
	margin: 0;
	font-family: var(--header-fonts);
	font-size: var(--font-size-m);
	font-weight: normal;
	color: var(--color-text);
	transition: color var(--motion-fast) ease-out;
}

.brick-card:where(:hover) .brick-title {
	color: var(--color-accent);
}

:where(.inverse) .brick-card .brick-title {
	color: var(--color-bg);
}
:where(.inverse) .brick-card:where(:hover) .brick-title {
	color: var(--color-accent-light);
}

/* Description */
.brick-description {
	margin: 0;
	font-family: var(--system-fonts);
	font-size: var(--font-size-xs);
	color: var(--color-gray-800);
	opacity: 0.8;
	line-height: 1.5;
}
:where(.inverse) .brick-description {
	color: var(--color-gray-300);
}


/* * -------------------------------------------------------------------------
 * Variant: List View (.list-view)
 * Formerly ".full" - renamed for clarity
 * -------------------------------------------------------------------------
 */

:where(.bricks-grid.list-view) {
	grid-template-columns: 1fr !important;
	gap: var(--space-s);
}

:where(.bricks-grid.list-view) .brick-card {
	flex-direction: row; /* Horizontal Layout */
	align-items: flex-start;
	gap: var(--space-m);
	height: auto;
}

/* Lock Thumbnail Size in List View */
:where(.bricks-grid.list-view) .brick-media {
	width: var(--thumbnail-size);
/* 	height: var(--thumbnail-size); */
	flex-shrink: 0; /* Prevent squishing */
	aspect-ratio: 8/5; /* Square for list view looks better */
}

:where(.bricks-grid.list-view) .brick-content {
	padding-top: 0;
	justify-content: center;
}

/* * -------------------------------------------------------------------------
 * Variant: Case Studies (Wide Cards)
 * -------------------------------------------------------------------------
 */

/* Override Aspect Ratio for Cinematic feel */
:where(.bricks-grid.case-studies) .brick-media {
    /* Roughly 500/280, but cleaner syntax */
    aspect-ratio: 16/9; 
}

/* Tablet Override: Force 2 Columns instead of 3 */
@media (min-width: 900px) {
    :where(.bricks-grid.case-studies) {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop Override: Force 2 Columns instead of 4 */
@media (min-width: 1200px) {
    :where(.bricks-grid.case-studies) {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* * -------------------------------------------------------------------------
 * Tags / Metadata Pills
 * -------------------------------------------------------------------------
 */

.brick-tags {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-xs);
	
	font-family: var(--system-fonts);
	font-size: var(--font-size-xs);
	text-transform: uppercase;
	line-height: 1;
}

.brick-tags .tag {
	color: var(--color-text);
	padding: 2px 4px; /* Added slight vertical padding for pill shape */
	border-radius: var(--radius-s);
}

:where(.inverse) .brick-tags .tag {
	color: var(--color-gray-200);
}