/* STUDIO SUITE lane stylesheet: previews (option picture cards in Create, technique browser grid). Loaded on every page. */

/* ---------------------------------------------------------------- Technique browser dialog (Browse visually) */
.plai-technique-dialog { width: min(1180px, calc(100vw - 2rem)); }
.plai-technique-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 1rem; }
.plai-technique-card { display: flex; flex-direction: column; border-radius: 14px; background: var(--st-panel-2, rgba(255,255,255,.04)); transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.plai-technique-card:hover, .plai-technique-card:focus-within { border-color: rgba(114,239,255,.6); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.plai-technique-card[data-selected="true"] { border-color: var(--st-accent, #72efff); box-shadow: 0 0 0 1px var(--st-accent, #72efff); }
.plai-technique-card__preview { flex: none; aspect-ratio: 16 / 9; }
.plai-technique-card__preview img, .plai-technique-card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plai-technique-card__video { z-index: 1; }
.plai-technique-card__play, .plai-technique-card__kind { z-index: 2; right: .4rem; bottom: .4rem; padding: .2rem .55rem; font-size: .62rem; background: rgba(8,12,24,.72); }
.plai-technique-card__kind { display: none; }
.plai-technique-card__details { flex: 1; align-content: start; gap: .3rem; padding: .7rem .8rem .8rem; }
.plai-technique-card__category { color: var(--plai-muted); font: 600 .6rem var(--plai-heading); letter-spacing: .06em; text-transform: uppercase; }
.plai-technique-card__details p:not(.plai-technique-card__support) { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.plai-technique-card__details .plai-technique-card__support { min-height: 0; }
.plai-technique-card__details [data-technique-select] { margin-top: .35rem; justify-self: start; }
@media (prefers-reduced-motion: reduce) { .plai-technique-card:hover, .plai-technique-card:focus-within { transform: none; } }

/* ---------------------------------------------------------------- Create wizard: picture cards */
.plai-forge-card-grid--pictures { grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: .8rem; }
.plai-forge-card-grid--pictures .plai-forge-card { display: flex; flex-direction: column; min-height: 0; border-radius: 14px; }
.plai-forge-card-grid--pictures .plai-forge-card__image { flex: none; position: relative; aspect-ratio: 16 / 9; min-height: 0; background: #0d1426; }
.plai-forge-card-grid--pictures .plai-forge-card__image::after { background: linear-gradient(180deg, transparent 55%, rgba(8,12,24,.45)); }
.plai-forge-card-grid--pictures .plai-forge-card[data-art] .plai-forge-card__image { filter: none; }
.plai-forge-card-grid--pictures .plai-forge-card__copy { flex: 1; justify-content: flex-start; gap: .2rem; padding: .55rem .65rem .7rem; }
.plai-forge-card-grid--pictures .plai-forge-card__name { font-size: .82rem; line-height: 1.25; }
.plai-forge-card-grid--pictures .plai-forge-card__description { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .68rem; line-height: 1.4; }
.plai-forge-card-grid--pictures .plai-forge-card__check { top: .45rem; right: .45rem; width: 1.35rem; height: 1.35rem; font-size: .8rem; }
.plai-forge-card-grid--pictures .plai-forge-card__input:checked + .plai-forge-card { box-shadow: 0 0 0 2px var(--plai-cyan), 0 0 26px rgba(0,229,255,.18); }
.plai-forge-card-grid--pictures:not(.is-expanded) .plai-forge-card__input--extra:not(:checked),
.plai-forge-card-grid--pictures:not(.is-expanded) .plai-forge-card__input--extra:not(:checked) + .plai-forge-card { display: none; }
.plai-forge-more { display: flex; justify-content: center; margin-top: 1rem; }
.plai-forge-step:has(.plai-forge-card-grid--pictures) { width: min(1100px, calc(100vw - 2rem)); margin-inline: auto; }
@media (max-width: 640px) {
  .plai-forge-card-grid--pictures, .plai-forge-step[data-step] .plai-forge-card-grid--pictures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .plai-forge-card-grid--pictures .plai-forge-card { min-height: 0; }
  .plai-forge-card-grid--pictures .plai-forge-card__image { min-height: 0; }
}
.plai-technique-dialog__filters { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
@media (max-width: 720px) { .plai-technique-dialog__filters { grid-template-columns: 1fr; } }

/* Art styles: every style visible at once, dense grid (8 per row on a wide screen, 3 on a phone). */
.plai-forge-step[data-step="art_style"] .plai-forge-card-grid--pictures { grid-template-columns: repeat(auto-fill, minmax(min(100%, 124px), 1fr)); gap: .55rem; }
.plai-forge-step[data-step="art_style"] .plai-forge-card__name { font-size: .72rem; }
.plai-forge-step[data-step="art_style"] .plai-forge-card__description { display: none; }
.plai-forge-step[data-step="art_style"] .plai-forge-card__copy { padding: .4rem .5rem .5rem; }
.plai-forge-step[data-step="art_style"] .plai-forge-card__check { top: .3rem; right: .3rem; width: 1.15rem; height: 1.15rem; font-size: .7rem; }
@media (max-width: 640px) {
  .plai-forge-step[data-step="art_style"] .plai-forge-card-grid--pictures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  .plai-forge-step[data-step="art_style"] .plai-forge-card__name { font-size: .62rem; }
}