/* BIM portfolio page: additions to the sitewide /styles.css */

.model-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1.25rem; }

.model-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.model-card::after { content: none; }
.model-main { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.model-actions { display: flex; border-top: 1px solid var(--border); }
.model-act { flex: 1; padding: 0.85rem 1rem; color: var(--text); text-decoration: none; text-align: center; border-right: 1px solid var(--border);
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.15s, background 0.15s; }
.model-act:last-child { border-right: 0; }
.model-act:hover, .model-act:focus-visible { color: var(--accent); background: var(--sunken); }
.model-act[hidden] { display: none; }

.model-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--sunken);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.model-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.model-card:hover .model-thumb img { transform: scale(1.03); }

.model-access {
  position: absolute; left: 0.75rem; top: 0.75rem;
  background: rgba(77, 77, 56, 0.92);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.64rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.3rem 0.55rem;
}
.model-card[data-unlocked="1"] .model-access { color: var(--accent); border-color: var(--accent); }

.model-body { padding: 1.25rem 1.5rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.model-body p { margin-bottom: 0.25rem; }

.model-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.model-tags li { font-size: 0.68rem; color: var(--muted); border: 1px solid var(--border); padding: 0.12rem 0.5rem; }

.model-meta {
  margin-top: auto; padding-top: 1rem; padding-right: 2rem;
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}

.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1.5rem; }
.how-grid p { color: var(--muted); font-size: 0.9rem; margin-top: 0.45rem; max-width: 40ch; }

.footer-right { display: flex; gap: 1.25rem; align-items: center; }
.linklike {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--muted);
}
.linklike:hover, .linklike:focus-visible { color: var(--accent); }

dialog#access-dialog {
  margin: auto;
  width: min(440px, calc(100vw - 32px));
  background: var(--raised); color: var(--text);
  border: 1px solid var(--border);
  padding: 1.6rem 1.75rem 1.5rem;
}
dialog#access-dialog::backdrop { background: rgba(40, 40, 30, 0.72); }
dialog#access-dialog h2 { font-size: 1.25rem; margin: 0.6rem 0 0.4rem; }
dialog#access-dialog .muted { color: var(--muted); font-size: 0.875rem; margin-bottom: 1.2rem; }
dialog#access-dialog input {
  width: 100%; background: transparent; color: var(--text);
  border: 0; border-bottom: 1px solid var(--border);
  font: inherit; font-size: 1rem; padding: 0.45rem 0; outline: none; margin-top: 0.35rem;
}
dialog#access-dialog input:focus { border-bottom-color: var(--accent); }
dialog#access-dialog .msg { min-height: 1.4em; font-size: 0.85rem; color: var(--accent); margin: 0.6rem 0 0.2rem; }
.dialog-actions { display: flex; gap: 0.75rem; margin-top: 0.6rem; }
.btn-accent, .btn-ghost {
  font: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.7rem 1.1rem; cursor: pointer; border: 1px solid var(--accent);
}
.btn-accent { background: var(--accent); color: #2b2a1f; }
.btn-accent:disabled { opacity: 0.6; cursor: wait; }
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--muted); }

@media (max-width: 640px) {
  .footer-right { flex-direction: column; gap: 0.5rem; }
}