/* Wrapper scope */
.ces-events-archive-v2 { width: 100%; }

/* Row: 2 columns (25% / 75%) */
.ces-events-archive-v2 .ces-archv2-row {
  display: grid;
  grid-template-columns: 25% 75%;
  gap: 0;
  align-items: stretch;
  margin-bottom: 16px;
}

/* Column 1 */
.ces-events-archive-v2 .ces-archv2-col1 {
  position: relative;
  padding: 0;
  display: grid;
  align-content: stretch;
  gap: 8px;
  background: transparent;
  isolation: isolate; /* NEW */
}
.ces-events-archive-v2 .ces-archv2-col1::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(118, 109, 91, 1);
  mix-blend-mode: multiply;
  z-index: 0;
}
.ces-events-archive-v2 .ces-archv2-col1 > * { position: relative; z-index: 1; }

/* Padded upper block (title/date/time/venue) */
.ces-events-archive-v2 .ces-archv2-col1-main {
  padding: 16px 18px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.ces-events-archive-v2 .ces-archv2-title {
  font-family: "Manrope", Sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  color: #fff;
}

.ces-events-archive-v2 .ces-archv2-date,
.ces-events-archive-v2 .ces-archv2-time,
.ces-events-archive-v2 .ces-archv2-venue {
  font-family: "Manrope", Sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #fff;
}

/* Login row (full width of col1) — blended background that doesn't affect text */
.ces-events-archive-v2 .ces-archv2-login {
  position: relative;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  text-decoration: none;
  font-family: "Manrope", Sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  padding: 10px 14px;
  border-radius: 4px;
  background: rgba(118, 109, 91, 0.5);
  isolation: isolate;
}
.ces-events-archive-v2 .ces-archv2-login svg{
  transition: transform .3s ease;
}
.ces-events-archive-v2 .ces-archv2-login:hover svg {
  transform: translateX(10px); 
}

.ces-events-archive-v2 .ces-archv2-login::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: rgba(118, 109, 91, 0.5);
  mix-blend-mode: multiply;
  z-index: 0;
  pointer-events: none;         /* NEW: safety so it never blocks clicks */
}
.ces-events-archive-v2 .ces-archv2-login > * { position: relative; z-index: 1; }
.ces-events-archive-v2 .ces-archv2-login svg { display: block; width: 18px; height: 18px; fill: currentColor; }

/* Column 2 (75%) */
.ces-events-archive-v2 .ces-archv2-col2 {
  padding: 0; /* border-bottom must start from col2 edge */
  background: transparent;
}

/* Inner: 2 columns (20% / 80%) + border-bottom spanning col2 only */
.ces-events-archive-v2 .ces-archv2-col2-inner {
  display: grid;
  grid-template-columns: 20% 80%;
  column-gap: 20px;
  padding: 0px 16px 50px 18px;
  border-bottom: 1px solid #707070; /* starts at col2 left, spans to right */
  min-height: 100%;
}

/* Text area (clamped) */
.ces-events-archive-v2 .ces-archv2-text-clamp {
  font-family: "Manrope", Sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #000;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Gallery: up to 3 images, 3 per row */
.ces-events-archive-v2 .ces-archv2-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
.ces-events-archive-v2 .ces-archv2-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 4px;
}

/* Create a separate blended layer behind the button */
.ces-events-archive-v2 .ces-archv2-login-wrap {
  position: relative;
  isolation: isolate; /* keep blends contained */
}

.ces-events-archive-v2 .ces-archv2-login-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(118, 109, 91, 0.5);
  mix-blend-mode: multiply;  /* the blended layer */
  z-index: 0;
  pointer-events: none;
}

/* Ensure the actual button sits above and keeps its own solid bg color */
.ces-events-archive-v2 .ces-archv2-login {
  position: relative;
  z-index: 1;
  mix-blend-mode: normal !important; /* force no blend on the text/button */
  height: 100%;
  min-height: 57px;
}


/* ===== Smaller desktops (≤ 1400px) ===== */
@media (max-width: 1400px) {
  .ces-events-archive-v2 .ces-archv2-row { grid-template-columns: 28% 72%; }
  .ces-events-archive-v2 .ces-archv2-title { font-size: 21px; }
  .ces-events-archive-v2 .ces-archv2-col2-inner { column-gap: 18px; }
}

/* ===== Laptops (≤ 1200px) ===== */
@media (max-width: 1200px) {
  .ces-events-archive-v2 .ces-archv2-row { grid-template-columns: 30% 70%; }
  .ces-events-archive-v2 .ces-archv2-title { font-size: 20px; }
  .ces-events-archive-v2 .ces-archv2-col2-inner { grid-template-columns: 25% 75%; }
}

/* ===== Tablets landscape (≤ 992px) ===== */
@media (max-width: 992px) {
  .ces-events-archive-v2 .ces-archv2-row { grid-template-columns: 1fr; }
  .ces-events-archive-v2 .ces-archv2-login { justify-content: flex-start; }
  .ces-events-archive-v2 .ces-archv2-col2-inner { padding: 50px 16px 50px 18px; grid-template-columns: 1fr; row-gap: 12px; }

}

/* ===== Tablets portrait (≤ 768px) ===== */
@media (max-width: 768px) {
  .ces-events-archive-v2 .ces-archv2-title { font-size: 19px; }
  .ces-events-archive-v2 .ces-archv2-text-clamp { -webkit-line-clamp: 5; }
  .ces-events-archive-v2 .ces-archv2-col2-inner { padding: 30px 16px 30px 18px; }
}

/* ===== Phones (≤ 576px) ===== */
@media (max-width: 576px) {
  .ces-events-archive-v2 .ces-archv2-col1-main,
  .ces-events-archive-v2 .ces-archv2-col2-inner { padding: 12px; }
  .ces-events-archive-v2 .ces-archv2-title { font-size: 18px; }
  .ces-events-archive-v2 .ces-archv2-date,
  .ces-events-archive-v2 .ces-archv2-time,
  .ces-events-archive-v2 .ces-archv2-venue { font-size: 13px; }
  .ces-events-archive-v2 .ces-archv2-text-clamp { font-size: 14px; }
  .ces-events-archive-v2 .ces-archv2-login { font-size: 15px; padding: 9px 12px; }
  .ces-events-archive-v2 .ces-archv2-gallery { gap: 8px; }
}
:root { --ces-archv2-login-bg: #564E3E; } /* exact for 50% Multiply over white */

.ces-events-archive-v2 .ces-archv2-login { 
  background-color: var(--ces-archv2-login-bg) !important;
}

.ces-events-archive-v2 .ces-archv2-login::before {
  content: none !important; /* kill the blend layer that was washing the text */
}