/* ==========================================================================
   eDesign Space - Service Card widget

   This file only contains layout mechanics and the hover-reveal animation.
   Every color, font, spacing, height, radius and alignment value is set
   per-instance from the Elementor editor's Style tab and injected as
   inline CSS by Elementor itself - nothing here overlaps with that, on
   purpose, so there is never a specificity fight between this file and
   Elementor's generated styles (see the Hover Bubble Cards CSS in this
   same plugin for what that kind of conflict looks like and costs).

   The divider + description reveal animates via CSS Grid's
   grid-template-rows: 0fr -> 1fr, not a fixed max-height. That means any
   length of description opens smoothly with no clipping, which a
   max-height guess could not guarantee.
   ========================================================================== */

.eds-service-card {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  --eds-sc-duration: 0.45s;
}

.eds-service-card__media {
  position: absolute;
  inset: 0;
}

.eds-service-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eds-service-card__overlay {
  position: absolute;
  inset: 0;
  transition: opacity var(--eds-sc-duration) ease;
}

.eds-service-card__overlay--normal {
  opacity: 1;
}

.eds-service-card__overlay--hover {
  opacity: 0;
}

.eds-service-card:hover .eds-service-card__overlay--normal,
.eds-service-card:focus-within .eds-service-card__overlay--normal {
  opacity: 0;
}

.eds-service-card:hover .eds-service-card__overlay--hover,
.eds-service-card:focus-within .eds-service-card__overlay--hover {
  opacity: 1;
}

.eds-service-card__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.eds-service-card__extra {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--eds-sc-duration) ease,
    opacity calc(var(--eds-sc-duration) * 0.8) ease;
}

.eds-service-card__extra-inner {
  overflow: hidden;
  min-height: 0;
}

.eds-service-card:hover .eds-service-card__extra,
.eds-service-card:focus-within .eds-service-card__extra {
  grid-template-rows: 1fr;
  opacity: 1;
}

.eds-service-card__divider {
  display: inline-block;
}

.eds-service-card__description {
  margin: 0;
}