/* Celignis Collage — BULLETPROOF CSS (face-flip version) */
/* - True 3D feel by rotating the faces (front -> -180°, back -> 0° on hover)
   - Back text reads normally
   - Back image is mirrored + greyed
   - No white frames/borders/shadows
   - Neutralizes conflicting wrapper-flip rules if present
*/

/* ---------------- Vars & layout ---------------- */
:root{
  --cel-brand:#159957;
  --cel-muted:#5c6b7a;
  --cel-radius:18px;
  --cel-gap:18px;
  --cel-shadow:none; /* keep none to avoid a visible square */
    --cel-rot-dur: 1.0s;                          /* change this */
  --cel-rot-ease: cubic-bezier(.2,.65,.15,1);  /* or any easing */
   --cel-back-grey: .85;     /* 0 = color, 1 = full grey */
  --cel-back-bright: .86;   /* <1 darker, >1 brighter */
  --cel-back-contrast: .95; /* 1 = unchanged */
  --cel-scrim-strength: .45;/* 0–1, bottom gradient opacity */
}

#celignis-collage,
#celignis-collage .cel-container{ background:transparent; }

#celignis-collage .cel-container{
  padding:clamp(28px,4vw,48px) clamp(16px,5vw,64px);
}
#celignis-collage .cel-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:clamp(18px,2vw,24px)}
#celignis-collage .cel-head h1{margin:0;font-weight:800;letter-spacing:.2px;font-size:clamp(22px,4vw,36px)}
#celignis-collage .cel-head p{margin:.25rem 0 0;color:var(--cel-muted);max-width:72ch}
#celignis-collage .cel-grid{display:grid;gap:var(--cel-gap);grid-template-columns:repeat(6,1fr)}
@media (max-width:1800px){#celignis-collage .cel-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:1200px){#celignis-collage .cel-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:800px){#celignis-collage .cel-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){#celignis-collage .cel-grid{grid-template-columns:1fr}}

/* padding for back content */
#celignis-collage .cel-back > div{
  padding: 18px;
}

#celignis-collage .cel-back > div:first-child{
  background: rgba(15, 23, 42, 0.62);
  border-radius: 16px;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.45);
  flex: 0 1 auto;
  align-self: flex-start;
  max-height: calc(100% - 72px);
  overflow-y: auto;
  padding-right: 22px;
  scrollbar-width: thin;
  scrollbar-color: rgba(226, 232, 240, 0.6) transparent;
}

#celignis-collage .cel-back > div:first-child::-webkit-scrollbar{
  width: 6px;
}

#celignis-collage .cel-back > div:first-child::-webkit-scrollbar-thumb{
  background: rgba(226, 232, 240, 0.6);
  border-radius: 999px;
}

#celignis-collage .cel-back > div:first-child::-webkit-scrollbar-track{
  background: transparent;
}

}

#celignis-collage .cel-back > div:first-child p{
  margin-bottom: 0;
}

#celignis-collage .cel-back > div:first-child p + p{
  margin-top: 10px;
}

/* optional extra spacing between text block and button block */
#celignis-collage .cel-back > div + div{
  padding-top: 8px;
}


#celignis-collage .cel-back{ gap: 10px; } /* uses flex; adds breathing room */


/* ---------------- Card shell ---------------- */
#celignis-collage article.cel-card{
  aspect-ratio:1/1; position:relative; border-radius:var(--cel-radius);
  overflow:hidden; box-shadow:var(--cel-shadow);
  background:transparent; outline:0;
  perspective:1000px; -webkit-perspective:1000px;
}

/* Neutralize any wrapper-rotate rules that might exist elsewhere */
#celignis-collage .cel-card > .cel-inner{ transform:none !important; }

/* 3D scene root (no animation on wrapper in this version) */
#celignis-collage .cel-inner{
  position:absolute; inset:0; border-radius:inherit; overflow:hidden;
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
}

/* ---------------- Faces (animated) ---------------- */
#celignis-collage .cel-front{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  border-radius:inherit;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  will-change:transform;
  transition:transform var(--cel-rot-dur) var(--cel-rot-ease);
}

#celignis-collage .cel-back{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  border-radius:inherit;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  will-change:transform;
  transition:transform var(--cel-rot-dur) var(--cel-rot-ease), opacity .18s ease;
  opacity:0;
  pointer-events:none;
}

/* Base orientations */
#celignis-collage .cel-front{ transform:rotateY(0deg) translateZ(0.5px); color:#fff; }
#celignis-collage .cel-back { transform:rotateY(180deg) translateZ(0.5px); background:none; }

/* Hover / toggled state (true 2-sided flip) */
#celignis-collage .cel-card:hover .cel-front,
#celignis-collage .cel-card.is-flipped .cel-front{
  transform:rotateY(-180deg) translateZ(0.5px);
}
#celignis-collage .cel-card:hover .cel-back,
#celignis-collage .cel-card.is-flipped .cel-back{
  transform:rotateY(0deg) translateZ(0.5px);
  opacity:1;
  pointer-events:auto;
  transition:transform var(--cel-rot-dur) var(--cel-rot-ease), opacity .18s ease;
}

/* ---------------- Front content ---------------- */
#celignis-collage .cel-img{
  position:absolute; inset:0;
  background-image:var(--cel-bg);
  background-size:cover; background-position:center;
}
#celignis-collage .cel-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
}
#celignis-collage .cel-cap{position:relative; padding:18px}
/* #celignis-collage .cel-cap h3{margin:0; font-size:clamp(16px,2.2vw,22px); font-weight:800} */
#celignis-collage .cel-cap h3{margin:0; font-weight:800}
#celignis-collage .cel-tag{
  display:inline-flex; align-items:center; gap:.5ch;
  padding:.35rem .6rem; border-radius:999px;
  background:rgba(21,153,87,.9); font-size:1.0rem; margin:0 0 .5rem;
}

#celignis-collage .front_title { font-size: 24px;}



@media (min-width: 3201px) {
    #celignis-collage .front_title { font-size: 36px !important; }
}

@media (max-width: 3200px) {
    #celignis-collage .front_title { font-size: 32px !important; }
}

@media (max-width: 3000px) {
    #celignis-collage .front_title { font-size: 30px !important; }
}

@media (max-width: 2800px) {
    #celignis-collage .front_title { font-size: 28px !important; }
}

@media (max-width: 2600px) {
    #celignis-collage .front_title { font-size: 26px !important;}
}

@media (max-width: 2500px) {
    #celignis-collage .front_title { font-size: 26px !important;}
}

@media (max-width: 2400px) {
    #celignis-collage .front_title { font-size: 26px !important;}
}

@media (max-width: 2200px) {
    #celignis-collage .front_title { font-size: 24px !important;}
}

@media (max-width: 2000px) {
    #celignis-collage .front_title { font-size: 22px !important;}
}

@media (max-width: 1900px) {
    #celignis-collage .front_title { font-size: 20px !important;}
}


@media (max-width: 1799px) {
    #celignis-collage .front_title { font-size: 26px !important;}
}

@media (max-width: 1700px) {
    #celignis-collage .front_title { font-size: 24px !important;}
}

@media (max-width: 1600px) {
    #celignis-collage .front_title { font-size: 22px !important;}
}

@media (max-width: 1400px) {
    #celignis-collage .front_title { font-size: 20px !important;}
}

@media (max-width: 1300px) {
    #celignis-collage .front_title { font-size: 18px !important;}
}

@media (max-width: 1200px) {
    #celignis-collage .front_title { font-size: 24px !important;}
}


@media (max-width: 1000px) {
    #celignis-collage .front_title { font-size: 20px !important;}
}


@media (max-width: 800px) {
    #celignis-collage .front_title { font-size: 22px !important;}
}

@media (max-width: 640px) {
    #celignis-collage .front_title { font-size: 16px !important;}
}


@media (max-width: 540px) {
    #celignis-collage .front_title { font-size: 24px !important;}
}





/*
#celignis-collage .cel-btn{
  display:inline-flex; align-items:center; gap:.6ch;
  padding:.65rem .9rem; border-radius:10px;
  background:var(--cel-brand); color:#fff; text-decoration:none; font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease;
}

#celignis-collage .cel-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(21,153,87,.25) }


--------LEARN MORE BUTTON
*/
/* Button: comfy padding + lighter gradient for dark back face */
#celignis-collage .cel-btn{
  display:inline-flex;
  align-items:center;
  gap:.55ch;
  padding:.65rem 1rem;                /* <- more breathing room */
  border-radius:12px;
  line-height:1.25;
  font-weight:700;
  font-size:1.35rem;
  color:#ffffff;
  background:linear-gradient(135deg,#019d5e 0%, #036e40 100%); /* lighter */
  border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 8px 22px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.15);
  overflow:hidden;                     /* keep sheen inside */
  transition:transform .18s ease, box-shadow .18s ease;
}

/* Hover/active polish */
#celignis-collage .cel-btn:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 14px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.08) inset;
}
#celignis-collage .cel-btn:active{
  transform:translateY(0) scale(.99);
  box-shadow:0 8px 18px rgba(0,0,0,.24);
}

/* Optional: subtle sheen sweep */
#celignis-collage .cel-btn::after{
  content:"";
  position:absolute; top:-40%; bottom:-40%; width:50%;
  left:-60%; transform:skewX(-20deg);
  background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.35) 45%,rgba(255,255,255,0) 90%);
  opacity:0; transition:transform .5s ease, opacity .3s ease;
}
#celignis-collage .cel-btn:hover::after{
  opacity:.9; transform:translateX(220%) skewX(-20deg);
}




/* ---------------- Back: mirrored + greyed image (no white veil) ---------------- */
#celignis-collage .cel-back::before{
  content:""; position:absolute; inset:0;
  background:var(--cel-bg) center/cover no-repeat;
  transform:scaleX(-1); transform-origin:center;         /* mirror IMAGE only */
  filter:grayscale(var(--cel-back-grey)) brightness(var(--cel-back-bright)) contrast(var(--cel-back-contrast));   /* greyed look */
  pointer-events:none; z-index:0;
}
/* Optional bottom scrim for legibility */
#celignis-collage .cel-back::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,var(--cel-scrim-strength)) 100%);
  pointer-events:none; z-index:1;

}
/* Back text above image layers, reads normally */
#celignis-collage .cel-back > *{
  position:relative; z-index:2;
  color:#f8fafc; text-shadow:0 1px 2px rgba(0,0,0,.45);
}

/* ---------------- Hard theme neutralizers ----------------
#celignis-collage article.cel-card,
#celignis-collage article.cel-card .cel-inner,
#celignis-collage .cel-card *,
#celignis-collage .cel-card::before,
#celignis-collage .cel-card::after{
  background-color:transparent; border:0; box-shadow:none;
} */


#celignis-collage article.cel-card,
#celignis-collage article.cel-card .cel-inner,
#celignis-collage .cel-front,
#celignis-collage .cel-back,
#celignis-collage .cel-img{
  background-color:transparent; border:0; box-shadow:none;
}


/* If any stylesheet tries to rotate the wrapper on hover, kill it */
#celignis-collage .cel-card:hover   > .cel-inner,
#celignis-collage .cel-card.is-flipped > .cel-inner{
  transform:none !important;
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  #celignis-collage .cel-front, #celignis-collage .cel-back{ transition:none }
}

/* Back: place the button block on the right */
#celignis-collage .cel-back > div:last-child{
  display:flex;               /* create a flex row */
  justify-content:flex-end;   /* push the button to the right */
}

/* Keep headings “as typed” (both sides) */
#celignis-collage .cel-cap h3,
#celignis-collage .cel-back h3{
  text-transform:none !important;
}

/* If your tag chip text is also being capitalized, stop it too */
#celignis-collage .cel-tag{
  text-transform:none !important;
}

#celignis-collage .cel-back h3{
  color:#ead600 !important;
text-shadow:
    0 1px 0 #000,  0 -1px 0 #000,
    1px 0 0 #000, -1px 0 0 #000,
    1px 1px 0 #000, -1px 1px 0 #000,
    1px -1px 0 #000, -1px -1px 0 #000; /* thicker = add more rings */
}

#celignis-collage .cel-front h3{
  
text-shadow:
    0 1px 0 #000,  0 -1px 0 #000,
    1px 0 0 #000, -1px 0 0 #000,
    1px 1px 0 #000, -1px 1px 0 #000,
    1px -1px 0 #000, -1px -1px 0 #000; /* thicker = add more rings */
}

/* Tighten space after the collage */
#celignis-collage { 
  display: flow-root;                /* stops margin-collapsing */
  margin-bottom: 0;
}
#celignis-collage .cel-container{
  padding-bottom: clamp(6px, 1.2vw, 16px) !important; /* was larger */
}
/* Make sure the last block inside the collage doesn't push space */
#celignis-collage .cel-container > :last-child{
  margin-bottom: 0;
}
/* (Optional) if the next section has a big top margin, tame it */
.with-accurate-data,
#with-accurate-data{
  margin-top: clamp(8px, 1.5vw, 20px) !important;
}