/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Version: 1.0.0
Text Domain: twentytwentyfive-child
*/

/* -----------------------------------------------------------------------
   Conditional page titles
   - Top-level pages: hide the title on desktop, show it left-aligned on mobile.
   - Child pages & single posts: title is always visible (see functions.php
     for the body classes and templates/single.html for posts).
----------------------------------------------------------------------- */
@media (min-width: 782px) {
	.is-top-level-page .page-conditional-title {
		display: none;
	}
}

@media (max-width: 781px) {
	.page-conditional-title {
		text-align: left;
	}
}

/* -----------------------------------------------------------------------
   Portfolio query loop
   Desktop: image on the left, title + excerpt stacked to its right.
   Mobile: title on top, then image, then excerpt.
----------------------------------------------------------------------- */
.portfolio-item {
	display: grid;
	grid-template-columns: minmax(180px, 240px) 1fr;
	grid-template-areas:
		"image title"
		"image excerpt";
	column-gap: var(--wp--preset--spacing--40, 1.5rem);
	row-gap: var(--wp--preset--spacing--20, 0.5rem);
	align-items: start;
}

.portfolio-item__image {
	grid-area: image;
	margin: 0;
}

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

.portfolio-item__title {
	grid-area: title;
	margin: 0;
}

.portfolio-item__excerpt {
	grid-area: excerpt;
}

@media (max-width: 781px) {
	.portfolio-item {
		grid-template-columns: 1fr;
		grid-template-areas:
			"title"
			"image"
			"excerpt";
	}
}