/* Project Showcase - Styles */

:root {
	--ps-primary: #002133;
	--ps-accent: #EF4D17;
	--ps-light: #E1E1E1;
	--ps-white: #FFFFFF;
}

/* ========== ARCHIVE/LIST VIEW ========== */

.ps-showcase {
	margin: 30px 0;
}

.ps-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 20px;
}

.ps-grid-1 { grid-template-columns: 1fr; }
.ps-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ps-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ps-grid-4 { grid-template-columns: repeat(4, 1fr); }

.ps-project-card {
	padding: 0;
	border: 1px solid var(--ps-light);
	border-radius: 8px;
	background: white;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	overflow: hidden;
}

.ps-project-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

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

.ps-project-card > * {
	padding: 0 15px;
}

.ps-project-card h3 {
	color: var(--ps-primary);
	margin: 15px 0 10px 0;
}

.ps-service,
.ps-year,
.ps-address {
	margin: 5px 0;
	font-size: 14px;
	color: #666;
}

.ps-service strong,
.ps-year strong,
.ps-address strong {
	color: var(--ps-primary);
}

.ps-project-card p {
	margin: 10px 0;
	font-size: 14px;
	line-height: 1.5;
}

.ps-read-more {
	color: var(--ps-accent);
	text-decoration: none;
	font-weight: 600;
	display: inline-block;
	margin-bottom: 15px;
	transition: color 0.3s ease;
}

.ps-read-more:hover {
	color: var(--ps-primary);
}

/* ========== SINGLE PROJECT PAGE ========== */

.ps-single-project {
	margin: 40px 0;
}

.ps-project-wrapper {
	max-width: 900px;
	margin: 0 auto;
}

.ps-project-header {
	margin-bottom: 40px;
}

.ps-featured-image {
	margin-bottom: 30px;
	border-radius: 8px;
	overflow: hidden;
}

.ps-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}

.ps-project-header h1 {
	color: var(--ps-primary);
	font-size: 32px;
	margin: 0;
}

/* Project Details Grid */
.ps-project-details {
	background: var(--ps-light);
	padding: 30px;
	border-radius: 8px;
	margin-bottom: 40px;
}

.ps-details-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.ps-detail-item h3 {
	color: var(--ps-primary);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 10px 0;
}

.ps-detail-item p {
	color: #333;
	font-size: 16px;
	margin: 0;
}

/* Project Content */
.ps-project-content {
	margin-bottom: 40px;
	line-height: 1.8;
}

.ps-project-content p {
	margin-bottom: 15px;
}

/* Project Quote */
.ps-project-quote {
	background: var(--ps-light);
	padding: 30px;
	border-left: 4px solid var(--ps-accent);
	margin-bottom: 40px;
	border-radius: 4px;
}

.ps-project-quote blockquote {
	margin: 0;
	font-style: italic;
	color: var(--ps-primary);
	font-size: 18px;
}

/* Team Grid */
.ps-project-team {
	margin-bottom: 40px;
}

.ps-project-team h2 {
	color: var(--ps-primary);
	margin-bottom: 30px;
}

.ps-team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.ps-team-member {
	padding: 20px;
	background: var(--ps-light);
	border-radius: 8px;
}

.ps-team-member h3 {
	color: var(--ps-primary);
	margin: 0 0 10px 0;
	font-size: 16px;
}

.ps-team-member p {
	margin: 0;
	color: #333;
}

/* Back Link */
.ps-back-link {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid var(--ps-light);
}

.ps-back-link a {
	color: var(--ps-accent);
	text-decoration: none;
	font-weight: 600;
	transition: color 0.3s ease;
}

.ps-back-link a:hover {
	color: var(--ps-primary);
}

/* ========== MAP ========== */

.ps-map {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ========== RESPONSIVE ========== */

@media (max-width: 768px) {
	/* Grid adjustments */
	.ps-list,
	.ps-grid-2,
	.ps-grid-3,
	.ps-grid-4 {
		grid-template-columns: 1fr;
	}

	/* Details grid */
	.ps-details-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* Team grid */
	.ps-team-grid {
		grid-template-columns: 1fr;
	}

	/* Single project header */
	.ps-project-header h1 {
		font-size: 24px;
	}

	/* Spacing */
	.ps-project-details {
		padding: 20px;
	}

	.ps-project-quote {
		padding: 20px;
	}

	.ps-project-team {
		margin-bottom: 30px;
	}
}

/* ========== MAP STYLING ========== */

/* Grayscale map filter */
.ps-map,
#ps-projects-map {
	filter: grayscale(100%) contrast(1.1);
	border-radius: 8px;
	overflow: hidden;
}

/* Custom Map Markers */
.ps-custom-marker {
	background: none;
	border: none;
}

.ps-marker-pin {
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
	transition: transform 0.2s ease;
	cursor: pointer;
}

.ps-marker-pin:hover {
	transform: translateY(-3px);
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}

/* Custom Popup Styling */
.leaflet-popup-content-wrapper {
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	padding: 0;
}

.leaflet-popup-content {
	margin: 0;
}

.ps-map-popup {
	padding: 15px;
}

.ps-map-popup h4 {
	margin: 0 0 8px 0;
	color: #002133;
	font-size: 16px;
	font-weight: 700;
}

.ps-map-popup p {
	margin: 0 0 12px 0;
	color: #666;
	font-size: 13px;
	line-height: 1.5;
}

.ps-popup-link {
	display: inline-block;
	background: #EF4D17;
	color: white;
	padding: 8px 16px;
	border-radius: 6px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	transition: background 0.3s ease;
}

.ps-popup-link:hover {
	background: #d43d0f;
	color: white;
}

/* Leaflet attribution styling */
.leaflet-control-attribution {
	font-size: 10px;
	opacity: 0.7;
	background: rgba(255, 255, 255, 0.8);
}

/* Popup tip (arrow) */
.leaflet-popup-tip {
	background: white;
}


/* =================================================================
   FRONTEND TEMPLATE BUILDER STYLES
   ================================================================= */

/* Template Container */
.ps-template-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

/* Template Row */
.ps-template-row {
	margin-bottom: 30px;
}

/* Row Inner (Grid Container) */
.ps-row-inner {
	display: grid;
	gap: 30px;
}

/* Equal Width Columns */
.ps-row-inner.ps-cols-1 {
	grid-template-columns: 1fr;
}

.ps-row-inner.ps-cols-2 {
	grid-template-columns: 1fr 1fr;
}

.ps-row-inner.ps-cols-3 {
	grid-template-columns: 1fr 1fr 1fr;
}

.ps-row-inner.ps-cols-4 {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* 2 Column Layouts */
.ps-row-inner.ps-cols-2.ps-layout-70-30 {
	grid-template-columns: 7fr 3fr;
}

.ps-row-inner.ps-cols-2.ps-layout-30-70 {
	grid-template-columns: 3fr 7fr;
}

.ps-row-inner.ps-cols-2.ps-layout-75-25 {
	grid-template-columns: 3fr 1fr;
}

.ps-row-inner.ps-cols-2.ps-layout-25-75 {
	grid-template-columns: 1fr 3fr;
}

.ps-row-inner.ps-cols-2.ps-layout-60-40 {
	grid-template-columns: 3fr 2fr;
}

.ps-row-inner.ps-cols-2.ps-layout-40-60 {
	grid-template-columns: 2fr 3fr;
}

/* 3 Column Layouts */
.ps-row-inner.ps-cols-3.ps-layout-50-25-25 {
	grid-template-columns: 2fr 1fr 1fr;
}

.ps-row-inner.ps-cols-3.ps-layout-25-50-25 {
	grid-template-columns: 1fr 2fr 1fr;
}

.ps-row-inner.ps-cols-3.ps-layout-25-25-50 {
	grid-template-columns: 1fr 1fr 2fr;
}

.ps-row-inner.ps-cols-3.ps-layout-40-30-30 {
	grid-template-columns: 4fr 3fr 3fr;
}

.ps-row-inner.ps-cols-3.ps-layout-30-40-30 {
	grid-template-columns: 3fr 4fr 3fr;
}

.ps-row-inner.ps-cols-3.ps-layout-30-30-40 {
	grid-template-columns: 3fr 3fr 4fr;
}

/* 4 Column Layouts */
.ps-row-inner.ps-cols-4.ps-layout-40-20-20-20 {
	grid-template-columns: 2fr 1fr 1fr 1fr;
}

.ps-row-inner.ps-cols-4.ps-layout-20-40-20-20 {
	grid-template-columns: 1fr 2fr 1fr 1fr;
}

.ps-row-inner.ps-cols-4.ps-layout-20-20-40-20 {
	grid-template-columns: 1fr 1fr 2fr 1fr;
}

.ps-row-inner.ps-cols-4.ps-layout-20-20-20-40 {
	grid-template-columns: 1fr 1fr 1fr 2fr;
}

/* Template Column */
.ps-template-column {
	/* Columns are sized by grid-template-columns above */
}

/* Responsive */
@media (max-width: 768px) {
	/* Stack columns on mobile */
	.ps-row-inner.ps-cols-2,
	.ps-row-inner.ps-cols-3,
	.ps-row-inner.ps-cols-4 {
		grid-template-columns: 1fr !important;
	}
	
	.ps-template-row {
		margin-bottom: 20px;
	}
	
	.ps-row-inner {
		gap: 20px;
	}
}

/* Kort fejlbesked */
.ps-map-error-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    color: #555;
    text-align: center;
}
.ps-map-error-msg span { font-size: 48px; }
.ps-map-error-msg p { font-size: 15px; margin: 0; }
.ps-map-error-msg small { color: #888; }
.ps-map-retry-btn {
    margin-top: 8px;
    padding: 8px 20px;
    background: #002133;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}
.ps-map-retry-btn:hover { background: #003d60; }