/* ============================================================
   EC Facebook Gallery — Frontend Styles
   Emanuel Church color palette:
     Charcoal       #3C3C3C
     Terracotta     #9B7B6B
     Terracotta Lt  #C4A090
     Terracotta Dk  #7D5A4F
     Cream bg       #F5F0EB
     Beige bg       #EDE8E2
     Off-white      #FAFAF8
     Text dark      #2A2A2A
     Text muted     #6B6666
     Border         #D4CCC4
   ============================================================ */

/* ── CSS Custom Properties ────────────────────────────────── */
.ecfb-gallery {
  --ecfb-charcoal:     #3C3C3C;
  --ecfb-terra:        #9B7B6B;
  --ecfb-terra-lt:     #C4A090;
  --ecfb-terra-dk:     #7D5A4F;
  --ecfb-cream:        #F5F0EB;
  --ecfb-beige:        #EDE8E2;
  --ecfb-offwhite:     #FAFAF8;
  --ecfb-text:         #2A2A2A;
  --ecfb-muted:        #6B6666;
  --ecfb-border:       #D4CCC4;
  --ecfb-shadow:       rgba(60,60,60,.12);
  --ecfb-radius:       8px;
  --ecfb-radius-lg:    12px;
  --ecfb-transition:   .22s ease;
  --ecfb-font-body:    'Inter', system-ui, sans-serif;
  --ecfb-font-heading: 'Georgia', 'Times New Roman', serif;
  font-family: var(--ecfb-font-body);
  color: var(--ecfb-text);
}

/* ── Column Grid Utility ──────────────────────────────────── */
.ecfb-albums-grid,
.ecfb-photos-grid {
  display: grid;
  gap: 20px;
}

/* Desktop column classes */
.ecfb-cols-1 { grid-template-columns: repeat(1, 1fr); }
.ecfb-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ecfb-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ecfb-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ecfb-cols-5 { grid-template-columns: repeat(5, 1fr); }
.ecfb-cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 900px) {
  .ecfb-cols-3,
  .ecfb-cols-4,
  .ecfb-cols-5,
  .ecfb-cols-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ecfb-cols-2,
  .ecfb-cols-3,
  .ecfb-cols-4,
  .ecfb-cols-5,
  .ecfb-cols-6 { grid-template-columns: 1fr; }
}

/* ── Album Card ───────────────────────────────────────────── */
.ecfb-album-card {
  background: var(--ecfb-offwhite);
  border: 1px solid var(--ecfb-border);
  border-radius: var(--ecfb-radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform var(--ecfb-transition),
    box-shadow var(--ecfb-transition),
    border-color var(--ecfb-transition);
  display: flex;
  flex-direction: column;
}

.ecfb-album-card:hover,
.ecfb-album-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px var(--ecfb-shadow);
  border-color: var(--ecfb-terra-lt);
  outline: none;
}
.ecfb-album-card:focus-visible {
  outline: 2px solid var(--ecfb-terra);
  outline-offset: 2px;
}

/* Thumbnail area */
.ecfb-album-thumb {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--ecfb-beige);
}

.ecfb-album-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.ecfb-album-card:hover .ecfb-album-thumb img {
  transform: scale(1.06);
}

/* No-cover placeholder */
.ecfb-album-no-cover {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ecfb-border);
}
.ecfb-album-no-cover svg {
  width: 52px;
  height: 52px;
}

/* Hover overlay */
.ecfb-album-overlay {
  position: absolute;
  inset: 0;
  background: rgba(60,60,60,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--ecfb-transition);
}
.ecfb-album-card:hover .ecfb-album-overlay,
.ecfb-album-card:focus-visible .ecfb-album-overlay {
  opacity: 1;
}
.ecfb-album-open-icon {
  color: #fff;
  font-size: 2.4rem;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* Card metadata */
.ecfb-album-meta {
  padding: 16px 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ecfb-album-name {
  font-family: var(--ecfb-font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ecfb-charcoal);
  margin: 0;
  line-height: 1.35;
}
.ecfb-album-details {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.ecfb-album-count,
.ecfb-album-date {
  font-size: .78rem;
  color: var(--ecfb-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ecfb-album-desc {
  font-size: .82rem;
  color: var(--ecfb-muted);
  margin: 4px 0 0;
  line-height: 1.5;
}

/* ── Photo Grid ───────────────────────────────────────────── */
.ecfb-photo-item {
  position: relative;
  margin: 0;
  border-radius: var(--ecfb-radius);
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
  background: var(--ecfb-beige);
  border: 1px solid var(--ecfb-border);
  transition:
    transform var(--ecfb-transition),
    box-shadow var(--ecfb-transition);
}
.ecfb-photo-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px var(--ecfb-shadow);
}
.ecfb-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.ecfb-photo-item:hover img {
  transform: scale(1.05);
}
.ecfb-photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(60,60,60,.38);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  color: #fff;
  transition: opacity var(--ecfb-transition);
}
.ecfb-photo-item:hover .ecfb-photo-overlay {
  opacity: 1;
}

/* ── Photo Viewer (inline albums → photos panel) ─────────── */
.ecfb-photo-viewer {
  margin-top: 36px;
  animation: ecfbFadeIn .25s ease;
}
.ecfb-photo-viewer[hidden] { display: none; }

.ecfb-photo-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ecfb-border);
}
.ecfb-photo-viewer-title {
  font-family: var(--ecfb-font-heading);
  font-size: 1.4rem;
  color: var(--ecfb-charcoal);
  margin: 0;
}
.ecfb-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--ecfb-border);
  border-radius: 6px;
  padding: 7px 14px;
  font-size: .85rem;
  color: var(--ecfb-terra);
  cursor: pointer;
  transition: background var(--ecfb-transition), color var(--ecfb-transition);
}
.ecfb-back-btn:hover {
  background: var(--ecfb-cream);
  color: var(--ecfb-terra-dk);
}

/* Loading state */
.ecfb-loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 0;
  color: var(--ecfb-muted);
}
.ecfb-loading-spinner[hidden] { display: none; }

.ecfb-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--ecfb-border);
  border-top-color: var(--ecfb-terra);
  border-radius: 50%;
  animation: ecfbSpin .75s linear infinite;
}

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

.ecfb-lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 24, 22, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ecfb-lb-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(90vw, 1100px);
  max-height: 92vh;
  width: 100%;
}

/* Close button */
.ecfb-lb-close {
  position: absolute;
  top: -44px;
  right: 0;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background var(--ecfb-transition);
}
.ecfb-lb-close:hover { background: rgba(255,255,255,.22); }

/* Prev/Next arrows */
.ecfb-lb-prev,
.ecfb-lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background var(--ecfb-transition);
  z-index: 2;
}
.ecfb-lb-prev { left: -60px; }
.ecfb-lb-next { right: -60px; }
.ecfb-lb-prev:hover,
.ecfb-lb-next:hover { background: rgba(255,255,255,.25); }

@media (max-width: 720px) {
  .ecfb-lb-prev { left: 4px; }
  .ecfb-lb-next { right: 4px; }
}

/* Image wrapper */
.ecfb-lb-img-wrap {
  position: relative;
  max-width: 100%;
  max-height: 76vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ecfb-lb-img {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  border-radius: var(--ecfb-radius);
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
  display: block;
  transition: opacity .2s ease;
}
.ecfb-lb-img.ecfb-loading { opacity: 0; }

.ecfb-lb-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ecfb-lb-spinner .ecfb-spinner {
  border-color: rgba(255,255,255,.3);
  border-top-color: var(--ecfb-terra-lt);
}

/* Footer */
.ecfb-lb-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
  padding: 0 12px;
}
.ecfb-lb-caption {
  color: rgba(255,255,255,.82);
  font-size: .88rem;
  margin: 0;
  text-align: center;
  max-width: 60ch;
}
.ecfb-lb-fb-link {
  color: var(--ecfb-terra-lt);
  font-size: .8rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ecfb-transition);
}
.ecfb-lb-fb-link:hover {
  border-color: var(--ecfb-terra-lt);
}
.ecfb-lb-counter {
  color: rgba(255,255,255,.45);
  font-size: .78rem;
  white-space: nowrap;
}

/* ── Notices ──────────────────────────────────────────────── */
.ecfb-notice {
  padding: 16px 20px;
  border-radius: var(--ecfb-radius);
  font-size: .9rem;
}
.ecfb-notice--error {
  background: #fdf0ef;
  border-left: 4px solid #c94040;
  color: #7a2020;
}
.ecfb-notice--empty {
  background: var(--ecfb-cream);
  border-left: 4px solid var(--ecfb-border);
  color: var(--ecfb-muted);
}

/* ── Animations ───────────────────────────────────────────── */
@keyframes ecfbSpin {
  to { transform: rotate(360deg); }
}
@keyframes ecfbFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Standalone photos wrap ───────────────────────────────── */
.ecfb-photos-standalone .ecfb-lightbox {
  /* lightbox inside standalone is still fixed, fine */
}