/*
 * CodeBasics brand system — sourced from codebasics.io's own CSS
 * (:root color variables in their main theme stylesheet) and the two
 * official logo files supplied for this project. Colors and fonts below
 * are not invented; see CLAUDE.md §9/§5 for the sourcing note.
 */

@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Reey";
  src: url("assets/fonts/Reey-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-primary: #3b82f6;
  --color-ink: #101112;
  --color-body-text: #54585b;
  --color-secondary: #3e4143;
  --color-surface: #f7f9fa;
  --color-white: #ffffff;
  --color-success: #3fca82;
  --color-warning: #fedc5a;
  --color-danger: #ff4343;
  --color-info: #4c82f7;

  --accent-orange: #fd7e15;
  --accent-purple: #6f53c1;
  --accent-sky: #3bb2f6;
  --accent-teal: #20c997;

  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Reey", var(--font-body);

  --radius: 10px;
  --shadow-card: 0 2px 10px rgba(16, 17, 18, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(16, 17, 18, 0.12);
}

/* Per-page identity: the shared header/nav/footer stay primary blue for
   wayfinding, but each page's hero glow, primary button, and focus rings
   pick up their own accent so pages read as distinct, memorable places
   rather than one template repeated four times. */
.page-upload {
  --page-accent: var(--accent-orange);
}
.page-search {
  --page-accent: var(--accent-purple);
}
.page-seed {
  --page-accent: var(--accent-teal);
}
.page-gallery {
  --page-accent: var(--accent-sky);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--color-body-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
}

/* Pushes the footer to the bottom of the viewport on short pages, while
   letting it scroll naturally below content on tall ones — the same
   sticky-footer behavior on a laptop, tablet, or phone. */
main {
  flex: 1;
}

/* Without this, flexbox is free to shrink the header/hero/footer below
   their own content's natural height once main grows tall (e.g. a
   page full of search results) — which clipped the hero heading and
   subtitle text against overflow:hidden the moment results appeared. */
.site-header,
.page-hero,
.site-footer {
  flex-shrink: 0;
}

a {
  color: var(--color-primary);
}

/* ---------- Header / nav ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 2rem;
  background: var(--color-white);
  border-bottom: 1px solid #e7eaee;
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--color-ink);
}

.site-header .brand img {
  height: 34px;
  width: auto;
}

.site-header .brand-name {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.site-nav {
  display: flex;
  gap: 0.35rem;
  background: var(--color-surface);
  padding: 0.3rem;
  border-radius: 999px;
}

.site-nav a {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--color-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}

.site-nav a:hover {
  background: #eef2ff;
  color: var(--color-primary);
}

.site-nav a.active {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ---------- Page hero (aurora accent) ---------- */

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 3.75rem 2rem 2.5rem;
  isolation: isolate;
}

.page-hero::before,
.page-hero::after,
.page-hero .aurora-blob {
  content: "";
  position: absolute;
  width: 320px;
  height: 220px;
  border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%;
  filter: blur(60px);
  opacity: 0.28;
  z-index: -1;
}

.page-hero::before {
  background: var(--page-accent, var(--color-primary));
  top: -80px;
  left: -60px;
  opacity: 0.22;
}

.page-hero::after {
  background: var(--page-accent, var(--color-primary));
  top: -40px;
  right: -40px;
  width: 260px;
  height: 260px;
  opacity: 0.16;
}

.page-hero .aurora-blob {
  background: var(--page-accent, var(--color-primary));
  bottom: -90px;
  left: 30%;
  opacity: 0.2;
}

.page-hero {
  border-top: 3px solid var(--page-accent, var(--color-primary));
}

.page-hero h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.5;
  color: var(--color-ink);
  margin: 0 0 1.1rem;
}

.page-hero p {
  margin: 0;
  max-width: 60ch;
  color: var(--color-body-text);
}

/* ---------- Main content ---------- */

main {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem 3rem;
}

.helper-text {
  font-size: 0.9rem;
  color: var(--color-secondary);
  background: var(--color-white);
  border: 1px solid #e7eaee;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

.upload-form,
.search-form,
.seed-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

input[type="text"],
input[type="file"] {
  padding: 0.6rem 0.85rem;
  font-family: var(--font-body);
  font-size: 1rem;
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  background: var(--color-white);
}

input[type="text"] {
  flex: 1;
  min-width: 220px;
}

input[type="text"]:focus,
input[type="file"]:focus,
button:focus-visible {
  outline: 2px solid var(--page-accent, var(--color-primary));
  outline-offset: 2px;
}

button {
  padding: 0.6rem 1.4rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  background: var(--page-accent, var(--color-primary));
  color: var(--color-white);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, filter 0.15s ease;
}

button:hover {
  filter: brightness(0.9);
}

button:active {
  transform: translateY(1px);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pending-face-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  background: var(--color-white);
  border: 1px solid #e7eaee;
  border-radius: var(--radius);
  padding: 0.5rem;
}

.face-thumbnail {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e7eaee;
}

.face-status {
  font-size: 0.85rem;
  color: var(--color-secondary);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.photo-card {
  position: relative;
  border: 1px solid #e7eaee;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.photo-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.photo-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  background: var(--color-surface);
}

.photo-meta {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.photo-caption {
  font-size: 0.9rem;
  color: var(--color-ink);
  line-height: 1.35;
}

.photo-filename {
  font-size: 0.75rem;
  font-weight: 600;
  color: #8a8f98;
  word-break: break-all;
}

.photo-date {
  font-size: 0.75rem;
  color: #8a8f98;
}

.card-actions {
  display: flex;
  gap: 0.4rem;
  padding: 0 0.75rem 0.75rem;
}

.card-actions button,
.card-actions a {
  flex: 1;
  text-align: center;
  padding: 0.4rem;
  font-size: 0.8rem;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
}

.card-actions .view-btn {
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid #e7eaee;
}

.card-actions .view-btn:hover {
  background: #eef1f4;
}

.card-actions .download-btn {
  background: var(--page-accent, var(--color-primary));
  color: var(--color-white);
}

.card-actions .download-btn:hover {
  filter: brightness(0.9);
}

.photo-card img.viewable {
  cursor: zoom-in;
}

.delete-photo-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background: rgba(16, 17, 18, 0.55);
  color: var(--color-white);
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-photo-btn:hover {
  background: var(--color-danger);
}

.empty-state {
  color: var(--color-secondary);
}

.status-message {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.status-message.error {
  color: var(--color-danger);
}

/* ---------- Dropzone (Upload) ---------- */

.dropzone {
  border: 2px dashed color-mix(in srgb, var(--page-accent) 45%, #cbd2db);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--page-accent) 6%, white);
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  margin-bottom: 1.5rem;
}

.dropzone.drag-over {
  border-color: var(--page-accent);
  background: color-mix(in srgb, var(--page-accent) 14%, white);
}

.dropzone .dropzone-icon {
  font-size: 2.25rem;
  margin-bottom: 0.5rem;
}

.dropzone .dropzone-label {
  font-weight: 600;
  color: var(--color-ink);
}

.dropzone .dropzone-hint {
  font-size: 0.85rem;
  color: var(--color-secondary);
  margin-top: 0.25rem;
}

.dropzone input[type="file"] {
  display: none;
}

.dropzone-preview {
  margin-top: 1rem;
}

.dropzone-preview img {
  max-height: 160px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* ---------- Search: two-panel layout ---------- */

/* Search gets more room overall than the other pages, so a wider input
   panel on the left doesn't squeeze the results grid on the right. */
body.page-search main {
  max-width: 1320px;
}

.search-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 2.5rem;
  align-items: start;
}

.search-panel {
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.search-panel input[type="text"] {
  width: 100%;
  padding: 1.15rem 1.3rem;
  font-size: 1.1rem;
  border-radius: var(--radius);
  border: 1px solid #d9dde3;
  animation: glow-pulse 2.6s ease-in-out infinite;
}

/* Reliably 3 across on the results side, regardless of exact container
   width math (auto-fill/minmax was landing on 2 more often than not). */
.result-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 860px) {
  .result-grid {
    grid-template-columns: 1fr;
  }
}

.search-panel input[type="text"]:focus {
  outline: none;
  border-color: var(--page-accent);
}

.search-panel button {
  width: 100%;
  padding: 0.8rem;
}

@keyframes glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--page-accent) 12%, transparent),
      0 0 16px color-mix(in srgb, var(--page-accent) 16%, transparent);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--page-accent) 20%, transparent),
      0 0 26px color-mix(in srgb, var(--page-accent) 30%, transparent);
  }
}

.results-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-secondary);
  margin: 0 0 0.75rem;
  animation: fade-in 0.2s ease;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 860px) {
  .search-layout {
    grid-template-columns: 1fr;
  }
  .search-panel {
    position: static;
  }
}

/* ---------- Reference-photo preview strip (Add Known Person) ---------- */

.preview-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.preview-strip img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--page-accent);
}

/* ---------- Known-people roster (Add Known Person) ---------- */

.roster-heading {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--color-ink);
  margin: 2.5rem 0 1rem;
}

.people-roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 1.25rem;
}

.person-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.person-card img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--page-accent);
  box-shadow: var(--shadow-card);
}

.person-name {
  font-weight: 600;
  color: var(--color-ink);
  font-size: 0.9rem;
  word-break: break-word;
}

/* ---------- Lightbox (Search results + Gallery) ---------- */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 17, 18, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 2rem;
}

.lightbox-overlay.open {
  display: flex;
  animation: lightbox-in 0.15s ease;
}

@keyframes lightbox-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.lightbox-box {
  max-width: 94vw;
  max-height: 88vh;
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
}

.lightbox-image {
  max-width: 66vw;
  max-height: 88vh;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
  object-fit: contain;
}

.lightbox-info {
  width: 320px;
  flex-shrink: 0;
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card-hover);
  overflow-y: auto;
}

.lightbox-people {
  font-weight: 700;
  color: var(--color-ink);
  font-size: 1.05rem;
}

.lightbox-info hr {
  border: none;
  border-top: 1px solid #e7eaee;
  margin: 0.85rem 0;
  width: 100%;
}

.lightbox-caption {
  margin: 0;
  color: var(--color-body-text);
  line-height: 1.5;
  flex: 1;
}

.lightbox-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.lightbox-download {
  flex: 1;
  text-align: center;
  background: var(--page-accent, var(--color-primary));
  color: var(--color-white);
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}

.lightbox-close {
  background: var(--color-surface);
  color: var(--color-ink);
}

.lightbox-close:hover {
  background: #e7eaee;
  filter: none;
}

@media (max-width: 860px) {
  .lightbox-box {
    flex-direction: column;
    max-height: 92vh;
    overflow-y: auto;
  }
  .lightbox-image {
    max-width: 100%;
  }
  .lightbox-info {
    width: 100%;
  }
}

/* ---------- Gallery: dense wall, its own internal scroll ---------- */

body.page-gallery main {
  max-width: 1500px;
}

.gallery-scroll {
  max-height: 68vh;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.gallery-grid {
  grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 1200px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 700px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Footer ---------- */

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--color-ink);
  color: #c4c8cf;
  padding: 0.6rem 2rem;
}

.site-footer img {
  height: 52px;
  width: auto;
}

.site-footer p {
  margin: 0;
  font-size: 0.85rem;
}