/* Client Galleries — front-end viewer
   ------------------------------------------------------------------ */

.cg-body {
	margin: 0;
	padding: 0;
	--cg-bg: #ffffff;
	--cg-fg: #1a1a1a;
	--cg-muted: #6b7280;
	--cg-accent: #111111;
	--cg-accent-fg: #ffffff;
	--cg-tile-gap: 6px;
	--cg-radius: 0px;
	--cg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--cg-overlay: rgba(0, 0, 0, 0.35);
	background: var(--cg-bg);
	color: var(--cg-fg);
	font-family: var(--cg-font);
	-webkit-font-smoothing: antialiased;
}

/* ---- Themes (viewing only) -------------------------------------- */
.cg-theme-light  { --cg-bg:#ffffff; --cg-fg:#1a1a1a; --cg-accent:#111; --cg-accent-fg:#fff; }
.cg-theme-dark   { --cg-bg:#0d0d0f; --cg-fg:#f3f3f3; --cg-muted:#9aa0a6; --cg-accent:#f3f3f3; --cg-accent-fg:#0d0d0f; --cg-overlay:rgba(0,0,0,.55); }
.cg-theme-elegant{ --cg-bg:#faf8f4; --cg-fg:#2b2622; --cg-muted:#8a7f73; --cg-accent:#7a6a52; --cg-accent-fg:#fff; --cg-font:Georgia,"Times New Roman",serif; --cg-radius:2px; }
.cg-theme-minimal{ --cg-bg:#ffffff; --cg-fg:#222; --cg-muted:#999; --cg-accent:#222; --cg-accent-fg:#fff; --cg-tile-gap:2px; }
.cg-theme-film   { --cg-bg:#f5efe6; --cg-fg:#3a2f25; --cg-muted:#9b8a76; --cg-accent:#b4744a; --cg-accent-fg:#fff; --cg-radius:3px; --cg-overlay:rgba(40,24,12,.4); }

* { box-sizing: border-box; }

/* ---- Buttons ---------------------------------------------------- */
.cg-btn {
	display: inline-block;
	padding: 12px 26px;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: var(--cg-radius);
	transition: opacity .2s, background .2s, color .2s;
}
.cg-btn-primary { background: var(--cg-accent); color: var(--cg-accent-fg); }
.cg-btn-primary:hover { opacity: .85; }
.cg-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.cg-btn-ghost:hover { background: rgba(255,255,255,.15); }
.cg-btn-small { padding: 8px 16px; font-size: 12px; background: var(--cg-accent); color: var(--cg-accent-fg); }

/* ---- Cover hero ------------------------------------------------- */
.cg-cover {
	position: relative;
	min-height: 100vh;
	min-height: 100svh; /* avoids mobile address-bar jump */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-size: cover;
	background-position: center;
	color: #fff;
}
.cg-cover-overlay { position: absolute; inset: 0; background: var(--cg-overlay); }
.cg-cover-inner { position: relative; z-index: 2; padding: 24px; max-width: 800px; }
.cg-cover-client { margin: 0 0 12px; letter-spacing: .25em; text-transform: uppercase; font-size: 13px; opacity: .9; }
.cg-cover-title { margin: 0; font-size: clamp(32px, 6vw, 68px); font-weight: 400; line-height: 1.1; }
.cg-cover-meta { margin: 16px 0 28px; opacity: .85; letter-spacing: .1em; font-size: 14px; }
.cg-cover-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cg-scroll-cue {
	position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
	z-index: 2; color: #fff; font-size: 26px; text-decoration: none; opacity: .8;
	animation: cg-bounce 2s infinite;
}
@keyframes cg-bounce { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)} }

/* ---- Toolbar ---------------------------------------------------- */
.cg-toolbar {
	position: sticky; top: 0; z-index: 50;
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; padding: 10px 14px;
	background: var(--cg-bg);
	border-bottom: 1px solid rgba(128,128,128,.18);
}
.cg-toolbar-title {
	font-size: 14px; letter-spacing: .05em;
	overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /* keep title on one line on phones */
}
.cg-toolbar .cg-btn-small { flex-shrink: 0; }
@media (min-width: 760px) { .cg-toolbar { padding: 12px 22px; } .cg-toolbar-title { font-size: 15px; } }

/* ---- Grid (mobile first) ---------------------------------------- */
.cg-grid {
	column-count: 2;                 /* phones */
	column-gap: var(--cg-tile-gap);
	padding: var(--cg-tile-gap);
}
@media (min-width: 760px)  { .cg-grid { column-count: 3; } }
@media (min-width: 1100px) { .cg-grid { column-count: 4; } }
@media (min-width: 1600px) { .cg-grid { column-count: 5; } }

.cg-tile {
	position: relative;
	margin: 0 0 var(--cg-tile-gap);
	break-inside: avoid;
	cursor: zoom-in;
	overflow: hidden;
	border-radius: var(--cg-radius);
	background: rgba(128,128,128,.08);
}
.cg-tile img { display: block; width: 100%; height: auto; transition: transform .4s ease; }
.cg-tile-dl {
	position: absolute; top: 8px; right: 8px;
	width: 40px; height: 40px; line-height: 40px; text-align: center;
	border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
	text-decoration: none; font-size: 17px;
	opacity: 1;                      /* visible by default (touch has no hover) */
	transition: opacity .2s, background .2s;
}
.cg-tile-dl:active { background: rgba(0,0,0,.85); }

/* Pointer devices: reveal niceties on hover, hide the button until needed. */
@media (hover: hover) {
	.cg-tile:hover img { transform: scale(1.03); }
	.cg-tile-dl { opacity: 0; }
	.cg-tile:hover .cg-tile-dl { opacity: 1; }
	.cg-tile-dl:hover { background: rgba(0,0,0,.8); }
}

.cg-empty { text-align: center; color: var(--cg-muted); padding: 80px 20px; }

/* ---- Footer ----------------------------------------------------- */
.cg-footer { text-align: center; color: var(--cg-muted); padding: 40px 20px; font-size: 13px; letter-spacing: .1em; }

/* ---- Lightbox --------------------------------------------------- */
.cg-lightbox {
	position: fixed; inset: 0; z-index: 1000;
	display: none; align-items: center; justify-content: center;
	background: rgba(0,0,0,.94);
}
.cg-lightbox.is-open { display: flex; }
.cg-lb-stage { margin: 0; max-width: 100vw; max-height: 80vh; max-height: 80dvh; }
.cg-lb-stage img { max-width: 100vw; max-height: 80vh; max-height: 80dvh; display: block; object-fit: contain; }
.cg-lb-close, .cg-lb-prev, .cg-lb-next {
	position: absolute; background: transparent; border: 0; color: #fff;
	cursor: pointer; font-size: 28px; line-height: 1; opacity: .85;
	min-width: 48px; min-height: 48px; /* comfortable touch targets */
	display: flex; align-items: center; justify-content: center;
}
.cg-lb-close:active, .cg-lb-prev:active, .cg-lb-next:active { opacity: 1; }
.cg-lb-close { top: calc(env(safe-area-inset-top, 0px) + 6px); right: 8px; font-size: 34px; }
.cg-lb-prev { left: 2px; top: 50%; transform: translateY(-50%); }
.cg-lb-next { right: 2px; top: 50%; transform: translateY(-50%); }
.cg-lb-bar {
	position: absolute; left: 50%; transform: translateX(-50%);
	bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
	display: flex; align-items: center; gap: 16px; color: #fff;
}
/* Phones: swipe is primary, so de-emphasise the arrows and reclaim image width. */
@media (hover: none) and (max-width: 760px) {
	.cg-lb-prev, .cg-lb-next { opacity: .55; font-size: 24px; }
}
@media (hover: hover) {
	.cg-lb-close:hover, .cg-lb-prev:hover, .cg-lb-next:hover { opacity: 1; }
}
.cg-lb-counter { font-size: 13px; letter-spacing: .1em; opacity: .85; }
.cg-lb-download { color: #fff; text-decoration: none; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.6); padding: 6px 16px; border-radius: var(--cg-radius); }
.cg-lb-download:hover { background: rgba(255,255,255,.15); }

/* ---- Gate (password / private) ---------------------------------- */
.cg-gate {
	min-height: 100vh; min-height: 100svh;
	display: flex; align-items: center; justify-content: center;
	position: relative; background-size: cover; background-position: center; padding: 20px;
}
.cg-gate-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.cg-gate-card {
	position: relative; z-index: 2; background: var(--cg-bg); color: var(--cg-fg);
	padding: 44px 38px; max-width: 420px; width: 100%; text-align: center;
	border-radius: var(--cg-radius); box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.cg-gate-title { margin: 0 0 6px; font-weight: 400; font-size: 28px; }
.cg-gate-client { margin: 0 0 18px; letter-spacing: .2em; text-transform: uppercase; font-size: 12px; color: var(--cg-muted); }
.cg-gate-lead { color: var(--cg-muted); margin: 0 0 22px; }
.cg-gate-error { color: #c0392b; margin: 0 0 16px; font-size: 14px; }
.cg-gate-form { display: flex; flex-direction: column; gap: 12px; }
.cg-gate-form input {
	padding: 13px 14px; font-size: 15px; border: 1px solid rgba(128,128,128,.4);
	border-radius: var(--cg-radius); background: var(--cg-bg); color: var(--cg-fg);
}
.cg-gate-form button {
	padding: 13px; border: 0; cursor: pointer; font-size: 14px; letter-spacing: .05em;
	text-transform: uppercase; background: var(--cg-accent); color: var(--cg-accent-fg);
	border-radius: var(--cg-radius);
}
.cg-gate-form button:hover { opacity: .88; }