/* pages/generators.css */

.genGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 860px){
  .genGrid{ grid-template-columns: 1fr; }
}

.genCard{
  display:block;
  text-decoration:none;
  color:inherit;
  padding:14px;
  border:2px solid rgba(0,0,0,.2);
  border-radius:16px;
  background: rgba(255,255,255,.66);
  box-shadow: 6px 6px 0 rgba(0,0,0,.18);
  transition: transform .12s ease, box-shadow .12s ease;
  position:relative;
  overflow:hidden;
}
.genCard:hover{
  transform: translate(-1px,-1px);
  box-shadow: 8px 8px 0 rgba(0,0,0,.18);
}

.genTop{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.genIcon{
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:12px;
  border:2px solid rgba(0,0,0,.22);
  background: rgba(255,255,255,.75);
  font-size:18px;
}
.genTitle{ font-weight:1000; letter-spacing:.2px; }
.genDesc{ font-size:13px; line-height:1.35; opacity:.92; margin-bottom:10px; }

.genMeta{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.chip{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  border:2px dashed rgba(0,0,0,.28);
  background: rgba(255,255,255,.55);
  font-weight:900;
  font-size:11px;
}

.genCta{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.genArrow{ font-weight:1000; opacity:.85; }