/* =========================
   Voltina Feature Showcase — photo header + white body (no grey)
   ========================= */

.voltina-feature-showcase {
  background: #fff;
}

/* Outer card */
.voltina-feature-showcase div.group {
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(39, 39, 38, 0.10);
  box-shadow: 0 18px 60px rgba(39, 39, 38, 0.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.voltina-feature-showcase div.group:hover {
  transform: translateY(-4px);
  border-color: rgba(230, 0, 126, 0.28);
  box-shadow: 0 26px 80px rgba(39, 39, 38, 0.14);
}

/* We keep the photo visible */
.voltina-feature-showcase div.group img.size-full {
  opacity: 1 !important;
  transition: transform .35s ease, filter .35s ease;
  filter: saturate(1.05) contrast(1.03);
}

.voltina-feature-showcase div.group:hover img.size-full {
  transform: scale(1.04);
  filter: saturate(1.10) contrast(1.05);
}

/* Background layer becomes the PHOTO header area */
.voltina-feature-showcase div.group .absolute.inset-0 {
  border-radius: 24px;
}

/* Replace the heavy overlay by a subtle readable one */
.voltina-feature-showcase div.group .absolute.inset-0.bg-black\/50 {
  background:
    linear-gradient(180deg,
      rgba(39, 39, 38, 0.10) 0%,
      rgba(39, 39, 38, 0.10) 45%,
      rgba(39, 39, 38, 0.55) 100%
    ) !important;
}

/* Content wrapper: create a "photo header" space */
.voltina-feature-showcase div.group .relative.flex.h-full.min-h-\[70vh\] {
  min-height: 560px !important; /* fixed-ish so the photo gets room */
  padding: 0 !important;        /* we'll control padding in body */
  justify-content: flex-end;
}

/* The text container becomes a white body that sits at the bottom */
.voltina-feature-showcase div.group .relative .z-10 {
  background: #ffffff;
  border-top: 1px solid rgba(39, 39, 38, 0.10);
  border-radius: 18px 18px 0 0;
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: 0 -18px 45px rgba(39, 39, 38, 0.10);
  margin: 0; /* flush */
}

/* Give the photo header a rounded “cut” feel */
.voltina-feature-showcase div.group .relative .z-10 {
  position: relative;
}

.voltina-feature-showcase div.group .relative .z-10::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 1.5rem;
  right: 1.5rem;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  filter: blur(10px);
  opacity: 0.9;
}

/* Typography: clean Voltina (no underline) */
.voltina-feature-showcase div.group,
.voltina-feature-showcase div.group * {
  text-decoration: none !important;
}

.voltina-feature-showcase div.group h3 {
  color: #272726 !important;
  letter-spacing: -0.02em;
}

.voltina-feature-showcase div.group p {
  color: rgba(39, 39, 38, 0.78) !important;
  line-height: 1.6;
}

/* Tagline as small pink label */
.voltina-feature-showcase div.group p.mb-2 {
  color: #f08048 !important;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.80rem;
}

/* Button Voltina */
.voltina-feature-showcase div.group span.inline-flex {
  margin-top: 1.25rem;
  border-radius: 999px;
  padding: 0.95rem 1.25rem;
  background: #f08048 !important;
  color: #ffffff !important;
  font-weight: 800;
  border: 1px solid rgba(230, 0, 126, 0.35) !important;
  box-shadow: 0 16px 45px rgba(230, 0, 126, 0.22) !important;
  transition: transform .18s ease, box-shadow .18s ease;
}

.voltina-feature-showcase div.group:hover span.inline-flex {
  transform: translateY(-1px);
  box-shadow: 0 22px 60px rgba(230, 0, 126, 0.26) !important;
}

/* Mobile tuning */
@media (max-width: 767px) {
  .voltina-feature-showcase div.group .relative.flex.h-full.min-h-\[70vh\] {
    min-height: 520px !important;
  }

  .voltina-feature-showcase div.group .relative .z-10 {
    padding: 1.35rem 1.35rem 1.2rem;
  }
}

/* Focus */
.voltina-feature-showcase div.group:focus-visible {
  outline: 3px solid rgba(230, 0, 126, 0.45);
  outline-offset: 4px;
}


/* =========================
   Voltina Feature Showcase — photo header + white body (fixed)
   ========================= */

.voltina-feature-showcase { background: #fff; }

/* Outer card */
.voltina-feature-showcase div.group{
  border-radius:24px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(39,39,38,.10);
  box-shadow:0 18px 60px rgba(39,39,38,.10);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
}

.voltina-feature-showcase div.group:hover{
  transform:translateY(-4px);
  border-color:rgba(230,0,126,.28);
  box-shadow:0 26px 80px rgba(39,39,38,.14);
}

/* Reserve space: top = photo, bottom = body */
.voltina-feature-showcase div.group .relative.flex.h-full.min-h-\[70vh\]{
  min-height: 560px !important;
  padding: 0 !important;
  justify-content: flex-end;
}

/* ✅ Photo header height (this is the key fix) */
.voltina-feature-showcase div.group{
  --media-h: 230px; /* desktop header height */
}

@media (min-width: 768px){
  .voltina-feature-showcase div.group{ --media-h: 260px; }
}

@media (min-width: 1024px){
  .voltina-feature-showcase div.group{ --media-h: 280px; }
}

/* Media layer becomes a real header area */
.voltina-feature-showcase .voltina-feature-showcase__media{
  height: var(--media-h);
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Make sure the image fills ONLY the header */
.voltina-feature-showcase .voltina-feature-showcase__media img.size-full{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:1 !important;
  transition: transform .35s ease, filter .35s ease;
  filter:saturate(1.05) contrast(1.03);
}

.voltina-feature-showcase div.group:hover .voltina-feature-showcase__media img.size-full{
  transform:scale(1.04);
  filter:saturate(1.10) contrast(1.05);
}

/* Softer overlay for readability */
.voltina-feature-showcase .voltina-feature-showcase__media .bg-black\/50{
  background: linear-gradient(
    180deg,
    rgba(39,39,38,.05) 0%,
    rgba(39,39,38,.18) 55%,
    rgba(39,39,38,.42) 100%
  ) !important;
}

/* Body: push it down so it starts under the photo header */
.voltina-feature-showcase div.group .relative .z-10{
  margin-top: calc(var(--media-h) - 22px); /* overlap a bit for premium look */
  background:#fff;
  border:1px solid rgba(39,39,38,.10);
  border-radius:20px 20px 0 0;
  padding:1.75rem 1.75rem 1.5rem;
  box-shadow:0 -18px 45px rgba(39,39,38,.08);
  position: relative;
}

/* Cute “cut” highlight */
.voltina-feature-showcase div.group .relative .z-10::before{
  content:"";
  position:absolute;
  top:-14px;
  left:1.5rem;
  right:1.5rem;
  height:14px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  filter:blur(10px);
  opacity:.95;
}

/* Typography: clean Voltina */
.voltina-feature-showcase div.group,
.voltina-feature-showcase div.group *{
  text-decoration:none !important;
}

.voltina-feature-showcase div.group h3{
  color:#272726 !important;
  letter-spacing:-0.02em;
}

.voltina-feature-showcase div.group p{
  color:rgba(39,39,38,.78) !important;
  line-height:1.6;
}

/* Tagline pink */
.voltina-feature-showcase div.group p.mb-2{
  color:#f08048 !important;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.80rem;
}

/* Button Voltina */
.voltina-feature-showcase div.group span.inline-flex{
  margin-top:1.25rem;
  border-radius:999px;
  padding:.95rem 1.25rem;
  background:#f08048 !important;
  color:#fff !important;
  font-weight:800;
  border:1px solid rgba(230,0,126,.35) !important;
  box-shadow:0 16px 45px rgba(230,0,126,.22) !important;
  transition:transform .18s ease, box-shadow .18s ease;
}

.voltina-feature-showcase div.group:hover span.inline-flex{
  transform:translateY(-1px);
  box-shadow:0 22px 60px rgba(230,0,126,.26) !important;
}

/* Mobile tuning */
@media (max-width: 767px){
  .voltina-feature-showcase div.group .relative.flex.h-full.min-h-\[70vh\]{
    min-height: 520px !important;
  }

  .voltina-feature-showcase div.group .relative .z-10{
    padding:1.35rem 1.35rem 1.2rem;
    margin-top: calc(var(--media-h) - 18px);
  }
}

/* Focus */
.voltina-feature-showcase div.group:focus-visible{
  outline:3px solid rgba(230,0,126,.45);
  outline-offset:4px;
}