/* Similar results (board 6). The source-asset context band, the toolbar and the
   two-section layout. Cards, mosaic grid, type tabs and the Show more bar are
   reused from library.css. Photos and video keep square corners. */

.sim { display: flex; flex-direction: column; }

/* ---- Source asset band ------------------------------------------------ */
.sim-head {
  display: flex; align-items: center; gap: 28px;
  padding: 22px 24px;
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: 28px;
}
.sim-head__thumb { position: relative; flex-shrink: 0; width: 220px; height: 130px; background: var(--media-bg); display: block; overflow: hidden; }
.sim-head__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sim-head__doc { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text-quiet); background: var(--tone-solid); }
.sim-head__dur { position: absolute; left: 10px; bottom: 10px; padding: 3px 7px; background: var(--glass-dark); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: var(--on-media); font-size: 11px; border-radius: var(--radius); }
.sim-head__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sim-head__eyebrow { color: var(--red-text); }
.sim-head__title { margin: 0; font-family: var(--font-display); font-weight: 900; letter-spacing: -.02em; font-size: 30px; line-height: 1.1; }
.sim-head__sub { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-quiet); max-width: 520px; }
.sim-head__acts { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }

.btn-tonal { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border: 0; border-radius: var(--radius); background: var(--tone-1); color: var(--text); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; justify-content: flex-start; transition: background var(--t-hover) var(--ease-out); }
.btn-tonal:hover { background: var(--tone-2); }
.btn-tonal svg { stroke: currentColor; }

/* ---- Toolbar ---------------------------------------------------------- */
.sim-toolbar { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.sim-toolbar__spacer { flex: 1 1 auto; }
/* Scope note, not a control. Similar never crosses clients, so this just names
   the client these look alikes are from, in the brand red. */
.sim-scope { font-size: 13px; font-weight: 500; color: var(--red-text); white-space: nowrap; }

/* ---- Narrow ----------------------------------------------------------- */
@media (max-width: 760px) {
  .sim-head { flex-wrap: wrap; gap: 18px; }
  .sim-head__thumb { width: 160px; height: 96px; }
  .sim-head__acts { flex-direction: row; width: 100%; }
  .sim-head__acts .btn-tonal { flex: 1 1 auto; justify-content: center; }
  .sim-head__title { font-size: 26px; }
}
@media (max-width: 560px) {
  .sim-head__thumb { width: 100%; height: 150px; }
}