/* Machines Grid — One Row (4+ cards) */
.mgsix-wrap{
  /* variables scoped to the section */
  --card-bg: #ffffff;
  --radius: 18px;
  --gap: 28px;
  --grad: linear-gradient(217.63deg, #456F46 0%, #FFFFFF 50.45%, #D7E128 99.93%);
  --hover-bg: #FFFFFFD9;

  /* max-width: var(--container); */
  /* margin: 0 auto;
  padding: 48px 20px 72px; */
  font-family:"Host Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===== SINGLE-ROW LAYOUT ===== */
.mgsix-grid{
  display: grid;
  /* keep everything on one line */
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  /* if you have exactly 4 cards, these make them 4 equal columns on wide screens */
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap: var(--gap);

  /* enable horizontal scrolling on smaller viewports */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; /* Firefox */
}

/* Optional: nicer scrollbar on WebKit */
.mgsix-grid::-webkit-scrollbar{ height: 8px; }
.mgsix-grid::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.2); border-radius: 8px; }
.mgsix-grid::-webkit-scrollbar-track{ background: transparent; }

/* Card with rounded gradient border */
.mgsix-card{
  position: relative;
  background-color: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid transparent;
  background-clip: padding-box;
  padding: 26px 26px 30px;
  display:flex;
  flex-direction: column;
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
  outline: none;
  min-width: 260px; /* ensures single-row scroll behavior on narrow screens */
}
.mgsix-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  padding: 1px;                     /* border thickness */
  background: var(--grad);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);      /* Firefox-safe */
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}
.mgsix-card:hover,
.mgsix-card:focus-within{
  background-color: var(--hover-bg);
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
  transform: translateY(-2px);
}

.mgsix-img-wrap{
  width:100%;
  min-height:120px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  margin-bottom:18px;
  overflow:hidden; /* keeps the scaled image clipped inside */
}
.mgsix-img-wrap img{
  width:88%;
  height:auto;
  object-fit:contain;
  display:block;
  transform-origin: center bottom;
  transition: transform .35s cubic-bezier(.2,.6,.2,1);
  will-change: transform;
  backface-visibility: hidden;
}
.mgsix-card:hover .mgsix-img-wrap img,
.mgsix-card:focus-within .mgsix-img-wrap img{
  transform: scale(1.06);
}

/* Title — Space Grotesk 700 17/30 */
.mgsix-title{
  margin:0 0 8px;
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 17px;
  line-height: 30px;
  letter-spacing: 0;
  color: #616161;
  transition: color .2s ease;
}

/* Units — Space Grotesk 700 15/30 */
.mgsix-units{
  margin:0 0 12px;
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 15px;
  line-height: 30px;
  letter-spacing: 0;
  color: #616161;
  transition: color .2s ease;
}

/* Desc — Space Grotesk 400 17/30 */
.mgsix-desc{
  margin:0;
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 17px;
  line-height: 30px;
  letter-spacing: 0;
  color: #616161;
  transition: color .2s ease;
}

/* Hover text color */
.mgsix-card:hover .mgsix-title,
.mgsix-card:hover .mgsix-units,
.mgsix-card:hover .mgsix-desc,
.mgsix-card:focus-within .mgsix-title,
.mgsix-card:focus-within .mgsix-units,
.mgsix-card:focus-within .mgsix-desc{
  color:#00282B;
}

/* ===== Responsive: keep ONE ROW (remove previous wrap rules) ===== */
@media (max-width: 1100px){
  .mgsix-grid{
    /* still one row */
    grid-template-columns: repeat(4, minmax(260px, 1fr));
    gap: 24px;
  }
}
@media (max-width: 640px){
  .mgsix-wrap{ padding: 28px 16px 48px; }
  .mgsix-grid{ gap: 20px; }
  .mgsix-card{ padding: 22px; }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .mgsix-card, .mgsix-img-wrap img{ transition: none !important; }
}