/* =========================================================================
   Template miniatures
   The little CSS-drawn previews of each template. Shared by the landing page,
   the template gallery and the dashboard design picker, so all three stay in
   sync — load this alongside whichever stylesheet the page already uses.
   ========================================================================= */
/* CSS-drawn template miniatures -------------------------------------------- */
.tpl-preview {
    position: relative;
    display: grid;
    height: 190px;
    padding: 0.7rem;
    background: var(--paper);
    border: var(--border);
    overflow: hidden;
}
.tpl-preview > span { border: 2px solid var(--ink); }

/* Grid */
.tpl-preview--grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    gap: 0.5rem;
}
.tpl-preview--grid .p-bar  { grid-column: span 2; height: 14px; background: var(--ink); }
.tpl-preview--grid .p-head { grid-column: span 2; background: var(--yellow); }
.tpl-preview--grid .p-cell { background: var(--paper-2); }
.tpl-preview--grid .p-cell:nth-of-type(3) { background: var(--cyan); }
.tpl-preview--grid .p-cell:nth-of-type(5) { background: var(--pink); }

/* Sticker collage */
.tpl-preview--sticker { display: block; background: var(--pink); }
.tpl-preview--sticker .p-blob { position: absolute; }
.tpl-preview--sticker .p-blob--1 {
    top: 12%; left: 8%; width: 54px; height: 54px;
    background: var(--yellow); border-radius: 50%;
}
.tpl-preview--sticker .p-blob--2 {
    top: 42%; right: 12%; width: 62px; height: 40px;
    background: var(--cyan); transform: rotate(-9deg);
}
.tpl-preview--sticker .p-blob--3 {
    bottom: 10%; left: 22%; width: 44px; height: 44px;
    background: var(--lime); transform: rotate(18deg);
}
.tpl-preview--sticker .p-head {
    position: absolute; top: 8%; right: 10%;
    width: 40%; height: 16px; background: var(--paper);
}
.tpl-preview--sticker .p-line {
    position: absolute; bottom: 14%; right: 10%;
    width: 28%; height: 10px; background: var(--paper);
}

/* Editorial zine */
.tpl-preview--zine { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; align-content: start; }
.tpl-preview--zine .p-rule { grid-column: span 2; height: 8px; background: var(--ink); }
.tpl-preview--zine .p-serif {
    grid-column: span 2; height: 46px;
    background: repeating-linear-gradient(var(--ink) 0 6px, transparent 6px 13px);
    border: none;
}
.tpl-preview--zine .p-col {
    height: 70px;
    background: repeating-linear-gradient(rgba(20,18,16,0.55) 0 3px, transparent 3px 9px);
    border: none;
}
.tpl-preview--zine .p-rule--btm { height: 5px; }

/* Case-study deck */
.tpl-preview--deck { display: block; background: var(--purple); }
.tpl-preview--deck .p-card { position: absolute; width: 62%; height: 62%; }
.tpl-preview--deck .p-card--back  { top: 10%; left: 8%;  background: var(--paper-2); }
.tpl-preview--deck .p-card--mid   { top: 19%; left: 19%; background: var(--cyan); }
.tpl-preview--deck .p-card--front {
    top: 28%; left: 30%; background: var(--yellow);
    box-shadow: var(--sh-sm);
}

/* Portrait — a framed photo with the name beside it */
.tpl-preview--portrait { display: block; background: #F2E7D8; }
.tpl-preview--portrait .p-face {
    position: absolute;
    top: 10%; left: 7%;
    width: 38%; height: 80%;
    background: var(--paper);
    box-shadow: 5px 5px 0 var(--ink);
}
.tpl-preview--portrait .p-face-head {
    position: absolute;
    top: 24%; left: 15%;
    width: 22%; height: 30%;
    background: var(--orange);
    border-radius: 50% 50% 45% 45%;
}
.tpl-preview--portrait .p-name {
    position: absolute;
    right: 8%; top: 34%;
    width: 42%; height: 13%;
    background: var(--ink);
    border: none;
}
.tpl-preview--portrait .p-name--short { top: 52%; width: 28%; height: 10%; background: var(--orange); }

/* Photo first */
.tpl-preview--photo { display: block; background: var(--cyan); }
.tpl-preview--photo .p-frame { position: absolute; background: var(--paper); }
.tpl-preview--photo .p-frame--tall { top: 9%;  left: 8%;  width: 38%; height: 74%; }
.tpl-preview--photo .p-frame--wide { top: 9%;  right: 8%; width: 42%; height: 40%; background: var(--ink); }
.tpl-preview--photo .p-frame--sm   { bottom: 9%; right: 8%; width: 42%; height: 28%; background: var(--yellow); }

/* Terminal */
.tpl-preview--terminal { display: block; background: var(--ink); }
.tpl-preview--terminal > span { border-color: transparent; }
.tpl-preview--terminal .p-term-bar {
    position: absolute; top: 0; left: 0; right: 0;
    height: 20px; background: var(--lime);
    border-bottom: 2px solid var(--ink) !important;
}
.tpl-preview--terminal .p-term-line { position: absolute; left: 8%; height: 9px; background: var(--lime); }
.tpl-preview--terminal .p-term-line--1 { top: 30%; width: 60%; }
.tpl-preview--terminal .p-term-line--2 { top: 46%; width: 42%; opacity: 0.75; }
.tpl-preview--terminal .p-term-line--3 { top: 62%; width: 70%; opacity: 0.5; }
.tpl-preview--terminal .p-caret {
    position: absolute; left: 8%; top: 76%;
    width: 12px; height: 14px; background: var(--paper);
    animation: blink 1.1s steps(1) infinite;
}