/* The Echo Project Content Manager — front-end styles
   Matches the component classes already built into the main site design,
   so the [echo_films] and [echo_gallery] shortcodes drop in without
   needing any extra styling. */

.tep-scope, .tep-scope *{ box-sizing:border-box; }

:root{
  --bg:#17140f;
  --bg-soft:#1e1a15;
  --card:#221d17;
  --teal:#1f5c63;
  --teal-light:#3a8b93;
  --rust:#c1622c;
  --rust-light:#e08348;
  --cream:#f4efe6;
  --cream-dim:#e7e0d2;
  --ink:#17140f;
  --stone:#a99e8d;
  --line: rgba(244,239,230,0.12);
  --r-lg:28px;
  --r-md:18px;
  --r-sm:12px;
  --r-pill:999px;
}

.ph{
  border-radius:var(--r-lg);
  background:linear-gradient(150deg, rgba(31,92,99,0.55), rgba(23,20,15,0.9) 55%, rgba(193,98,44,0.35));
  background-size:cover; background-position:center;
  position:relative; overflow:hidden;
}
.ph .tint{
  position:absolute; inset:0; opacity:var(--tint-opacity, 0.4); pointer-events:none; z-index:1;
}
.ph.warm .tint{ background:radial-gradient(circle at 30% 20%, rgba(224,131,72,0.95), transparent 60%); }
.ph.teal .tint{ background:radial-gradient(circle at 70% 30%, rgba(58,139,147,0.95), transparent 60%); }
.ph.warm:not(:has(.tint))::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, rgba(224,131,72,0.4), transparent 60%); }
.ph.teal:not(:has(.tint))::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 30%, rgba(58,139,147,0.4), transparent 60%); }

.btn{
  font-family:'Space Mono', monospace; font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase;
  padding:16px 30px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--r-pill); border:1px solid var(--cream); color:var(--cream);
  transition:all 0.3s ease; background:none; cursor:pointer; min-width:140px; text-align:center;
}
.btn:hover{ background:var(--cream); color:var(--ink); }

/* Filter groups */
.filter-group{ margin-bottom:20px; }
.filter-group .label{ font-family:'Space Mono', monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--stone); margin-bottom:10px; display:block; }
.filter-row{ display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.filter-row button{
  font-family:'Space Mono', monospace; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  padding:11px 22px; border-radius:var(--r-pill); border:1px solid var(--line); background:none;
  color:var(--stone); cursor:pointer; transition:all 0.3s ease;
}
.filter-row button.active{ background:var(--cream); border-color:var(--cream); color:var(--ink); }

/* Film cards */
.films-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.film-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; position:relative; }
.film-card .ph{ aspect-ratio:16/10; border-radius:0; position:relative; cursor:pointer; }
.film-card .play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; border:1px solid var(--cream); display:flex; align-items:center; justify-content:center; z-index:2; transition:all 0.3s ease; color:var(--cream); }
.film-card:hover .play{ background:var(--rust); border-color:var(--rust); }
.film-body{ padding:28px; }
.film-meta-row{ display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.film-meta-row .cat{ font-family:'Space Mono', monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--rust-light); }
.film-meta-row .time{ font-family:'Space Mono', monospace; font-size:10.5px; color:var(--stone); }
.film-card h4{ font-family:'Fraunces', serif; font-size:20px; margin:0 0 10px; color:var(--cream); }
.film-card p{ font-size:13.5px; color:var(--stone); line-height:1.6; margin:0 0 16px; }
@media (max-width:760px){ .films-grid{ grid-template-columns:1fr; } }

/* Contributor hover popup */
.film-card .contributor-pop{
  position:absolute; inset:0; z-index:5; display:flex; gap:16px; align-items:center;
  padding:26px; background:rgba(15,13,9,0.94); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity 0.3s ease;
}
.film-card:hover .contributor-pop, .film-card:focus-within .contributor-pop{ opacity:1; pointer-events:auto; }
.contributor-pop .avatar{ width:64px; height:64px; border-radius:50%; flex-shrink:0; border:2px solid var(--rust); object-fit:cover; }
.contributor-pop .who{ font-family:'Fraunces', serif; font-size:16px; color:var(--cream); margin-bottom:6px; }
.contributor-pop .desc{ font-size:12.5px; color:var(--cream-dim); line-height:1.55; }

/* Gallery cards */
.gallery-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.gallery-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.gallery-card .ph{ aspect-ratio:4/3; border-radius:0; }
.gallery-card .gbody{ padding:26px; }
.gallery-card .cat{ font-family:'Space Mono', monospace; font-size:10.5px; color:var(--rust-light); letter-spacing:0.08em; text-transform:uppercase; }
.gallery-card h4{ font-family:'Fraunces', serif; font-size:19px; margin:10px 0 8px; color:var(--cream); }
.gallery-card p{ font-size:13px; color:var(--stone); line-height:1.6; margin:0 0 14px; }
.gallery-card .who{ display:flex; justify-content:space-between; font-family:'Space Mono', monospace; font-size:11px; color:var(--stone); border-top:1px solid var(--line); padding-top:14px; }
@media (max-width:900px){ .gallery-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .gallery-cards{ grid-template-columns:1fr; } }

/* Staggered grid reveal */
.stagger > *{ opacity:0; transform:translateY(22px) scale(0.97); transition:opacity 0.5s ease, transform 0.5s ease; }
.stagger.in > *{ opacity:1; transform:translateY(0) scale(1); }
.stagger > *:nth-child(1){ transition-delay:0.03s; }
.stagger > *:nth-child(2){ transition-delay:0.09s; }
.stagger > *:nth-child(3){ transition-delay:0.15s; }
.stagger > *:nth-child(4){ transition-delay:0.21s; }
.stagger > *:nth-child(5){ transition-delay:0.27s; }
.stagger > *:nth-child(6){ transition-delay:0.33s; }
.stagger > *:nth-child(7){ transition-delay:0.39s; }
.stagger > *:nth-child(8){ transition-delay:0.45s; }
.stagger > *:nth-child(9){ transition-delay:0.51s; }
.reveal{ opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
  .stagger > *{ transition:none; opacity:1; transform:none; transition-delay:0s !important; }
}