/* ==========================================================================
   Ohron Industries — kaarten (icoon + titel)
   Geldt voor Divi Supreme card-modules én Divi Blurb-modules in:
     - 4-, 5- en 6-koloms rijen (.et_pb_row_4col / _5col / _6col)
     - elke rij met de CSS-class "ohron-cards"  (Rij → Geavanceerd → CSS-class)
   Gebruikt op: homepage "Onze giettechnieken", competenties "Onze mogelijkheden"
   Ingeladen via functions.php van het child theme
   ========================================================================== */

/* Kolommen even hoog, kaart vult de hele kolom.
   De Divi-kolommen hebben zelf een hover-instelling (rechthoekige schaduw +
   15px omhoog) die dubbelop kwam met het kaart-effect — die zetten we uit.
   Geldt voor NL, EN en DE: de vertaalde pagina's gebruiken dezelfde opbouw. */
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_column,
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_column:hover {
  display: flex !important;
  box-shadow: none !important;
  transform: none !important;
  background-color: transparent !important;
}

/* --- De kaart --- */
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 0 !important;
  background-image: none !important;          /* grijze gradient eruit */
  background-color: #fff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 15px !important;             /* zelfde radius als de rest van de site */
  padding: 30px 18px 24px !important;
  box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .28) !important;
  overflow: hidden !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}

:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card > .et_pb_module_inner,
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card .dsm_card_vb_outer_wrapper,
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card .dsm_card_vb_outer_wrapper > .et_pb_module_inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Rood accent bovenaan, groeit bij hover */
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 4px;
  background: #bb0007;
  border-radius: 0 0 4px 4px;
  transition: width .35s ease;
}
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card:hover::before { width: 60%; }

/* Geen extra schaduwen op de binnenste wrappers (Divi Supreme) */
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card .et_pb_module_inner,
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card .dsm_card_vb_outer_wrapper,
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card .dsm_card_wrapper,
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card .dsm_card_image_wrapper {
  box-shadow: none !important;
}

/* --- Icoon --- */
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card .dsm_card_image_wrapper,
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card .dsm_card_img {
  height: 110px !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: transform .35s ease;
}
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card:hover .dsm_card_img { transform: scale(1.06); }

/* --- Tekstblok --- */
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card .dsm_card_wrapper {
  padding: 18px 2px 0 !important;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* --- Titel: valt nu binnen de kaart en breekt netjes af --- */
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card .dsm_card_title {
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  color: #333 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  min-height: 2.6em;                 /* 1- en 2-regelige titels blijven uitgelijnd */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  hyphens: auto;                     /* NL-afbreking i.p.v. afkappen */
  -webkit-hyphens: auto;
  word-break: normal;
  overflow-wrap: break-word;
  transition: color .3s ease;
}

/* Rood streepje onder de titel */
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card .dsm_card_wrapper::after {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 3px;
  background: #bb0007;
  opacity: .35;
  transition: width .35s ease, opacity .35s ease;
}

/* --- Hover --- */
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card:hover {
  transform: translateY(-6px);
  border-color: rgba(187, 0, 7, .3) !important;
  box-shadow: 0 14px 26px -16px rgba(0, 0, 0, .32) !important;   /* één neutrale schaduw, geen rode tint */
}
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card:hover .dsm_card_title { color: #bb0007 !important; }
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card:hover .dsm_card_wrapper::after { width: 52px; opacity: 1; }

/* --- Responsive --- */
@media (max-width: 980px) {
  :is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card { padding: 26px 14px 20px !important; }
  :is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card .dsm_card_image_wrapper,
  :is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card .dsm_card_img { height: 92px !important; }
  :is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card .dsm_card_title { font-size: 13px !important; }
}
@media (max-width: 767px) {
  /* Twee kaarten naast elkaar i.p.v. vijf onder elkaar */
  :is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 14px; }
  :is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_column { width: calc(50% - 7px) !important; margin: 0 !important; }
  :is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card { padding: 22px 10px 18px !important; }
  :is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card .dsm_card_image_wrapper,
  :is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card .dsm_card_img { height: 72px !important; }
  :is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card .dsm_card_wrapper { padding: 12px 0 0 !important; }
  :is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card .dsm_card_title { font-size: 12px !important; letter-spacing: 0 !important; min-height: 2.6em; }
  :is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card .dsm_card_wrapper::after { margin-top: 8px; }
}

/* ==========================================================================
   Divi Blurb-modules in dezelfde rijen: zelfde kaart-look
   ========================================================================== */
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  background: #fff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 15px !important;
  padding: 30px 18px 24px !important;
  box-shadow: 0 6px 16px -12px rgba(0, 0, 0, .28) !important;
  overflow: hidden !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 4px;
  background: #bb0007;
  border-radius: 0 0 4px 4px;
  transition: width .35s ease;
}
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb:hover::before { width: 60%; }
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb .et_pb_blurb_content {
  max-width: none !important;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb .et_pb_main_blurb_image {
  height: 110px !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .35s ease;
}
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb .et_pb_main_blurb_image img,
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb .et_pb_main_blurb_image .et-pb-icon {
  max-height: 100px;
  width: auto;
  font-size: 64px !important;
  color: #bb0007 !important;
}
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb:hover .et_pb_main_blurb_image { transform: scale(1.06); }
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb .et_pb_blurb_container {
  padding: 18px 2px 0 !important;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb .et_pb_module_header,
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb .et_pb_module_header a {
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
  color: #333 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  transition: color .3s ease;
}
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb .et_pb_blurb_description:empty { display: none; }
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb .et_pb_blurb_container::after {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 3px;
  background: #bb0007;
  opacity: .35;
  transition: width .35s ease, opacity .35s ease;
}
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb:hover {
  transform: translateY(-6px);
  border-color: rgba(187, 0, 7, .3) !important;
  box-shadow: 0 14px 26px -16px rgba(0, 0, 0, .32) !important;
}
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb:hover .et_pb_module_header,
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb:hover .et_pb_module_header a { color: #bb0007 !important; }
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb:hover .et_pb_blurb_container::after { width: 52px; opacity: 1; }

/* Beschrijving (als een kaart die heeft) — voor beide moduletypes */
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .dsm_card .dsm_card_description:not(:empty),
:is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb .et_pb_blurb_description:not(:empty) {
  font-size: 14px;
  line-height: 1.55;
  color: #555;
  text-align: center;
  margin: 8px 0 0;
  padding: 0;
}

@media (max-width: 767px) {
  :is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb { padding: 22px 10px 18px !important; }
  :is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb .et_pb_main_blurb_image { height: 72px !important; }
  :is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb .et_pb_blurb_container { padding-top: 12px !important; }
  :is(.et_pb_row_4col, .et_pb_row_5col, .et_pb_row_6col, .ohron-cards) .et_pb_blurb .et_pb_module_header { font-size: 12px !important; letter-spacing: 0 !important; }
}