/* =========================================================
   Productvarianten – Dumil
   Groot scherm  ≥ 1280px   2 varianten naast elkaar
   Tablet/laptop 768–1279px 1 variant per rij
   Mobiel        ≤ 767px    1 variant per rij, compacte maten
   Knop "Meer specificaties" staat naast Artikelnr waar ruimte is
   (768–1279px en ≥ 1440px), anders onder de lijst.
   Iconen rechtsboven: desktop 2 × 2, tablet 4 naast elkaar,
   mobiel 4 onder elkaar.
   ========================================================= */

/* ---------- Raster met varianten ---------- */
/* Twee onafhankelijke kolommen: uitklappen duwt alleen de eigen kolom omlaag */
.dumil-variants {
  --dumil-row-space: 40px;    /* ruimte tussen kaarten onder elkaar */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  row-gap: var(--dumil-row-space);
  align-items: start;
}
.dumil-variants__col {
  display: flex;
  flex-direction: column;
  gap: var(--dumil-row-space);
  min-width: 0;
}

/* ---------- Eén variant ---------- */
.dumil-variant {
  --dumil-gap: 32px;          /* ruimte afbeelding ↔ tekst */
  --dumil-img-h: 216px;       /* minimale hoogte afbeelding */
  --dumil-bar-h: 36px;        /* minimale hoogte rode balk */
  --dumil-bar-gap: 24px;      /* ruimte rode balk ↔ specs */
  --dumil-icon: 36px;         /* grootte icoon */
  --dumil-icon-gap: 16px;     /* ruimte specs ↔ iconen */
  --dumil-icon-per-row: 2;    /* desktop: 2 × 2 */
  --dumil-pad-x: 12px;        /* tekstinspringing balk en specs */
  --dumil-row-gap: 12px;      /* ruimte tussen specregels */
  --dumil-col-gap: 24px;      /* ruimte label ↔ waarde */
  --dumil-spec-size: 16px;    /* lettergrootte specs */
  --dumil-label-w: 6.5em;     /* vaste labelkolom, zodat beide lijsten uitlijnen */

  display: grid;
  grid-template-columns: 2fr 4fr;
  gap: var(--dumil-gap);
  align-items: stretch;      /* fotovak even hoog als de tekst (dichtgeklapt) */
}

/* ---------- Afbeelding ----------
   Dichtgeklapt: even hoog als de tekstkant.
   Opengeklapt: het script zet de hoogte vast, dus het vak groeit niet mee. */
.dumil-variant__img {
  position: relative;
  min-height: var(--dumil-img-h);
  background: #fff;
  overflow: hidden;
}
.dumil-variant.is-open .dumil-variant__img {
  align-self: start;
}
.dumil-variant__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Tekstkant ---------- */
.dumil-variant__body {
  position: relative;         /* anker voor de knop */
  min-width: 0;
}

/* Rode balk – loopt door naar een tweede regel bij lange titels */
.dumil-variant__title {
  display: flex;
  align-items: center;
  min-height: var(--dumil-bar-h);
  margin: 0 0 var(--dumil-bar-gap);
  padding: 6px var(--dumil-pad-x);
  background: #D41920;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* Inhoud onder de balk: specs + iconen. Iconen hangen hieraan,
   dus ze staan altijd bij de eerste specregel, ongeacht de titelhoogte.
   --dumil-icon-count: aantal iconen (gezet door de PHP)
   --dumil-icon-per-row: max. iconen naast elkaar (per schermformaat)  */
.dumil-variant__content {
  --dumil-icon-n: min(var(--dumil-icon-count, 1), var(--dumil-icon-per-row));
  --dumil-icons-w: calc(var(--dumil-icon-n) * var(--dumil-icon) + (var(--dumil-icon-n) - 1) * 8px);
  --dumil-icon-space: calc(var(--dumil-icons-w) + var(--dumil-icon-gap));
  position: relative;
  padding: 0 var(--dumil-icon-space) 0 var(--dumil-pad-x);
}
.dumil-variant__content:not(:has(.dumil-variant__icons)) {
  --dumil-icon-space: 0px;
}

/* Iconen rechtsboven; breedte bepaalt hoeveel er naast elkaar passen */
.dumil-variant__icons {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;   /* onvolle rij (bijv. 3 iconen) rechts uitlijnen */
  gap: 8px;
  width: calc(var(--dumil-icons-w) + 1px); /* +1px tegen afrondingsfouten */
}
.dumil-variant__icon {
  display: block;
  width: var(--dumil-icon);
  height: var(--dumil-icon);
  object-fit: contain;
}

/* Specificaties */
.dumil-variant__specs {
  display: grid;
  grid-template-columns: var(--dumil-label-w) minmax(0, 1fr);
  gap: var(--dumil-row-gap) var(--dumil-col-gap);
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  font-size: var(--dumil-spec-size);
  font-weight: 400;
  line-height: 1.25;
  color: #fff;
}
.dumil-variant__specs dt,
.dumil-variant__specs dd {
  margin: 0;
}
.dumil-variant__specs dd {
  overflow-wrap: anywhere;
}
/* Extra specs: ingeklapt tot de knop wordt gebruikt */
.dumil-variant__specs:not(.is-open) .dumil-variant__extra {
  display: none;
}

/* ---------- Knop Meer / Minder specificaties ----------
   Desktop: op de laatste specregel (dicht: Artikelnr, open: laatste extra spec),
   rechts uitgelijnd met de rode balk.
   Tablet/mobiel: onder de lijst, want daar is de regel te smal.
   'button.' erbij om de knopstijl van Hello Elementor te overschrijven. */
button.dumil-variant__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: var(--dumil-bar-gap) 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
button.dumil-variant__toggle:hover,
button.dumil-variant__toggle:focus {
  background: none;
  color: #fff;
  text-decoration: underline;
}
.dumil-variant__toggle::after {
  /* Afgeronde chevron als SVG-masker; kleur volgt de tekstkleur */
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  transition: transform .2s ease;
}
.dumil-variant__toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}
.dumil-variant__toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.dumil-variant__toggle-open,
.dumil-variant__toggle[aria-expanded="true"] .dumil-variant__toggle-closed {
  display: none;
}
.dumil-variant__toggle[aria-expanded="true"] .dumil-variant__toggle-open {
  display: inline;
}

/* =========================================================
   Onder 1280px – 1 variant per rij
   Het fotovak krijgt een vaste breedte, anders wordt het te breed.
   ========================================================= */
@media (max-width: 1279px) {
  .dumil-variants {
    grid-template-columns: 1fr;
  }
  /* Kolommen opheffen; 'order' op de kaarten herstelt de volgorde 1, 2, 3 … */
  .dumil-variants__col {
    display: contents;
  }
  .dumil-variant {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}

/* =========================================================
   Knop op de regel van Artikelnr – alleen waar de tekstkant
   breed genoeg is (± 400px). Elders blijft hij onder de lijst.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1279px), (min-width: 1440px) {
  button.dumil-variant__toggle {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    line-height: calc(var(--dumil-spec-size) * 1.25); /* = regelhoogte specs */
  }
}

/* =========================================================
   Tablet – iconen in één rij naast elkaar
   ========================================================= */
@media (min-width: 768px) and (max-width: 1279px) {
  .dumil-variant {
    --dumil-icon-per-row: 4;
  }
}

/* =========================================================
   Tablet – iets minder ruimte tussen de kaarten
   ========================================================= */
@media (max-width: 1024px) {
  .dumil-variants {
    --dumil-row-space: 32px;
  }
}

/* =========================================================
   Mobiel – kleinere maten, afbeelding en tekst naast elkaar
   ========================================================= */
@media (max-width: 767px) {
  .dumil-variant {
    --dumil-gap: 16px;
    --dumil-img-h: 140px;
    --dumil-bar-h: 32px;
    --dumil-bar-gap: 12px;
    --dumil-icon: 28px;
    --dumil-icon-gap: 8px;
    --dumil-pad-x: 8px;
    --dumil-row-gap: 6px;
    --dumil-col-gap: 12px;
    --dumil-spec-size: 14px;
    --dumil-icon-per-row: 1;  /* mobiel: onder elkaar */

    grid-template-columns: minmax(0, 2fr) minmax(0, 4fr);
  }
  .dumil-variant__title {
    font-size: 14px;
  }
  .dumil-variant__specs {
    --dumil-label-w: 5.5em;
  }
}