/* -----------------------------------------------------------------------
   Project Listing Styles  (loaded via [project_grid] shortcode)
   Scoped entirely under .project-* classes, so no other page is affected.
   ----------------------------------------------------------------------- */

.project-archive-wrap {
	padding: 40px 0 60px;
	background: #ffffff;
}

.project-container {
	max-width: 1400px;
	margin: 0 auto;
}

/* Grid: 2 cards per row on desktop, matching the reference design.
----------------------------------------------------------------------- */
.project-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 48px 56px;
}

/* Feature the first project full-width at the top; the rest flow 2 per row. */
.project-grid > .project-card:first-child {
	grid-column: 1 / -1;
}

/* Wider banner image for the featured (first) card so it doesn't stretch tall. */
.project-grid > .project-card:first-child .project-card-image {
	aspect-ratio: 32 / 9;
	    min-height: 566px;

}

/* Featured card: show the four detail fields in a single row (Project Type |
   Description | Location | Details) instead of the 2x2 grid used by other cards.
   Only on wide screens; below 992px it falls back to the normal responsive grid. */
@media (min-width: 992px) {
	.project-grid > .project-card:first-child .project-card-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* One row, so drop the horizontal dividers; use a vertical divider between
	   each field and none after the last one. */
	.project-grid > .project-card:first-child .project-field {
		border-bottom: 0;
		border-right: 1px solid #000;
		padding-left: 26px;
		padding-right: 26px;
	}

	.project-grid > .project-card:first-child .project-field--type {
		padding-left: 0;
	}

	.project-grid > .project-card:first-child .project-field--details {
		border-right: 0;
	}
}

/* Card
----------------------------------------------------------------------- */
.project-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
}

.project-card-image {
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #ececec;
}

.project-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.project-card-noimage {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e9e9e9 0%, #dcdcdc 100%);
}

.project-card-body {
	padding-top: 16px;
}

/* Title + underline
----------------------------------------------------------------------- */
.project-card-title {
	padding-bottom: 15px;
	border-bottom: 1px solid #000;
	font-weight: 900;
font-style: Black;
font-size: 34px;
leading-trim: NONE;
line-height: 37px;
letter-spacing: 0%;
text-transform: uppercase;
color:#1A191B;
}

/* Two-column detail grid inside a card
----------------------------------------------------------------------- */
.project-card-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	    border-bottom: 1px solid #000;

}

/* Each field cell. Borders build the cross-shaped divider seen in the design:
   right border = vertical divider between the two columns,
   bottom border = horizontal divider between the two rows.
----------------------------------------------------------------------- */
.project-field {
	padding: 16px 22px 16px 0;
}

/* Left-column cells get a right divider + inner padding after it. */
.project-field--type,
.project-field--location {
	border-right: 1px solid #000;
	padding-right: 26px;
}

.project-field--desc,
.project-field--details {
	padding-left: 26px;
}

/* Top-row cells get a bottom divider. */
.project-field--type,
.project-field--desc {
	border-bottom: 1px solid #000;
}

.project-field-label {
	    font-size: 20px;
    font-weight: 500;
    line-height: 34px;
    color: #A51A12;
    text-transform: uppercase;
    font-family: 'Sofia Sans Extra Condensed';
        text-transform: uppercase;
        	    margin: 0px;

}

.project-field-value {
	font-size: 24px;
    font-weight: 400;
    line-height: 34px;
    color: #1A191B;
        font-family: 'Sofia Sans Condensed';

}


/* No results
----------------------------------------------------------------------- */
.project-no-results {
	grid-column: 1 / -1;
	text-align: center;
	padding: 60px 0;
	color: #777;
}

/* Load More button
----------------------------------------------------------------------- */
.project-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}

.project-load-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 34px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffffff;
	background: #b40000;
	border: 1px solid #000;
	border-radius: 2px;
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
}

.project-load-more:hover {
	background: #920000;
}

.project-load-more[disabled] {
	opacity: 0.7;
	cursor: default;
}

/* Spinner shows only while loading. */
.project-load-more-spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: project-spin 0.6s linear infinite;
}

.project-load-more.is-loading .project-load-more-spinner {
	display: inline-block;
}
h3.project-card-title , span.project-field-label{
    font-family: 'Sofia Sans Extra Condensed';
}
span.project-field-value {
    font-family: 'Sofia Sans Condensed';
}

h3.project-card-title {
    border-top: 1px solid #000;
    padding-top: 15px;
        margin: 0px;
}

@keyframes project-spin {
	to {
		transform: rotate(360deg);
	}
}

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

/* Tablet: keep 2 project cards per row but tighten the gap. */
@media (max-width: 991px) {
	.project-grid {
		gap: 36px 32px;
	}

	/* Let the featured banner scale with its aspect-ratio instead of being
	   pinned to the 566px desktop height, which overflows at these widths. */
	.project-grid > .project-card:first-child .project-card-image {
		min-height: 0;
	}
}

/* Small tablet / large phone: 1 project card per row. */
@media (max-width: 767px) {
	.project-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	/* Featured card matches the others once everything is single-column. */
	.project-grid > .project-card:first-child .project-card-image {
		aspect-ratio: 16 / 10;
		min-height: 0;
	}
}

/* Phone: stack the two inner columns as well so nothing gets cramped. */
@media (max-width: 480px) {
	.project-card-grid {
		grid-template-columns: 1fr;
	}

	/* Reset the desktop cross-dividers and use simple stacked row lines. */
	.project-field {
		padding: 14px 0;
		border-right: 0 !important;
		border-bottom: 1px solid #e2e2e2;
	}

	.project-field--type,
	.project-field--location,
	.project-field--desc,
	.project-field--details {
		padding-left: 0;
		padding-right: 0;
	}

	.project-field--details {
		border-bottom: 0;
	}
}