/* =============================================================
   VARENT — [portfolio] block styles. Loads varent-base.css first.
   ============================================================= */

.vp-pf{padding:30px 0 96px;}
.vp-pf-head{display:flex; justify-content:space-between; align-items:flex-end;
  gap:28px; flex-wrap:wrap; margin-bottom:40px; border-top:1px solid var(--line); padding-top:34px;}
.vp-pf-head h2{font-family:"Space Grotesk"; font-weight:600; font-size:21px;
  letter-spacing:-.01em; margin:0 0 8px; color:var(--ink);}
.vp-pf-head p{margin:0; font-size:14.5px; color:var(--ink-soft);}

.vp-legend{display:flex; flex-wrap:wrap; gap:7px; align-items:center;}
.vp-legend .vp-hint{font-family:"Space Grotesk"; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); margin-right:3px;}
.vp-chip{--c:var(--grey); display:inline-flex; align-items:center; gap:7px; line-height:1;
  font-size:13px; font-weight:500; color:var(--ink); cursor:pointer; background:transparent;
  border:1px solid var(--line); border-radius:999px; padding:6px 11px;
  transition:border-color .2s var(--ease), background .2s var(--ease);}
.vp-chip .vp-sw{width:8px; height:8px; border-radius:50%; background:var(--c);}
.vp-chip .vp-ct{font-size:11px; color:var(--ink-faint); font-variant-numeric:tabular-nums;}
.vp-chip:hover{border-color:#D6DADF;}
.vp-chip:focus-visible{outline:2px solid var(--mint); outline-offset:2px;}
.vp-chip[aria-pressed="true"]{border-color:var(--c);
  background:color-mix(in srgb, var(--c) 8%, transparent);}
.vp-chip[aria-pressed="true"] .vp-ct{color:var(--ink);}

.vp-modes{display:flex; align-items:center; gap:4px; margin:0 0 28px;
  background:#F1F3F5; border-radius:999px; padding:4px; width:max-content;}
.vp-modes button{font-family:"Inter"; font-size:12.5px; font-weight:500; color:var(--ink-soft);
  background:transparent; border:none; border-radius:999px; padding:7px 15px; cursor:pointer;
  transition:color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);}
.vp-modes button[aria-pressed="true"]{color:var(--ink); background:#fff;
  box-shadow:0 1px 2px rgba(20,32,40,.10);}
.vp-modes button:focus-visible{outline:2px solid var(--mint); outline-offset:2px;}
.vp-modes .vp-mlabel{font-family:"Space Grotesk"; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); padding:0 10px 0 8px;}

.vp-logos{display:grid; gap:12px 18px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));}
.vp-logo{position:relative; margin:0; min-height:138px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:22px 16px; border-radius:14px; cursor:default;
  transition:opacity .3s var(--ease), transform .35s var(--ease), background .3s var(--ease);}
a.vp-logo{cursor:pointer; text-decoration:none; color:inherit;}
.vp-imgwrap{display:flex; align-items:center; justify-content:center; height:54px;}
.vp-logo img{max-height:50px; max-width:160px; width:auto; height:auto; object-fit:contain;
  filter:grayscale(1) contrast(1.05); opacity:.82;
  transition:filter .4s var(--ease), opacity .4s var(--ease);}

.vp-ind{display:none;}
.vp-dot{width:8px; height:8px; border-radius:50%; background:var(--c);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 14%, transparent);}
.vp-line{width:30px; height:3px; border-radius:3px; background:var(--c); opacity:.85;}
.vp-label{font-family:"Space Grotesk"; font-weight:500; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--c);}
.vp-cloud[data-mode="dot"]   .vp-dot{display:block; margin-bottom:18px;}
.vp-cloud[data-mode="line"]  .vp-line{display:block; margin-top:18px;}
.vp-cloud[data-mode="label"] .vp-label{display:block; margin-top:15px;}

.vp-logo:hover, .vp-logo:focus-visible{outline:none; transform:translateY(-3px);
  background:color-mix(in srgb, var(--c) 5%, transparent);}
.vp-logo:hover img, .vp-logo:focus-visible img{filter:none; opacity:1;}
.vp-logo:hover .vp-line, .vp-logo:focus-visible .vp-line{opacity:1; width:38px;}
.vp-logo:hover .vp-dot, .vp-logo:focus-visible .vp-dot{
  box-shadow:0 0 0 5px color-mix(in srgb, var(--c) 20%, transparent);}

.vp-logos.vp-filtering .vp-logo{opacity:.24;}
.vp-logos.vp-filtering .vp-logo.vp-match{opacity:1;}
.vp-logos.vp-filtering .vp-logo.vp-match img{filter:none; opacity:1;}

.vp-grouped{display:none; flex-direction:column; gap:36px;}
.vp-cloud[data-mode="grouped"] > .vp-logos{display:none;}
.vp-cloud[data-mode="grouped"] .vp-grouped{display:flex;}
.vp-group-head{display:flex; align-items:center; gap:10px; margin-bottom:4px;}
.vp-group-head .vp-gdot{width:9px; height:9px; border-radius:50%; background:var(--c);}
.vp-group-head .vp-gname{font-family:"Space Grotesk"; font-weight:600; font-size:13px;
  letter-spacing:.04em; color:var(--ink);}
.vp-group-head .vp-grule{flex:1; height:1px; background:var(--line);}
.vp-group-head .vp-gct{font-size:12px; color:var(--ink-faint);}
.vp-group .vp-logos{margin-top:14px;}
.vp-group .vp-logo .vp-ind{display:none !important;}

@media (max-width:640px){
  .vp-pf{padding:8px 0 64px;}
  .vp-logos{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px;}
  .vp-logo{min-height:112px; padding:18px 10px;}
  .vp-logo img{max-height:38px; max-width:120px;}
  .vp-modes{flex-wrap:wrap; width:100%;}
}
@media (prefers-reduced-motion:reduce){ .vp-logo:hover, .vp-logo:focus-visible{transform:none;} }

/* guards against themes that !important these tags */
.vp-logo img{border:0 !important; background:none !important; box-shadow:none !important; border-radius:0 !important;}
.vp-pf-head h2{text-transform:none !important; color:var(--ink) !important;}