/* Phase 2 portfolio gallery layout. Theme-agnostic — uses neutral spacing
   and inherits typography. Tweak in the parent theme's CSS to match the
   site's visual language. */

/* The outer .tphg-portfolio wrapper stays edge-to-edge so the theme can
   render full-width section backgrounds. Inner content blocks are
   constrained to a centered, max-width column with side padding so they
   line up with the rest of the site's content area. Adjust max-width
   here if the theme uses a different content width. */
.tphg-portfolio {
	padding: 32px 0;
}

.tphg-portfolio-header,
.tphg-portfolio-pagination,
.tphg-portfolio-empty {
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

.tphg-portfolio-grid {
	padding-left: 12px;
	padding-right: 12px;
	box-sizing: border-box;
}

.tphg-portfolio-header {
	margin-bottom: 32px;
}

/* Suppress Elementor's auto-rendered "archive-page chrome" on portfolio
   pages. We force is_author=true to make theme-builder color rules match,
   but that also makes Elementor render an archive-title widget / page-title
   banner above our content, pushing the gallery down with awkward extra
   space. These rules hide the most common variants. If a future Elementor
   update introduces a new widget class, add it here. */
body.tphg-portfolio .elementor-widget-archive-title,
body.tphg-portfolio .elementor-page-title,
body.tphg-portfolio [data-widget_type="archive-title.default"],
body.tphg-portfolio [data-widget_type="theme-page-title.default"],
body.tphg-portfolio .page-header,
body.tphg-portfolio .archive-header {
	display: none !important;
}

.tphg-portfolio-header h1 {
	margin: 0 0 8px;
	font-size: 2rem;
}

.tphg-portfolio-filter,
.tphg-portfolio-count {
	margin: 4px 0;
	opacity: 0.75;
	font-size: 0.95rem;
}

.tphg-portfolio-sort {
	margin-top: 16px;
	display: flex;
	gap: 16px;
}

.tphg-portfolio-sort a {
	color: inherit;
	text-decoration: none;
	padding: 4px 0;
	border-bottom: 2px solid transparent;
	transition: border-color 150ms ease, opacity 150ms ease;
	opacity: 0.7;
}

.tphg-portfolio-sort a:hover {
	opacity: 1;
}

.tphg-portfolio-sort a.tphg-active {
	opacity: 1;
	border-bottom-color: var(--tphg-accent, #e63946);
	font-weight: 600;
}

/* Flex-based masonry. Items are distributed by JS into N column divs in
   horizontal-reading order (item 1 col 1, item 2 col 2, item 3 col 3, then
   item 4 below item 1, etc.) so the second-most-recent photo sits beside
   the most-recent rather than directly below it. JS reads breakpoints from
   the data-cols attribute on the grid (set via media queries below) to
   know how many columns to create at each viewport width. */
.tphg-portfolio-grid {
	display: flex;
	gap: 12px;
}

.tphg-portfolio-column {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.tphg-portfolio-grid                             { --tphg-cols: 4; }
@media (max-width: 1100px) { .tphg-portfolio-grid { --tphg-cols: 3; } }
@media (max-width:  800px) { .tphg-portfolio-grid { --tphg-cols: 2; } }
@media (max-width:  500px) { .tphg-portfolio-grid { --tphg-cols: 1; } }

.tphg-portfolio-item {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.05);
	transition: transform 200ms ease;
}

.tphg-portfolio-item:hover {
	transform: scale(1.01);
}

.tphg-portfolio-item img {
	width: 100%;
	height: auto;
	display: block;
}

.tphg-portfolio-empty {
	text-align: center;
	padding: 64px 0;
	opacity: 0.7;
}

.tphg-portfolio-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 24px;
	margin-top: 48px;
	font-size: 0.95rem;
}

.tphg-portfolio-pagination a {
	color: inherit;
	text-decoration: none;
	padding: 6px 12px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.06);
}

.tphg-portfolio-pagination a:hover {
	background: rgba(0, 0, 0, 0.12);
}

@media (max-width: 600px) {
	.tphg-portfolio { padding: 16px 12px; }
}