/* ============================================================
   JCH Soft — materials.html add-on styles (load AFTER style.css)
   Only new classes — zero overrides of the base stylesheet.
   Card-grid look inspired by poliigon.com/free: preview chip on
   dark rounded card, title + meta line beneath, count in intro.
   ============================================================ */

/* Intro band */
.mat-intro { max-width: 720px; }
.mat-tiers {
  margin-top: 30px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px;
}
.tier-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 20px 22px; position: relative;
}
.tier-card .t-k {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  color: var(--accent); margin-bottom: 8px; display: block;
}
.tier-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.tier-card p { color: var(--muted); font-size: .88rem; }
.tier-card .t-price { font-family: var(--mono); color: var(--accent-2); font-size: 1.35rem; display: block; margin-bottom: 6px; }

/* Library header row: count left, hint right (Poliigon pattern) */
.lib-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
}
.lib-head h2 { margin-bottom: 0; }
.lib-head .lib-count { font-family: var(--mono); font-size: .78rem; color: var(--muted); letter-spacing: .08em; }

/* Card grid — Poliigon-style preview chips */
.mat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}
.mat-grid .m-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: border-color .18s ease, transform .18s ease;
}
.mat-grid .m-card:hover { border-color: rgba(61,155,255,.6); transform: translateY(-3px); }
.mat-grid .m-preview {
  position: relative; display: block;
  background: radial-gradient(circle at 50% 42%, #1c2432 0%, var(--surface-2) 66%, #141926 100%);
  aspect-ratio: 4 / 3;
}
.mat-grid .m-preview img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
/* Hover zoom (AmbientCG/Poliigon pattern David requested): the preview
   scales up inside its fixed chip; overflow hidden on the card clips it. */
.mat-grid .m-card:hover .m-preview img { transform: scale(1.12); }
.mat-grid .m-card.active { border-color: rgba(61,155,255,.85); }
.mat-grid .m-badge {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .08em; padding: 3px 9px; border-radius: 4px;
  background: rgba(111,227,161,.14); color: var(--accent-2);
  border: 1px solid rgba(111,227,161,.35);
  backdrop-filter: blur(4px);
}
.mat-grid .m-meta {
  padding: 13px 15px 15px;
}
.mat-grid .m-meta .m-title {
  color: var(--text); font-size: .96rem; font-weight: 600;
  margin-bottom: 3px; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mat-grid .m-meta .m-line {
  font-family: var(--mono); font-size: .68rem; color: var(--muted);
  letter-spacing: .05em; display: flex; align-items: center; gap: 7px;
  white-space: nowrap; overflow: hidden;
}
.mat-grid .m-meta .m-dot { color: var(--border); }
.mat-grid .m-meta .m-line .free { color: var(--accent-2); }
.mat-grid .m-meta .m-line .paid { color: var(--accent); }

/* Tier buttons row (used in expanded/detail contexts) */
.mat-tiers-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.dl-btn {
  display: flex; flex-direction: column; gap: 3px;
  text-decoration: none; border-radius: 8px; padding: 14px 16px;
  border: 1px solid var(--border); background: var(--surface-2);
  transition: border-color .15s ease, transform .1s ease;
}
.dl-btn:hover { border-color: rgba(61,155,255,.55); transform: translateY(-2px); }
.dl-btn .d-t { font-weight: 700; font-size: .95rem; }
.dl-btn .d-s { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; }
.dl-btn.free .d-t { color: var(--accent-2); }
.dl-btn.free .d-s { color: var(--muted); }
.dl-btn.paid { border-color: rgba(111,227,161,.4); background: rgba(111,227,161,.06); }
.dl-btn.paid .d-t { color: var(--text); }
.dl-btn.paid .d-s { color: var(--accent-2); }

@media (max-width: 640px) { .mat-grid { gap: 16px; } }

/* Turntable frame below the selected-material card */
.tt-frame {
  position: relative;
  margin-top: 26px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #0b0e14;
}
.tt-frame iframe {
  display: block; width: 100%; height: 720px; border: 0;
}
.tt-open {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--mono); font-size: .78rem; font-weight: 600;
  letter-spacing: .08em;
  color: #6fe3a1 !important;
  text-decoration: none;
  background: rgba(11,14,20,.82); padding: 6px 12px; border-radius: 5px;
  border: 1px solid rgba(111,227,161,.45);
}
.tt-open:hover { border-color: #6fe3a1; background: rgba(17,21,31,.95); }