/* ============================================================
   BORG 360 — Templates gallery + Borg Studio customizer
   ============================================================ */

/* ---------------- Gallery ---------------- */
.filter-row { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.4rem; }
.filter-pill { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--text-dim); padding: .5rem 1rem; border-radius: var(--radius-pill); border: 1px solid var(--hairline-strong); background: rgba(255,255,255,.02); transition: all var(--dur-2) var(--ease); }
.filter-pill:hover { color: var(--text); border-color: rgba(255,255,255,.3); }
.filter-pill.is-on { color: #fff; background: var(--grad-brand); border-color: transparent; }

.gallery { display: grid; gap: clamp(1.2rem,1rem+1.5vw,1.8rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.tpl { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.tpl .mockframe { border: none; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--hairline); }
.tpl__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.tpl__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.tpl__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); }
.tpl__cat { font-size: var(--fs-xs); color: var(--text-faint); }
.tpl__desc { color: var(--text-dim); font-size: var(--fs-sm); margin: .7rem 0 1rem; flex: 1; }
.tpl__meta { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tpl__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.tpl__actions .btn--block { grid-column: 1 / -1; }

/* ---------------- Studio ---------------- */
.studio { display: grid; grid-template-columns: 340px 1fr; min-height: calc(100vh - 76px); }
@media (max-width: 900px) { .studio { grid-template-columns: 1fr; } }

.studio__panel { border-right: 1px solid var(--hairline); padding: 1.4rem; overflow-y: auto; max-height: calc(100vh - 76px); position: sticky; top: 76px; background: rgba(7,10,30,.5); }
@media (max-width: 900px) { .studio__panel { position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--hairline); } }
.studio__panel h2 { font-size: var(--fs-md); }
.studio__panel .muted { font-size: var(--fs-xs); }

.studio-section { margin-top: 1.6rem; }
.studio-section h3 { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: .8rem; }

.tpl-switch { width: 100%; }
.presets { display: flex; flex-wrap: wrap; gap: .4rem; }
.preset-btn { font-size: var(--fs-xs); font-family: var(--font-display); font-weight: 600; padding: .4rem .7rem; border-radius: var(--radius-pill); border: 1px solid var(--hairline-strong); color: var(--text-dim); background: rgba(255,255,255,.02); }
.preset-btn:hover { color: #fff; border-color: var(--brand-2); }

.control { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; }
.control label { flex: 1; font-size: var(--fs-sm); color: var(--text-dim); }
.swatch { position: relative; width: 38px; height: 30px; border-radius: 8px; border: 1px solid var(--hairline-strong); overflow: hidden; flex: 0 0 auto; cursor: pointer; }
.swatch input[type="color"] { position: absolute; inset: -6px; width: 200%; height: 200%; border: none; padding: 0; background: none; cursor: pointer; }
.control .hex { width: 84px; font-family: var(--font-mono); font-size: var(--fs-xs); padding: .35rem .5rem; background: rgba(7,10,30,.6); border: 1px solid var(--hairline); border-radius: 7px; color: var(--text-dim); text-transform: uppercase; }
.control .select { padding: .45rem .6rem; font-size: var(--fs-sm); }
.control input[type="range"] { flex: 1.2; accent-color: var(--brand-2); }
.control .rangeval { width: 48px; text-align: right; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-dim); }

.studio__actions { margin-top: 1.8rem; display: grid; gap: .6rem; }

.studio__stage { background: repeating-conic-gradient(rgba(255,255,255,.02) 0% 25%, transparent 0% 50%) 0 0 / 24px 24px; display: grid; grid-template-rows: auto 1fr; }
.studio__bar { display: flex; align-items: center; gap: .8rem; padding: .7rem 1.2rem; border-bottom: 1px solid var(--hairline); background: rgba(7,10,30,.5); }
.studio__bar .spacer { flex: 1; }
.device-toggle { display: inline-flex; padding: 3px; gap: 3px; background: rgba(7,10,30,.6); border: 1px solid var(--hairline); border-radius: var(--radius-pill); }
.device-toggle button { width: 36px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-pill); color: var(--text-dim); }
.device-toggle button.is-on { background: var(--grad-brand); color: #fff; }
.device-toggle svg { width: 17px; height: 17px; }
.studio__frame-wrap { overflow: auto; padding: 1.4rem; display: grid; place-items: start center; }
.studio__frame { width: 100%; max-width: 100%; height: calc(100vh - 76px - 53px - 2.8rem); border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-lg); transition: max-width var(--dur-3) var(--ease); }
.studio__frame[data-device="mobile"] { max-width: 390px; }
.studio__url { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); }
.studio-hint { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 1rem; line-height: 1.5; }