/* Veridian: Knowledge Center (layered on supply.css + shop.css head styles) */
.kc-body{padding-block:clamp(34px,4vw,54px)}

/* ---- search + filters ---- */
.kc-tools{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:26px}
.kc-search{flex:1;min-width:260px;display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:0 14px;transition:.18s}
.kc-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,118,110,.1)}
.kc-search svg{width:17px;height:17px;color:var(--gray-2);flex:none}
.kc-search input{flex:1;border:0;outline:0;padding:12px 0;font-family:var(--font-b);font-size:14px;color:var(--navy);background:transparent}
.kc-chips{display:flex;flex-wrap:wrap;gap:8px}
.kcchip{border:1.5px solid var(--line);background:#fff;border-radius:100px;padding:8px 15px;font-family:var(--font-b);font-size:12.5px;font-weight:600;color:var(--gray);cursor:pointer;transition:.16s}
.kcchip:hover{border-color:var(--navy);color:var(--navy)}
.kcchip.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---- featured ---- */
.kc-feat{display:grid;grid-template-columns:1.25fr 1fr;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--sh-m);margin-bottom:34px}
/* 5:4 matches the 1200x966 featured file exactly, so the crop no longer
   depends on how long the headline runs. Cards are 16:9 to match their 702x395
   files. Ratio lives on the container, never on the image. */
.kc-feat-media{position:relative;aspect-ratio:5/4;background:var(--sky-tint)}
.kc-feat-media image-slot{position:absolute;inset:0;width:100%;height:100%}
.kc-feat-body{padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;justify-content:center}
.kc-tag{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;background:rgba(15,118,110,.09);border:1px solid rgba(15,118,110,.24);color:var(--accent);border-radius:100px;padding:6px 13px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.kc-feat-body h2{font-size:clamp(22px,2.5vw,30px);letter-spacing:-.03em;line-height:1.14;margin:16px 0 0}
.kc-feat-body h2 a:hover{color:var(--accent)}
.kc-feat-body p{font-size:14.5px;color:var(--gray);line-height:1.62;margin-top:14px;max-width:52ch}
.kc-meta{display:flex;align-items:center;gap:14px;margin-top:20px;font-size:12px;color:var(--gray-2)}
.kc-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--gray-2)}
.kc-feat-body .link-more{margin-top:22px;align-self:flex-start;font-size:14px}

/* ---- article grid ---- */
.kc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.kc-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:.24s cubic-bezier(.2,.7,.3,1)}
.kc-card:hover{transform:translateY(-5px);box-shadow:var(--sh-l);border-color:transparent}
.kc-shot-w{position:relative;aspect-ratio:16/9;background:var(--sky-tint)}
.kc-shot-w image-slot{position:absolute;inset:0;width:100%;height:100%}
.kc-card-body{padding:22px;display:flex;flex-direction:column;flex:1}
.kc-card .kc-tag{font-size:10px;padding:5px 11px}
.kc-card h3{font-size:16.5px;letter-spacing:-.02em;line-height:1.28;margin:14px 0 0}
.kc-card h3 a:hover{color:var(--accent)}
.kc-card p{font-size:13.4px;color:var(--gray);line-height:1.55;margin-top:10px}
.kc-card .kc-meta{margin-top:auto;padding-top:18px}

/* ---- empty ---- */
.kc-empty{grid-column:1/-1;text-align:center;padding:56px 20px;color:var(--gray-2);font-size:14px;line-height:1.7}

/* ---- topic rail ---- */
.kc-topics{margin-top:clamp(44px,5vw,68px)}
.topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.topic{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 22px;transition:.24s cubic-bezier(.2,.7,.3,1)}
.topic:hover{transform:translateY(-4px);box-shadow:var(--sh-m);border-color:transparent}
.topic .ic{width:48px;height:48px;padding:11px;border-radius:12px;background:var(--sky-tint);color:var(--accent);margin-bottom:16px;transition:.24s}
.topic:hover .ic{background:var(--accent);color:#fff}
.topic h3{font-size:15.5px;letter-spacing:-.015em}
.topic p{font-size:12.8px;color:var(--gray);margin-top:8px;line-height:1.5}
.topic .ct{display:inline-block;margin-top:12px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}

/* ---- brief CTA ---- */
.kc-brief{margin-top:clamp(44px,5vw,68px);background:linear-gradient(165deg,#102842 0%,var(--navy) 55%,#0A1828 100%);color:#fff;border-radius:16px;padding:clamp(30px,3.6vw,48px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,3vw,44px);align-items:center;position:relative;overflow:hidden}
.kc-brief::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px;opacity:.5}
.kc-brief>*{position:relative;z-index:2}
.kc-brief h2{font-size:clamp(21px,2.4vw,28px);letter-spacing:-.028em;color:#fff}
.kc-brief p{font-size:14px;color:#A9BAC6;margin-top:12px;line-height:1.6;max-width:46ch}
.kc-form{display:flex;gap:10px;flex-wrap:wrap}
.kc-form input{flex:1;min-width:200px;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);border-radius:9px;padding:13px 15px;font-family:var(--font-b);font-size:14px;color:#fff;outline:0}
.kc-form input::placeholder{color:#8FA0AC}
.kc-form input:focus{border-color:var(--teal-bright);background:rgba(255,255,255,.1)}
.kc-note{font-size:11.5px;color:#8FA0AC;margin-top:12px}

@media(max-width:980px){
  .kc-feat{grid-template-columns:1fr}
  .kc-feat-media{min-height:220px}
  .kc-grid{grid-template-columns:repeat(2,1fr)}
  .topic-grid{grid-template-columns:repeat(2,1fr)}
  .kc-brief{grid-template-columns:1fr}
}
@media(max-width:620px){
  .kc-grid,.topic-grid{grid-template-columns:1fr}
  .kc-tools{flex-direction:column;align-items:stretch}
}

[hidden]{display:none!important}

/* Knowledge Center photos are real links, same target as the headline, so
   cmd-click, middle-click and right-click copy-link all behave. The anchor is
   aria-hidden and tabindex="-1" so keyboard and screen readers reach each
   article once via the headline instead of announcing it twice. The ::after
   hit layer sits above image-slot because the component swallows clicks on its
   own shadow root before they reach the anchor. */
.kc-shot-link,.kc-feat-link{position:absolute;inset:0;display:block;cursor:pointer}
.kc-shot-link image-slot,.kc-feat-link image-slot{position:absolute;inset:0;width:100%;height:100%}
.kc-shot-link::after,.kc-feat-link::after{content:"";position:absolute;inset:0;z-index:2}
.kc-shot-link:focus-visible,.kc-feat-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Authoring mode. <html data-authoring> makes the photo hit layer inert so a
   new file can be dropped onto image-slot again; visitors never see it. Set it
   with localStorage.setItem('vrl-authoring','1') then reload, and clear it with
   localStorage.removeItem('vrl-authoring'). The inline script in knowledge.html
   restores the flag before first paint. */
html[data-authoring] .kc-shot-link::after,html[data-authoring] .kc-feat-link::after{pointer-events:none}
html[data-authoring] .kc-shot-link,html[data-authoring] .kc-feat-link{cursor:default}