/* ==========================================================================
   founder-gallery.css – Devraj's photos
   1. About page: "Moments with Devraj" mosaic + lightbox (.dp-fg, .dp-lightbox)
   2. Homepage: moving photo strip (.dp-fm)
   Photos and captions: inc/founder-photos.php.
   ========================================================================== */

/* ---------- 1. About page mosaic ---------- */
.dp-fg { position: relative; overflow: hidden; isolation: isolate; background: var(--dp-bg); }
.dp-fg::before { /* soft saffron sun behind the grid */
	content: ""; position: absolute; z-index: -1; width: 720px; height: 720px; left: -260px; top: 120px; border-radius: 50%;
	background: radial-gradient(circle, rgba(224, 146, 47, .14), transparent 65%);
}
.dp-fg__head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px 60px; align-items: end; margin-bottom: 48px; }
.dp-fg__head .dp-title { margin-bottom: 0; }
.dp-fg__lead { margin: 0; padding-left: 26px; border-left: 2px solid var(--dp-accent); color: var(--dp-muted); font-size: 17px; line-height: 1.75; }

.dp-fg__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 170px; grid-auto-flow: dense; gap: 16px;
}
.dp-fg__item { position: relative; grid-row: span 2; transition-delay: var(--d, 0s); }
.dp-fg__item--feature { grid-column: span 2; grid-row: span 4; }
.dp-fg__item--landscape { grid-column: span 2; }

.dp-fg__link {
	position: relative; display: block; height: 100%; overflow: hidden; isolation: isolate;
	border-radius: var(--dp-radius); background: var(--dp-sand); color: #fff;
	box-shadow: 0 24px 50px -30px rgba(30, 34, 72, .55);
	transition: transform .5s var(--dp-ease), box-shadow .5s;
}
.dp-fg__item--feature .dp-fg__link { border-radius: 260px 260px var(--dp-radius) var(--dp-radius); } /* arch, like the homepage portrait */
.dp-fg__link img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform 1.1s var(--dp-ease); }
.dp-fg__link::before { /* dark fade so the caption is readable */
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
	background: linear-gradient(180deg, rgba(15, 17, 40, 0) 50%, rgba(15, 17, 40, .85));
	transition: opacity .5s;
}
.dp-fg__num {
	position: absolute; top: 14px; left: 16px;
	font-family: var(--dp-font-head); font-size: 20px; font-weight: 600; font-style: italic; color: rgba(255, 255, 255, .9);
	text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.dp-fg__item--feature .dp-fg__num { top: auto; bottom: 64px; left: 26px; font-size: 26px; }
.dp-fg__zoom {
	position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
	background: rgba(255, 255, 255, .92); color: var(--dp-primary);
	opacity: 0; transform: scale(.6); transition: opacity .35s, transform .45s var(--dp-ease);
}
.dp-fg__item--feature .dp-fg__zoom { top: 50%; right: 50%; margin: -20px -20px 0 0; }
.dp-fg__zoom svg { width: 18px; height: 18px; }
.dp-fg__caption {
	position: absolute; left: 16px; right: 16px; bottom: 14px;
	font-family: var(--dp-font-head); font-size: 20px; font-weight: 600; line-height: 1.2;
	opacity: 0; transform: translateY(12px); transition: opacity .45s, transform .5s var(--dp-ease);
}
.dp-fg__item--feature .dp-fg__caption { left: 26px; bottom: 24px; font-size: 28px; opacity: 1; transform: none; }

.dp-fg__link:hover,
.dp-fg__link:focus-visible { transform: translateY(-6px); box-shadow: 0 34px 60px -30px rgba(30, 34, 72, .7); }
.dp-fg__link:hover img,
.dp-fg__link:focus-visible img { transform: scale(1.07); }
.dp-fg__link:hover::before,
.dp-fg__link:focus-visible::before { opacity: 1; }
.dp-fg__link:hover .dp-fg__zoom,
.dp-fg__link:focus-visible .dp-fg__zoom,
.dp-fg__link:hover .dp-fg__caption,
.dp-fg__link:focus-visible .dp-fg__caption { opacity: 1; transform: none; }

.dp-fg__cta {
	position: relative; overflow: hidden; height: 100%; padding: 26px 24px;
	display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
	border-radius: var(--dp-radius); color: rgba(255, 255, 255, .78);
	background: linear-gradient(160deg, var(--dp-primary-2), var(--dp-primary) 60%, #14173a);
}
.dp-fg__cta::before { content: ""; position: absolute; width: 220px; height: 220px; top: -90px; right: -90px; border-radius: 50%; border: 1px solid rgba(242, 184, 97, .35); box-shadow: 0 0 0 26px rgba(242, 184, 97, .06); }
.dp-fg__cta-count { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--dp-accent-2); }
.dp-fg__cta-count strong { display: block; font-family: var(--dp-font-head); font-size: 54px; line-height: 1; letter-spacing: 0; color: #fff; }
.dp-fg__cta p { margin: 0; font-family: var(--dp-font-head); font-size: 21px; line-height: 1.25; color: #fff; }
.dp-fg__cta a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--dp-accent-2); }
.dp-fg__cta a svg { width: 18px; height: 18px; transition: transform .3s; }
.dp-fg__cta a:hover { color: #fff; }
.dp-fg__cta a:hover svg { transform: translateX(4px); }

/* Lightbox (built by assets/js/founder-gallery.js) */
.dp-lightbox {
	position: fixed; inset: 0; z-index: 10000; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 14px;
	padding: 60px 90px 18px; background: rgba(12, 14, 34, .95);
	opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
.dp-lightbox.is-open { opacity: 1; visibility: visible; }
.dp-lightbox__stage { position: relative; display: grid; place-items: center; min-height: 0; margin: 0; }
.dp-lightbox__stage img {
	max-width: 100%; max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); width: auto; height: auto; object-fit: contain; border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7);
	transition: opacity .3s, transform .4s var(--dp-ease);
}
.dp-lightbox__stage img.is-loading { opacity: 0; transform: scale(.97); }
.dp-lightbox__bar { display: flex; align-items: baseline; justify-content: center; gap: 14px; color: #fff; text-align: center; }
.dp-lightbox__caption { margin: 0; font-family: var(--dp-font-head); font-size: 22px; font-weight: 600; }
.dp-lightbox__count { font-size: 13px; letter-spacing: .12em; color: var(--dp-accent-2); }
.dp-lightbox__thumbs { display: flex; justify-content: center; gap: 8px; margin: 0; padding: 2px; list-style: none; overflow-x: auto; }
.dp-lightbox__thumbs button { display: block; width: 46px; height: 46px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: none; cursor: pointer; opacity: .5; transition: opacity .25s, border-color .25s; }
.dp-lightbox__thumbs button:hover { opacity: .85; }
.dp-lightbox__thumbs button[aria-current="true"] { opacity: 1; border-color: var(--dp-accent-2); }
.dp-lightbox__thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.dp-lightbox__btn {
	position: absolute; z-index: 2; display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background .25s, color .25s;
}
.dp-lightbox__btn:hover,
.dp-lightbox__btn:focus-visible { background: var(--dp-accent); color: #fff; }
.dp-lightbox__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dp-lightbox__close { top: 14px; right: 18px; }
.dp-lightbox__prev,
.dp-lightbox__next { top: 50%; margin-top: -55px; }
.dp-lightbox__prev { left: 20px; }
.dp-lightbox__next { right: 20px; }
.dp-lightbox[hidden] { display: none; }
body.dp-lightbox-open { overflow: hidden; }

/* ---------- 2. Homepage photo strip ---------- */
.dp-fm { overflow: hidden; background: linear-gradient(180deg, var(--dp-cream), var(--dp-bg)); }
.dp-fm__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px 60px; align-items: end; margin-bottom: 50px; }
.dp-fm__head .dp-title { margin-bottom: 0; }
.dp-fm__side p { margin: 0 0 18px; color: var(--dp-muted); font-size: 17px; }

.dp-fm__viewport {
	-webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.dp-fm__track {
	--gap: 22px;
	list-style: none; margin: 0; padding: 10px 0 30px;
	display: flex; align-items: center; gap: var(--gap); width: max-content;
	animation: dp-fm-scroll 70s linear infinite;
}
.dp-fm__viewport:hover .dp-fm__track,
.dp-fm__viewport:focus-within .dp-fm__track { animation-play-state: paused; }
@keyframes dp-fm-scroll { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }

.dp-fm__item { flex: 0 0 auto; width: 240px; }
.dp-fm__item a {
	position: relative; display: block; overflow: hidden; isolation: isolate; height: 330px;
	border-radius: var(--dp-radius); background: var(--dp-sand); color: #fff;
	box-shadow: 0 24px 46px -28px rgba(30, 34, 72, .6);
	transition: transform .5s var(--dp-ease);
}
.dp-fm__item--0 a { border-radius: 140px 140px var(--dp-radius) var(--dp-radius); height: 360px; } /* arch */
.dp-fm__item--1 a { height: 290px; margin-top: 50px; }
.dp-fm__item--2 a { height: 340px; margin-bottom: 30px; }
.dp-fm__item img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform 1s var(--dp-ease); }
.dp-fm__item a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15, 17, 40, 0) 55%, rgba(15, 17, 40, .8)); opacity: 0; transition: opacity .4s; }
.dp-fm__caption {
	position: absolute; left: 16px; right: 16px; bottom: 14px;
	font-family: var(--dp-font-head); font-size: 19px; font-weight: 600; line-height: 1.2;
	opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .45s var(--dp-ease);
}
.dp-fm__item a:hover,
.dp-fm__item a:focus-visible { transform: translateY(-8px) rotate(-1deg); }
.dp-fm__item a:hover img { transform: scale(1.06); }
.dp-fm__item a:hover::before,
.dp-fm__item a:focus-visible::before { opacity: 1; }
.dp-fm__item a:hover .dp-fm__caption,
.dp-fm__item a:focus-visible .dp-fm__caption { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.dp-fg__head,
	.dp-fm__head { grid-template-columns: 1fr; }
	.dp-fg__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 12px; }
	.dp-fg__item--feature { grid-row: span 3; }
	.dp-fg__item--feature .dp-fg__link { border-radius: 200px 200px var(--dp-radius) var(--dp-radius); }
	.dp-lightbox { padding: 70px 14px 14px; }
	.dp-lightbox__prev,
	.dp-lightbox__next { top: 14px; margin: 0; width: 46px; height: 46px; }
	.dp-lightbox__prev { left: 14px; }
	.dp-lightbox__next { left: 68px; right: auto; }
	.dp-lightbox__close { right: 14px; }
}
@media (hover: none) { /* touch screens: captions always visible */
	.dp-fg__caption { opacity: 1; transform: none; font-size: 16px; }
	.dp-fg__link::before { opacity: .9; }
}
@media (max-width: 600px) {
	.dp-fg__grid { grid-auto-rows: 120px; }
	.dp-fg__lead { padding-left: 16px; font-size: 16px; }
	.dp-fg__num { font-size: 16px; top: 10px; left: 12px; }
	.dp-fg__caption { left: 12px; right: 12px; bottom: 10px; font-size: 15px; }
	.dp-fg__item--feature .dp-fg__caption { font-size: 22px; left: 18px; }
	.dp-fg__item--feature .dp-fg__num { bottom: 50px; left: 18px; }
	.dp-fg__cta { padding: 18px 16px; }
	.dp-fg__cta-count strong { font-size: 40px; }
	.dp-fg__cta p { font-size: 17px; }
	.dp-lightbox__thumbs { justify-content: flex-start; }
	.dp-lightbox__caption { font-size: 18px; }
	.dp-fm__track { --gap: 14px; }
	.dp-fm__item { width: 180px; }
	.dp-fm__item a { height: 250px; }
	.dp-fm__item--0 a { height: 270px; }
	.dp-fm__item--1 a { height: 220px; margin-top: 36px; }
	.dp-fm__item--2 a { height: 255px; margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.dp-fm__track { animation: none; }
	.dp-fm__viewport { overflow-x: auto; -webkit-mask: none; mask: none; }
	.dp-fg__link, .dp-fg__link img, .dp-fm__item a, .dp-fm__item img, .dp-lightbox, .dp-lightbox__stage img { transition: none; }
}