/**
 * Portfolio — Archive + Single Post Layout
 *
 * Archive: 2-column card grid, square images, info table below.
 * Single:  2-column, square image left, detail table right.
 * Mobile:  stacks vertically.
 *
 * @package Ernesto
 * @since 1.0.0
 */

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED TABLE TOKENS
   Single and archive tables use the same visual language.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	--portfolio-table-bg:     rgba(255, 255, 255, 0.60);
	--portfolio-table-border: var(--color-border, #dee2e6);
}

html.dark-mode {
	--portfolio-table-bg: rgba(0, 0, 0, 0.60);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ARCHIVE GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.portfolio-archive-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2xl, 3rem);
	margin: var(--space-xl, 2rem) 0;
}

/* ── Card hover — lift the whole tile, no inner image movement ──────────── */

.portfolio-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.portfolio-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ── Card image ─────────────────────────────────────────────────────────── */

.portfolio-card__image-link {
	display: block;
	text-decoration: none;
}

.portfolio-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--border-radius-md, 6px) var(--border-radius-md, 6px) 0 0;
}

.portfolio-card__img-placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: var(--bg-alt, #e9ecef);
	border-radius: var(--border-radius-md, 6px) var(--border-radius-md, 6px) 0 0;
}

/* ── Card table ─────────────────────────────────────────────────────────── */

.portfolio-card__table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--portfolio-table-bg);
}

/* Outer border — skip top edge (image sits flush above) */
.portfolio-card__table,
.portfolio-card__table tr:first-child td:first-child,
.portfolio-card__table tr:first-child td:last-child {
	border-top: none;
}

.portfolio-card__table td {
	padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
	border: 1px solid var(--portfolio-table-border);
	font-size: var(--font-size-body, var(--font-size-base, 1rem));
	color: var(--text-main, #1a1a1b);
	line-height: var(--line-height-loose, 1.7);
	vertical-align: middle;
}

/* Remove inner top-border on first row */
.portfolio-card__table tr:first-child td {
	border-top: none;
}

/* ── Card title link — no colour override from WP link styles ───────────── */

.portfolio-card__title-link,
.portfolio-card__table td a.portfolio-card__title-link {
	display: block;
	color: var(--text-main, #1a1a1b) !important;
	text-decoration: none !important;
	font-weight: 400;
}

.portfolio-card__title-link:hover {
	text-decoration: underline;
}

/* Flatten any inline bold/italic injected into card grid titles */
.portfolio-card__title-link strong,
.portfolio-card__title-link em {
	font-weight: inherit;
	font-style: inherit;
}

/* ── WooCommerce add-to-cart button inside card table ───────────────────── */

.portfolio-card__table .button.add_to_cart_button,
.portfolio-card__table .button.product_type_simple {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: var(--font-weight-medium);
	background-color: var(--color-primary);
	color: var(--text-on-brand, #fff);
	border: none;
	border-radius: var(--border-radius-sm, 4px);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--transition-fast);
}

.portfolio-card__table .button.add_to_cart_button:hover,
.portfolio-card__table .button.product_type_simple:hover {
	background-color: var(--color-primary-hover);
	color: var(--text-on-brand, #fff);
	text-decoration: none;
}

/* Hide button once item has been added; keep the "view cart" link */
.portfolio-card__table .button.add_to_cart_button.added {
	display: none;
}

/* ── 4-column variant (related products) ───────────────────────────────── */

.portfolio-archive-grid--4col {
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg, 1.5rem);
}

@media (max-width: 900px) {
	.portfolio-archive-grid--4col {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.portfolio-archive-grid--4col {
		grid-template-columns: 1fr;
	}
}

/* ── Related products grid ──────────────────────────────────────────────── */

/* Hide price + add-to-cart row inside related product cards */
.related-products-grid .portfolio-card__table tr:not(:first-child) {
	display: none;
}

/* Tighter gap for smaller related cards */
.related-products-grid {
	gap: var(--space-md, 1rem);
	margin-top: var(--space-lg, 1.5rem);
}

/* ── WooCommerce product tab tiles ─────────────────────────────────────── */

/* Hide the h2 heading inside the description panel */
.woocommerce-Tabs-panel--description h2 {
	display: none;
}

/* Remove top margin from first paragraph in description tile.
   h2 is first-child (even when hidden), so :first-of-type targets the <p>. */
.woocommerce-Tabs-panel--description p:first-of-type {
	margin-top: 0;
}

/* Gap between quantity input and add-to-cart button */
.woocommerce .quantity {
	margin-bottom: var(--space-md, 1rem);
}

/* Related products heading above the grid */
.portfolio-single__extended-heading {
	margin: 0 0 var(--space-lg, 1.5rem) 0;
	font-size: var(--font-size-lg, 1.125rem);
	font-weight: var(--font-weight-medium);
}

/* ── Reviews title — full-width header row inside the tile ──────────────── */

/* Break out of the tile's padding so it spans edge-to-edge like a table td */
.woocommerce-Reviews-title {
	display: block;
	/* Negative margins cancel the tile's padding (space-md top, space-lg sides) */
	margin: calc(-1 * var(--space-md, 1rem))
	        calc(-1 * var(--space-lg, 1.25rem))
	        var(--space-md, 1rem);
	/* Match portfolio-single table td padding */
	padding: var(--space-sm, 0.75rem) var(--space-md, 1rem);
	font-size: var(--font-size-body, var(--font-size-base, 1rem));
	font-weight: 400;
	line-height: var(--line-height-loose, 1.7);
	color: var(--text-main, #1a1a1b);
	border-bottom: 1px solid var(--portfolio-table-border, #dee2e6);
}


/* ── Archive pagination ─────────────────────────────────────────────────── */

.portfolio-archive-grid + .navigation {
	margin-top: var(--space-xl, 2rem);
}

/* ── Archive responsive ─────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.portfolio-archive-grid {
		grid-template-columns: 1fr;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE POST LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

.portfolio-single {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2xl, 3rem);
	align-items: start;
	margin: var(--space-xl, 2rem) 0;
	/* Layout container — no hover interaction */
	transition: none;
}

.portfolio-single:hover {
	transform: none;
	box-shadow: none;
}

/* ── Column 1: Image ────────────────────────────────────────────────────── */

.portfolio-single__image {
	position: relative;
}

.portfolio-single__img-placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: var(--bg-alt, #e9ecef);
	border-radius: var(--border-radius-md, 6px);
}

.portfolio-single__image-link {
	display: block;
	text-decoration: none;
}

.portfolio-single__img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--border-radius-md, 6px);
}

/* WebGL fluted-glass canvas */
.portfolio-fluted-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: var(--border-radius-md, 6px);
	pointer-events: none;
	display: block;
}

.portfolio-single__image-link:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: var(--border-radius-md, 6px);
}

/* ── Column 2: Detail table ─────────────────────────────────────────────── */

.portfolio-single__details {
	overflow: hidden;
}

.portfolio-single__table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--portfolio-table-border);
	font-size: var(--font-size-body, var(--font-size-base, 1rem));
	background-color: var(--portfolio-table-bg);
}

.portfolio-single__table td {
	padding: var(--space-md, 1rem) var(--space-lg, 1.25rem);
	border: 1px solid var(--portfolio-table-border);
	font-size: var(--font-size-body, var(--font-size-base, 1rem));
	color: var(--text-main, #1a1a1b);
	line-height: var(--line-height-loose, 1.7);
	vertical-align: top;
}

/* ── Title ──────────────────────────────────────────────────────────────── */

.portfolio-single__table .portfolio-single__title {
	margin:         0;
	font-family:    var(--font-heading, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
	font-size:      var(--font-size-h2, var(--font-size-3xl, 1.875rem));
	font-weight:    var(--font-weight-h2, 700);
	line-height:    var(--line-height-tight, 1.2);
	letter-spacing: -0.01em;
	color:          var(--text-heading, #1a1a1b);
}

/* ── Content ────────────────────────────────────────────────────────────── */

.portfolio-single__content p:first-child { margin-top: 0; }
.portfolio-single__content p:last-child  { margin-bottom: 0; }

/* ── Client | Date row ──────────────────────────────────────────────────── */

.portfolio-single__row-meta-values {
	opacity:    0.8;
	transition: opacity 0.2s ease;
}

.portfolio-single__row-meta-values:hover {
	opacity: 1;
}

.portfolio-single__row-meta-values td {
	font-size:  0.875em;   /* slightly smaller than body */
	vertical-align: middle;
	transition: font-size 0.2s ease;
}

.portfolio-single__row-meta-values:hover td {
	font-size: 1em;
}

.portfolio-single__row-meta-values td:first-child,
.portfolio-single__row-meta-values td:last-child {
	width: 50%;
}

.portfolio-single__client-link {
	color: inherit;
	text-decoration: none;
}

.portfolio-single__client-link:hover {
	opacity: 0.7;
}

/* ── Skills ─────────────────────────────────────────────────────────────── */

.portfolio-single__skills { color: inherit; }

/* ── Extended content tile (content after <!--more-->) ─────────────────── */

.portfolio-single__extended {
	border: 1px solid var(--portfolio-table-border);
	background-color: var(--portfolio-table-bg);
	padding: var(--space-md, 1rem) var(--space-lg, 1.25rem);
	font-size: var(--font-size-body, var(--font-size-base, 1rem));
	color: var(--text-main, #1a1a1b);
	line-height: var(--line-height-loose, 1.7);
	border-radius: 0 0 var(--border-radius-md, 6px) var(--border-radius-md, 6px);
	margin-top: var(--space-xl, 2rem);
}

.portfolio-single__extended p:first-child { margin-top: 0; }
.portfolio-single__extended p:last-child  { margin-bottom: 0; }

/* ── Prev/Next nav ──────────────────────────────────────────────────────── */

.portfolio-single__nav {
	margin-top: var(--space-xl, 2rem);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2xl, 3rem);
}

.portfolio-single__nav-prev { grid-column: 1; }
.portfolio-single__nav-next { grid-column: 2; text-align: right; }

.portfolio-single__nav a {
	display: block;
	width: 100%;
	text-decoration: none;
	color: var(--text-main, #1a1a1b);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
	.portfolio-single {
		grid-template-columns: 1fr;
		gap: var(--space-xl, 2rem);
	}

	.portfolio-single__nav {
		grid-template-columns: 1fr;
	}

	.portfolio-single__nav-next {
		grid-column: 1;
		text-align: left;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   HIGH CONTRAST / ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════════ */

body.high-contrast .portfolio-card__table,
body.high-contrast .portfolio-single__table,
body.high-contrast .portfolio-single__details,
body.high-contrast .portfolio-single__extended {
	background-color: var(--bg-surface, #ffffff) !important;
}

body.high-contrast .portfolio-card__table td,
body.high-contrast .portfolio-single__table td {
	border-color: currentColor !important;
}

@media (prefers-contrast: high) {
	.portfolio-card__table,
	.portfolio-single__table,
	.portfolio-single__details,
	.portfolio-single__extended {
		background-color: var(--bg-surface, #ffffff) !important;
	}

	.portfolio-card__table td,
	.portfolio-single__table td {
		border-color: currentColor !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
	.portfolio-single        { grid-template-columns: 200px 1fr; }
	.portfolio-single__nav   { display: none; }
}