.modern-foto {
	--foto-primary: #0ab7a3;
	--foto-primary-dark: #078f84;

	--foto-text: #123f55;
	--foto-text-soft: #6f7c7e;

	--foto-white: #ffffff;

	--foto-bg: #f8fbfa;

	--foto-shadow: 0 18px 40px rgba(24, 61, 55, 0.1);

	padding: 55px 0 80px;

	background: linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
}

/* =========================================================
   FOTO GRID
   ========================================================= */

.foto-grid {
	display: grid;

	grid-template-columns: repeat(4, minmax(0, 1fr));

	gap: 34px 22px;

	align-items: start;

	perspective: 1200px;
}

/* =========================================================
   FOTO CARD
   ========================================================= */

.foto-card {
	position: relative;

	min-width: 0;

	opacity: 0;

	animation: fotoCardAppear 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;

	transition:
		transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		filter 0.45s ease;
}

/* =========================================================
   CARD PARALLAX / POKER CARD STYLE
   ========================================================= */

/*
 * Setiap kartu dibuat sedikit berbeda posisi
 * agar tidak terlihat seperti grid kaku.
 *
 * Konsepnya menyerupai kartu poker yang
 * disusun sedikit menyebar.
 */

/* Kartu 1 */

.foto-card:nth-child(3n + 1) {
	transform: translateY(8px) rotate(-1.8deg);

	animation-delay: 0.05s;
}

/* Kartu 2 */

.foto-card:nth-child(3n + 2) {
	transform: translateY(-8px) rotate(1.2deg);

	animation-delay: 0.12s;
}

/* Kartu 3 */

.foto-card:nth-child(3n + 3) {
	transform: translateY(10px) rotate(-0.8deg);

	animation-delay: 0.19s;
}

/* Baris kedua */

.foto-card:nth-child(6n + 4) {
	transform: translateY(-7px) rotate(1.5deg);
}

.foto-card:nth-child(6n + 5) {
	transform: translateY(9px) rotate(-1.1deg);
}

.foto-card:nth-child(6n + 6) {
	transform: translateY(-5px) rotate(1.8deg);
}

/* =========================================================
   HOVER CARD
   ========================================================= */

.foto-card:hover {
	z-index: 10;

	transform: translateY(-10px) rotate(0deg) scale(1.025);

	filter: drop-shadow(0 20px 30px rgba(24, 61, 55, 0.16));
}

/* =========================================================
   IMAGE LINK
   ========================================================= */

.foto-image-link {
	display: block;

	color: inherit;

	text-decoration: none;
}

/* =========================================================
   IMAGE FRAME
   ========================================================= */

.foto-image-wrapper {
	position: relative;

	width: 100%;

	aspect-ratio: 1.38 / 1;

	overflow: hidden;

	background: #e9efed;

	/*
     * Bingkai putih seperti foto
     */

	padding: 9px;

	border-radius: 24px;

	background: #ffffff;

	box-shadow: 0 8px 22px rgba(32, 67, 61, 0.08);

	transition:
		box-shadow 0.45s ease,
		transform 0.45s ease;
}

/* =========================================================
   IMAGE
   ========================================================= */

.foto-image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	border-radius: 17px;

	transition:
		transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
		filter 0.5s ease;
}

/* =========================================================
   IMAGE HOVER
   ========================================================= */

.foto-card:hover .foto-image {
	transform: scale(1.08);

	filter: brightness(0.82);
}

/* =========================================================
   CARD SHADOW HOVER
   ========================================================= */

.foto-card:hover .foto-image-wrapper {
	box-shadow: 0 20px 40px rgba(32, 67, 61, 0.17);
}

/* =========================================================
   OVERLAY
   ========================================================= */

.foto-overlay {
	position: absolute;

	inset: 9px;

	display: flex;

	align-items: flex-end;

	padding: 24px;

	border-radius: 17px;

	background: linear-gradient(
		to top,
		rgba(8, 30, 34, 0.86) 0%,
		rgba(8, 30, 34, 0.6) 30%,
		rgba(8, 30, 34, 0.08) 75%,
		rgba(8, 30, 34, 0) 100%
	);

	opacity: 0;

	transition: opacity 0.4s ease;
}

/* Tampilkan overlay ketika hover */

.foto-card:hover .foto-overlay {
	opacity: 1;
}

/* =========================================================
   OVERLAY CONTENT
   ========================================================= */

.foto-overlay-content {
	width: 100%;

	transform: translateY(15px);

	opacity: 0;

	transition:
		transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity 0.35s ease;
}

.foto-card:hover .foto-overlay-content {
	transform: translateY(0);

	opacity: 1;
}

/* =========================================================
   DATE
   ========================================================= */

.foto-date {
	display: flex;

	align-items: center;

	gap: 6px;

	margin-bottom: 7px;

	color: rgba(255, 255, 255, 0.78);

	font-size: 10px;

	font-weight: 500;

	letter-spacing: 0.2px;
}

.foto-date i {
	color: #5ee0d1;

	font-size: 10px;
}

/* =========================================================
   TITLE
   ========================================================= */

.foto-title {
	margin: 0;

	color: #ffffff;

	font-size: 17px;

	line-height: 1.35;

	font-weight: 700;

	letter-spacing: -0.25px;

	display: -webkit-box;

	overflow: hidden;

	-webkit-line-clamp: 2;

	-webkit-box-orient: vertical;
}

/* =========================================================
   VIEW PHOTO
   ========================================================= */

.foto-view {
	display: inline-flex;

	align-items: center;

	gap: 8px;

	margin-top: 13px;

	color: #ffffff;

	font-size: 11px;

	font-weight: 700;

	letter-spacing: 0.3px;

	text-transform: uppercase;
}

.foto-view i {
	color: #5ee0d1;

	font-size: 11px;

	transition: transform 0.25s ease;
}

.foto-card:hover .foto-view i {
	transform: translateX(4px);
}

/* =========================================================
   PAGINATION
   ========================================================= */

.foto-pagination {
	margin-top: 60px;
}

/* =========================================================
   EMPTY STATE
   ========================================================= */

.foto-empty {
	max-width: 600px;

	margin: 30px auto 20px;

	padding: 60px 30px;

	text-align: center;

	border: 1px solid #e5eeeb;

	border-radius: 22px;

	background: #ffffff;

	box-shadow: 0 15px 40px rgba(31, 62, 57, 0.05);
}

/* =========================================================
   EMPTY ICON
   ========================================================= */

.foto-empty-icon {
	width: 72px;
	height: 72px;

	display: flex;

	align-items: center;
	justify-content: center;

	margin: 0 auto;

	border-radius: 50%;

	background: rgba(10, 183, 163, 0.09);

	color: var(--foto-primary);

	font-size: 28px;
}

/* =========================================================
   EMPTY EYEBROW
   ========================================================= */

.foto-empty-eyebrow {
	display: block;

	margin-top: 20px;

	color: var(--foto-primary);

	font-size: 10px;

	font-weight: 800;

	letter-spacing: 1.5px;
}

/* =========================================================
   EMPTY TITLE
   ========================================================= */

.foto-empty h2 {
	margin: 7px 0 8px;

	color: var(--foto-text);

	font-size: 25px;

	font-weight: 700;
}

/* =========================================================
   EMPTY DESCRIPTION
   ========================================================= */

.foto-empty p {
	margin: 0;

	color: var(--foto-text-soft);

	font-size: 14px;

	line-height: 1.7;
}

/* =========================================================
   EMPTY BUTTON
   ========================================================= */

.foto-empty-button {
	display: inline-flex;

	align-items: center;

	gap: 7px;

	margin-top: 22px;

	padding: 10px 18px;

	border-radius: 9px;

	background: var(--foto-primary);

	color: #ffffff;

	font-size: 13px;

	font-weight: 600;

	text-decoration: none;

	transition:
		transform 0.25s ease,
		background-color 0.25s ease,
		box-shadow 0.25s ease;
}

.foto-empty-button:hover {
	transform: translateY(-2px);

	background: var(--foto-primary-dark);

	color: #ffffff;

	text-decoration: none;

	box-shadow: 0 8px 20px rgba(10, 183, 163, 0.2);
}

/* =========================================================
   CARD APPEAR
   ========================================================= */

@keyframes fotoCardAppear {
	from {
		opacity: 0;

		transform: translateY(35px) rotate(0deg);
	}

	to {
		opacity: 1;
	}
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
	.modern-foto {
		padding: 35px 0 55px;
	}

	.foto-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));

		gap: 24px 14px;
	}

	.foto-card:nth-child(3n + 1),
	.foto-card:nth-child(3n + 2),
	.foto-card:nth-child(3n + 3),
	.foto-card:nth-child(6n + 4),
	.foto-card:nth-child(6n + 5),
	.foto-card:nth-child(6n + 6) {
		transform: translateY(0) rotate(0deg);
	}

	.foto-card:hover {
		transform: translateY(-5px) rotate(0deg) scale(1.015);
	}

	.foto-image-wrapper {
		padding: 7px;

		border-radius: 18px;
	}

	.foto-image {
		border-radius: 13px;
	}

	.foto-overlay {
		inset: 7px;

		padding: 15px;

		border-radius: 13px;
	}

	.foto-title {
		font-size: 13px;

		line-height: 1.3;
	}

	.foto-date {
		font-size: 9px;

		margin-bottom: 5px;
	}

	.foto-view {
		margin-top: 9px;

		font-size: 9px;
	}

	.foto-pagination {
		margin-top: 45px;
	}
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
	.foto-grid {
		grid-template-columns: 1fr;

		gap: 24px;
	}

	/*
     * Pada layar sangat kecil,
     * tetap beri sedikit variasi supaya
     * tidak terlihat seperti daftar biasa.
     */

	.foto-card:nth-child(odd) {
		transform: translateX(-3px) rotate(-0.8deg);
	}

	.foto-card:nth-child(even) {
		transform: translateX(3px) rotate(0.8deg);
	}

	.foto-card:hover {
		transform: translateY(-6px) rotate(0deg) scale(1.01);
	}

	.foto-image-wrapper {
		aspect-ratio: 1.45 / 1;
	}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.foto-card {
		animation: none;

		opacity: 1;

		transition: none;
	}

	.foto-image,
	.foto-overlay,
	.foto-overlay-content,
	.foto-card,
	.foto-image-wrapper,
	.foto-view i,
	.foto-empty-button {
		transition: none;
	}
}

/* =========================================================
   DESKTOP LARGE
   4 KOLOM
   ========================================================= */

@media (min-width: 1200px) {
	.foto-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));

		gap: 34px 22px;
	}
}

/* =========================================================
   TABLET
   2 KOLOM
   ========================================================= */

@media (max-width: 1199px) {
	.foto-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));

		gap: 32px 22px;
	}
}