:root{
  --rcel-radius:16px;
  --rcel-accent:#1aa7ec;
  --rcel-text:#0b1a3a;
  --rcel-muted:#6b7a99;
  --rcel-ease:cubic-bezier(.22,.61,.36,1);
}

/* Grid */
.rcel-grid{
  display:grid;
  gap:22px;
}

/* Card */
.reveal-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--rcel-radius);
  background:#fff;
  box-shadow:0 12px 30px rgba(2,10,40,.12);
  transform:translateY(0);
  transition:transform .45s var(--rcel-ease), box-shadow .45s var(--rcel-ease), filter .45s var(--rcel-ease);
  will-change:transform;
}
.reveal-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(2,10,40,.22); filter:saturate(1.05); }

/* Image + Zoom */
.reveal-card__img{
  position:relative;
  overflow:hidden;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.reveal-card__img img{
  width:100%;
  height: var(--rcel-img-h, 220px);
  object-fit:cover; display:block;
  transform:scale(1) translateZ(0);
  transition:transform .9s var(--rcel-ease);
}
.reveal-card:hover .reveal-card__img img{ transform:scale(1.12); }

/* Overlay uses pickers and covers full image */
.reveal-card .overlay{
  position:absolute; inset:0;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background: linear-gradient(to bottom, var(--rcel-overlay1, rgba(7,21,64,0.0)) 0%, var(--rcel-overlay2, rgba(7,21,64,0.85)) 100%);
  opacity:.65; pointer-events:none; transition: opacity .5s var(--rcel-ease);
}
.reveal-card:hover .overlay{ opacity:.9; }

/* Shine sweep */
.reveal-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(110deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 60%);
  transform: translateX(-120%);
  transition: transform 1s var(--rcel-ease);
  pointer-events:none;
}
.reveal-card:hover::after{ transform: translateX(120%); }

/* Content block */
.reveal-card__content{
  position:relative;
  padding: var(--rcel-pad-t,22px) var(--rcel-pad-r,22px) var(--rcel-pad-b,34px) var(--rcel-pad-l,22px);
  color:var(--rcel-text);
  transition: transform .55s var(--rcel-ease);
}
.reveal-card:hover .reveal-card__content{ transform: translateY(-6px); }

.reveal-card__title{ margin:8px 0 10px; line-height:1.2; font-size:clamp(18px,1.6vw,22px); }
.reveal-card__excerpt{
  margin:0 0 12px; color:var(--rcel-muted); font-size:14px;
  display:block !important;
  overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

/* Extra content reveal - overlay, no layout shift */
.reveal-card__more{
  position:absolute;
  left: var(--rcel-pad-l,22px);
  right: var(--rcel-pad-r,22px);
  bottom: var(--rcel-pad-b,34px);
  max-height:none;
  opacity:0;
  transform: translateY(8px);
  pointer-events:none;
  z-index:2;
  transition: opacity .35s var(--rcel-ease), transform .35s var(--rcel-ease);
}
.reveal-card:hover .reveal-card__more{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

/* Stagger for children */
.reveal-card__more > *{ opacity:0; transform: translateY(6px); transition: opacity .3s var(--rcel-ease), transform .3s var(--rcel-ease); }
.reveal-card:hover .reveal-card__more > *{ opacity:1; transform:none; }
.reveal-card:hover .reveal-card__more > *:nth-child(2){ transition-delay:.06s; }
.reveal-card:hover .reveal-card__more > *:nth-child(3){ transition-delay:.12s; }

/* Read more link */
.reveal-card__link{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--rcel-accent); font-weight:600; text-decoration:none;
}
.reveal-card__link .rcel-arrow{ transition: transform .3s var(--rcel-ease); }
.reveal-card__link:hover .rcel-arrow{ transform: translateX(4px); }

/* On-scroll entrance */
.reveal-in{ opacity:0; transform:translateY(16px); }
.is-visible{ opacity:1; transform:none; transition:.7s var(--rcel-ease); }

/* Ensure visibility inside Elementor editor preview even before JS runs */
body.elementor-editor-active .reveal-in,
html.elementor-html .reveal-in { opacity:1 !important; transform:none !important; }

@media (max-width: 767px){
  .reveal-card__img img{ height: var(--rcel-img-h, 180px); }
  .reveal-card__content{ padding: var(--rcel-pad-t,18px) var(--rcel-pad-r,18px) var(--rcel-pad-b,28px) var(--rcel-pad-l,18px); }
}

/* ===== FIX: keep excerpt visible + no overlap (overlay reveal) ===== */

/* 1) Reserve a bottom gutter for the Read-More area (tweak size if needed) */
.reveal-card{ --rcel-more-gutter: 64px; } /* try 56–72px if your extra text is taller */

/* 2) Content keeps normal padding + the reserved gutter */
.reveal-card .reveal-card__content{
  position: relative;
  padding-bottom: calc(var(--rcel-pad-b,34px) + var(--rcel-more-gutter)) !important;
}

/* 3) The extra block is an overlay sitting inside that gutter (so no layout shift) */
.reveal-card .reveal-card__more{
  position: absolute;
  left:  var(--rcel-pad-l,22px);
  right: var(--rcel-pad-r,22px);
  bottom: var(--rcel-pad-b,34px);
  z-index: 3;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .25s var(--rcel-ease), transform .25s var(--rcel-ease);
  padding-top: 6px;
  background: linear-gradient(to top, rgba(255,255,255,.98) 60%, rgba(255,255,255,.85) 85%, rgba(255,255,255,0) 100%);
  border-bottom-left-radius: var(--rcel-radius);
  border-bottom-right-radius: var(--rcel-radius);
}
.reveal-card:hover .reveal-card__more{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* 4) Make absolutely sure the excerpt NEVER hides on hover (override older patch) */
.reveal-card:hover .reveal-card__excerpt{
  opacity: 1 !important;
  max-height: none !important;
  margin: 0 0 12px !important;
}

/* (Already fixed earlier) Ensure the image overlay fully covers with rounded corners */
.reveal-card__img{ overflow: hidden; border-top-left-radius: inherit; border-top-right-radius: inherit; }
.reveal-card .overlay{
  inset: 0; border-top-left-radius: inherit; border-top-right-radius: inherit;
  background: linear-gradient(to bottom, var(--rcel-overlay1, rgba(7,21,64,0)) 0%,
                                        var(--rcel-overlay2, rgba(7,21,64,.85)) 100%);
}
.reveal-card__excerpt {margin-bottom:20px !important;}