/* ==========================================================================
   ARTICLE CHOICES — UI v1 component
   Layout and hover styling of the “Какой у вас случай?” choice cards.
   Text sizing remains in typography.css; markup and behavior are unchanged.
   ========================================================================== */

.article-choice-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.article-choice-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.article-choice-card:hover{
  transform:translateY(-2px);
  border-color:#cadbd3;
  box-shadow:0 10px 24px rgba(24,67,52,.07);
}
.article-choice-card>img{
  width:100%;
  aspect-ratio:16/8.4;
  object-fit:cover;
}
.article-choice-card>div{
  display:flex;
  min-height:142px;
  flex-direction:column;
  padding:12px 13px 13px;
}
.article-choice-card h3{margin:0}
.article-choice-card p{
  margin:6px 0 0;
  color:#66777e;
}
.article-choice-link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  align-self:flex-start;
  margin-top:auto;
  padding-top:12px;
  color:var(--green);
  font-weight:800;
  text-decoration:none;
}
.article-choice-link:hover{
  color:#087145;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* The refreshed EPB card identifies the motor as well as the piston. */
:is(#post-24,#post-25,#post-18) .article-choice-card>img[src*="brake-epb-caliper"]{
  object-fit:contain;
  background:#f5f7f6;
}

@media(max-width:900px){
  .article-choice-grid{gap:11px}
}

@media(max-width:700px){
  .article-choice-grid{
    grid-template-columns:1fr;
  }
  .article-choice-card{
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
  }
  .article-choice-card>img{
    width:112px;
    height:100%;
    min-height:142px;
    aspect-ratio:auto;
  }
  .article-choice-card>div{min-height:142px}
}

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


/* Article #42: its three picture scenarios are authored in post content, while
 * UI v1 choice cards elsewhere live outside .entry-content. Respect explicit
 * image width/height attributes and make the embedded variant responsive.
 * Scoped to the post only; does not modify approved brake articles. */
#post-42 .entry-content #thread-scenarios .article-choice-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}
#post-42 .entry-content #thread-scenarios .article-choice-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
#post-42 .entry-content #thread-scenarios .article-choice-card>img{
  display:block;
  flex:0 0 auto;
  width:100%;
  height:146px;
  min-height:0;
  max-width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center;
}
#post-42 .entry-content #thread-scenarios .article-choice-card>div{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
  min-height:158px;
  padding:13px 13px 14px;
}
#post-42 .entry-content #thread-scenarios .article-choice-card h3{
  margin:0;
  font-size:15px;
  line-height:1.3;
}
#post-42 .entry-content #thread-scenarios .article-choice-card p{
  margin:7px 0 0;
  color:#66777e;
  font-size:13px;
  line-height:1.45;
}
#post-42 .entry-content #thread-scenarios .article-choice-link{
  margin-top:auto;
  padding-top:10px;
  font-size:12px;
  line-height:1.4;
  text-decoration:none;
}
#post-42 .entry-content #thread-next .article-tip-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  max-width:none;
  margin:14px 0 30px;
  padding:0;
  border:0;
  background:transparent;
}
#post-42 .entry-content #thread-next .article-tip-list li{
  display:block;
  min-width:0;
  margin:0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
#post-42 .entry-content #thread-next .article-tip-list li:before{
  display:none;
  content:none;
}
#post-42 .entry-content #thread-next .article-tip-list a{
  display:block;
  color:#415b53;
  font-size:13px;
  line-height:1.5;
  font-weight:400;
  text-decoration:none;
}
#post-42 .entry-content #thread-next .article-tip-list a strong{
  display:block;
  margin-bottom:5px;
  color:var(--ink);
  font-size:15px;
  line-height:1.3;
}
#post-42 .entry-content #thread-next .article-tip-list li:hover,
#post-42 .entry-content #thread-next .article-tip-list li:focus-within{
  border-color:#a7cabb;
}
#post-42 .entry-content #thread-next .article-tip-list a:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
}
@media(max-width:900px){
  #post-42 .entry-content #thread-scenarios .article-choice-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  #post-42 .entry-content #thread-scenarios .article-choice-card{
    display:grid;
    grid-template-columns:140px minmax(0,1fr);
    min-height:138px;
  }
  #post-42 .entry-content #thread-scenarios .article-choice-card>img{
    width:140px;
    height:100%;
    min-height:138px;
    max-height:none;
    aspect-ratio:auto;
  }
  #post-42 .entry-content #thread-scenarios .article-choice-card>div{
    min-height:138px;
    padding:12px 13px;
  }
  #post-42 .entry-content #thread-next .article-tip-list{
    grid-template-columns:1fr;
  }
}
@media(max-width:430px){
  #post-42 .entry-content #thread-scenarios .article-choice-card{
    grid-template-columns:104px minmax(0,1fr);
    min-height:144px;
  }
  #post-42 .entry-content #thread-scenarios .article-choice-card>img{
    width:104px;
    min-height:144px;
  }
  #post-42 .entry-content #thread-scenarios .article-choice-card>div{
    min-height:144px;
    padding:11px;
  }
  #post-42 .entry-content #thread-scenarios .article-choice-card h3{font-size:14px}
  #post-42 .entry-content #thread-scenarios .article-choice-card p{font-size:12px}
  #post-42 .entry-content #thread-scenarios .article-choice-link{font-size:12px}
}

/* Thread-repair article uses the SAME theme-rendered cards as the approved
   brake guide. The old hand-authored 3-column HTML is removed by migration. */
#post-42 #article-choices .article-choice-card>img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}
#post-42 #article-tools .article-tool-card>img{
  aspect-ratio:16/9;
  object-fit:cover;
}
@media(max-width:700px){
  #post-42 #article-choices .article-choice-grid,
  #post-42 #article-tools .article-tool-grid,
  #post-42 #base-instruction .article-step-grid{
    grid-template-columns:minmax(0,1fr);
    min-width:0;
  }
  #post-42 #article-choices .article-choice-card{
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    min-width:0;
    min-height:128px;
  }
  #post-42 #article-choices .article-choice-card>img{
    width:112px;
    height:100%;
    min-height:128px;
    aspect-ratio:auto;
    object-fit:cover;
  }
  #post-42 #article-choices .article-choice-card>div{
    min-width:0;
    min-height:128px;
    padding:11px 12px;
  }
  #post-42 #article-choices .article-choice-card h3{font-size:14px}
  #post-42 #article-choices .article-choice-card p{
    margin:5px 0 0;
    font-size:12px;
    line-height:1.4;
  }
  #post-42 #article-choices .article-choice-link{
    padding-top:6px;
    font-size:12px;
  }
}
@media(max-width:370px){
  #post-42 #article-choices .article-choice-card{grid-template-columns:98px minmax(0,1fr)}
  #post-42 #article-choices .article-choice-card>img{width:98px}
}
/* Two table types become understandable vertical records on phones rather than
   three microscopic columns or an invisible horizontal scrolling table. */
@media(max-width:700px){
  #post-42 .entry-content .thread-symptoms-table,
  #post-42 .entry-content .thread-methods-table{overflow:visible}
  #post-42 .entry-content .thread-symptoms-table table,
  #post-42 .entry-content .thread-methods-table table{
    display:block;
    width:100%;
    min-width:0;
    border:0;
    background:transparent;
  }
  #post-42 .entry-content .thread-symptoms-table thead,
  #post-42 .entry-content .thread-methods-table thead{display:none}
  #post-42 .entry-content .thread-symptoms-table tbody,
  #post-42 .entry-content .thread-methods-table tbody{display:grid;gap:9px}
  #post-42 .entry-content .thread-symptoms-table tr,
  #post-42 .entry-content .thread-methods-table tr{
    display:block;
    padding:12px 13px;
    border:1px solid #dde7e2;
    border-radius:9px;
    background:#fff;
  }
  #post-42 .entry-content .thread-symptoms-table td,
  #post-42 .entry-content .thread-methods-table td{
    display:block;
    width:100%;
    min-width:0;
    border:0;
    padding:3px 0;
    overflow-wrap:break-word;
    font-size:12.5px;
    line-height:1.5;
  }
  #post-42 .entry-content .thread-symptoms-table td:first-child,
  #post-42 .entry-content .thread-methods-table td:first-child{
    font-size:14px;
    font-weight:800;
    color:#102832;
  }
  #post-42 .entry-content .thread-symptoms-table td:nth-child(2):before{
    content:"Возможная причина: ";
    color:#61747b;
    font-weight:700;
  }
  #post-42 .entry-content .thread-symptoms-table td:nth-child(3):before{
    content:"Что проверить: ";
    color:#087145;
    font-weight:700;
  }
  #post-42 .entry-content .thread-methods-table td:nth-child(2):before{
    content:"Когда подходит: ";
    color:#61747b;
    font-weight:700;
  }
  #post-42 .entry-content .thread-methods-table td:nth-child(3):before{
    content:"Ограничение: ";
    color:#a35c38;
    font-weight:700;
  }
}


/* #24: show the complete caliper type, including the handbrake lever or EPB motor. */
#post-24 .article-choice-card>img{object-fit:contain;background:#f5f7f6}

/* #25: retain complete kit and EPB equipment in the native photo cards. */
#post-25 .article-choice-card>img{object-fit:contain;background:#f5f7f6}

/* #18: keep the handbrake mechanisms complete in native cards. */
#post-18 .article-choice-card>img{object-fit:contain;background:#f5f7f6}

/* #114: keep the complete stud and its available projection visible. */
.article-topic-stud .article-choice-card>img{object-fit:contain;background:#f5f7f6}

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

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

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

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

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