/* === tools-pills.css v1.1.0 — two-column pill list with marketing images, WCAG AA === */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

:root{
  --hp-text:#0f172a;
  --hp-muted:#475569;
  --hp-accent:#2563eb;
  --hp-border:#e2e8f0;
  --hp-bg:#ffffff;
  --hp-pill-bg:#ffffff;
  --hp-pill-hover:#f8fafc;
  --hp-radius:12px;
}

.hasan-tools{max-width:900px;margin-inline:auto;padding:12px}
.hasan-tools h1{margin:0 0 .25rem;letter-spacing:-.02em;line-height:1.15}
.hasan-tools .sub{margin:.25rem 0 1rem;color:var(--hp-muted)}

/* Two-column grid */
.tool-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:860px){.tool-list{grid-template-columns:1fr}}

/* Pill with image + content */
.tool-pill{
  display:flex; align-items:center; gap:12px;
  background:var(--hp-pill-bg);
  border:1px solid var(--hp-border);
  border-radius:var(--hp-radius);
  padding:12px 14px;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tool-pill:hover{background:var(--hp-pill-hover)}
.tool-pill:focus-within{outline:3px solid #111827;outline-offset:3px;box-shadow:0 6px 16px rgba(2,6,23,.06)}

/* Left thumbnail */
.tool-thumb{
  flex:0 0 auto;
  width:72px; height:72px;
  border-radius:10px;
  background:#f8fafc;
  border:1px solid var(--hp-border);
  display:grid; place-items:center;
  overflow:hidden;
}
.tool-thumb img{
  width:100%; height:100%;
  object-fit:contain;
  /* Prefer a 3:2-ish logo crop without warping */
  aspect-ratio:3/2;
}

/* Right content */
.tool-content{display:flex; align-items:center; gap:10px; min-width:0; flex:1}
.tool-name{
  color:var(--hp-accent); text-decoration:none; font-weight:700; white-space:nowrap; flex:0 0 auto;
}
.tool-name:hover{text-decoration:underline}
.tool-tag{
  color:var(--hp-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; font-size:.98rem;
}

/* Tiny link row under content, for multiple affiliate targets */
.tool-links{
  display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; flex:0 0 auto;
}
.tool-links a{
  font-size:.9rem; text-decoration:none; color:var(--hp-accent);
  background:#eef2ff; border:1px solid #e0e7ff; border-radius:999px; padding:4px 8px;
}
.tool-links a:hover{text-decoration:underline}

/* Mobile tightening */
@media (max-width:520px){
  .tool-pill{padding:10px 12px}
  .tool-thumb{width:60px;height:60px}
  .tool-links{display:none} /* optional: hide secondary links on very small screens */
}