/* ==========================================================================
   Certified Bling — Home / Lifestyle Gallery (Phase 2, revised)
   "SEEN IN CERTIFIED." — warm-white ground, hard contrast with the black hero.
   A fixed 5-tile fashion-editorial composition (CSS Grid, deliberate sizing) —
   not masonry, not equal cards. Captions bottom-left, white, over imagery.
   ========================================================================== */

.home-gallery {
	--cb-gallery-gap: clamp(4px, 0.25rem + 0.5vw, 12px);
	background: var(--cb-paper);
	color: var(--cb-black);
}

/* --- Heading row ---------------------------------------------------- */

.home-gallery__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--cb-space-m) var(--cb-space-l);
	margin-bottom: var(--cb-space-l);
	padding-bottom: var(--cb-space-m);
	border-bottom: 1px solid var(--cb-line-dark);
}

.home-gallery__title {
	margin: 0;
	color: var(--cb-black);
	font-size: var(--cb-text-2xl);
}

.home-gallery__statement {
	margin: 0;
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-2xs);
	line-height: 1.55;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--cb-ink-mute);
}
.home-gallery__statement span { display: block; }

@media (min-width: 620px) {
	.home-gallery__statement { text-align: right; }
}

/* --- Grid: desktop editorial composition -------------------------- */

/* Mobile-first (<620): 2-column editorial rhythm, one full-width closing band.
   T1 tall left · T2 top-right · T3 tall right · T4 lower-left · T5 wide band. */
.home-gallery__grid {
	display: grid;
	gap: var(--cb-gallery-gap);
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 34vw 34vw 34vw 26vw;
}
.home-gallery__item--t1 { grid-column: 1;     grid-row: 1 / 3; }
.home-gallery__item--t2 { grid-column: 2;     grid-row: 1; }
.home-gallery__item--t3 { grid-column: 2;     grid-row: 2 / 4; }
.home-gallery__item--t4 { grid-column: 1;     grid-row: 3; }
.home-gallery__item--t5 { grid-column: 1 / 3; grid-row: 4; }

/* Tablet (620–1023): 3-column adaptation. */
@media (min-width: 620px) {
	.home-gallery__grid {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(4, minmax(150px, 22vw));
	}
	.home-gallery__item--t1 { grid-column: 1; grid-row: 1 / 5; }
	.home-gallery__item--t2 { grid-column: 2; grid-row: 1; }
	.home-gallery__item--t3 { grid-column: 3; grid-row: 1 / 4; }
	.home-gallery__item--t4 { grid-column: 2; grid-row: 2 / 5; }
	.home-gallery__item--t5 { grid-column: 3; grid-row: 4; }
}

/* Desktop (≥1024): intentional 5-tile editorial grid.
   12 columns × 6 rows.
     T1 portrait  · cols 1–4  · full height
     T2 detail    · cols 5–8  · top third
     T3 portrait  · cols 9–12 · upper two-thirds
     T4 detail    · cols 5–8  · lower two-thirds
     T5 city      · cols 9–12 · bottom third                                */
@media (min-width: 1024px) {
	.home-gallery__grid {
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: repeat(6, 1fr);
		height: clamp(560px, 72vh, 880px);
	}
	.home-gallery__item--t1 { grid-column: 1 / 5;   grid-row: 1 / 7; }
	.home-gallery__item--t2 { grid-column: 5 / 9;   grid-row: 1 / 3; }
	.home-gallery__item--t3 { grid-column: 9 / 13;  grid-row: 1 / 5; }
	.home-gallery__item--t4 { grid-column: 5 / 9;   grid-row: 3 / 7; }
	.home-gallery__item--t5 { grid-column: 9 / 13;  grid-row: 5 / 7; }
}

/* --- Tile ------------------------------------------------------- */

.home-gallery__item {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: #0a0a0b;
	border-radius: 0;
	box-shadow: none;
	isolation: isolate;
}

.home-gallery__media,
.home-gallery__img,
.home-gallery__ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.home-gallery__img {
	object-fit: cover;
	object-position: center;
	transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.home-gallery__item:hover .home-gallery__img,
.home-gallery__item:focus-within .home-gallery__img {
	transform: scale(1.04);
}

/* Readability overlay — subtle, weighted to the lower-left. */
.home-gallery__item::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to top, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.12) 34%, rgba(0,0,0,0) 60%),
		linear-gradient(to right, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 45%);
}

/* --- Caption -------------------------------------------------- */

.home-gallery__caption {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	max-width: 90%;
	padding: clamp(0.85rem, 0.6rem + 0.8vw, 1.4rem);
	color: #fff;
	font-family: var(--cb-font-mono);
	font-size: var(--cb-text-2xs);
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: 0.13em;
}
.home-gallery__caption-line { display: block; }

/* --- Placeholder treatment (no photography yet) ---------------- */

.home-gallery__ph {
	background-color: #0a0a0b;
	background-repeat: no-repeat;
	background-size: cover;
}
.home-gallery__ph-grain {
	position: absolute;
	inset: 0;
	opacity: 0.04;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 120px 120px;
}

/* Per-shape tone so the placeholder composition reads like the final layout. */
.home-gallery__item[data-shape="portrait"] .home-gallery__ph {
	background-image: radial-gradient(120% 90% at 22% 8%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 55%),
		linear-gradient(168deg, #101012 0%, #060607 72%);
}
.home-gallery__item[data-shape="detail"] .home-gallery__ph {
	background-image: radial-gradient(85% 85% at 50% 45%, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 60%),
		linear-gradient(150deg, #141416 0%, #08080a 78%);
}
.home-gallery__item[data-shape="city"] .home-gallery__ph {
	background-image: linear-gradient(90deg, #0c0c0e 0%, #121216 45%, #08080a 100%),
		linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 40%);
	background-blend-mode: screen, normal;
}

/* --- Admin note on the light ground --------------------------- */

.cb-note--light {
	margin-top: var(--cb-space-m);
	color: var(--cb-ink-mute);
	border-color: var(--cb-line-dark);
}

/* --- Motion ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.home-gallery__img { transition: none; }
	.home-gallery__item:hover .home-gallery__img,
	.home-gallery__item:focus-within .home-gallery__img { transform: none; }
}