/* Album intro (description / optional subtitle): space before photo grid */
#main.layout_grid .mue-album-intro-block {
	margin-bottom: 1.75rem;
}
#main.layout_grid .mue-album-intro-block .essay + .essay,
#main.layout_grid .mue-album-intro-block .essay + p.essay {
	margin-top: 0.65rem;
}

/* Django port: Koken hides .kpgriditem until Pillar.js + lazy-load; show grid without that pipeline. */
#kpgrid .kpgriditem,
#kpgrid .kpgriditem img {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Prevent horizontal scroll from shadows / rounding on narrow viewports */
#kpgrid {
	overflow-x: hidden;
	max-width: 100%;
}

/*
 * Madison settings.css.lens: body.k-lens-* #kpgrid { margin-left: calc(-gap/2); … }
 * Pillar grid için — CSS Grid + gap kullandığımızda bu negatif margin sol sütunu
 * taşırıp overflow ile kırpar. Hepsini sıfırla.
 */
body.k-lens-album #kpgrid,
body.k-lens-albums #kpgrid,
body.k-lens-archive-albums #kpgrid,
body.k-lens-archive-contents #kpgrid,
body.k-lens-contents #kpgrid,
body.k-lens-favorites #kpgrid,
body.k-lens-index #kpgrid,
body.k-lens-set #kpgrid,
body.k-lens-sets #kpgrid {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* —— Modern album / set / archive grid (Pillar disabled in mue-disable-pillar.js) —— */
#kpgrid #kpgrid_content > .k-infinite-load {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)) !important;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	align-items: start;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

@media (min-width: 1200px) {
	#kpgrid #kpgrid_content > .k-infinite-load {
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
		gap: 1.75rem 1.5rem;
	}
}

/* Phones / small screens: one column, comfortable tap targets */
@media (max-width: 600px) {
	#kpgrid #kpgrid_content > .k-infinite-load {
		grid-template-columns: 1fr !important;
		gap: 0.9rem;
	}
}

/* Large phones / small tablets: two balanced columns */
@media (min-width: 601px) and (max-width: 900px) {
	#kpgrid #kpgrid_content > .k-infinite-load {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 1rem;
	}
}

#kpgrid .kpgriditem {
	width: auto !important;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin: 0;
	float: none !important;
	clear: none !important;
}

/* Card frame: rounded tile, soft shadow */
#kpgrid .kpgriditem .img_wrap {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(145deg, #f5f5f5 0%, #ececec 100%);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.04),
		0 6px 20px rgba(0, 0, 0, 0.06);
	transition:
		box-shadow 0.3s ease,
		transform 0.3s ease;
	-webkit-tap-highlight-color: transparent;
}

@media (max-width: 600px) {
	#kpgrid .kpgriditem .img_wrap {
		border-radius: 10px;
	}
}

/* Hover polish only on devices that support hover (avoids “stuck” hover on touch) */
@media (hover: hover) and (pointer: fine) {
	#kpgrid .kpgriditem:hover .img_wrap {
		box-shadow:
			0 4px 6px rgba(0, 0, 0, 0.05),
			0 16px 40px rgba(0, 0, 0, 0.1);
		transform: translateY(-4px);
	}

	#kpgrid .kpgriditem:hover a.imgframe img {
		transform: scale(1.04);
	}

	#kpgrid .kpgriditem figcaption a:hover {
		color: #111;
	}
}

/* Uniform tile proportion */
#kpgrid .kpgriditem a.imgframe {
	display: block !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	width: 100%;
	touch-action: manipulation;
}

#kpgrid .kpgriditem a.imgframe img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
	vertical-align: middle;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

/* Titles under archive cards */
#kpgrid .kpgriditem figcaption {
	margin-top: 0.65rem;
}

#kpgrid .kpgriditem figcaption h3 {
	font-size: clamp(0.8rem, 2.8vw, 0.9rem);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.35;
	margin: 0;
}

#kpgrid .kpgriditem figcaption a {
	color: #666;
	text-decoration: none;
	transition: color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
	#kpgrid .kpgriditem .img_wrap,
	#kpgrid .kpgriditem a.imgframe img,
	#kpgrid .kpgriditem figcaption a {
		transition: none !important;
	}

	#kpgrid .kpgriditem:hover .img_wrap,
	#kpgrid .kpgriditem:hover a.imgframe img {
		transform: none !important;
	}
}

/* Main column: respect notch / home indicator on phones */
@media (max-width: 767px) {
	#target #main {
		padding-left: max(0px, env(safe-area-inset-left, 0px));
		padding-right: max(0px, env(safe-area-inset-right, 0px));
		box-sizing: border-box;
	}
}

/* Optional: hide per-item spinner (z-index 999) so it never covers the image */
#kpgrid .kpgriditem .spinner_pos {
	display: none !important;
}

/* Sol sütun: Koken madison.js k-infinite-loading ile .kloading’i gösterir; Django’da sonsuz kaydırma
   tamamlanmadığı için k-infinite-loaded gelmez ve spinner sürekli döner. Tamamen gizle. */
.kloading {
	display: none !important;
}