.aa-logos { border-bottom: 1px solid var(--color-border); }

.aa-logos__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 45px; }
.aa-logos__head .section-label { margin-bottom: 20px; }
.aa-logos__intro { color: var(--color-accent); font-size: 14px; line-height: 1.75; max-width: 370px; }
@media (max-width: 640px) {
  .aa-logos__head { display: block; margin-bottom: 30px; }
  .aa-logos__intro { margin-top: 20px; }
}
/* Hairlines drawn on the tiles, not the grid, so a short row leaves
   empty space rather than a grey block. */
.aa-logos__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; padding: 1px; }
.aa-logos__tile { box-shadow: 0 0 0 1px var(--color-border); position: relative; min-height: 150px; padding: 24px; background: var(--color-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-decoration: none; transition: background .2s; }
.aa-logos__tile:hover { background: var(--color-surface-2); }
/* Logos are uploaded in light-on-dark versions, shown as they are. */
.aa-logos__tile img { max-height: 64px; max-width: 72%; width: auto; opacity: .88; transition: opacity .2s; }
.aa-logos__tile:hover img { opacity: 1; }
.aa-logos__name { font-size: 18px; font-weight: 450; letter-spacing: -.02em; color: var(--color-fg); text-align: center; }
.aa-logos__role { font: 10px var(--font-mono); text-transform: uppercase; letter-spacing: 1px; color: var(--color-dim); text-align: center; }
.aa-logos__ph { display: none; }
body.cms-edit .aa-logos__ph { display: block; position: absolute; inset: 8px; border: 1px dashed transparent; cursor: pointer; }
body.cms-edit .aa-logos__tile:hover .aa-logos__ph { border-color: var(--color-border); }
body.cms-edit .aa-logos__grid .cms-list-item-add { grid-column: 1 / -1; }
@media (max-width: 900px) { .aa-logos__grid { grid-template-columns: repeat(2, 1fr); } }