/* Machines Grid Cards — desktop: 3 + 2 centered; tablet: 2; mobile: 1 (swipe with peek) */
:root{
  --card-bg: #FFFFFFD9; /* 85% white */
  --title-color: #1a1f1c;
  --muted: #6b7280;
  --body: #222a25;
  --radius: 18px;
  --grad: linear-gradient(217.63deg, #456F46 0%, #FFFFFF 50.45%, #D7DE27 99.93%);
  --hover-bg-fallback: rgba(255,255,255,0.85);
  --hover-bg: #FFFFFFD9;
  --gap: 28px;
}

.machines-wrap{
  max-width: 100%;
  font-family:"Host Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--body);
}

/* Base: grid so smaller breakpoints are simple */
.machines-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 28px;
  align-items: stretch;
}

/* ===== Desktop: switch to flex to center the last row (2 cards) ===== */
@media (min-width: 1101px){
  .machines-grid{
    display: flex;              /* override grid on desktop */
    flex-wrap: wrap;
    gap: 28px;
    justify-content: center;    /* centers the incomplete final row */
  }
  .machines-card{
    box-sizing: border-box;
    /* 3 per row: subtract 2 gaps from 100% then divide by 3 */
    flex: 0 1 calc((100% - 2 * var(--gap)) / 3);
  }
}

/* ===== Tablet: 2 per row */
@media (max-width: 1100px){
  .machines-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ===== Mobile: swipe horizontally with a subtle "peek" of next card ===== */
@media (max-width: 640px){
  .machines-grid{
    grid-template-columns: none;   /* override tablet's 2-col */
    grid-auto-flow: column;
    grid-auto-columns: 92%;        /* show some of the next card (tune 90–95%) */
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;

    /* gutters that preserve the peek */
    padding: 0 16px 12px;
    /* ensures snaps align with left gutter */
    scroll-padding-left: 16px;
    margin: 0;
  }
  .machines-grid::-webkit-scrollbar{ display:none; }
  .machines-grid{ scrollbar-width: none; }

  .machines-card{
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 22px;
  }
}

/* ===== Card ===== */
.machines-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;
  min-height: 100%;
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
  outline: none;
}
.machines-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);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}

/* Hover / focus */
@media (hover:hover){
  .machines-card:hover{
    background-color: var(--hover-bg-fallback);
    background-color: var(--hover-bg);
    box-shadow: 0 12px 32px rgba(0,0,0,.08);
    transform: translateY(-2px);
  }
}
.machines-card:focus-visible{
  box-shadow: 0 0 0 3px rgba(67,111,73,.35), 0 12px 28px rgba(0,0,0,.12);
}

/* (Optional) Image block if you enable the markup */
.machines-img-wrap{
  width:100%;
  min-height:120px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  margin-bottom:18px;
  overflow:hidden;
}
.machines-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);
  backface-visibility: hidden;
}
@media (hover:hover){
  .machines-card:hover .machines-img-wrap img,
  .machines-card:focus-within .machines-img-wrap img{
    transform: scale(1.06);
  }
}

/* Typography */
.machines-title{
  margin:0 0 8px;
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 30px;
  color: #616161;
  transition: color .2s ease;
}
.machines-units{
  margin:0 0 12px;
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 30px;
  color: #616161;
  transition: color .2s ease;
}
.machines-desc{
  margin:0;
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 30px;
  color: #616161;
  transition: color .2s ease;
}

/* Hover text colors */
@media (hover:hover){
  .machines-card:hover .machines-title,
  .machines-card:focus-within .machines-title,
  .machines-card:hover .machines-units,
  .machines-card:focus-within .machines-units,
  .machines-card:hover .machines-desc,
  .machines-card:focus-within .machines-desc{
    color: #00282B;
  }
}

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