/* Wrapper */
.dh-services-wrap { width: 100%; }

/* -------- GRID --------
   Desktop: 3 στήλες, κάθε στήλη γεμίζει κάθετα (μέχρι --dh-rows).
   Tablet:  2 στήλες, στοίχιση "ένα κάτω από το άλλο".
   Mobile:  1 στήλη, "ένα κάτω από το άλλο".
*/
.dh-services-grid{
  --dh-columns: 3;
  --dh-rows: 4;
  --dh-item-h: 84px;
  --dh-thumb-w: 120px;
  --dh-gutter: 18px;                 /* ίσο κενό αριστερά/δεξιά */

  display: grid;

  /* Desktop: γεμίζει ΚΑΤΑ ΣΤΗΛΗ (column) */
  grid-auto-flow: column;
  grid-template-columns: repeat(var(--dh-columns), 1fr);
  grid-template-rows: repeat(var(--dh-rows), auto);
  gap: 18px;

  /* ΝΕΟ: ίδιο padding αριστερά & δεξιά */
  padding-inline: var(--dh-gutter);
  box-sizing: border-box;
}

/* Tablet: γυρνάμε σε "row" (ένα κάτω από το άλλο) με 2 στήλες */
@media (max-width: 1100px){
  .dh-services-grid{
    grid-auto-flow: row;                     /* πολύ σημαντικό για στοίχιση κάθετα */
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: 1 στήλη */
@media (max-width: 680px){
  .dh-services-grid{
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }
}

/* -------- CARD -------- (εικόνα αριστερά – τίτλος – βελάκι) */
.dh-card{
  display: grid;
  grid-template-columns: var(--dh-thumb-w) 1fr 28px;
  align-items: center;
  min-height: var(--dh-item-h);
  background: var(--dh-bg, #0a3a72);
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
  overflow: hidden;
}
.dh-card:hover{ transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.14); }

/* Αριστερό πλαίσιο εικόνας με “περιθώριο” */
.dh-thumb{
  height: calc(var(--dh-item-h) - 16px);
  width:  calc(var(--dh-thumb-w) - 16px);
  margin: 8px 12px 8px 8px;
  background: rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dh-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:8px; }
.dh-thumb-fallback{ width:100%; height:100%; background:rgba(255,255,255,.25); border-radius:8px; }

/* Τίτλος */
.dh-title{ font-size:18px; font-weight:700; letter-spacing:.1px; padding:0 8px; }

/* Βελάκι δεξιά */
.dh-arrow{ font-size:22px; margin-right:12px; opacity:.95; transition:transform .15s ease; }
.dh-card:hover .dh-arrow{ transform:translateX(3px); }

/* Footer με “Όλες οι υπηρεσίες”
   ΝΕΟ: ίδιο padding με το grid για να ευθυγραμμίζεται */
.dh-services-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-top:18px;
  padding-inline: var(--dh-gutter);
  box-sizing: border-box;
}
.dh-all{ display:inline-flex; align-items:center; gap:8px; font-weight:700; text-decoration:none; }
.dh-all .dh-arrow{ font-size:18px; }