/* New Life Church — Photo Gallery
   Design tokens from claude-design-page/colors_and_type.css
   Component styles from claude-design-page/Gallery.html */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* ── Design tokens (global, non-conflicting) ──────────────────────────── */
:root {
  --nl-navy-900:#051F2E; --nl-navy-800:#08364D; --nl-navy-700:#0E4A6A;
  --nl-navy-600:#1A6388; --nl-navy-500:#2E84AE; --nl-navy-400:#6BA8C7;
  --nl-navy-300:#A6CADD; --nl-navy-200:#D2E4ED; --nl-navy-100:#EAF2F6; --nl-navy-50:#F4F8FA;
  --nl-leaf-900:#3F5D1B; --nl-leaf-800:#5D8628; --nl-leaf-700:#76A833;
  --nl-leaf-600:#91CA41; --nl-leaf-500:#A6D661; --nl-leaf-400:#BFE188;
  --nl-leaf-300:#D4EAA9; --nl-leaf-200:#E6F2CB; --nl-leaf-100:#F1F8E2; --nl-leaf-50:#F8FBEE;
  --nl-clay-700:#B85A3E; --nl-clay-500:#D87A5B; --nl-clay-100:#F8DDCE;
  --nl-wheat-50:#FDFAF1; --nl-wheat-100:#FAF4E5;
  --nl-ink-600:#4F6478; --nl-ink-500:#6E8294; --nl-ink-400:#93A3B2;
  --nl-ink-300:#BCC7D1; --nl-ink-200:#DBE2E8; --nl-ink-100:#EEF2F5; --nl-ink-50:#F7F9FB;
  --nl-paper:#FBFAF6; --nl-white:#FFFFFF;
  --nl-text:var(--nl-navy-900); --nl-text-muted:var(--nl-ink-600); --nl-text-subtle:var(--nl-ink-500);
  --nl-border:var(--nl-ink-200); --nl-border-strong:var(--nl-ink-300); --nl-divider:var(--nl-ink-100);
  --nl-font-serif:"Source Serif 4","Iowan Old Style",Georgia,serif;
  --nl-font-sans:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --nl-radius-sm:4px; --nl-radius-md:8px; --nl-radius-lg:12px;
  --nl-radius-xl:20px; --nl-radius-2xl:32px; --nl-radius-pill:999px;
  --nl-shadow-sm:0 1px 2px rgba(8,54,77,.06),0 1px 1px rgba(8,54,77,.04);
  --nl-shadow-md:0 4px 12px rgba(8,54,77,.08),0 2px 4px rgba(8,54,77,.04);
  --nl-shadow-lg:0 16px 32px rgba(8,54,77,.10),0 4px 8px rgba(8,54,77,.05);
  --nl-shadow-xl:0 32px 64px rgba(8,54,77,.14),0 8px 16px rgba(8,54,77,.06);
  --nl-container-xl:1440px;
  --nl-ease:cubic-bezier(0.22,0.61,0.36,1);
  --nl-duration-2:200ms; --nl-duration-3:320ms; --nl-duration-4:500ms;
}

/* ── Scoped reset ─────────────────────────────────────────────────────── */
#nlc-photos-root *,#nlc-photos-root *::before,#nlc-photos-root *::after { box-sizing:border-box; }
#nlc-photos-root { font-family:var(--nl-font-sans); color:var(--nl-text); background:var(--nl-paper); -webkit-font-smoothing:antialiased; }
#nlc-photos-root a { color:inherit; text-decoration:none; }
#nlc-photos-root button { font-family:inherit; cursor:pointer; }
#nlc-photos-root img { display:block; max-width:100%; }

/* ── Eyebrow / type utilities ─────────────────────────────────────────── */
#nlc-photos-root .nl-eyebrow {
  font-family:var(--nl-font-sans); font-weight:600; font-size:.75rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--nl-leaf-700);
}
#nlc-photos-root .nl-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; font-family:var(--nl-font-sans); font-weight:600; font-size:1.0625rem;
  letter-spacing:.04em; border-radius:var(--nl-radius-md); border:1.5px solid transparent;
  cursor:pointer; transition:all var(--nl-duration-2) var(--nl-ease); text-decoration:none; line-height:1; white-space:nowrap;
}
#nlc-photos-root .nl-btn--primary { background:var(--nl-navy-800); color:#fff; }
#nlc-photos-root .nl-btn--primary:hover { background:var(--nl-navy-700); transform:translateY(-1px); box-shadow:var(--nl-shadow-md); }
#nlc-photos-root .nl-btn--accent  { background:var(--nl-leaf-600); color:var(--nl-navy-900); }
#nlc-photos-root .nl-btn--accent:hover  { background:var(--nl-leaf-700); color:#fff; }
#nlc-photos-root .nl-btn--outline { background:transparent; color:var(--nl-navy-800); border-color:var(--nl-navy-800); }
#nlc-photos-root .nl-btn--outline:hover { background:var(--nl-navy-800); color:#fff; }
#nlc-photos-root .nl-btn--ghost   { background:transparent; color:var(--nl-navy-800); padding:12px 16px; border:none; }
#nlc-photos-root .nl-btn--ghost:hover   { background:var(--nl-navy-50); }
#nlc-photos-root .nl-btn--sm      { padding:10px 18px; font-size:.875rem; }
#nlc-photos-root .nl-btn:disabled { opacity:.45; cursor:default; box-shadow:none; transform:none; }

/* ── Loading / error ─────────────────────────────────────────────────── */
#nlc-photos-root .nlc-loading { text-align:center; padding:80px 24px; }
#nlc-photos-root .nlc-loading p { font-family:var(--nl-font-serif); font-style:italic; font-size:1.25rem; color:var(--nl-text-muted); }

/* ── Sign-in gate ────────────────────────────────────────────────────── */
#nlc-photos-root .gate {
  position:relative; min-height:520px; display:grid; place-items:center; padding:48px 24px;
  background:radial-gradient(120% 120% at 50% -10%, var(--nl-navy-800) 0%, var(--nl-navy-900) 70%); overflow:hidden;
}
#nlc-photos-root .gate__glowA { position:absolute; top:-180px; right:-120px; width:620px; height:620px; border-radius:50%; background:radial-gradient(circle,rgba(145,202,65,.20),transparent 65%); pointer-events:none; }
#nlc-photos-root .gate__glowB { position:absolute; bottom:-220px; left:-160px; width:640px; height:640px; border-radius:50%; background:radial-gradient(circle,rgba(46,132,174,.30),transparent 62%); pointer-events:none; }
#nlc-photos-root .gate__card  { position:relative; width:min(520px,100%); background:var(--nl-paper); border-radius:var(--nl-radius-2xl); padding:48px 44px 36px; text-align:center; box-shadow:var(--nl-shadow-xl); }
#nlc-photos-root .gate__lock  { display:inline-grid; place-items:center; width:58px; height:58px; border-radius:50%; background:var(--nl-leaf-100); color:var(--nl-leaf-800); margin-bottom:20px; }
#nlc-photos-root .gate__card .nl-eyebrow { color:var(--nl-leaf-500)!important; display:block; margin-bottom:12px; }
#nlc-photos-root .gate__title { font-family:var(--nl-font-serif); font-weight:600; font-size:2.375rem; line-height:1.06; letter-spacing:-.02em; color:var(--nl-navy-900); margin:0 0 16px; }
#nlc-photos-root .gate__lede  { font-size:1rem; line-height:1.6; color:var(--nl-text-muted); margin:0 auto 28px; max-width:380px; }
#nlc-photos-root .gate__btn   { display:inline-flex; align-items:center; justify-content:center; gap:12px; width:100%; padding:16px 24px; border:none; border-radius:var(--nl-radius-md); cursor:pointer; background:var(--nl-navy-800); color:#fff; font-size:1rem; font-weight:600; letter-spacing:.01em; transition:background var(--nl-duration-2) var(--nl-ease),transform var(--nl-duration-2) var(--nl-ease); }
#nlc-photos-root .gate__btn:hover:not(:disabled) { background:var(--nl-navy-700); transform:translateY(-1px); box-shadow:var(--nl-shadow-md); }
#nlc-photos-root .gate__btn:disabled { opacity:.85; cursor:default; }
#nlc-photos-root .gate__pc    { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:7px; background:var(--nl-leaf-600); color:var(--nl-navy-900); font-size:.75rem; font-weight:800; }
#nlc-photos-root .gate__spinner { width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; animation:nlc-spin .7s linear infinite; }
@keyframes nlc-spin { to { transform:rotate(360deg); } }
#nlc-photos-root .gate__fine  { font-size:.78rem; color:var(--nl-text-subtle); margin:18px 0 0; }

/* ── Member context bar ──────────────────────────────────────────────── */
#nlc-photos-root .memberbar { position:sticky; top:0; z-index:40; background:rgba(251,250,246,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--nl-divider); }
#nlc-photos-root .memberbar__inner { max-width:var(--nl-container-xl); margin:0 auto; padding:14px 48px; display:flex; align-items:center; gap:24px; }
#nlc-photos-root .memberbar__crumb { display:inline-flex; align-items:center; gap:10px; border:none; background:none; cursor:pointer; padding:6px 0; color:var(--nl-navy-900); font-size:.9375rem; font-weight:600; white-space:nowrap; }
#nlc-photos-root .memberbar__crumb:disabled { cursor:default; }
#nlc-photos-root .memberbar__crumb svg { color:var(--nl-leaf-700); }
#nlc-photos-root .memberbar__sep  { color:var(--nl-border-strong); font-weight:400; }
#nlc-photos-root .memberbar__here { color:var(--nl-text-muted); }
#nlc-photos-root .memberbar__right { margin-left:auto; display:flex; align-items:center; gap:18px; }
#nlc-photos-root .memberbar__who  { display:inline-flex; align-items:center; gap:8px; font-size:.8125rem; color:var(--nl-text-muted); white-space:nowrap; }
#nlc-photos-root .memberbar__dot  { width:8px; height:8px; border-radius:50%; background:var(--nl-leaf-600); box-shadow:0 0 0 3px var(--nl-leaf-100); flex-shrink:0; }
#nlc-photos-root .memberbar__out  { display:inline-flex; align-items:center; gap:7px; border:none; background:none; cursor:pointer; font-size:.8125rem; font-weight:600; color:var(--nl-text-muted); padding:6px 8px; border-radius:var(--nl-radius-sm); white-space:nowrap; transition:color var(--nl-duration-2) var(--nl-ease),background var(--nl-duration-2) var(--nl-ease); }
#nlc-photos-root .memberbar__out:hover { color:var(--nl-navy-900); background:var(--nl-navy-50); }

/* ── Galleries landing ───────────────────────────────────────────────── */
#nlc-photos-root .galleries { background:var(--nl-paper); min-height:400px; }
#nlc-photos-root .galleries__inner { max-width:var(--nl-container-xl); margin:0 auto; padding:64px 48px 96px; }
#nlc-photos-root .galleries__head  { max-width:640px; margin:0 0 44px; }
#nlc-photos-root .galleries__head .nl-eyebrow { display:block; margin-bottom:14px; }
#nlc-photos-root .galleries__title { font-family:var(--nl-font-serif); font-weight:600; font-size:3.25rem; line-height:1.03; letter-spacing:-.02em; color:var(--nl-navy-900); margin:0 0 16px; }
#nlc-photos-root .galleries__lede  { font-size:1.0625rem; line-height:1.6; color:var(--nl-text-muted); margin:0; max-width:540px; }
#nlc-photos-root .albumgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }

/* ── Album card ──────────────────────────────────────────────────────── */
#nlc-photos-root .album { display:flex; flex-direction:column; }
#nlc-photos-root .album__cover { position:relative; aspect-ratio:4/3; border-radius:var(--nl-radius-lg); overflow:hidden; box-shadow:var(--nl-shadow-sm); transition:transform var(--nl-duration-3) var(--nl-ease),box-shadow var(--nl-duration-3) var(--nl-ease); background:var(--nl-navy-100); background-size:cover; background-position:center; }
#nlc-photos-root .album:hover .album__cover { transform:translateY(-4px); box-shadow:var(--nl-shadow-lg); }
#nlc-photos-root .album__open { position:absolute; inset:0; z-index:2; border:none; background:rgba(5,31,46,0); cursor:pointer; display:grid; place-items:center; transition:background var(--nl-duration-3) var(--nl-ease); }
#nlc-photos-root .album__open:hover { background:rgba(5,31,46,.28); }
#nlc-photos-root .album__openpill { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:var(--nl-radius-pill); background:rgba(255,255,255,.95); color:var(--nl-navy-900); font-size:.875rem; font-weight:600; box-shadow:var(--nl-shadow-md); opacity:0; transform:translateY(6px); transition:all var(--nl-duration-3) var(--nl-ease); }
#nlc-photos-root .album:hover .album__openpill { opacity:1; transform:translateY(0); }
#nlc-photos-root .album__cover--placeholder { background:linear-gradient(135deg,var(--nl-navy-100),var(--nl-navy-200)); }
#nlc-photos-root .album__body  { text-align:left; border:none; background:none; cursor:pointer; padding:16px 4px 0; display:flex; flex-direction:column; gap:4px; }
#nlc-photos-root .album__body .album__title { font-family:var(--nl-font-serif); font-weight:600; font-size:1.4375rem; line-height:1.15; color:var(--nl-navy-900); }
#nlc-photos-root .album:hover .album__body .album__title { color:var(--nl-leaf-800); }
#nlc-photos-root .album__meta  { font-size:.8125rem; font-weight:600; letter-spacing:.02em; color:var(--nl-leaf-700); text-transform:uppercase; }
#nlc-photos-root .album__blurb { font-size:.9063rem; line-height:1.5; color:var(--nl-text-muted); margin-top:2px; }
#nlc-photos-root .album__link  { display:inline-flex; align-items:center; gap:4px; margin-top:8px; font-size:.875rem; font-weight:600; color:var(--nl-navy-800); }
#nlc-photos-root .album:hover .album__link { color:var(--nl-leaf-700); }
#nlc-photos-root .albumgrid--empty { text-align:center; padding:60px 0; font-family:var(--nl-font-serif); font-style:italic; font-size:1.125rem; color:var(--nl-text-muted); }

/* ── Album view ──────────────────────────────────────────────────────── */
#nlc-photos-root .album-view { background:var(--nl-paper); min-height:400px; }
#nlc-photos-root .album-view__inner { max-width:var(--nl-container-xl); margin:0 auto; padding:28px 48px 96px; }
#nlc-photos-root .album-view__back  { display:inline-flex; align-items:center; gap:8px; border:none; background:none; cursor:pointer; font-size:.875rem; font-weight:600; color:var(--nl-text-muted); padding:8px 0; margin-bottom:18px; white-space:nowrap; transition:color var(--nl-duration-2) var(--nl-ease); }
#nlc-photos-root .album-view__back:hover { color:var(--nl-navy-900); }
#nlc-photos-root .album-view__head  { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-bottom:24px; border-bottom:1px solid var(--nl-border); margin-bottom:28px; }
#nlc-photos-root .album-view__heading .nl-eyebrow { display:block; margin-bottom:10px; }
#nlc-photos-root .album-view__title { font-family:var(--nl-font-serif); font-weight:600; font-size:2.75rem; line-height:1.04; letter-spacing:-.02em; color:var(--nl-navy-900); margin:0 0 12px; }
#nlc-photos-root .album-view__blurb { font-size:1rem; line-height:1.55; color:var(--nl-text-muted); margin:0 0 8px; }
#nlc-photos-root .album-view__count { font-size:.8125rem; font-weight:600; color:var(--nl-text-subtle); margin:0; }
#nlc-photos-root .album-view__hint  { font-size:.875rem; color:var(--nl-text-muted); margin:-10px 0 22px; font-style:italic; font-family:var(--nl-font-serif); }
#nlc-photos-root .selectbar        { display:flex; align-items:center; gap:16px; }
#nlc-photos-root .selectbar__count { font-size:.875rem; font-weight:600; color:var(--nl-navy-900); white-space:nowrap; }
#nlc-photos-root .selectbar__btns  { display:flex; align-items:center; gap:8px; }

/* ── Masonry photo grid ──────────────────────────────────────────────── */
#nlc-photos-root .masonry { column-gap:16px; }
#nlc-photos-root .ptile { position:relative; width:100%; margin:0 0 16px; break-inside:avoid; border-radius:var(--nl-radius-md); overflow:hidden; box-shadow:var(--nl-shadow-sm); transition:box-shadow var(--nl-duration-3) var(--nl-ease); background:var(--nl-navy-50); }
#nlc-photos-root .ptile:hover { box-shadow:var(--nl-shadow-md); }
#nlc-photos-root .ptile img { width:100%; height:auto; display:block; }
#nlc-photos-root .ptile--loading { min-height:160px; }
#nlc-photos-root .ptile--loading::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%); animation:nlc-shimmer 1.4s infinite; }
@keyframes nlc-shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
#nlc-photos-root .ptile__check { position:absolute; top:10px; left:10px; z-index:4; width:22px; height:22px; min-width:22px; min-height:22px; aspect-ratio:1/1; padding:0; line-height:1; border-radius:50%; border:2px solid rgba(255,255,255,.9); background:rgba(0,0,0,.15); backdrop-filter:blur(4px); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity var(--nl-duration-2) var(--nl-ease),background var(--nl-duration-2) var(--nl-ease),border-color var(--nl-duration-2) var(--nl-ease); box-sizing:border-box; }
#nlc-photos-root .ptile:hover .ptile__check { opacity:1; }
#nlc-photos-root .ptile__check.is-on { opacity:1; background:var(--nl-leaf-600); border-color:var(--nl-leaf-600); color:var(--nl-navy-900); }
#nlc-photos-root .ptile.is-selected { box-shadow:0 0 0 3px var(--nl-leaf-600),var(--nl-shadow-md); }
#nlc-photos-root .ptile__view { position:absolute; right:10px; bottom:10px; z-index:4; width:32px; height:32px; border:none; background:none; color:#fff; cursor:pointer; display:grid; place-items:center; opacity:0; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); transition:opacity var(--nl-duration-2) var(--nl-ease); }
#nlc-photos-root .ptile:hover .ptile__view { opacity:1; }

/* ── Lightbox ─────────────────────────────────────────────────────────── */
.nlc-lb { position:fixed; inset:0; z-index:9999; background:rgba(5,31,46,.88); backdrop-filter:blur(8px); display:grid; grid-template-columns:64px 1fr 64px; align-items:center; padding:32px; gap:8px; animation:nlc-lbfade var(--nl-duration-2) var(--nl-ease); }
@keyframes nlc-lbfade { from{opacity:0} to{opacity:1} }
.nlc-lb__close { position:absolute; top:22px; right:24px; z-index:3; width:42px; height:42px; border:none; cursor:pointer; background:none; color:rgba(255,255,255,.7); display:grid; place-items:center; transition:color var(--nl-duration-2); filter:drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
.nlc-lb__close:hover { color:#fff; }
.nlc-lb__nav  { width:52px; height:52px; border:none; cursor:pointer; background:none; color:rgba(255,255,255,.6); display:grid; place-items:center; justify-self:center; transition:color var(--nl-duration-2); filter:drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
.nlc-lb__nav:hover { color:#fff; }
.nlc-lb__nav:disabled { opacity:.2; cursor:default; }
.nlc-lb__figure { margin:0; min-width:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; animation:nlc-lbrise var(--nl-duration-3) var(--nl-ease); }
@keyframes nlc-lbrise { from{transform:scale(.98);opacity:0} to{transform:scale(1);opacity:1} }
.nlc-lb__stage { width:100%; flex:1; min-height:0; max-height:calc(100vh - 150px); display:flex; align-items:center; justify-content:center; }
.nlc-lb__stage img { max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--nl-radius-md); }
.nlc-lb__stage--loading { min-width:200px; min-height:140px; background:rgba(255,255,255,.06); border-radius:var(--nl-radius-md); }
.nlc-lb__bar { display:flex; align-items:center; gap:22px; }
.nlc-lb__pos { font-size:.8125rem; font-weight:600; letter-spacing:.04em; color:rgba(255,255,255,.8); }

/* ── Toast ────────────────────────────────────────────────────────────── */
.nlc-toast { position:fixed; left:50%; bottom:32px; transform:translateX(-50%); z-index:10000; background:var(--nl-navy-900); color:#fff; font-size:.875rem; font-weight:500; padding:13px 22px; border-radius:var(--nl-radius-pill); box-shadow:var(--nl-shadow-lg); animation:nlc-lbfade var(--nl-duration-2) var(--nl-ease); font-family:var(--nl-font-sans); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:1080px) {
  #nlc-photos-root .albumgrid { grid-template-columns:repeat(2,1fr); }
  #nlc-photos-root .masonry   { column-count:2 !important; }
}
@media (max-width:720px) {
  #nlc-photos-root .memberbar__inner,
  #nlc-photos-root .galleries__inner,
  #nlc-photos-root .album-view__inner { padding-left:24px; padding-right:24px; }
  #nlc-photos-root .galleries__inner  { padding-top:44px; }
  #nlc-photos-root .galleries__title  { font-size:2.375rem; }
  #nlc-photos-root .album-view__title { font-size:2.125rem; }
  #nlc-photos-root .albumgrid         { grid-template-columns:1fr; gap:28px; }
  #nlc-photos-root .masonry           { column-count:1 !important; }
  #nlc-photos-root .memberbar__who    { display:none; }
  #nlc-photos-root .album-view__head  { gap:18px; }
  .nlc-lb { grid-template-columns:44px 1fr 44px; padding:16px; }
  .nlc-lb__nav { width:40px; height:40px; }
}