/* ==========================================================================
   ARTICLE TOOLS — UI v1 component
   Layout, states and responsive geometry for "Какой инструмент подойдёт?".
   Text sizing remains owned by typography.css.
   ========================================================================== */

.article-tool-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.article-tool-card{
  position:relative;
  display:grid;
  grid-template-columns:156px minmax(0,1fr);
  grid-auto-rows:min-content;
  column-gap:14px;
  align-items:start;
  min-width:0;
  min-height:238px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
  scroll-margin-top:90px;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.article-tool-card--recommended{
  border-color:var(--line);
  border-left:3px solid var(--green);
  background:#fff;
}
.article-tool-card--warning{
  border-color:var(--line);
  border-left:3px solid #d34c4c;
  background:#fff;
}
.article-tool-card:hover{
  transform:translateY(-1px);
  border-color:#d2ddd8;
  box-shadow:0 8px 22px rgba(16,35,45,.045);
}
.article-tool-card.is-targeted{
  transform:translateY(-2px);
  border-color:#86b89e;
  box-shadow:0 0 0 3px rgba(7,147,90,.10),0 10px 24px rgba(24,67,52,.08);
}
.article-tool-card:focus{outline:none}
.article-tool-badge{
  grid-column:2;
  display:inline-flex;
  justify-self:start;
  align-self:start;
  margin-bottom:8px;
  padding:4px 6px;
  border:1px solid #cfe3d8;
  border-radius:999px;
  background:#fff;
  color:var(--green);
  font-size:var(--type-label);
  line-height:1.1;
  font-weight:900;
  letter-spacing:.3px;
}
.article-tool-badge--warning{
  border-color:#e7caca;
  background:#fff;
  color:#bf4141;
}
.article-tool-card>img{
  grid-column:1;
  grid-row:1 / span 6;
  width:156px;
  height:132px;
  margin:0;
  border-radius:8px;
  background:#f5f7f6;
  object-fit:cover;
}
.article-tool-card h3{
  grid-column:2;
  margin:0;
}
.article-tool-card>p{
  grid-column:2;
  margin:6px 0 0;
  color:#66777e;
}
.article-tool-card ul{
  grid-column:2;
  margin:10px 0 0;
  padding:0;
  list-style:none;
}
.article-tool-card li{
  display:grid;
  grid-template-columns:14px minmax(0,1fr);
  gap:6px;
  align-items:start;
  color:#5f7078;
}
.article-tool-card li+li{margin-top:5px}
.article-tool-card li:before{
  position:static;
  display:block;
  padding-top:1px;
  line-height:1.25;
  font-weight:900;
}
.article-tool-card li.is-pro:before{
  content:"✓";
  color:var(--green);
}
.article-tool-card li.is-con:before{
  content:"×";
  color:#d34c4c;
}
.article-tool-link{
  grid-column:2;
  display:inline-flex;
  justify-self:start;
  align-self:start;
  margin-top:11px;
  padding-top:11px;
  color:var(--green);
  font-size:var(--type-meta);
  line-height:var(--leading-small);
  font-weight:800;
}
.article-tool-link:hover{
  color:#087145;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* The kit guide shows complete cutting tools and mandrels. Cropping their
   ends would hide the distinction being explained. Keep native card geometry. */
#post-43 #article-tools .article-tool-card>img,
#post-44 #article-tools .article-tool-card>img,
#post-99 #article-tools .article-tool-card>img,
:is(#post-24,#post-25,#post-18) #article-tools .article-tool-card>img{
  object-fit:contain;
}

@media(max-width:1180px){
  .article-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Below tablet width, two tool columns make text unreadably narrow. */
@media(max-width:900px){
  .article-tool-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:700px){
  .article-tool-grid{
    grid-template-columns:1fr;
  }
  .article-tool-card{
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    column-gap:12px;
    align-items:start;
    min-height:0;
  }
  .article-tool-card>img{
    grid-column:1;
    grid-row:1 / span 5;
    width:112px;
    height:104px;
    margin:0;
  }
  .article-tool-card>.article-tool-badge{
    grid-column:2;
    margin-bottom:6px;
  }
  .article-tool-card h3,
  .article-tool-card>p,
  .article-tool-card ul,
  .article-tool-card .article-tool-link{
    grid-column:2;
  }
  .article-tool-card>p{margin-top:5px}
  .article-tool-card ul{margin-top:8px}
}

@media(max-width:430px){
  .article-tool-card{
    grid-template-columns:92px minmax(0,1fr);
  }
  .article-tool-card>img{
    width:92px;
    height:92px;
  }
}


/* #114: show the gripping mechanisms without cropping the tools. */
.article-topic-stud .article-tool-card>img{object-fit:contain;background:#f5f7f6}

/* #134: approved native card geometry, complete working profiles. */
#post-134 .article-tool-card>img{object-fit:contain;background:#f5f7f6}

/* #139: retain complete diagnostic parts and tools. */
#post-139 .article-tool-card>img{object-fit:contain;background:#f5f7f6}

/* #145: oil extractor uses approved UI v1 components. */
#post-145 .article-tool-card img{object-fit:contain}

/* #150: oil extractor uses approved UI v1 components. */
#post-150 .article-tool-card img{object-fit:contain}

/* #158 own imagery within UI v1; no shared redesign. */
#post-158 .article-tool-card img{object-fit:contain;background:#f5f8f6}