/* ==========================================================================
   Creatory Portfolio Scatter
   Row-based layout matching the reference design exactly:
     Row 1 -- 3 photos, bottom-aligned. Image 1 is widest/tallest, with the
              optional heading sitting inline beside it. This shape only
              ever happens once, on row 1.
     Every row after that -- 3 equal-size photos, same width, same height,
              repeating identically for as many portfolio items as there
              are, no further variation.
   ========================================================================== */

.cps-wrapper {
	width: 100%;
}

.cps-grid {
	width: 100%;
}

.cps-row {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
}

/* Scroll fade-up reveal (see script.js). Starts slightly lower and
   transparent, then eases into place the first time the row scrolls
   into view. If JS is disabled, rows never get the -pre-reveal class
   in the first place, so they simply show normally. */
.cps-row.cps-row-pre-reveal {
	opacity: 0;
	transform: translateY(36px);
}

.cps-row.cps-row-visible {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.cps-item {
	display: block;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	background: #e9e2df;
	flex-grow: 0;
	flex-shrink: 0;
}

.cps-item img,
.cps-item .cps-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.cps-item:hover img {
	transform: scale(1.06);
}

.cps-item::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
	pointer-events: none;
}

/* .cps-wrapper prefix + !important on font-family/font-size for the same
   reason as the heading above: Avada's global link/button typography can
   otherwise silently win, since these sit inside <a> tags. */
.cps-wrapper .cps-overlay-btn {
	position: absolute;
	left: 50%;
	bottom: 22px;
	transform: translate(-50%, 0);
	z-index: 2;
	max-width: calc(100% - 20px);
	box-sizing: border-box;
	padding: 9px 14px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 30px;
	color: #fff;
	font-family: var(--cps-button-font, inherit) !important;
	font-size: var(--cps-button-size, 10px) !important;
	font-weight: 600;
	letter-spacing: 0.75px;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: rgba(0, 0, 0, 0.1);
	transition: background 0.3s ease, color 0.3s ease, transform 0.35s ease;
}

.cps-item:hover .cps-overlay-btn {
	background: #4c141b;
	border-color: #4c141b;
	color: #ffffff;
	transform: translate(-50%, -32px);
}

.cps-wrapper .cps-title {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 24px;
	z-index: 2;
	text-align: center;
	color: #fff;
	font-family: var(--cps-title-font, inherit) !important;
	font-size: var(--cps-title-size, 19px) !important;
	line-height: 1.3;
	font-weight: 500;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}

.cps-item:hover .cps-title {
	opacity: 1;
	transform: translateY(0);
}

/* --------------------------------------------------------------------
   ROW 1 -- bottom-aligned, 3 direct flex siblings (photo 1, photo 2,
   photo 3 -- the heading sits on top via absolute positioning, see
   below). Widths are deliberately NOT independent percentages -- they're
   tied together by formula so photo 2's right edge and photo 3's
   left+right edges land EXACTLY on the same pixel as the repeating
   rows' column edges below, at any container width:

     SC (standard column) = (100% - 40px) / 3
                             -- exactly what .cps-pattern-standard
                             computes too (100% width minus the row's
                             two 20px gaps, split 3 ways).

     photo 1 = 1.25 * SC    -- about a quarter wider than one column
     photo 2 = 0.75 * SC    -- narrower by that same amount
     photo 3 = 1 * SC       -- exactly a standard column

   Because photo1 + photo2 always sums to exactly 2 * SC (1.25+0.75),
   and photo3 is exactly SC, the running total at every edge matches
   the repeating rows' totals pixel-for-pixel:
     - end of photo 2 = 1.25SC + 20px + 0.75SC = 2SC + 20px
                       = exactly where the repeating rows' column 2 ends.
     - start of photo 3 = 2SC + 40px, end of photo 3 = 3SC + 40px
                       = exactly the repeating rows' column 3, both edges.
   If you ever need photo 1 wider or narrower still, change the two
   multipliers (1.25 / 0.75) together, keeping them summing to 2 -- that
   preserves the alignment above.
   -------------------------------------------------------------------- */
.cps-row.cps-row-heading {
	position: relative;
	align-items: flex-end;
	margin-bottom: 44px; /* a bit more breathing room before the repeating rows than the standard 20px row gap */
}

.cps-pattern-1 { flex: 0 0 calc((100% - 40px) / 3 * 1.25); flex-basis: calc((100% - 40px) / 3 * 1.25); aspect-ratio: 503 / 703; }
.cps-pattern-2 { flex: 0 0 calc((100% - 40px) / 3 * 0.75); flex-basis: calc((100% - 40px) / 3 * 0.75); aspect-ratio: 0.651; }
.cps-pattern-3 { flex: 0 0 calc((100% - 40px) / 3); flex-basis: calc((100% - 40px) / 3); aspect-ratio: 402 / 463; }

/* --------------------------------------------------------------------
   Heading, floating above photos 2 and 3 on row 1 only -- exactly
   matching the reference design. It's positioned absolutely so it
   takes up no flex space itself and can't disturb the width math
   above; its left edge is calculated to land exactly at photo 2's
   left edge (photo 1's width + the row's 20px gap), and it stretches
   to the row's right edge, i.e. exactly as wide as photo 2 + gap +
   photo 3 combined. Row 1 keeps its wide-first-photo shape whether or
   not a heading is actually set; every row after it is the plain,
   equal-size repeating row further down.

   Font/size/color come from --cps-heading-font / --cps-heading-size /
   --cps-heading-color, set inline per-shortcode-instance in
   creatory-portfolio-scatter.php via the heading_font / heading_size /
   heading_color attributes -- e.g.
   heading_font="Playfair Display, serif" heading_size="28px". Leave
   those attributes blank to inherit Avada's default heading font/size.
   -------------------------------------------------------------------- */
.cps-heading-block {
	position: absolute;
	top: 0;
	left: calc((100% - 40px) / 3 * 1.25 + 20px);
	right: 0;
}

/* Selector strengthened (.cps-wrapper .cps-heading, not just .cps-heading)
   and !important used on font-family/font-size/color specifically --
   Avada applies its own heading typography site-wide, often with higher
   specificity, which otherwise silently wins over a plain single-class
   rule even though the CSS variable itself is set correctly. */
.cps-wrapper .cps-heading {
	margin: 0 0 12px;
	font-family: var(--cps-heading-font, inherit) !important;
	font-size: var(--cps-heading-size, 28px) !important;
	font-weight: normal !important;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--cps-heading-color, inherit) !important;
}

.cps-heading-line {
	display: block;
	width: 100%;
	height: 1px;
	background: #fff;
	opacity: 0.5;
}

/* --------------------------------------------------------------------
   Every row after row 1 -- 3 equal-width, equal-height photos, all the
   same portrait aspect ratio, repeating identically for as many
   portfolio items as there are. This is literally the same "SC"
   (standard column) referenced in the row 1 comment above.

   flex-grow is deliberately 0 here (fixed flex-basis, not 1 1 0%) --
   if the very last row only has 1 or 2 photos left over, they must
   stay the same size as every other row's photos, not stretch to fill
   the leftover space. .cps-row-partial (added in PHP whenever a row
   has fewer than 3 items) centers that row instead of letting it grow.
   -------------------------------------------------------------------- */
.cps-row.cps-row-standard {
	align-items: flex-start;
}

.cps-row.cps-row-standard.cps-row-partial {
	justify-content: center;
}

.cps-pattern-standard {
	flex: 0 0 calc((100% - 40px) / 3);
	aspect-ratio: 4 / 5;
}

/* --------------------------------------------------------------------
   Responsive fallback: below tablet width, drop to a simple 2-column
   (then 1-column) stacked layout instead of forcing the fine desktop
   proportions, which get too cramped on small screens.
   -------------------------------------------------------------------- */
@media (max-width: 900px) {
	.cps-row {
		flex-wrap: wrap;
	}

	/* Heading is absolutely positioned on desktop (see .cps-heading-block
	   above); on mobile it needs to go back into normal flow as the
	   first stacked item, centered, above the photos that follow. */
	.cps-heading-block {
		position: static;
		order: -1;
		flex-basis: 100%;
		text-align: center;
	}

	.cps-heading-line {
		width: 100%;
		margin: 0;
	}

	.cps-pattern-1, .cps-pattern-2, .cps-pattern-3,
	.cps-pattern-standard {
		flex: 0 0 calc(50% - 10px);
		aspect-ratio: 3 / 4;
		margin-top: 0;
		margin-bottom: 0;
	}

	.cps-pattern-1 {
		flex-basis: 100%;
	}
}

@media (max-width: 560px) {
	.cps-row {
		flex-direction: column;
	}

	.cps-pattern-1, .cps-pattern-2, .cps-pattern-3,
	.cps-pattern-standard {
		flex-basis: auto;
		width: 100%;
	}
}