/* ==========================================================================
   ARTICLE STEPS — UI v1 component
   Layout of visual step-by-step instructions and guide-variant state.
   Typography remains owned by typography.css.
   ========================================================================== */

.article-step-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
}
.article-step-card{
  position:relative;
  min-width:0;
  overflow:hidden;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
.article-step-number{
  position:absolute;
  z-index:1;
  left:8px;
  top:8px;
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  font-weight:900;
}
.article-step-card>img{
  width:100%;
  height:105px;
  margin-bottom:9px;
  border-radius:7px;
  object-fit:cover;
}
.article-step-card h3{margin:0}
.article-step-card p{
  margin:5px 0 0;
  color:#748188;
}

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

@media(max-width:700px){
  .article-step-grid{
    grid-template-columns:1fr;
  }
.article-step-grid{gap:0}
  .article-step-card{
    display:grid;
    grid-template-columns:96px minmax(0,1fr);
    grid-template-rows:auto 1fr;
    gap:4px 11px;
    padding:10px 0;
    border:0;
    border-top:1px solid var(--line);
    border-radius:0;
  }
  .article-step-card:first-child{border-top:0}
  .article-step-card>img{
    grid-column:1;
    grid-row:1 / span 2;
    width:96px;
    height:82px;
    margin:0;
  }
  .article-step-card h3{
    grid-column:2;
    grid-row:1;
  }
  .article-step-card p{
    grid-column:2;
    grid-row:2;
  }
  .article-step-number{
    left:5px;
    top:5px;
  }
}

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

@media (min-width:901px){
.article-variant-guide .article-step-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }
  .article-variant-guide .article-step-card{
    display:grid;
    grid-template-columns:150px minmax(0,1fr);
    grid-template-rows:auto 1fr;
    gap:5px 14px;
    min-height:158px;
    padding:12px;
  }
  .article-variant-guide .article-step-card>img{
    grid-column:1;
    grid-row:1 / span 2;
    width:150px;
    height:132px;
    margin:0;
  }
  .article-variant-guide .article-step-card h3{
    grid-column:2;
    grid-row:1;
    align-self:end;
  }
  .article-variant-guide .article-step-card p{
    grid-column:2;
    grid-row:2;
    margin-top:2px;
  }
  .article-variant-guide .article-step-number{
    left:18px;
    top:18px;
  }
}


/*
 * A step without an image cannot use the photo-overlay badge. Keep its
 * number in normal grid flow beside the heading, never over the text.
 * Steps with photos keep the original UI v1 badge and positioning.
 */
.article-step-card.article-step-card--text-only{
  display:grid;
  grid-template-columns:27px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:9px;
  row-gap:8px;
  align-content:start;
  padding:13px 12px;
}
.article-step-card--text-only .article-step-number{
  position:static;
  z-index:auto;
  grid-column:1;
  grid-row:1;
  width:27px;
  height:27px;
  flex-shrink:0;
  align-self:center;
}

/* Show the gauge diagrams and complete measuring tools without cropped edges. */
#post-99 .article-step-card>img,
:is(#post-24,#post-25,#post-18) .article-step-card>img{object-fit:contain}
.article-step-card.article-step-card--text-only h3{
  grid-column:2;
  grid-row:1;
  align-self:center;
  min-width:0;
  margin:0;
  overflow-wrap:break-word;
}
.article-step-card.article-step-card--text-only p{
  grid-column:1 / -1;
  grid-row:2;
  min-width:0;
  margin:0;
  overflow-wrap:break-word;
}
@media (max-width:700px){
  .article-step-card.article-step-card--text-only{
    margin-bottom:9px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:10px;
  }
  .article-step-card.article-step-card--text-only:last-child{
    margin-bottom:0;
  }
}


/* #24 diagnostic checks use the native text-only cards, without repeated photos. */
@media(min-width:701px){
  #post-24 .article-step-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}

/* #25 purchase checklist: readable native text cards, two columns then one. */
@media(min-width:701px){
  #post-25 .article-step-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}

/* #114 selection checklist uses the approved text-only cards. */
@media(min-width:701px){.article-topic-stud .article-step-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}

/* Exact educational diagrams must remain fully visible inside the native photo box. */
#post-121 .article-step-card>img[src*="stud-how-lower-nut-step"],
#post-127 .article-step-card>img{object-fit:contain;background:#f5f8f6}

/* Reserve a top strip for the existing number badge, clear of diagram labels. */
#post-121 .article-step-card>img[src*="stud-how-lower-nut-step"],
#post-127 .article-step-card>img[src*="extractor-bore-step"]{box-sizing:border-box;padding-top:30px}

/* #134: approved native card geometry, complete working profiles. */
@media(min-width:701px){#post-134 .article-step-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
#post-134 .article-step-card>img{object-fit:contain;background:#f5f8f6}

/* #139: readable checks, two columns then the existing mobile single column. */
@media(min-width:701px){#post-139 .article-step-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
#post-139 .article-step-card>img{object-fit:contain;background:#f5f8f6}

/* #145: oil extractor uses approved UI v1 components. */
#post-145 .article-step-card img{object-fit:contain}
@media(min-width:701px){#post-145 .article-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* #150: oil extractor uses approved UI v1 components. */
#post-150 .article-step-card img{object-fit:contain}
@media(min-width:701px){#post-150 .article-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* #158 own imagery within UI v1; no shared redesign. */
#post-158 .article-step-card img{object-fit:contain;background:#f5f8f6}
@media(min-width:701px){#post-158 .article-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* #165: complete diagrams, two columns then existing mobile single column. */
#post-165 .article-step-card img{object-fit:contain;background:#f5f8f6}
@media(min-width:701px){#post-165 .article-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* #170: complete diagrams, two columns then existing mobile single column. */
#post-170 .article-step-card img{object-fit:contain;background:#f5f8f6}
@media(min-width:701px){#post-170 .article-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* #174: own diagrams and panoramic HERO within approved UI v1. */
#post-174 .article-step-card img{object-fit:contain;background:#f5f8f6}
@media(min-width:701px){#post-174 .article-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Contour gauge: diagrams within approved UI v1. */
.article-contour-gauge .article-step-card img{object-fit:contain;background:#f5f8f6}
@media(min-width:701px){.article-contour-gauge .article-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Silicone spatula: existing panoramic HERO and contained step components. */
.article-silicone-spatula .article-step-card img{object-fit:contain;background:#f5f8f6}
@media(min-width:701px){.article-silicone-spatula .article-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Silicone joint guide: approved article components, own scope only. */
.article-silicone-joint .article-step-card img{object-fit:contain;background:#f5f8f6}
@media(min-width:701px){.article-silicone-joint .article-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Sealant gun selection: approved article components, own scope only. */
.article-sealant-gun .article-step-card img{object-fit:contain;background:#f5f8f6}
@media(min-width:701px){.article-sealant-gun .article-step-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}