/* ---------- Brand resources page (page-brand-resources.php) ---------- */

/* header: same as the Security page header (.shdr rules in security-page.css) */
.shdr{border-top:0;}
.shdr-side{display:flex;flex-direction:column;justify-content:flex-end;}

/* logos: 2 x 2 grid, lines between the cells run rail to rail */
.brgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
.brcell{display:flex;flex-direction:column;border-bottom:1px solid var(--line);}
.brcell:nth-child(odd){border-right:1px solid var(--line);}
.brcell:nth-last-child(-n+2){border-bottom:0;}

/* preview panel: ink logos on the raised grey, white logos on dark */
.brprev{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:16/9;padding:clamp(32px,6vw,80px);
  background:var(--bg-2);border-bottom:1px solid var(--line);
}
.brprev.is-dark{background:var(--dark);}
.brprev img{max-width:min(100%,360px);max-height:100%;width:auto;height:auto;object-fit:contain;}
.brprev.is-mark img{max-width:min(100%,160px);} /* the mark alone: smaller, so it sits at the same visual weight as the wordmark */

.brmeta{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(20px,2.4vw,28px) var(--gut);}

@media (max-width:860px){
  .shdr .split > .shdr-main{padding-bottom:0;border-bottom:0;}
  .shdr-side{padding-top:20px;}
  .brgrid{grid-template-columns:minmax(0,1fr);}
  .brcell:nth-child(odd){border-right:0;}
  .brcell:nth-last-child(-n+2){border-bottom:1px solid var(--line);}
  .brcell:last-child{border-bottom:0;}
}