/* Aurora Materials Engineering — Phase 4A Main Page Rev 1.1
   Scope: materials-engineering/index.html only.
   Rule: production cards use the existing full-resolution standalone graphics,
   never enlarged crops from a full-page rendering screenshot. */

.phase4a-main .core-hero .app-hero-art{
  overflow:hidden;
  background:#020a14;
}
.phase4a-main .core-hero .app-hero-art > img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  padding:0 !important;
  transform:none !important;
}

/* 12 family cards: use the available desktop width so this area is two rows,
   not three tall rows. The 1600x520 hero artwork naturally fits the shallow
   card image band without enlarging a tiny screenshot crop. */
.phase4a-main #families .core-grid.cols-4{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:9px !important;
}
.phase4a-main #families .core-card{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
.phase4a-main #families .core-card > img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:3.08 / 1 !important;
  object-fit:cover !important;
  object-position:center center !important;
  background:#020b16;
  padding:0 !important;
  transform:none !important;
}
.phase4a-main #families .core-card > .core-card-body{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  padding:9px 10px 10px !important;
}
.phase4a-main #families .core-card-body h3{
  font-size:.78rem !important;
  line-height:1.08 !important;
  margin:0 0 5px !important;
}
.phase4a-main #families .core-card-body p{
  font-size:.60rem !important;
  line-height:1.28 !important;
  min-height:0 !important;
  margin:0 !important;
}
.phase4a-main #families .core-card-body a{
  font-size:.60rem !important;
  margin-top:auto !important;
  padding-top:8px !important;
}

/* Cross-project tiles keep the established structure but use the real
   high-resolution program imagery. */
.phase4a-main .core-domain-card > img{
  object-fit:cover !important;
  object-position:center center !important;
  padding:0 !important;
  transform:none !important;
}

@media (max-width:1320px){
  .phase4a-main #families .core-grid.cols-4{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
  .phase4a-main #families .core-card-body h3{font-size:.84rem !important;}
  .phase4a-main #families .core-card-body p,
  .phase4a-main #families .core-card-body a{font-size:.64rem !important;}
}
@media (max-width:820px){
  .phase4a-main #families .core-grid.cols-4{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media (max-width:520px){
  .phase4a-main #families .core-grid.cols-4{
    grid-template-columns:1fr !important;
  }
  .phase4a-main #families .core-card-body h3{font-size:.91rem !important;}
  .phase4a-main #families .core-card-body p,
  .phase4a-main #families .core-card-body a{font-size:.67rem !important;}
}