.esk-ec {
  --ec-gap: 16px;
  --ec-grow: 3;
  --ec-shrink: 1;
  --ec-anim: 0.4s;
  --ec-ease: ease;
  --ec-reveal-distance: 8px;
  --ec-focus-outline-width: 0px;
  --ec-focus-outline-color: transparent;
  /* CSS is now loading properly */
}

.esk-ec__cards { display: flex; gap: var(--ec-gap); }
.esk-ec--grid .esk-ec__cards { display: grid; grid-template-columns: repeat(var(--ec-cols, 3), 1fr); }

.esk-ec__card {
  position: relative;
  flex: 1 1 0;
  min-width: 140px;
  height: 380px;
  border-radius: 12px;
  overflow: hidden;
  transition: flex-basis var(--ec-anim) var(--ec-ease), flex-grow var(--ec-anim) var(--ec-ease), transform var(--ec-anim) var(--ec-ease);
}

.esk-ec__media,
.esk-ec__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important; /* ensure media follows card height */
  object-fit: cover;
  transform: scale(var(--ec-img-scale, 1));
  /* Image filters applied via CSS custom properties */
  filter: var(--ec-img-filter, none);
  transition: transform var(--ec-anim) var(--ec-ease), filter var(--ec-anim) var(--ec-ease);
}

/* Aspect ratio support - when set, override height */
.esk-ec__media[style*="aspect-ratio"] {
  height: auto !important;
  position: relative;
}

.esk-ec__media[style*="aspect-ratio"] img {
  height: auto !important;
  position: relative;
}

.esk-ec__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.5));
  pointer-events: none;
}

.esk-ec__content {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: var(--ec-content-justify, flex-end);
}

.esk-ec__title { margin: 0 0 8px; }
.esk-ec__text { opacity: 0; transform: translateY(var(--ec-reveal-distance)); transition: opacity var(--ec-anim) var(--ec-ease), transform var(--ec-anim) var(--ec-ease); }
.esk-ec__actions { margin-top: 12px; opacity: 0; transform: translateY(var(--ec-reveal-distance)); transition: opacity var(--ec-anim) var(--ec-ease), transform var(--ec-anim) var(--ec-ease); }
.esk-ec__btn { display: inline-block; padding: 10px 16px; background: #fff; color: #111; border-radius: 6px; text-decoration: none; }

/* Optional hover underline for title/text when active */
.esk-ec .esk-ec__card:hover .esk-ec__title,
.esk-ec .esk-ec__card.is-active .esk-ec__title { text-decoration: var(--ec-title-underline, none); }
.esk-ec .esk-ec__card:hover .esk-ec__text,
.esk-ec .esk-ec__card.is-active .esk-ec__text { text-decoration: var(--ec-text-underline, none); }

/* Expansion behavior */
.esk-ec:hover .esk-ec__card { flex-grow: var(--ec-shrink); }
.esk-ec .esk-ec__card:hover,
.esk-ec .esk-ec__card.is-active { flex-grow: var(--ec-grow); }

.esk-ec .esk-ec__card:hover .esk-ec__media img,
.esk-ec .esk-ec__card.is-active .esk-ec__media img {
  transform: scale(var(--ec-img-scale-h, var(--ec-img-scale, 1)));
  /* Hover state filters applied via CSS custom properties */
  filter: var(--ec-img-filter-h, var(--ec-img-filter, none));
}

/* Reveal modes based on initial visibility */
.esk-ec[data-ec-initial="image"] .esk-ec__title,
.esk-ec[data-ec-initial="image"] .esk-ec__text,
.esk-ec[data-ec-initial="image"] .esk-ec__actions { 
  opacity: 0; 
  transform: translateY(var(--ec-reveal-distance)); 
}

.esk-ec[data-ec-initial="image-title"] .esk-ec__title { 
  opacity: 1; 
  transform: none; 
}
.esk-ec[data-ec-initial="image-title"] .esk-ec__text,
.esk-ec[data-ec-initial="image-title"] .esk-ec__actions { 
  opacity: 0; 
  transform: translateY(var(--ec-reveal-distance)); 
}

.esk-ec[data-ec-initial="image-title-text"] .esk-ec__title,
.esk-ec[data-ec-initial="image-title-text"] .esk-ec__text { 
  opacity: 1; 
  transform: none; 
}
.esk-ec[data-ec-initial="image-title-text"] .esk-ec__actions { 
  opacity: 0; 
  transform: translateY(var(--ec-reveal-distance)); 
}

.esk-ec[data-ec-initial="all"] .esk-ec__title,
.esk-ec[data-ec-initial="all"] .esk-ec__text,
.esk-ec[data-ec-initial="all"] .esk-ec__actions { 
  opacity: 1; 
  transform: none; 
}

/* On hover/active reveal hidden bits - RESPECTS INITIAL CONTENT SETTINGS */
/* Only show content on hover if it was initially hidden by initial content control */

/* For "image" initial setting - show title, text, and actions on hover */
.esk-ec[data-ec-initial="image"] .esk-ec__card:hover .esk-ec__title,
.esk-ec[data-ec-initial="image"] .esk-ec__card:hover .esk-ec__text,
.esk-ec[data-ec-initial="image"] .esk-ec__card:hover .esk-ec__actions,
.esk-ec[data-ec-initial="image"] .esk-ec__card.is-active .esk-ec__title,
.esk-ec[data-ec-initial="image"] .esk-ec__card.is-active .esk-ec__text,
.esk-ec[data-ec-initial="image"] .esk-ec__card.is-active .esk-ec__actions { 
  opacity: 1; 
  transform: none; 
}

/* For "image-title" initial setting - show text and actions on hover */
.esk-ec[data-ec-initial="image-title"] .esk-ec__card:hover .esk-ec__text,
.esk-ec[data-ec-initial="image-title"] .esk-ec__card:hover .esk-ec__actions,
.esk-ec[data-ec-initial="image-title"] .esk-ec__card.is-active .esk-ec__text,
.esk-ec[data-ec-initial="image-title"] .esk-ec__card.is-active .esk-ec__actions { 
  opacity: 1; 
  transform: none; 
}

/* For "image-title-text" initial setting - show actions on hover */
.esk-ec[data-ec-initial="image-title-text"] .esk-ec__card:hover .esk-ec__actions,
.esk-ec[data-ec-initial="image-title-text"] .esk-ec__card.is-active .esk-ec__actions { 
  opacity: 1; 
  transform: none; 
}

/* For "all" initial setting - nothing to reveal on hover */
.esk-ec[data-ec-initial="all"] .esk-ec__card:hover .esk-ec__text,
.esk-ec[data-ec-initial="all"] .esk-ec__card:hover .esk-ec__actions,
.esk-ec[data-ec-initial="all"] .esk-ec__card.is-active .esk-ec__text,
.esk-ec[data-ec-initial="all"] .esk-ec__card.is-active .esk-ec__actions { 
  /* Already visible, no change needed */
}

/* Focus styles */
.esk-ec .esk-ec__card:focus { 
  outline: var(--ec-focus-outline-width) solid var(--ec-focus-outline-color); 
  box-shadow: var(--ec-focus-shadow, none); 
}

/* Reveal mode: fade only - NO SLIDE TRANSFORM */
.esk-ec[data-ec-reveal="fade"] .esk-ec__text,
.esk-ec[data-ec-reveal="fade"] .esk-ec__actions { 
  transform: none; 
  transition: opacity var(--ec-anim) var(--ec-ease); 
}

/* Reveal mode: slide only - RESPECTS INITIAL CONTENT SETTINGS */
.esk-ec[data-ec-reveal="slide"] .esk-ec__text,
.esk-ec[data-ec-reveal="slide"] .esk-ec__actions { 
  /* Don't override initial content opacity - let initial content control handle it */
  transition: transform var(--ec-anim) var(--ec-ease); 
}

/* Reveal mode: slide + fade (explicit) - BOTH TRANSITIONS */
.esk-ec[data-ec-reveal="slide-fade"] .esk-ec__text,
.esk-ec[data-ec-reveal="slide-fade"] .esk-ec__actions {
  opacity: 0;
  transform: translateY(var(--ec-reveal-distance));
  transition: opacity var(--ec-anim) var(--ec-ease), transform var(--ec-anim) var(--ec-ease);
}

/* Hover/active states for slide-fade mode - RESPECTS INITIAL CONTENT SETTINGS */
/* Only show content on hover if it was initially hidden by initial content control */

/* For "image" initial setting - show title, text, and actions on hover */
.esk-ec[data-ec-reveal="slide-fade"][data-ec-initial="image"] .esk-ec__card:hover .esk-ec__title,
.esk-ec[data-ec-reveal="slide-fade"][data-ec-initial="image"] .esk-ec__card:hover .esk-ec__text,
.esk-ec[data-ec-reveal="slide-fade"][data-ec-initial="image"] .esk-ec__card:hover .esk-ec__actions,
.esk-ec[data-ec-reveal="slide-fade"][data-ec-initial="image"] .esk-ec__card.is-active .esk-ec__title,
.esk-ec[data-ec-reveal="slide-fade"][data-ec-initial="image"] .esk-ec__card.is-active .esk-ec__text,
.esk-ec[data-ec-reveal="slide-fade"][data-ec-initial="image"] .esk-ec__card.is-active .esk-ec__actions {
  opacity: 1;
  transform: none;
}

/* For "image-title" initial setting - show text and actions on hover */
.esk-ec[data-ec-reveal="slide-fade"][data-ec-initial="image-title"] .esk-ec__card:hover .esk-ec__text,
.esk-ec[data-ec-reveal="slide-fade"][data-ec-initial="image-title"] .esk-ec__card:hover .esk-ec__actions,
.esk-ec[data-ec-reveal="slide-fade"][data-ec-initial="image-title"] .esk-ec__card.is-active .esk-ec__text,
.esk-ec[data-ec-reveal="slide-fade"][data-ec-initial="image-title"] .esk-ec__card.is-active .esk-ec__actions {
  opacity: 1;
  transform: none;
}

/* For "image-title-text" initial setting - show actions on hover */
.esk-ec[data-ec-reveal="slide-fade"][data-ec-initial="image-title-text"] .esk-ec__card:hover .esk-ec__actions,
.esk-ec[data-ec-reveal="slide-fade"][data-ec-initial="image-title-text"] .esk-ec__card.is-active .esk-ec__actions {
  opacity: 1;
  transform: none;
}

/* For "all" initial setting - nothing to reveal on hover */
.esk-ec[data-ec-reveal="slide-fade"][data-ec-initial="all"] .esk-ec__card:hover .esk-ec__text,
.esk-ec[data-ec-reveal="slide-fade"][data-ec-initial="all"] .esk-ec__card:hover .esk-ec__actions,
.esk-ec[data-ec-reveal="slide-fade"][data-ec-initial="all"] .esk-ec__card.is-active .esk-ec__text,
.esk-ec[data-ec-reveal="slide-fade"][data-ec-initial="all"] .esk-ec__card.is-active .esk-ec__actions {
  /* Already visible, no change needed */
}

@media (max-width: 767px) {
  .esk-ec__cards { display: grid; grid-template-columns: 1fr; }
}

/* Presets */
.esk-ec--preset-gallery {
  --ec-img-scale-h: 1.08;
}
.esk-ec--preset-gallery .esk-ec__overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.6));
}
.esk-ec--preset-gallery .esk-ec__content { text-align: left; }

.esk-ec--preset-features {
  --ec-img-grayscale: 0;
  --ec-img-brightness: 1;
}
.esk-ec--preset-features .esk-ec__overlay { background: rgba(0,0,0,0.25); }
.esk-ec--preset-features .esk-ec__content {
  justify-content: center;
  text-align: center;
}

.esk-ec--preset-team {
  --ec-img-scale-h: 1.04;
}
.esk-ec--preset-team .esk-ec__overlay { background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.45)); }
.esk-ec--preset-team .esk-ec__content { text-align: center; }