/* remove the clamp WP adds on direct children */
.is-layout-constrained > .dotbloom-grid {
  max-width: none !important;

}



/* Toate cutiile au aceeași înălțime */

.dotbloom-grid { --box-h: clamp(220px, 24vw, 320px); }
.dotbloom-box  { height: var(--box-h); min-height: var(--box-h); box-sizing: border-box; }


.dotbloom-box {
  min-height: var(--box-h);
  height: var(--box-h);      /* forțează egalizarea */
}




/* Container grid: 2 columns on desktop, 1 on small screens */
.dotbloom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 80vw !important;
    max-width: 1200px;
    margin: 0 auto 40px;

}

/* Yellow boxes */
.dotbloom-box {

  border-radius: 12px;
  padding: 20px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dotbloom-box h3 {
  margin: 0 0 8px;

}

.dotbloom-grid {
  /* poți regla rapid din variabile */
  --title-size: clamp(18px, 1.5vw, 252px);  /* titlu */
  --text-size:  clamp(14px, .6vw + 10px, 16px); /* paragraf */

}

.dotbloom-grid .dotbloom-box h3 {
  font-size: var(--title-size);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: .2px;
  margin: 0 0 10px; /* un pic mai mult spațiu sub titlu */
}

.dotbloom-grid .dotbloom-box p {
  font-size: var(--text-size);
  line-height: 1.5;
  width: 80%;
}

.dotbloom-box p {
  margin: 0;
  line-height: 1.4;
  opacity: 0.95;
}


/* =========================
   Aliniere: stânga/dreapta pe 2 coloane
   ========================= */

/* Cutiile din stânga (1,3,5,...) */
.dotbloom-box:nth-child(odd) {
  text-align: left;
  align-items: flex-start; /* aliniează conținutul în stânga în layout-ul flex */
}

/* Cutiile din dreapta (2,4,6,...) */
.dotbloom-box:nth-child(even) {
  text-align: right;
  align-items: flex-end;   /* aliniează conținutul în dreapta */
}



/* =========================
   Thin modern side lines (accent #d8a009)
   ========================= */
.dotbloom-grid { --accent: #2596be; --line: 1.5px; }

.dotbloom-box {
  position: relative;
  border: 0;                /* no old borders */
  background: transparent;  /* keep your bg if you set one elsewhere */
}

/* shared pseudo-elements */
.dotbloom-box::before,
.dotbloom-box::after {
  content: "";
  position: absolute;
  background: var(--accent);
  pointer-events: none;
}

/* 1) top + left */
.dotbloom-box:nth-child(1)::before { /* top line */
  left: 0; right: 0; top: 0; height: 1px;
}
.dotbloom-box:nth-child(1)::after {  /* left line */
  left: 0; top: 0; bottom: 0; width: 1px;
}

/* 2) top + right */
.dotbloom-box:nth-child(2)::before { /* top line */
  left: 0; right: 0; top: 0; height: 1px;
}
.dotbloom-box:nth-child(2)::after {  /* right line */
  right: 0; top: 0; bottom: 0; width: 1px;
}

/* 3) left + bottom */
.dotbloom-box:nth-child(3)::before { /* bottom line */
  left: 0; right: 0; bottom: 0; height: 1px;
}
.dotbloom-box:nth-child(3)::after {  /* left line */
  left: 0; top: 0; bottom: 0; width: 1px;
}

/* 4) right + bottom */
.dotbloom-box:nth-child(4)::before { /* bottom line */
  left: 0; right: 0; bottom: 0; height: 1px;
}
.dotbloom-box:nth-child(4)::after {  /* right line */
  right: 0; top: 0; bottom: 0; width: 1px;
}



/* More space between the two columns */
.dotbloom-grid {
  column-gap: 0; /* center gap grows with viewport */
  row-gap: 0px;                        /* keep row gap as-is */
}




/* ===== Corner Flower (cutia 1) — versiune SVG simetrică ===== */
.dotbloom-box:first-child { position: relative; overflow: hidden; }
.dotbloom-box:first-child { --flower-size: clamp(240px, 52%, 380px); }

.dotbloom-box:first-child .flower-corner {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 260px;
  height: 260px;
  pointer-events: none;
  z-index: 0;
}

.dotbloom-box:first-child .flower-corner svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ține conținutul deasupra florii */
.dotbloom-box:first-child > h3,
.dotbloom-box:first-child > p { position: relative; z-index: 2; }

/* =========================
   Animatie floare (cutia 1)
   ========================= */

/* control rapid */
.dotbloom-box:first-child{
  --open-dur: 450ms;          /* deschidere rapidă */
  --close-dur: 1500ms;        /* închidere mai lentă */
  --stagger: 140ms;           /* întârziere între petale la deschidere */
  --hold: 1000ms;             /* 1s după ce ieși cu mouse-ul */
  --closed-angle: -150deg;

  --open-center-dur: 320ms;   /* centru – deschidere rapidă */
  --close-center-dur: 1000ms; /* centru – închidere mai lentă */
}

/* Petalele sunt grupuri <g>; animăm cu transform + opacity */
.dotbloom-box:first-child .petal{
  transform-box: view-box;
  transform-origin: 0 0;
  transform: rotate(var(--closed-angle)) scale(1, 0.05);
  opacity: 0; /* ascunse complet înainte de hover */
  transition:
    transform var(--close-dur) cubic-bezier(.2,.8,.2,1),
    opacity   var(--close-dur) cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--hold); /* întârziere doar la închidere (hover-out) */
  will-change: transform, opacity;
}

/* stagger doar pentru deschidere */
.dotbloom-box:first-child .p1 { --open-delay: 0ms; }
.dotbloom-box:first-child .p2 { --open-delay: calc(var(--stagger) * 1); }
.dotbloom-box:first-child .p3 { --open-delay: calc(var(--stagger) * 2); }

/* OPEN state: la hover – pornește imediat, cu staggers */
.dotbloom-box:first-child.is-open .petal { 
  transform: rotate(var(--angle)) scale(1, 1);
  opacity: 1;
  transition-duration: var(--open-dur);
  transition-delay: var(--open-delay);
}

/* Centrul – intră repede, iese după hold și mai lent */
.dotbloom-box:first-child .flower-center{
  transform-origin: center;
  transform: scale(0.2);
  opacity: 0;
  transition:
    transform var(--close-center-dur) cubic-bezier(.2,.8,.2,1),
    opacity   var(--close-center-dur) ease;
  transition-delay: var(--hold); /* 1s hold la închidere */
  will-change: transform, opacity;
}

/* OPEN pentru centru: la hover */
.dotbloom-box:first-child.is-open .flower-center{
  transform: scale(1);
  opacity: 1;
  transition-duration: var(--open-center-dur);
  transition-delay: 100ms;
}

/* ===== Corner Flower (cutia 2) — jos-stânga ===== */
.dotbloom-box:nth-child(2) { position: relative; overflow: hidden; }
.dotbloom-box:nth-child(2) { --flower-size: clamp(240px, 52%, 380px); }

.dotbloom-box:nth-child(2) .flower-corner{
  position: absolute;
  left: 0;                 /* jos-stânga */
  bottom: 0;
  width: 260px;
  height: 260px;
  pointer-events: none;
  z-index: 0;
}

.dotbloom-box:nth-child(2) .flower-corner svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* ține conținutul deasupra florii */
.dotbloom-box:nth-child(2) > h3,
.dotbloom-box:nth-child(2) > p { position: relative; z-index: 2; }

/* =========================
   Animatie floare (cutia 2)
   ========================= */
.dotbloom-box:nth-child(2){
  --open-dur: 450ms;          /* deschidere rapidă */
  --close-dur: 1500ms;        /* închidere mai lentă */
  --stagger: 140ms;           /* întârziere între petale la deschidere */
  --hold: 1000ms;             /* 1s după hover-out */
  --closed-angle: -150deg;

  --open-center-dur: 320ms;   /* centru – deschidere rapidă */
  --close-center-dur: 1000ms; /* centru – închidere mai lentă */
}

/* petale: ascunse pre-hover + anim transform/opacity */
.dotbloom-box:nth-child(2) .petal{
  transform-box: view-box;
  transform-origin: 0 0;
  transform: rotate(var(--closed-angle)) scale(1, 0.05);
  opacity: 0;
  transition:
    transform var(--close-dur) cubic-bezier(.2,.8,.2,1),
    opacity   var(--close-dur) cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--hold);   /* întârziere doar la închidere */
  will-change: transform, opacity;
}

/* stagger doar la deschidere */
.dotbloom-box:nth-child(2) .p1 { --open-delay: 0ms; }
.dotbloom-box:nth-child(2) .p2 { --open-delay: calc(var(--stagger) * 1); }
.dotbloom-box:nth-child(2) .p3 { --open-delay: calc(var(--stagger) * 2); }

/* OPEN la hover (intrare) */
.dotbloom-box:nth-child(2).is-open .petal{
  transform: rotate(var(--angle)) scale(1, 1);
  opacity: 1;
  transition-duration: var(--open-dur);
  transition-delay: var(--open-delay);
}

/* centru: invizibil pre-hover, iese după hold, mai lent */
.dotbloom-box:nth-child(2) .flower-center{
  transform-origin: center;
  transform: scale(0.2);
  opacity: 0;
  transition:
    transform var(--close-center-dur) cubic-bezier(.2,.8,.2,1),
    opacity   var(--close-center-dur) ease;
  transition-delay: var(--hold);
  will-change: transform, opacity;
}

.dotbloom-box:nth-child(2).is-open .flower-center{
  transform: scale(1);
  opacity: 1;
  transition-duration: var(--open-center-dur);
  transition-delay: 100ms;
}

.dotbloom-box:first-child,
.dotbloom-box:nth-child(2) ,
.dotbloom-box:nth-child(3), 
.dotbloom-box:nth-child(4) {
  border-radius: 0 !important;
}




/* ===== Corner Flower (cutia 3) — dreapta-sus, deschidere R→L, petale „cu susul în jos” ===== */
.dotbloom-box:nth-child(3) { position: relative; overflow: hidden; }
.dotbloom-box:nth-child(3) { --flower-size: clamp(240px, 52%, 380px); }

.dotbloom-box:nth-child(3) .flower-corner{
  position: absolute;
  right: 0;               /* DREAPTA */
  top: 0;                 /* SUS */
  width: 260px;
  height: 260px;
  pointer-events: none;
  z-index: 0;
}

.dotbloom-box:nth-child(3) .flower-corner svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* conținutul peste floare */
.dotbloom-box:nth-child(3) > h3,
.dotbloom-box:nth-child(3) > p { position: relative; z-index: 2; }

/* timpi identici cu box 1/2 (poți ajusta) */
.dotbloom-box:nth-child(3){
  --open-dur: 450ms;
  --close-dur: 1500ms;
  --stagger: 140ms;
  --hold: 1500ms;             /* dacă vrei 1.5s la hover-out by default */
  --closed-angle: -150deg;

  --open-center-dur: 320ms;
  --close-center-dur: 1000ms;
}

/* petalele: invizibile înainte de hover; animăm transform + opacity */
.dotbloom-box:nth-child(3) .petal{
  transform-box: view-box;
  transform-origin: 0 0;  /* pivotul rămâne în colțul ancorat */
  transform: rotate(var(--closed-angle)) scale(1, 0.05);
  opacity: 0;
  transition:
    transform var(--close-dur) cubic-bezier(.2,.8,.2,1),
    opacity   var(--close-dur) cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--hold);   /* întârziere doar la închidere */
  will-change: transform, opacity;
}

/* stagger DOAR la deschidere: p1 -> p2 -> p3 (dreapta->stânga) */
.dotbloom-box:nth-child(3) .p1 { --open-delay: 0ms; }
.dotbloom-box:nth-child(3) .p2 { --open-delay: calc(var(--stagger) * 1); }
.dotbloom-box:nth-child(3) .p3 { --open-delay: calc(var(--stagger) * 2); }

/* OPEN când e activ .is-open (controlat de JS-ul tău) */
.dotbloom-box:nth-child(3).is-open .petal{
  transform: rotate(var(--angle)) scale(1, 1);
  opacity: 1;
  transition-duration: var(--open-dur);
  transition-delay: var(--open-delay);
}

/* centrul: la fel ca la celelalte cutii */
.dotbloom-box:nth-child(3) .flower-center{
  transform-origin: center;
  transform: scale(0.2);
  opacity: 0;
  transition:
    transform var(--close-center-dur) cubic-bezier(.2,.8,.2,1),
    opacity   var(--close-center-dur) ease;
  transition-delay: var(--hold);
  will-change: transform, opacity;
}
.dotbloom-box:nth-child(3).is-open .flower-center{
  transform: scale(1);
  opacity: 1;
  transition-duration: var(--open-center-dur);
  transition-delay: 100ms;
}




/* ===== Corner Flower (cutia 4) — stânga-sus ===== */
.dotbloom-box:nth-child(4) { position: relative; overflow: hidden; }
.dotbloom-box:nth-child(4) { --flower-size: clamp(240px, 52%, 380px); }

.dotbloom-box:nth-child(4) .flower-corner{
  position: absolute;
  left: 0;   /* STÂNGA */
  top: 0;    /* SUS */
  width: 260px;
  height: 260px;
  pointer-events: none;
  z-index: 0;
}

.dotbloom-box:nth-child(4) .flower-corner svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* conținutul peste floare */
.dotbloom-box:nth-child(4) > h3,
.dotbloom-box:nth-child(4) > p { position: relative; z-index: 2; }

/* timpi (armonizați cu cutiile 1-3) */
.dotbloom-box:nth-child(4){
  --open-dur: 450ms;          /* deschidere rapidă */
  --close-dur: 1500ms;        /* închidere mai lentă */
  --stagger: 140ms;           /* întârziere între petale la deschidere */
  --hold: 1500ms;             /* ~1.5s după hover-out (dacă nu suprascrie JS-ul) */
  --closed-angle: -150deg;

  --open-center-dur: 320ms;
  --close-center-dur: 1000ms;
}

/* petale: invizibile pre-hover + anim transform/opacity */
.dotbloom-box:nth-child(4) .petal{
  transform-box: view-box;
  transform-origin: 0 0;
  transform: rotate(var(--closed-angle)) scale(1, 0.05);
  opacity: 0;
  transition:
    transform var(--close-dur) cubic-bezier(.2,.8,.2,1),
    opacity   var(--close-dur) cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--hold);   /* întârziere doar la închidere */
  will-change: transform, opacity;
}

/* stagger doar la deschidere (p1 -> p2 -> p3) */
.dotbloom-box:nth-child(4) .p1 { --open-delay: 0ms; }
.dotbloom-box:nth-child(4) .p2 { --open-delay: calc(var(--stagger) * 1); }
.dotbloom-box:nth-child(4) .p3 { --open-delay: calc(var(--stagger) * 2); }

/* OPEN când .is-open e prezent (JS-ul tău îl adaugă/șterge) */
.dotbloom-box:nth-child(4).is-open .petal{
  transform: rotate(var(--angle)) scale(1, 1);
  opacity: 1;
  transition-duration: var(--open-dur);
  transition-delay: var(--open-delay);
}

/* centrul: intră/iese ca la celelalte cutii */
.dotbloom-box:nth-child(4) .flower-center{
  transform-origin: center;
  transform: scale(0.2);
  opacity: 0;
  transition:
    transform var(--close-center-dur) cubic-bezier(.2,.8,.2,1),
    opacity   var(--close-center-dur) ease;
  transition-delay: var(--hold);
  will-change: transform, opacity;
}
.dotbloom-box:nth-child(4).is-open .flower-center{
  transform: scale(1);
  opacity: 1;
  transition-duration: var(--open-center-dur);
  transition-delay: 100ms;
}
/* ===== Corner Flower (cutia 4) — stânga-sus ===== */

/* 1) unghi de închidere potrivit pentru colțul stânga–sus */
.dotbloom-box:nth-child(4){
  --open-dur: 450ms;
  --close-dur: 1500ms;
  --stagger: 140ms;
  --hold: 1500ms;
  /* înainte era -150deg; asta face să pară că „fuge” din colț */
  --closed-angle: 45deg;   /* ⇦ încearcă 30–60deg dacă vrei alt feel */
  --open-center-dur: 320ms;
  --close-center-dur: 1000ms;
}

/* 2) centrează fix pe colț: originul în (0,0) al viewBox-ului */
.dotbloom-box:nth-child(4) .flower-center{
  transform-box: view-box;   /* origin & transform pe coordonatele SVG */
  transform-origin: 0 0;     /* exact colțul stânga–sus */
  transform: scale(0.2);
  opacity: 0;
  transition:
    transform var(--close-center-dur) cubic-bezier(.2,.8,.2,1),
    opacity   var(--close-center-dur) ease;
  transition-delay: var(--hold);
  will-change: transform, opacity;
}




.dotbloom-box:first-child  .flower-center { /* bottom-right */
    transform-box: view-box; transform-origin: 200px 200px;
  }
  .dotbloom-box:nth-child(2) .flower-center { /* bottom-left */
    transform-box: view-box; transform-origin: 0 200px;
  }
  .dotbloom-box:nth-child(3) .flower-center { /* top-right */
    transform-box: view-box; transform-origin: 200px 0;
  }
  .dotbloom-box:nth-child(4) .flower-center { /* top-left */
    transform-box: view-box; transform-origin: 0 0;
  }

  /* make the transform math stable on GPU (prevents sub-pixel snap at end) */
  .dotbloom-box .petal,
  .dotbloom-box .flower-center {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
  }

  /* keep transitions but force the same matrix pre/post animation */
  .dotbloom-box .petal {
    transform: translateZ(0) rotate(var(--closed-angle)) scale(1, 0.05);
  }
  .dotbloom-box.is-open .petal {
    transform: translateZ(0) rotate(var(--angle)) scale(1, 1);
  }
  .dotbloom-box .flower-center { transform: translateZ(0) scale(0.2); }
  .dotbloom-box.is-open .flower-center { transform: translateZ(0) scale(1); }

  .dotbloom-box::before,
  .dotbloom-box::after {
    content: none !important;
    background: transparent !important; /* just in case */
    width: 0 !important;
    height: 0 !important;
  }







/* =========================
   MOBILE: 1 coloană, fără spațiu între cutii, floarea în colț dreapta-sus (cutia 2)
   ========================= */
@media (max-width: 1040px) {
  /* slower opening on mobile */
  .dotbloom-box:nth-child(1),
  .dotbloom-box:nth-child(2),
  .dotbloom-box:nth-child(3),
  .dotbloom-box:nth-child(4) {
    --open-dur: 2500ms;
    --open-center-dur: 1000ms;
    --stagger: 220ms;
    padding: 0;
    height: fit-content !important;
    padding-top: 60px !important;
  }

  /* remove thin side lines + glue boxes */
  .dotbloom-box::before,
  .dotbloom-box::after { content: none !important; }
  .dotbloom-grid {
    gap: 0;
    column-gap: 0;
    row-gap: 0;
    --accent: transparent;
  }
  .dotbloom-box {
    width: 100%;
    margin: 0;
    border-radius: 0 !important;
  }
  .dotbloom-box > :first-child { margin-top: 0; }
  .dotbloom-box > :last-child  { margin-bottom: 0; }

  /* align text like before (1–2 left, 3–4 right) */
  .dotbloom-box:nth-child(1),
  .dotbloom-box:nth-child(2) { text-align: left;  align-items: flex-start; }
  .dotbloom-box:nth-child(3),
  .dotbloom-box:nth-child(4) { text-align: right; align-items: flex-end; }

  /* ===== Box 2: move flower to TOP-RIGHT without rotating the SVG ===== */
  .dotbloom-box:nth-child(2) .flower-corner { right: 0; top: 0; left: auto; bottom: auto; }
  .dotbloom-box:nth-child(2) .flower-corner svg { transform: none !important; }
  /* original <g> has translate(0,200); override with the exact corner we want */
  .dotbloom-box:nth-child(2) .flower-corner svg > g {
    transform-box: view-box;
    transform-origin: 0 0;
    transform: translate(200px, 0px);
  }
  /* lock center scaling to the corner (prevents post-animation nudge) */
  .dotbloom-box:nth-child(2) .flower-center {
    transform-box: view-box;
    transform-origin: 0 0;
  }
  /* angles for opening from top-right inward */
  .dotbloom-box:nth-child(2) .flower-corner .p1 { --angle: -180deg !important; }
  .dotbloom-box:nth-child(2) .flower-corner .p2 { --angle: -135deg !important; }
  .dotbloom-box:nth-child(2) .flower-corner .p3 { --angle:  -90deg !important; }

  /* ===== Box 3: move flower to BOTTOM-LEFT without rotating the SVG ===== */
  .dotbloom-box:nth-child(3) .flower-corner { left: 0; bottom: 0; right: auto; top: auto; }
  .dotbloom-box:nth-child(3) .flower-corner svg { transform: none !important; }
  /* original <g> has translate(200,0); override to bottom-left */
  .dotbloom-box:nth-child(3) .flower-corner svg > g {
    transform-box: view-box;
    transform-origin: 0 0;
    transform: translate(0px, 200px);
  }
  .dotbloom-box:nth-child(3) .flower-center {
    transform-box: view-box;
    transform-origin: 0 0;
  }
  /* angles for opening from bottom-left inward */
  .dotbloom-box:nth-child(3) .flower-corner .p1 { --angle: 0deg  !important; }
  .dotbloom-box:nth-child(3) .flower-corner .p2 { --angle: 45deg !important; }
  .dotbloom-box:nth-child(3) .flower-corner .p3 { --angle: 90deg !important; }
}








/* mobile: hide the center dot and reset gap */
@media (max-width: 640px) {
  .dotbloom-grid::after { display: none; }
  .dotbloom-grid { column-gap: 16px; }
}
/* Pe ecrane mici (1 coloană), toate la stânga */
@media (max-width: 640px) {
  .dotbloom-grid { grid-template-columns: 1fr; }
  .dotbloom-box {
    text-align: left;
    align-items: flex-start;
  }
}

/* On small screens, stack 1 per row */
@media (max-width: 1040px) {
  .dotbloom-grid {
    grid-template-columns: 1fr;
  }
}




/* === Petal color fix (works with unique IDs) ===================== */
/* Set your default petal color once. You can override per box below. */
.dotbloom-grid { 
  --petal: #08466d;          /* change this to whatever you want */
  --petal-stroke: #08466d;   /* outline color (optional) */
}

/* (Optional) per-box colors
.dotbloom-box:nth-child(1){ --petal:#08466d; --petal-stroke:#08466d; }
.dotbloom-box:nth-child(2){ --petal:#1ea7fd; --petal-stroke:#1ea7fd; }
.dotbloom-box:nth-child(3){ --petal:#8a2be2; --petal-stroke:#8a2be2; }
.dotbloom-box:nth-child(4){ --petal:#ff6b6b; --petal-stroke:#ff6b6b; }
*/

/* Override the gradient stops (beats inline stop-color attributes) */
#petalGrad-1 stop,
#petalGrad-2 stop,
#petalGrad-3 stop,
#petalGrad-4 stop {
  stop-color: var(--petal) !important;
  stop-opacity: 0.92; /* adjust if you want stronger/weaker tint */
}

/* Keep a subtle falloff if you like (optional) */
#petalGrad-1 stop:nth-child(2),
#petalGrad-2 stop:nth-child(2),
#petalGrad-3 stop:nth-child(2),
#petalGrad-4 stop:nth-child(2) { stop-opacity: 0.86; }

#petalGrad-1 stop:nth-child(3),
#petalGrad-2 stop:nth-child(3),
#petalGrad-3 stop:nth-child(3),
#petalGrad-4 stop:nth-child(3) { stop-opacity: 0.80; }

/* Match the outline stroke to the petal color (optional) */
.dotbloom-box .flower-corner path {
  stroke: var(--petal-stroke) !important;
}