/* =========================================================
   PROJECTS ARCHIVE – projects.css
   ========================================================= */

/* ── Visually-hidden helper ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* ── Page layout ── */
.projects-archive{padding-bottom:6vw}

/* ── Page header ── */
.projects-archive__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;padding:calc(var(--header-height,11.111vw) + clamp(2.5rem,4vw,4rem)) 0 clamp(2rem,3.5vw,3rem)}
.projects-archive__head-text{display:flex;flex-direction:column;gap:.5rem}
.projects-archive__eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#c97fff}
.projects-archive__title{margin:0;font-size:clamp(2.4rem,5vw,4rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff}
.projects-archive__subtitle{margin:0;max-width:40rem;font-size:clamp(.9rem,1.5vw,1.1rem);color:rgba(255,255,255,.55);line-height:1.55}
.projects-archive__count{flex-shrink:0;font-size:.82rem;font-weight:700;color:rgba(255,255,255,.38);white-space:nowrap;align-self:flex-end;padding-bottom:.4rem}

/* ── Toolbar ── */
.projects-toolbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}
.projects-toolbar__search{position:relative;flex:1 1 220px;min-width:0}
.projects-toolbar__search-icon{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;stroke:rgba(255,255,255,.35);fill:none;stroke-width:2;pointer-events:none}
.projects-toolbar__search-input{width:100%;height:2.8rem;padding:0 1rem 0 2.4rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.055);color:#fff;font:inherit;font-size:.9rem;outline:none;transition:border-color .2s,background .2s}
.projects-toolbar__search-input::placeholder{color:rgba(255,255,255,.32)}
.projects-toolbar__search-input:focus{border-color:rgba(201,127,255,.55);background:rgba(255,255,255,.08)}
.projects-toolbar__controls{display:flex;align-items:center;gap:.65rem;flex-shrink:0;flex-wrap:wrap}

/* ── Filter toggle ── */
.projects-filter-toggle{display:flex;align-items:center;gap:.45rem;height:2.8rem;padding:0 1rem;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.projects-filter-toggle svg{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.projects-filter-toggle:hover,.projects-filter-toggle[aria-expanded="true"]{border-color:rgba(201,127,255,.6);background:rgba(201,127,255,.12);color:#fff}
.projects-filter-toggle__badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .3rem;border-radius:999px;background:#c97fff;color:#1a003d;font-size:.65rem;font-weight:800;line-height:1}

/* ── Admin quick-link ── */
.projects-toolbar__admin-link{display:inline-flex;align-items:center;gap:.4rem;height:2.8rem;padding:0 1rem;border:1px dashed rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.45);font:inherit;font-size:.78rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:border-color .2s,color .2s}
.projects-toolbar__admin-link:hover{border-color:rgba(201,127,255,.5);color:#e4b2ff}

/* ── Sort select ── */
/* ── Custom Dropdown ── */
.custom-dropdown{position:relative;display:inline-block}
.custom-dropdown__toggle{display:flex;align-items:center;justify-content:space-between;gap:.5rem;height:2.8rem;padding:0 1rem;border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s,color .2s;white-space:nowrap;min-width:12.5rem}
.custom-dropdown__toggle:hover{border-color:rgba(201,127,255,.55)}
.custom-dropdown.is-open .custom-dropdown__toggle{border-color:#c97fff;background:rgba(201,127,255,.08);color:#fff}
.custom-dropdown__toggle svg{transition:transform .3s cubic-bezier(.4,0,.2,1);stroke:rgba(255,255,255,.45)}
.custom-dropdown.is-open .custom-dropdown__toggle svg{transform:rotate(-180deg);stroke:currentColor}
.custom-dropdown__menu{position:absolute;top:calc(100% + .5rem);right:0;z-index:100;min-width:100%;padding:.4rem;margin:0;list-style:none;background:rgba(25,12,32,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);border-radius:1rem;box-shadow:0 10px 30px rgba(0,0,0,.4);transform-origin:top right;opacity:0;visibility:hidden;transform:scale(.95) translateY(-.5rem);transition:opacity .25s,transform .25s,visibility .25s;display:flex;flex-direction:column;gap:.2rem}
.custom-dropdown.is-open .custom-dropdown__menu{opacity:1;visibility:visible;transform:scale(1) translateY(0)}
.custom-dropdown__menu[hidden]{display:none !important}
.custom-dropdown__menu li{padding:.6rem .8rem;border-radius:.6rem;color:rgba(255,255,255,.7);font-size:.85rem;font-weight:500;cursor:pointer;transition:background .2s,color .2s;white-space:nowrap;display:flex;align-items:center}
.custom-dropdown__menu li:hover{background:rgba(255,255,255,.06);color:#fff}
.custom-dropdown__menu li.is-selected{background:rgba(201,127,255,.15);color:#e4b2ff;font-weight:700}

/* ── View mode buttons ── */
.projects-view-modes{display:flex;gap:.25rem;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:.25rem}
.view-mode-btn{display:flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;border:none;border-radius:7px;background:transparent;color:rgba(255,255,255,.38);cursor:pointer;transition:background .18s,color .18s}
.view-mode-btn svg{width:1rem;height:1rem;fill:currentColor;stroke:none}
.view-mode-btn:hover{color:rgba(255,255,255,.7)}
.view-mode-btn.is-active,.view-mode-btn[aria-pressed="true"]{background:rgba(201,127,255,.2);color:#e4b2ff}

/* ── Active filter chips ── */
.projects-active-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;align-items:center}
.filter-chip{display:inline-flex;align-items:center;gap:.35rem;height:1.9rem;padding:0 .65rem;border:1px solid rgba(201,127,255,.4);border-radius:999px;background:rgba(201,127,255,.1);color:#e4b2ff;font-size:.77rem;font-weight:600}
.filter-chip__remove{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;border:none;border-radius:50%;background:rgba(255,255,255,.12);color:inherit;cursor:pointer;font-size:.7rem;line-height:1;padding:0}
.filter-chip__remove:hover{background:rgba(255,255,255,.25)}

/* =========================================================
   FILTERS DRAWER
   ========================================================= */
.filters-drawer{position:fixed;inset:0;z-index:900;pointer-events:none}
.filters-drawer.is-open{pointer-events:auto}
.filters-drawer__backdrop{position:absolute;inset:0;background:rgba(10,2,20,.65);opacity:0;transition:opacity .32s ease;backdrop-filter:blur(2px)}
.filters-drawer.is-open .filters-drawer__backdrop{opacity:1}
.filters-drawer__panel{position:absolute;top:0;left:0;height:100%;width:min(340px,85vw);display:flex;flex-direction:column;background:linear-gradient(160deg,rgba(34,8,56,.98),rgba(15,3,28,.99));border-right:1px solid rgba(201,127,255,.18);box-shadow:12px 0 40px rgba(0,0,0,.55);transform:translateX(-100%);transition:transform .32s cubic-bezier(.22,1,.36,1)}
.filters-drawer.is-open .filters-drawer__panel{transform:translateX(0)}
.filters-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.25rem .9rem;border-bottom:1px solid rgba(255,255,255,.07)}
.filters-drawer__title{font-size:1rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.filters-drawer__close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:8px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.6);cursor:pointer;transition:background .18s,color .18s}
.filters-drawer__close svg{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:2}
.filters-drawer__close:hover{background:rgba(255,255,255,.14);color:#fff}
.filters-drawer__body{flex:1;overflow-y:auto;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:1.5rem}
.filters-drawer__body::-webkit-scrollbar{width:4px}
.filters-drawer__body::-webkit-scrollbar-track{background:transparent}
.filters-drawer__body::-webkit-scrollbar-thumb{background:rgba(201,127,255,.3);border-radius:2px}
.filters-drawer__footer{padding:.9rem 1.25rem 1.25rem;border-top:1px solid rgba(255,255,255,.07)}

/* ── Filter groups ── */
.filter-group__label{margin:0 0 .6rem;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.38)}
.filter-group__pills{display:flex;flex-wrap:wrap;gap:.4rem}
.filter-pill{height:2rem;padding:0 .75rem;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.05);color:rgba(255,255,255,.65);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;transition:border-color .18s,background .18s,color .18s;white-space:nowrap}
.filter-pill:hover{border-color:rgba(201,127,255,.5);color:#fff}
.filter-pill.is-active{border-color:#c97fff;background:rgba(201,127,255,.18);color:#e4b2ff}

/* ── Reset button ── */
.filters-reset{height:2.5rem;padding:0 1.25rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:transparent;color:rgba(255,255,255,.55);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:border-color .2s,color .2s,background .2s;width:100%}
.filters-reset:hover{border-color:rgba(201,127,255,.5);color:#e4b2ff;background:rgba(201,127,255,.06)}

/* =========================================================
   PROJECTS GRID
   ========================================================= */
.projects-grid{display:grid;gap:1.5rem;transition:opacity .2s}
.projects-grid--3{grid-template-columns:repeat(3,1fr)}
.projects-grid--2{grid-template-columns:repeat(2,1fr)}
.projects-grid--1{grid-template-columns:1fr}

/* =========================================================
   PROJECT CARD (pcard)
   ========================================================= */
.pcard{position:relative;border-radius:clamp(1rem,1.6vw,1.4rem);overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);display:flex;flex-direction:column;transition:border-color .25s}
.pcard[hidden]{display:none !important}
.pcard:hover{border-color:rgba(201,127,255,.35)}
.pcard__overlay-link{position:absolute;inset:0;z-index:10}

/* ── Image area ── */
.pcard__image-wrap{position:relative;aspect-ratio:2/3;overflow:hidden;flex-shrink:0}
.projects-grid--1 .pcard__image-wrap{aspect-ratio:unset;width:clamp(130px,18vw,200px);min-height:260px;flex-shrink:0}
.projects-grid--1 .pcard{flex-direction:row}
.pcard__image{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.pcard:hover .pcard__image{transform:scale(1.04)}

/* ── Overlay on hover ── */
.pcard__image-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,2,20,.55);opacity:0;transition:opacity .25s}
.pcard:hover .pcard__image-overlay{opacity:1}
.pcard__watch-btn{display:inline-flex;align-items:center;gap:.55rem;padding:.6rem 1.2rem;border:1.5px solid rgba(255,255,255,.7);border-radius:999px;background:rgba(0,0,0,.35);color:#fff;font:inherit;font-size:.82rem;font-weight:700;text-decoration:none;z-index:1;position:relative;backdrop-filter:blur(4px);transition:background .18s,border-color .18s}
.pcard__watch-btn svg{width:.9rem;height:.9rem;fill:#fff;flex-shrink:0}
.pcard__watch-btn:hover{background:rgba(201,127,255,.3);border-color:#c97fff}

/* ── Badges ── */
.pcard__badge{position:absolute;top:.65rem;left:.65rem;z-index:1;padding:.25rem .55rem;border-radius:6px;font-size:.65rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.pcard__badge--paid{background:linear-gradient(120deg,#8b18e1,#d127f5);color:#fff}
.pcard__status-badge{position:absolute;bottom:.65rem;left:.65rem;z-index:1;padding:.25rem .6rem;border-radius:6px;background:rgba(10,2,20,.72);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.85);font-size:.65rem;font-weight:700;backdrop-filter:blur(6px)}

/* ── Card body ── */
.pcard__body{padding:clamp(.7rem,1.2vw,1rem);display:flex;flex-direction:column;gap:.45rem;flex:1;min-width:0;position:relative;z-index:1}
.projects-grid--1 .pcard__body{padding:clamp(.9rem,1.5vw,1.4rem);justify-content:center}

/* ── Top meta (rating + age) ── */
.pcard__top-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.pcard__rating{display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:700;color:#f5c842}
.pcard__rating svg{fill:#f5c842}
.pcard__age-chip{font-size:.65rem;font-weight:700;padding:.15rem .45rem;border-radius:5px;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.55)}

/* ── Title ── */
.pcard__title{margin:0;font-size:clamp(.85rem,1.1vw,.98rem);font-weight:700;line-height:1.25;letter-spacing:-.01em}
.projects-grid--2 .pcard__title{font-size:clamp(.95rem,1.3vw,1.15rem)}
.projects-grid--1 .pcard__title{font-size:clamp(1.1rem,1.7vw,1.5rem)}
.pcard__title-link{color:#fff;text-decoration:none;transition:color .18s}
.pcard__title-link:hover{color:#c97fff}

/* ── Genres ── */
.pcard__genres{display:flex;flex-wrap:wrap;gap:.3rem}
.pcard__genre{font-size:.65rem;font-weight:600;padding:.15rem .45rem;border-radius:5px;background:rgba(201,127,255,.1);color:rgba(201,127,255,.9);border:1px solid rgba(201,127,255,.2)}
/* In 3-col, genres visible. In 2/1 col also visible but genre count stays <= 3 */

/* ── Extended meta – hidden in 3-col, shown in 2-col and 1-col ── */
.pcard__extended-meta{display:none;flex-wrap:wrap;gap:.3rem}
.pcard__meta-chip{font-size:.68rem;font-weight:600;padding:.2rem .55rem;border-radius:5px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.1)}
.projects-grid--2 .pcard__extended-meta,
.projects-grid--1 .pcard__extended-meta{display:flex}

/* ── Description – hidden in 3-col and 2-col, shown in 1-col ── */
.pcard__desc{display:none}
.pcard__desc p{margin:0;font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.6)}
.projects-grid--1 .pcard__desc{display:block}

/* ── CTA button – hidden in 3-col, shown in 2-col and 1-col ── */
.pcard__cta{display:none;align-self:flex-start;margin-top:.25rem;height:2.2rem;padding:0 1rem;border-radius:999px;background:linear-gradient(100deg,#7a15c8,#b820e6);color:#fff;font:inherit;font-size:.78rem;font-weight:700;text-decoration:none;align-items:center;gap:.4rem;transition:opacity .18s,box-shadow .18s;box-shadow:0 4px 14px rgba(130,30,210,.25);border:none;cursor:pointer}
.pcard__cta:hover{opacity:.88;box-shadow:0 6px 20px rgba(155,30,235,.38)}
.projects-grid--2 .pcard__cta,
.projects-grid--1 .pcard__cta{display:inline-flex}

/* =========================================================
   EMPTY STATE
   ========================================================= */
.projects-empty{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem 1rem 5rem;text-align:center;color:rgba(255,255,255,.45)}
.projects-empty[hidden]{display:none}
.projects-empty p{margin:0;font-size:1.25rem;font-weight:600;max-width:32rem;line-height:1.5}
.projects-empty .pcard__cta{margin-top:.5rem}

/* ── Footer blending fix ── */
.site-footer{margin-top:clamp(2rem,8vw,5rem)}


/* =========================================================
   MOBILE FILTER TAB (left-side tongue)
   ========================================================= */
.filters-fab{position:fixed;left:0;top:50%;z-index:800;display:none;flex-direction:column;align-items:center;justify-content:center;width:2.4rem;height:3rem;padding:0;border:none;border-radius:0 .5rem .5rem 0;background:linear-gradient(180deg,#8b18e1,#d127f5);color:#fff;box-shadow:3px 0 16px rgba(120,20,210,.5);cursor:pointer;transform:translateY(-50%);transition:width .2s ease,box-shadow .2s ease}
.filters-fab:hover{width:2.8rem;box-shadow:5px 0 22px rgba(150,30,240,.65)}
.filters-fab svg{width:1.25rem;height:1.25rem;stroke:#fff;fill:none;stroke-width:2;flex-shrink:0}
.filters-fab__badge{position:absolute;top:-.35rem;right:-.35rem;display:flex;align-items:center;justify-content:center;min-width:1.2rem;height:1.2rem;padding:0 .25rem;border-radius:999px;background:#fff;color:#8b18e1;font-size:.6rem;font-weight:800;line-height:1}

@media(max-width:900px){
	.projects-grid--3{grid-template-columns:repeat(2,1fr)}
	.filters-fab{display:flex}
	.projects-filter-toggle{display:none}
}
@media(max-width:580px){
	.projects-grid--3,.projects-grid--2{grid-template-columns:repeat(2,1fr)}
	.projects-grid--1{grid-template-columns:1fr}
	.projects-archive__head{flex-direction:column;align-items:flex-start}
	.projects-archive__count{align-self:flex-start}
}
@media(max-width:420px){
	.projects-grid--3,.projects-grid--2,.projects-grid--1{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
	.filters-fab{transition:none}
}