/* =========================================================
   Al-Asry Projects — Frontend Styles
   ========================================================= */

:root {
	--ap-purple:      #1f0f3a;
	--ap-purple-soft: #4a2d6e;
	--ap-purple-mist: #ede6f7;
	--ap-red:         #dc2626;
	--ap-gold:        #f59e0b;
	--ap-white:       #ffffff;
	--ap-ink:         #1a1425;
	--ap-gray:        #8b8a8f;
	--ap-gray-light:  #e8e4ed;
	--ap-radius:      16px;
	--ap-ease:        cubic-bezier(0.34, 1.56, 0.64, 1);
	--ap-ease-s:      cubic-bezier(0.23, 1, 0.32, 1);
	--ap-shadow:      0 8px 32px rgba(31,15,58,.10);
	--ap-shadow-lg:   0 24px 60px rgba(31,15,58,.18);
}

/* ── Grid ───────────────────────────────────────────────── */
.asry-proj-grid {
	display: grid;
	grid-template-columns: repeat( var(--ap-cols, 4), 1fr );
	gap: 24px;
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
}

.asry-proj-grid[data-cols="1"] { --ap-cols: 1; }
.asry-proj-grid[data-cols="2"] { --ap-cols: 2; }
.asry-proj-grid[data-cols="3"] { --ap-cols: 3; }
.asry-proj-grid[data-cols="4"] { --ap-cols: 4; }
.asry-proj-grid[data-cols="5"] { --ap-cols: 5; }
.asry-proj-grid[data-cols="6"] { --ap-cols: 6; }

@media (max-width: 1100px) {
	.asry-proj-grid[data-cols="5"],
	.asry-proj-grid[data-cols="6"] { --ap-cols: 4; }
}
@media (max-width: 900px) {
	.asry-proj-grid { --ap-cols: 2 !important; }
}
@media (max-width: 480px) {
	.asry-proj-grid { --ap-cols: 1 !important; gap: 16px; }
}

/* ── Card ───────────────────────────────────────────────── */
.asry-proj-card {
	position: relative;
	border-radius: var(--ap-radius);
	overflow: hidden;
	background: var(--ap-white);
	box-shadow: var(--ap-shadow);
	transition: transform .4s var(--ap-ease), box-shadow .4s var(--ap-ease);
}
.asry-proj-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--ap-shadow-lg);
}

.asry-proj-card__trigger {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: inherit;
}
.asry-proj-card__trigger:focus-visible {
	outline: 3px solid var(--ap-gold);
	outline-offset: 3px;
	border-radius: var(--ap-radius);
}

/* Image wrapper — fixed 4:3 ratio */
.asry-proj-card__img-wrap {
	position: relative;
	width: 100%;
	padding-bottom: 75%; /* 4:3 */
	overflow: hidden;
	background: var(--ap-purple-mist);
}
.asry-proj-card__img,
.asry-proj-card__placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ap-ease-s);
	display: flex;
	align-items: center;
	justify-content: center;
}
img.asry-proj-card__img{
    height:100% !important;
}
.asry-proj-card__placeholder svg {
	width: 64px;
	height: 64px;
}
.asry-proj-card__trigger:hover .asry-proj-card__img {
	transform: scale(1.08);
}

/* Overlay */
.asry-proj-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(31,15,58,.0) 40%,
		rgba(31,15,58,.55) 100%
	);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .35s var(--ap-ease-s);
}
.asry-proj-card__trigger:hover .asry-proj-card__overlay {
	opacity: 1;
}

/* Zoom icon */
.asry-proj-card__zoom-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255,255,255,.18);
	backdrop-filter: blur(8px);
	border: 1.5px solid rgba(255,255,255,.35);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transform: scale(.7);
	transition: transform .35s var(--ap-ease);
}
.asry-proj-card__zoom-icon svg {
	width: 22px;
	height: 22px;
}
.asry-proj-card__trigger:hover .asry-proj-card__zoom-icon {
	transform: scale(1);
}

/* Meta row */
.asry-proj-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px 16px;
	border-top: 1px solid var(--ap-gray-light);
	background: var(--ap-white);
}
.asry-proj-card__num {
	font-family: "IBM Plex Mono", "Courier New", monospace;
	font-size: .68rem;
	font-weight: 600;
	color: var(--ap-red);
	letter-spacing: .06em;
	flex-shrink: 0;
	line-height: 1;
	padding: 3px 8px;
	border-radius: 4px;
	background: rgba(220,38,38,.07);
	border: 1px solid rgba(220,38,38,.15);
}
.asry-proj-card__title {
	font-size: .9rem;
	font-weight: 700;
	color: var(--ap-purple);
	line-height: 1.35;
	text-align: start;
	flex: 1;
	transition: color .25s;
}
.asry-proj-card__trigger:hover .asry-proj-card__title {
	color: var(--ap-red);
}

/* ── Empty state ────────────────────────────────────────── */
.asry-proj-empty {
	text-align: center;
	color: var(--ap-gray);
	padding: 48px 24px;
	font-size: .95rem;
}

/* ── Lightbox ───────────────────────────────────────────── */
.asry-proj-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.asry-proj-lightbox[hidden] { display: none; }

.asry-proj-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(14,7,32,.88);
	backdrop-filter: blur(10px);
	cursor: pointer;
	animation: ap-backdrop-in .3s var(--ap-ease-s) both;
}

.asry-proj-lightbox__frame {
	position: relative;
	z-index: 1;
	max-width: min(860px, 100%);
	width: 100%;
	animation: ap-frame-in .38s var(--ap-ease) both;
}

.asry-proj-lightbox__close {
	position: absolute;
	top: -44px;
	right: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,.12);
	border: 1.5px solid rgba(255,255,255,.22);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .2s, transform .2s var(--ap-ease);
	font: inherit;
	padding: 0;
}
.asry-proj-lightbox__close svg { width: 18px; height: 18px; }
.asry-proj-lightbox__close:hover {
	background: rgba(220,38,38,.6);
	transform: scale(1.1);
}
.asry-proj-lightbox__close:focus-visible {
	outline: 2px solid var(--ap-gold);
	outline-offset: 3px;
}

.asry-proj-lightbox__img-wrap {
	position: relative;
	border-radius: var(--ap-radius);
	overflow: hidden;
	background: var(--ap-purple);
	line-height: 0;
	min-height: 120px;
}
.asry-proj-lightbox__img {
	width: 100%;
	height: auto;
	max-height: 80vh;
	object-fit: contain;
	display: block;
	border-radius: var(--ap-radius);
}

/* Spinner */
.asry-proj-lightbox__spinner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.asry-proj-lightbox__spinner::after {
	content: "";
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 3px solid rgba(255,255,255,.15);
	border-top-color: var(--ap-red);
	animation: ap-spin .8s linear infinite;
}
.asry-proj-lightbox__spinner.is-hidden { display: none; }

/* Caption */
.asry-proj-lightbox__caption {
	margin-top: 14px;
	text-align: center;
	color: rgba(255,255,255,.75);
	font-size: .88rem;
	font-weight: 600;
	letter-spacing: .02em;
	padding: 0 8px;
}

/* ── Animations ─────────────────────────────────────────── */
@keyframes ap-backdrop-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes ap-frame-in {
	from { opacity: 0; transform: scale(.92) translateY(16px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ap-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.asry-proj-card,
	.asry-proj-card__img,
	.asry-proj-card__overlay,
	.asry-proj-card__zoom-icon,
	.asry-proj-lightbox__backdrop,
	.asry-proj-lightbox__frame {
		transition: none !important;
		animation: none !important;
	}
}