/* css/models-directory.css
   Scoped copy of styles from index.html (CamTalk model landing directory).
   Only applies inside .modelsDir to avoid breaking the rest of the site.
*/
.modelsDir{
  --bg:#fff2f4;
  --bg2:#ffffff;

  --ink:#121522;
  --muted:#5a6276;
  --muted2:#7a839b;

  --line: rgba(18,21,34,.12);
  --panel: rgba(255,255,255,.86);

  --brand:#e53b45;
  --brand2:#ff5b7a;
  --brandSoft: rgba(229,59,69,.10);

  --shadow: 0 22px 60px rgba(18,21,34,.12);
  --shadow2: 0 12px 34px rgba(18,21,34,.10);

  --radius:18px;
  --max:1180px;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  font-family: var(--font);
  color: var(--ink);
}

.modelsDir *{box-sizing:border-box}
.modelsDir a{color:inherit; text-decoration:none}

.modelsDir .actions{display:flex; gap:10px; justify-content:stretch; align-items:center; flex-wrap:wrap; margin:12px 0 10px}
.modelsDir .search{
  flex:1; min-width:210px; max-width:680px;
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.94);
  border-radius:999px;
  padding:10px 12px;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.modelsDir .search:focus-within{
  border-color: rgba(229,59,69,.42);
  background:#fff;
  box-shadow: 0 0 0 4px rgba(229,59,69,.10);
}
.modelsDir .search svg{opacity:.65}
.modelsDir .search input{
  width:100%;
  border:0; outline:0;
  background:transparent;
  color:var(--ink);
  font-size:14px;
}

.modelsDir .sectionHead{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin:18px 0 10px;
  gap:12px;
}
.modelsDir .sectionHead h2{margin:0; font-size:20px; letter-spacing:.2px}
.modelsDir .sectionHead .hint{margin:0; color:var(--muted2); font-size:16px}
@media (max-width: 640px){
  .modelsDir .sectionHead h2{font-size:20px;}
  .modelsDir .sectionHead .hint{font-size:15px;}
}

.modelsDir .grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
}

.modelsDir .tile{
  grid-column:span 4;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background: rgba(255,255,255,.90);
  overflow:hidden;
  box-shadow: var(--shadow2);
  transform: translateY(8px);
  opacity:0;
  transition: transform .32s ease, opacity .32s ease, border-color .2s ease;
  position:relative;
}
.modelsDir .tile.reveal{
  transform: translateY(0);
  opacity:1 !important; /* override global .reveal rules on the main site */
}
.modelsDir .tile:hover{border-color: rgba(18,21,34,.18)}

.modelsDir .poster{
  height:220px;
  position:relative;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  background:
    radial-gradient(240px 150px at 28% 30%, rgba(229,59,69,.16), transparent 60%),
    radial-gradient(280px 180px at 72% 55%, rgba(255,91,122,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.74));
}
.modelsDir .poster img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.05) contrast(1.02);
  transform:scale(1.02);
}

.modelsDir .previewBtn{
  position:absolute;
  right:12px;
  bottom:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background: rgba(18,21,34,.42);
  color:#fff;
  font-size:12px;
  cursor:pointer;
  backdrop-filter: blur(8px);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.modelsDir .previewBtn:hover{
  transform: translateY(-1px);
  background: rgba(18,21,34,.52);
  border-color: rgba(255,255,255,.70);
}
.modelsDir .previewBtn svg{opacity:.95}

.modelsDir .body{padding:13px 13px 14px; display:flex; flex-direction:column; gap:10px}
.modelsDir .top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.modelsDir .title{min-width:0}
.modelsDir .title strong{display:block; font-size:13px}
.modelsDir .bio{margin-top:6px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.modelsDir .chip{
  border:1px solid var(--line);
  background: rgba(255,255,255,.82);
  color:var(--muted);
  padding:6px 9px;
  border-radius:999px;
  font-size:12px;
  white-space:nowrap;
}
.modelsDir .url{
  margin-top:7px;
  color:var(--muted2);
  font-size:12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}

.modelsDir .btns{display:flex; gap:8px; flex-wrap:wrap}
.modelsDir .btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(229,59,69,.26);
  background: var(--brandSoft);
  color: var(--ink);
  padding:9px 12px;
  border-radius:999px;
  font-size:12px;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
  cursor:pointer;
  white-space:nowrap;
}
.modelsDir .btn:hover{
  transform: translateY(-1px);
  background: rgba(229,59,69,.14);
  border-color: rgba(229,59,69,.42);
}

/* Modal (scoped) */
.modelsDir .modal{
  position:fixed; inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px 14px;
  background: rgba(18,21,34,.62);
  backdrop-filter: blur(10px);
  z-index:1000;
}
.modelsDir .modal.open{display:flex}
.modelsDir .modalCard{
  width:min(980px, 100%);
  border-radius:20px;
  background: rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.55);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  transform: translateY(8px);
  animation: modelsDirPop .18s ease-out forwards;
}
@keyframes modelsDirPop{to{transform: translateY(0)}}
.modelsDir .modalTop{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px;
  border-bottom:1px solid var(--line);
  background: rgba(255,255,255,.92);
}
.modelsDir .modalTitle{
  display:flex; flex-direction:column; gap:2px; min-width:0;
}
.modelsDir .modalTitle strong{font-size:13px}
.modelsDir .modalTitle span{
  font-size:12px; color:var(--muted2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:78vw;
}
.modelsDir .closeBtn{
  width:36px; height:36px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform .15s ease, background .2s ease;
}
.modelsDir .closeBtn:hover{transform: translateY(-1px); background: rgba(229,59,69,.08)}
.modelsDir .modalBody{
  position:relative;
  height: min(70vh, 620px);
  background:#fff;
}
.modelsDir .modal iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
  background:#fff;
}

/* Responsive */
@media (max-width: 980px){
  .modelsDir .tile{grid-column:span 6}
  .modelsDir .poster{height:210px}
}
@media (max-width: 640px){
  .modelsDir .tile{grid-column:span 6}
  .modelsDir .poster{height:200px}
  .modelsDir .modalBody{height: 72vh}
}
@media (max-width: 360px){
  .modelsDir .tile{grid-column:span 12}
}
@media (prefers-reduced-motion: reduce){
  .modelsDir *{animation:none !important; transition:none !important}
  .modelsDir .tile{opacity:1; transform:none}
}