/* =============================================================================
   tpl-archive.css — Templates archive page (archive-custom_form.php)
   Minimaliste / flat / responsive / dark-mode ready
   ============================================================================= */

/* ── CSS tokens ─────────────────────────────────────────────────────────────── */
.tpl-page {
    --bg:          #fafafa;
    --card-bg:     #ffffff;
    --b:           rgba(0,0,0,.07);   /* border color (full) */
    --b-half:      rgba(0,0,0,.05);   /* border color (card resting) */
    --t1:          #111827;           /* primary text */
    --t2:          #374151;
    --t3:          #6b7280;
    --t4:          #9ca3af;           /* meta / muted */
    --pill-bg:     #f3f4f6;
    --pill-hover:  #e5e7eb;
    --input-bg:    #ffffff;
    --sticky-bg:   rgba(250,250,250,.92);
    --radius-card: 12px;
}

/* Dark — system preference */
@media (prefers-color-scheme: dark) {
    .tpl-page {
        --bg:          #0f172a;
        --card-bg:     #1e293b;
        --b:           rgba(255,255,255,.1);
        --b-half:      rgba(255,255,255,.06);
        --t1:          #f1f5f9;
        --t2:          #cbd5e1;
        --t3:          #94a3b8;
        --t4:          #64748b;
        --pill-bg:     #1e293b;
        --pill-hover:  #334155;
        --input-bg:    #1e293b;
        --sticky-bg:   rgba(15,23,42,.92);
    }
}

/* Dark — Astra dark-scheme class */
.ast-dark-scheme .tpl-page {
    --bg:          #0f172a;
    --card-bg:     #1e293b;
    --b:           rgba(255,255,255,.1);
    --b-half:      rgba(255,255,255,.06);
    --t1:          #f1f5f9;
    --t2:          #cbd5e1;
    --t3:          #94a3b8;
    --t4:          #64748b;
    --pill-bg:     #1e293b;
    --pill-hover:  #334155;
    --input-bg:    #1e293b;
    --sticky-bg:   rgba(15,23,42,.92);
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
.tpl-page *, .tpl-page *::before, .tpl-page *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.tpl-page {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: transparent;
    color: var(--t1);
}
body.post-type-archive-custom_form .site-content { padding-top: 0 !important; }
.entry-header, .page-header, .archive-header,
h1.page-title, h1.archive-title { display: none !important; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.tpl-hero {
    padding: 40px 0;
    text-align: center;
    background: #f4f3ff;
}
.tpl-hero__h1 {
    font-size: clamp(20px, 3.5vw, 28px);
    font-weight: 800;
    color: #1a1a2e;
    letter-spacing: -.4px;
    line-height: 1.15;
    margin-bottom: 10px;
}
.tpl-hero__sub {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto 24px;
}
.tpl-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #4a3fa0;
    background: #e8e6ff;
    border: 1px solid #c8c3f5;
    border-radius: 99px;
    padding: 4px 12px;
}
.tpl-hero__chip svg { flex-shrink: 0; }

/* ── Hero dark mode ───────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .tpl-hero           { background: #1a1f2e; }
    .tpl-hero__h1       { color: #f1f5f9; }
    .tpl-hero__sub      { color: #94a3b8; }
    .tpl-hero__chip     { background: rgba(255,255,255,.08); color: #94a3b8; border-color: rgba(255,255,255,.15); }
}
.ast-dark-scheme .tpl-hero           { background: #1a1f2e; }
.ast-dark-scheme .tpl-hero__h1       { color: #f1f5f9; }
.ast-dark-scheme .tpl-hero__sub      { color: #94a3b8; }
.ast-dark-scheme .tpl-hero__chip     { background: rgba(255,255,255,.08); color: #94a3b8; border-color: rgba(255,255,255,.15); }

/* ── Sticky toolbar ───────────────────────────────────────────────────────── */
.tpl-toolbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--sticky-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 0.5px solid var(--b);
    padding: 10px 24px;
}
.tpl-toolbar__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Pills */
.tpl-pills {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
    min-width: 0;
    padding-bottom: 1px; /* prevent clipping of 0.5px border on active pill */
}
.tpl-pills::-webkit-scrollbar { display: none; }

.tpl-pill {
    white-space: nowrap;
    padding: 5px 13px;
    border-radius: 99px;
    border: 0.5px solid var(--b);
    background: var(--pill-bg);
    color: var(--t2);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    flex-shrink: 0;
    font-family: inherit;
    line-height: 1.6;
}
.tpl-pill:hover:not(.is-active) {
    background: var(--pill-hover);
}
.tpl-pill.is-active {
    background: var(--t1);
    color: var(--bg);
    border-color: var(--t1);
}
.tpl-pill--fav.is-active {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}
.tpl-pill--fav:hover:not(.is-active) {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #ef4444;
}
.tpl-pill-ct { opacity: .6; font-weight: 400; }

/* Search */
.tpl-search {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--input-bg);
    border: 0.5px solid var(--b);
    border-radius: 99px;
    padding: 5px 12px;
    flex-shrink: 0;
    width: 190px;
    transition: border-color .15s, width .2s;
}
.tpl-search:focus-within {
    border-color: var(--t3);
    width: 230px;
}
.tpl-search svg   { flex-shrink: 0; color: var(--t4); }
.tpl-search input {
    border: none; outline: none;
    background: transparent;
    font-size: 12.5px;
    color: var(--t1);
    font-family: inherit;
    width: 100%;
}
.tpl-search input::placeholder { color: var(--t4); }
.tpl-search-clear {
    cursor: pointer; color: var(--t4);
    font-size: 13px; line-height: 1;
    display: none;
    background: none; border: none; padding: 0;
    font-family: inherit;
    transition: color .12s;
}
.tpl-search-clear:hover { color: var(--t2); }

/* ── Content ───────────────────────────────────────────────────────────────── */
.tpl-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 24px 80px;
}
.tpl-result-count {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--t4);
    margin-bottom: 18px;
}

/* ── Grid ─────────────────────────────────────────────────────────────────── */
.tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    align-items: start;
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.tpl-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s;
    position: relative;
}
.tpl-card:hover { border-color: #d1d5db; }

/* Thumbnail */
.tpl-card__thumb {
    height: 160px;
    overflow: hidden;
    position: relative;
    background: var(--cat-bg, #f1efe8);
    flex-shrink: 0;
}
.tpl-card__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}
.tpl-card:hover .tpl-card__thumb img { transform: scale(1.03); }
.tpl-card__thumb-ph {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tpl-card__thumb-ph svg { width: 30px; height: 30px; opacity: .3; }

/* Badge */
.tpl-card__badge {
    position: absolute; top: 9px; right: 9px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; padding: 2px 7px;
    border-radius: 99px; line-height: 1.6;
    pointer-events: none;
}
.tpl-card__badge--new     { background: #111827; color: #fff; }
.tpl-card__badge--popular { background: #EF9F27; color: #fff; }

/* Fav button */
.tpl-card__fav {
    position: absolute; top: 9px; left: 9px;
    width: 27px; height: 27px; border-radius: 50%;
    background: rgba(255,255,255,.85);
    border: 0.5px solid rgba(0,0,0,.07);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    transition: background .12s, transform .12s;
    backdrop-filter: blur(4px);
}
.tpl-card__fav:hover { background: #fff; transform: scale(1.1); }
.tpl-card__fav svg {
    width: 12px; height: 12px;
    fill: none; stroke: #9ca3af; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    pointer-events: none;
    transition: stroke .12s, fill .12s;
}
.tpl-card__fav.is-faved svg { fill: #ef4444; stroke: #ef4444; }

/* Dark mode: fav bg */
@media (prefers-color-scheme: dark) {
    .tpl-card__fav { background: rgba(30,41,59,.85); border-color: rgba(255,255,255,.1); }
}
.ast-dark-scheme .tpl-card__fav { background: rgba(30,41,59,.85); border-color: rgba(255,255,255,.1); }

/* Body */
.tpl-card__body {
    padding: 13px 15px 15px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    background: #ffffff !important;
}
.tpl-card__cat {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--cat-accent, #888780);
}
.tpl-card__title {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.45;
}
.tpl-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 3px;
}
.tpl-meta-item {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #888;
}

/* ── Card dark mode ───────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .tpl-card             { background: #1e2235; border-color: rgba(255,255,255,.08); }
    .tpl-card:hover       { border-color: rgba(255,255,255,.15); }
    .tpl-card__body       { background: #1e2235; }
    .tpl-card__title      { color: #ffffff; }
    .tpl-meta-item        { color: #aaa; }
}
.ast-dark-scheme .tpl-card             { background: #1e2235; border-color: rgba(255,255,255,.08); }
.ast-dark-scheme .tpl-card:hover       { border-color: rgba(255,255,255,.15); }
.ast-dark-scheme .tpl-card__body       { background: #1e2235 !important; }
.ast-dark-scheme .tpl-card__title      { color: #ffffff; }
.ast-dark-scheme .tpl-meta-item        { color: #aaa; }
.tpl-meta-item svg {
    width: 10px; height: 10px;
    fill: none; stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
}

/* ── Request card ─────────────────────────────────────────────────────────── */
.tpl-card--req {
    border: 0.5px dashed var(--b);
    background: transparent;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 36px 20px;
    min-height: 240px;
    gap: 10px;
    color: var(--t3);
    text-decoration: none;
    transition: color .15s, border-color .15s;
}
.tpl-card--req:hover {
    color: var(--t1);
    border-color: var(--t2);
}
.tpl-card--req__icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--pill-bg);
    border: 0.5px solid var(--b);
    display: flex; align-items: center; justify-content: center;
}
.tpl-card--req__icon svg {
    width: 16px; height: 16px;
    stroke: var(--t3); fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: stroke .15s;
}
.tpl-card--req:hover .tpl-card--req__icon svg { stroke: var(--t1); }
.tpl-card--req__label {
    font-size: 13px; font-weight: 600; color: inherit;
}
.tpl-card--req__sub {
    font-size: 11.5px; color: var(--t4); line-height: 1.5;
}

/* ── Empty states ─────────────────────────────────────────────────────────── */
.tpl-empty, .tpl-no-favs {
    display: none;
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
}
.tpl-empty__icon, .tpl-no-favs__icon { font-size: 36px; margin-bottom: 12px; }
.tpl-empty__text, .tpl-no-favs__text {
    font-size: 15px; font-weight: 600;
    color: var(--t2); margin-bottom: 4px;
}
.tpl-empty__sub, .tpl-no-favs__sub { font-size: 13px; color: var(--t4); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tpl-hero   { padding: 48px 0 36px; }
    .tpl-toolbar { padding: 8px 16px; }
    .tpl-search  { display: none; }
    .tpl-content { padding: 22px 16px 60px; }
    .tpl-grid    { gap: 10px; }
}
@media (max-width: 768px) {
    .tpl-grid { grid-template-columns: 1fr; }
    .tpl-card__thumb { height: 130px; }
    .tpl-card--req   { min-height: 160px; padding: 28px 16px; }
}
/* 2 cols between 480–768 is handled automatically by minmax(220px,1fr) */