/* =========================================================
   MNH V17 — VISUAL CONTENT REFINEMENT
   Builds on V16 without rewriting the locked master.
   Principle: clear product + full visual cell + controlled crop.
   ========================================================= */

/* 1. Home — two clear starting points. */
.network-example-card{
  grid-template-columns:minmax(205px,.47fr) minmax(0,.53fr)!important;
  min-height:154px!important;
}
.network-example-image{
  min-height:154px!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-color:#edf2f6!important;
}
.network-example-card:first-of-type .network-example-image{background-position:center 52%!important}
.network-example-card:nth-of-type(2) .network-example-image{background-position:center 52%!important}
.network-example-copy{padding:20px 22px!important}

/* 2. Model collection cards — use attractive full-scene images. */
.model-grid .model-card-media{
  min-height:350px!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:var(--card-focus,center)!important;
  background-color:#edf2f6!important;
}
.model-grid .model-card-premium{overflow:hidden!important}

/* 3. Usage pages — every recommended model card receives a visual. */
.visual-feature-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:20px!important;
}
.visual-feature-grid.visual-feature-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.visual-feature-grid .feature-card{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  padding:0 0 22px!important;
  overflow:hidden!important;
  border:1px solid #dce4ea!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 10px 28px rgba(6,28,52,.05)!important;
}
.feature-card-media{
  display:block!important;
  width:100%!important;
  aspect-ratio:16/10!important;
  overflow:hidden!important;
  background:#edf2f6!important;
}
.feature-card-media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:var(--feature-focus,center)!important;
}
.visual-feature-grid .feature-card>.num,
.visual-feature-grid .feature-card>h3,
.visual-feature-grid .feature-card>p,
.visual-feature-grid .feature-card>.ag-home-card-link{
  margin-left:22px!important;
  margin-right:22px!important;
}
.visual-feature-grid .feature-card>.num{margin-top:20px!important}
.visual-feature-grid .feature-card>h3{margin-top:14px!important}
.visual-feature-grid .feature-card>.ag-home-card-link{margin-top:auto!important;padding-top:12px!important}

/* 4. Finder result — compact visual beside the recommendation text. */
.finder-result-card{
  display:grid!important;
  grid-template-columns:minmax(190px,260px) minmax(0,1fr)!important;
  gap:0!important;
  overflow:hidden!important;
  padding:0!important;
  border-radius:20px!important;
}
.finder-result-media{
  display:block!important;
  min-height:190px!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-color:#eaf0f4!important;
}
.finder-result-copy{padding:26px 30px 28px!important}
.finder-result-copy h3{margin:4px 0 10px!important}
.finder-result-copy p{max-width:720px!important}

@media(max-width:1000px){
  .visual-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .network-example-card{grid-template-columns:1fr!important}
  .network-example-image{min-height:0!important;aspect-ratio:16/9!important}
  .visual-feature-grid,.visual-feature-grid.visual-feature-grid--two{grid-template-columns:1fr!important}
  .finder-result-card{grid-template-columns:1fr!important}
  .finder-result-media{min-height:0!important;aspect-ratio:16/9!important}
}