/*
 * Location  : assets/css/dev.css
 * File      : dev.css
 * Function  : DEV mode UI – banner, photo metadata overlays.
 *             Loaded ONLY when APP_DEBUG === true.
 *             Does NOT affect any production styles.
 * Version   : 1.0.0
 * Generated : 2026-03-17
 * Changelog :
 *   1.0.0 (2026-03-17) – Initial release
 */

/* ── DEV Banner ─────────────────────────────────────────── */
#dev-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .4rem 1rem;
  background: rgba(220, 60, 0, .96);
  color: #fff;
  font-family: var(--font-body), monospace;
  font-size: .75rem;
  line-height: 1;
  border-top: 2px solid rgba(255,255,255,.2);
}
.dev-banner__badge {
  background: #fff;
  color: #dc3c00;
  font-weight: 700;
  font-size: .65rem;
  letter-spacing: .1em;
  padding: .2rem .45rem;
  border-radius: 3px;
  flex-shrink: 0;
}
.dev-banner__label { font-weight: 600; }
.dev-banner__note  { color: rgba(255,255,255,.75); margin-left: auto; }
.dev-banner__note a { color: rgba(255,255,255,.9); text-decoration: none; font-weight: 700; margin-left: .5rem; }
.dev-banner__note a:hover { color: #fff; }

/* ── DEV photo metadata overlay ─────────────────────────── */
.dev-photo-meta {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.82));
  padding: 1.5rem .75rem .5rem;
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  flex-wrap: wrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.photo-cell:hover .dev-photo-meta,
.media-item:hover .dev-photo-meta,
.service-item__photo:hover .dev-photo-meta,
.about__photo:hover .dev-photo-meta {
  opacity: 1;
}
.dev-photo-meta__type {
  background: rgba(220,60,0,.9);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: 3px;
}
.dev-photo-meta__loc,
.dev-photo-meta__guests {
  color: rgba(255,255,255,.8);
  font-size: .7rem;
  display: flex;
  align-items: center;
  gap: .25rem;
}
.dev-photo-meta__loc i,
.dev-photo-meta__guests i {
  color: var(--clr-accent, #3d7fff);
  font-size: .6rem;
}

/* ── Credit badge (Unsplash attribution) ────────────────── */
.dev-photo-meta__credit {
  color: rgba(255,255,255,.55);
  font-size: .62rem;
  margin-left: auto;
  white-space: nowrap;
}

/* ── Unsplash source indicator in DEV banner ─────────────── */
.dev-banner__label strong { color: #fff; }