/*
 * Dress pages (portfolio items). Values measured on the old site (small masonry layout).
 * Only loaded on single portfolio items (inc/portfolio.php).
 */

/* ---------- Header: grey variant has a white bar with dark menu text ---------- */
.dmd-pf-plain .dmd-header-bar { background-color: #fff; }
.dmd-pf-plain .dmd-header .dmd-nav-item > a { color: var(--dark); }
.dmd-pf-plain .dmd-header .dmd-nav-item:hover > a { color: var(--pink); }

/* ---------- Page frame ---------- */
.dmd-pf { background-color: #f9f9f9; }
.dmd-pf-plain .dmd-pf { padding-top: 75px; }
.dmd-pf-with-image .dmd-pf-container { background-color: #f8f8f8; }

/* ---------- Title band ---------- */
.dmd-pf-title { position: relative; background-color: #eaeaea; box-sizing: border-box; }
.dmd-pf-title.has-image { background-repeat: no-repeat; background-position: 50% 0; background-size: auto; }
.dmd-pf-title-image { display: none; }
.dmd-pf-title-holder { display: flex; align-items: center; height: 100%; }
.dmd-pf-title.has-image .dmd-pf-title-holder { align-items: flex-start; padding-top: 83px; box-sizing: border-box; }
.dmd-pf-title-holder .dmd-inner { width: var(--grid-width); }
.dmd-pf-title h1 {
	margin: 0;
	padding: 0;
	font-family: Montserrat, sans-serif;
	font-size: 38px;
	line-height: 1.125em;
	font-weight: 700;
	text-transform: uppercase;
	color: #4b4b55;
}
.dmd-pf-title.has-image h1 { color: #fff; }

/* ---------- Columns (75 / 25) ---------- */
.dmd-pf-holder { margin-top: 80px; margin-bottom: 84px; }
.dmd-pf-cols::after { content: ''; display: table; clear: both; }
.dmd-pf-col1 { width: 75%; float: left; }
.dmd-pf-col1 .dmd-pf-col-inner { padding: 0 20px 0 0; }
.dmd-pf-col2 { width: 25%; float: left; }
.dmd-pf-col2 .dmd-pf-col-inner { padding: 0 0 0 20px; }

/* ---------- Masonry (positions are set by js/portfolio.js, like Isotope did) ---------- */
.dmd-pf-media { position: relative; margin: -15px -15px 0; }
.dmd-pf-sizer { width: 50%; }
.dmd-pf-item { box-sizing: border-box; }
.dmd-pf-item.edgtf-default-masonry-item,
.dmd-pf-item.edgtf-large-height-masonry-item { width: 50%; }
.dmd-pf-item.edgtf-large-width-height-masonry-item,
.dmd-pf-item.edgtf-large-width-masonry-item { width: 100%; }
.dmd-pf-item a,
.dmd-pf-item img { box-sizing: border-box; overflow: hidden; width: 100%; height: 100%; display: block; }
.dmd-pf-item.edgtf-large-width-masonry-item img { height: auto; }
.dmd-pf-item.edgtf-large-height-masonry-item img { width: auto; max-width: initial; }
.dmd-pf-item img { border: 0; vertical-align: middle; max-width: 100%; }
.dmd-pf-item.edgtf-large-height-masonry-item img { max-width: initial; }
.dmd-pf-media.is-placed .dmd-pf-item { position: absolute; }

/* ---------- Info column ---------- */
.dmd-pf-info-item {
	display: table;
	table-layout: fixed;
	width: 100%;
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 26px;
	padding: 2px 0;
	color: #81818b;
}
.dmd-pf-info-title { display: table-cell; width: 33%; }
.dmd-pf-info-item strong { font-weight: 700; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.dmd-pf-plain .dmd-pf { padding-top: 0; }
	.dmd-pf-col1, .dmd-pf-col2 { width: 100%; float: none; }
	.dmd-pf-col1 .dmd-pf-col-inner, .dmd-pf-col2 .dmd-pf-col-inner { padding: 0; }
	/* Padding, not margin: the gap stays when the image column is empty (a margin would merge with the one above) */
	.dmd-pf-col2 { padding-top: 50px; }
	.dmd-pf-info-title { width: 48%; }
	/* Title with image: the image itself shows (its height follows the width) and the title sits in its middle */
	.dmd-pf-title.has-image { height: auto !important; background-image: none !important; }
	.dmd-pf-title.has-image .dmd-pf-title-image { display: block; }
	.dmd-pf-title.has-image .dmd-pf-title-image img { display: block; width: 100%; height: auto; }
	.dmd-pf-title.has-image .dmd-pf-title-holder { position: absolute; left: 0; top: 0; width: 100%; height: 100%; align-items: center; padding-top: 0; }
}
.dmd-narrow .dmd-pf-plain .dmd-pf { padding-top: 0; }
@media (max-width: 768px) {
	.dmd-pf-info-title { width: 30%; }
	.dmd-pf-holder { margin-bottom: 144px; }
}
@media (max-width: 600px) { .dmd-pf-title h1 { font-size: 26px; position: relative; top: .175px; } } /* measured: the old title sits 0.175 px lower here */
/* Measured: from 480 px down the old title has tighter letters and sits 1.3 px lower */
@media (max-width: 480px) { .dmd-pf-title h1 { font-size: 22px; letter-spacing: -2px; position: relative; top: 1.3px; } }