/* 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;
  }
}

/* -------- ALIGNMENT (per-category) --------
   Αλλάζει πώς στοιχίζονται τα κουτιά, κυρίως όταν η τελευταία σειρά δεν είναι γεμάτη.
   dh-align-left είναι default και δεν αλλάζει τίποτα.
   Για center/right μεταβαίνουμε σε flex layout ώστε να επιδράσει το justify-content. */
.dh-services-grid.dh-align-center,
.dh-services-grid.dh-align-right{
  display: flex;
  flex-wrap: wrap;
  grid-auto-flow: unset;
  grid-template-columns: none;
  grid-template-rows: none;
}
.dh-services-grid.dh-align-center{ justify-content: center; }
.dh-services-grid.dh-align-right { justify-content: flex-end; }

/* Στο flex mode κάθε card πιάνει πλάτος 1/columns του container (αφαιρώντας gap & padding) */
.dh-services-grid.dh-align-center > .dh-card,
.dh-services-grid.dh-align-right  > .dh-card{
  flex: 0 0 calc(
    (100% - (var(--dh-gutter) * 2) - (18px * (var(--dh-columns) - 1)))
    / var(--dh-columns)
  );
  max-width: calc(
    (100% - (var(--dh-gutter) * 2) - (18px * (var(--dh-columns) - 1)))
    / var(--dh-columns)
  );
}

/* Tablet: 2 στήλες για center/right */
@media (max-width: 1100px){
  .dh-services-grid.dh-align-center > .dh-card,
  .dh-services-grid.dh-align-right  > .dh-card{
    flex: 0 0 calc((100% - (var(--dh-gutter) * 2) - 18px) / 2);
    max-width: calc((100% - (var(--dh-gutter) * 2) - 18px) / 2);
  }
}

/* Mobile: 1 στήλη — τα cards πιάνουν όλο το πλάτος, το alignment δεν έχει πρακτική σημασία */
@media (max-width: 680px){
  .dh-services-grid.dh-align-center > .dh-card,
  .dh-services-grid.dh-align-right  > .dh-card{
    flex: 0 0 calc(100% - (var(--dh-gutter) * 2));
    max-width: calc(100% - (var(--dh-gutter) * 2));
  }
}

/* -------- 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;
  flex-shrink: 0;
  box-sizing: border-box;
}
/* object-fit: contain — ολόκληρη εικόνα ορατή, χωρίς κόψιμο.
   Κεντράρεται και οριζόντια και κάθετα στο container. */
.dh-thumb img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}

/* -------- RESPONSIVE IMAGE / CARD LAYOUT -------- */

/* Tablet: λίγο μικρότερο thumb για να χωράει άνετα ο τίτλος */
@media (max-width: 1100px){
  .dh-services-grid{
    --dh-thumb-w: 96px;
  }
}

/* Mobile: ακόμα μικρότερο thumb, μικρότερο card height αν χρειάζεται,
   και μικρότερο title font για να χωράει σε στενές οθόνες */
@media (max-width: 680px){
  .dh-services-grid{
    --dh-thumb-w: 80px;
    --dh-item-h: 76px;
    --dh-gutter: 12px;
    gap: 12px;
  }
  .dh-card .dh-title{
    font-size: 16px;
    padding: 0 6px;
  }
  .dh-thumb{
    margin: 6px 8px 6px 6px;
  }
}

/* Πολύ μικρές οθόνες: ακόμα πιο συμπαγές layout */
@media (max-width: 380px){
  .dh-services-grid{
    --dh-thumb-w: 64px;
  }
  .dh-card .dh-title{
    font-size: 15px;
  }
}

/* Card χωρίς εικόνα: το grid του card γίνεται απλό flex container
   ώστε ο τίτλος να πιάνει όλο τον διαθέσιμο χώρο και να στοιχίζεται σωστά. */
.dh-card.dh-card--no-thumb{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 40px 10px 40px !important;
  position: relative !important;
}
.dh-card.dh-card--no-thumb .dh-title{
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  word-spacing: normal !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  display: block !important;
}
.dh-card.dh-card--no-thumb .dh-arrow{
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
.dh-card.dh-card--no-thumb:hover .dh-arrow{
  transform: translateY(-50%) translateX(3px) !important;
}

/* Τίτλος */
.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; }