/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-template-work-card.css
   Layer: Work / Case Study Loop Card
   Version: 1.0

   Required Elementor classes:
   - milo-work-card                  = Work Card Container
   - milo-work-card__image           = Image widget
   - milo-work-card__terms           = Post Info / Terms widget
   - milo-work-card__title           = Heading widget
   - milo-work-card__description     = Text Editor widget
========================================================= */

/* #region 0) COMPONENT TOKENS */
.milo-work-card {
  /* Shell */
  --milo-work-card-radius: var(--milo-radius-lg);
  --milo-work-card-padding: clamp(8px, 0.8vw, 12px);
  --milo-work-card-text-padding: clamp(14px, 1.4vw, 22px)
    clamp(14px, 1.6vw, 24px) clamp(18px, 2vw, 28px);

  --milo-work-card-gap: clamp(7px, 0.7vw, 11px);

  --milo-work-card-bg: linear-gradient(
    180deg,
    var(--milo-surface-tint-1),
    var(--milo-surface-tint-3)
  );

  --milo-work-card-bg-hover: linear-gradient(
    180deg,
    var(--milo-surface-tint-1),
    var(--milo-surface-tint-2)
  );

  --milo-work-card-border: var(--milo-border-weak);
  --milo-work-card-border-hover: var(--milo-border-highlight);

  --milo-work-card-shadow:
    inset 0 1px 0 var(--milo-shadow-highlight),
    0 18px 46px var(--milo-shadow-color-35);

  --milo-work-card-shadow-hover:
    inset 0 1px 0 var(--milo-shadow-highlight-strong),
    0 28px 72px var(--milo-shadow-color-45);

  /* Motion */
  --milo-work-card-lift: -6px;
  --milo-work-card-media-scale: 1.035;
  --milo-work-card-transition-dur: var(--milo-med, 240ms);
  --milo-work-card-transition-ease: var(--milo-ease, ease);

  /* Media */
  --milo-work-card-media-aspect: 1.38 / 1;
  --milo-work-card-media-radius: calc(var(--milo-work-card-radius) - 8px);
  --milo-work-card-media-border: var(--milo-border-media-dark);
  --milo-work-card-media-bg: var(--milo-surface-media-dark);

  --milo-work-card-media-filter: saturate(0.94) contrast(1.03) brightness(0.82);

  --milo-work-card-media-filter-hover: saturate(1.02) contrast(1.05)
    brightness(0.96);

  /* Terms */
  --milo-work-card-terms-color: var(--milo-text-meta);
  --milo-work-card-terms-size: var(--milo-label-size, 11px);
  --milo-work-card-terms-line-height: var(--milo-label-lh, 1.1);
  --milo-work-card-terms-letter-spacing: var(--milo-track-label, 0.16em);
  --milo-work-card-terms-opacity: 0.72;

  /* Title */
  --milo-work-card-title-color: var(--milo-text);
  --milo-work-card-title-size: clamp(1.08rem, 1.25vw, 1.45rem);
  --milo-work-card-title-line-height: 1.14;
  --milo-work-card-title-letter-spacing: -0.012em;
  --milo-work-card-title-max: 24ch;

  /* Description */
  --milo-work-card-description-color: var(--milo-text-soft);
  --milo-work-card-description-size: clamp(0.94rem, 0.96vw, 1.02rem);
  --milo-work-card-description-line-height: 1.58;
  --milo-work-card-description-max: 42ch;
}
/* #endregion */

/* #region 1) CARD SHELL */
.milo-work-card {
  position: relative;
  isolation: isolate;

  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;

  padding: var(--milo-work-card-padding);

  border: 1px solid var(--milo-work-card-border);
  border-radius: var(--milo-work-card-radius);
  background: var(--milo-work-card-bg);
  box-shadow: var(--milo-work-card-shadow);
  background-clip: padding-box;

  transition:
    transform var(--milo-work-card-transition-dur)
      var(--milo-work-card-transition-ease),
    border-color var(--milo-work-card-transition-dur)
      var(--milo-work-card-transition-ease),
    background var(--milo-work-card-transition-dur)
      var(--milo-work-card-transition-ease),
    box-shadow var(--milo-work-card-transition-dur)
      var(--milo-work-card-transition-ease);
}

.milo-work-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 10% 0%,
      var(--milo-glow-pink-med),
      transparent 42%
    ),
    linear-gradient(180deg, var(--milo-sheen-soft), transparent 55%);

  opacity: 0.56;

  transition: opacity var(--milo-work-card-transition-dur)
    var(--milo-work-card-transition-ease);
}

.milo-work-card > * {
  position: relative;
  z-index: 1;
}

.milo-work-card:hover {
  transform: translateY(var(--milo-work-card-lift));
  border-color: var(--milo-work-card-border-hover);
  background: var(--milo-work-card-bg-hover);
  box-shadow: var(--milo-work-card-shadow-hover);
}

.milo-work-card:hover::before {
  opacity: 0.88;
}

.milo-work-card:focus-within {
  outline: var(--milo-outline-w) solid var(--milo-focus-soft);
  outline-offset: var(--milo-outline-offset);
}
/* #endregion */

/* #region 2) IMAGE */
.milo-work-card__image {
  position: relative;
  overflow: hidden;

  width: 100%;
  aspect-ratio: var(--milo-work-card-media-aspect);

  border: 1px solid var(--milo-work-card-media-border);
  border-radius: var(--milo-work-card-media-radius);
  background: var(--milo-work-card-media-bg);

  box-shadow:
    inset 0 1px 0 var(--milo-surface-media-elevated-inner),
    0 12px 32px var(--milo-shadow-ambient-soft);
}

.milo-work-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background:
    linear-gradient(180deg, transparent 52%, var(--milo-overlay-45) 120%),
    linear-gradient(120deg, transparent 0%, var(--milo-sheen-soft) 100%);

  opacity: 0.42;

  transition: opacity var(--milo-work-card-transition-dur)
    var(--milo-work-card-transition-ease);
}

.milo-work-card:hover .milo-work-card__image::after {
  opacity: 0.22;
}

.milo-work-card__image .elementor-widget-container,
.milo-work-card__image a {
  display: block;
  width: 100%;
  height: 100%;
}

.milo-work-card__image img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  filter: var(--milo-work-card-media-filter);
  transform: scale(1);
  transform-origin: center;

  transition:
    transform var(--milo-work-card-transition-dur)
      var(--milo-work-card-transition-ease),
    filter var(--milo-work-card-transition-dur)
      var(--milo-work-card-transition-ease);
}

.milo-work-card:hover .milo-work-card__image img {
  transform: scale(var(--milo-work-card-media-scale));
  filter: var(--milo-work-card-media-filter-hover);
}
/* #endregion */

/* #region 3) TEXT STACK */
.milo-work-card__terms,
.milo-work-card__title,
.milo-work-card__description {
  margin-inline: 0;
}

.milo-work-card__terms {
  margin-top: clamp(14px, 1.4vw, 22px);
  padding-inline: clamp(14px, 1.6vw, 24px);
}

.milo-work-card__title,
.milo-work-card__description {
  padding-inline: clamp(14px, 1.6vw, 24px);
}

.milo-work-card__description {
  padding-bottom: clamp(18px, 2vw, 28px);
}
/* #endregion */

/* #region 4) TERMS */
.milo-work-card__terms,
.milo-work-card__terms a,
.milo-work-card__terms .elementor-post-info__terms-list,
.milo-work-card__terms .elementor-icon-list-text {
  color: var(--milo-work-card-terms-color);
  font-family: var(--milo-sans);
  font-weight: var(--milo-weight-medium);
  font-size: var(--milo-work-card-terms-size);
  line-height: var(--milo-work-card-terms-line-height);
  letter-spacing: var(--milo-work-card-terms-letter-spacing);
  text-transform: uppercase;
}

.milo-work-card__terms {
  opacity: var(--milo-work-card-terms-opacity);
}

.milo-work-card__terms .elementor-icon-list-items {
  margin: 0;
  padding: 0;
}

.milo-work-card__terms .elementor-icon-list-item {
  margin: 0;
}

.milo-work-card__terms a {
  text-decoration: none;
}

.milo-work-card__terms a::before,
.milo-work-card__terms a::after {
  content: none !important;
}

/* Small Milo dot before the category */
.milo-work-card__terms .elementor-widget-container {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.milo-work-card__terms .elementor-widget-container::before {
  content: "";
  flex: 0 0 auto;

  width: 5px;
  height: 5px;

  border-radius: var(--milo-radius-50);
  background: var(--milo-pink-medium);
  box-shadow: 0 0 0 5px var(--milo-pink-wash);
}
/* #endregion */

/* #region 5) TITLE */
.milo-work-card__title {
  margin-top: var(--milo-work-card-gap);
}

.milo-work-card__title .elementor-heading-title,
.milo-work-card__title h1,
.milo-work-card__title h2,
.milo-work-card__title h3,
.milo-work-card__title h4,
.milo-work-card__title a {
  max-width: var(--milo-work-card-title-max);
  margin: 0;

  color: var(--milo-work-card-title-color);
  font-family: var(--milo-sans);
  font-weight: var(--milo-weight-medium);
  font-size: var(--milo-work-card-title-size);
  line-height: var(--milo-work-card-title-line-height);
  letter-spacing: var(--milo-work-card-title-letter-spacing);
  text-wrap: balance;
}

.milo-work-card__title a {
  text-decoration: none;
}

.milo-work-card__title a::before,
.milo-work-card__title a::after {
  content: none !important;
}
/* #endregion */

/* #region 6) DESCRIPTION */
.milo-work-card__description {
  margin-top: calc(var(--milo-work-card-gap) * 0.7);
}

.milo-work-card__description,
.milo-work-card__description .elementor-widget-container,
.milo-work-card__description p {
  color: var(--milo-work-card-description-color);
  font-family: var(--milo-sans);
  font-size: var(--milo-work-card-description-size);
  line-height: var(--milo-work-card-description-line-height);
}

.milo-work-card__description p {
  max-width: var(--milo-work-card-description-max);
  margin: 0;
  text-wrap: pretty;
}
/* #endregion */

/* #region 7) OPTIONAL LINKED CARD ARROW */
@supports selector(.milo-work-card:has(a)) {
  .milo-work-card:has(a) {
    cursor: pointer;
  }

  .milo-work-card:has(a)::after {
    content: "\2192";
    position: absolute;
    top: calc(var(--milo-work-card-padding) + 12px);
    right: calc(var(--milo-work-card-padding) + 12px);
    z-index: 4;

    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;

    color: var(--milo-text);
    font-size: 0.95rem;
    line-height: 1;

    border: 1px solid var(--milo-glass-border);
    border-radius: var(--milo-radius-pill);
    background: var(--milo-glass-bg);
    box-shadow: inset 0 1px 0 var(--milo-shadow-highlight-strong);

    opacity: 0;
    transform: translate3d(-4px, 4px, 0);

    -webkit-backdrop-filter: blur(var(--milo-glass-blur));
    backdrop-filter: blur(var(--milo-glass-blur));

    transition:
      opacity var(--milo-work-card-transition-dur)
        var(--milo-work-card-transition-ease),
      transform var(--milo-work-card-transition-dur)
        var(--milo-work-card-transition-ease);
  }

  .milo-work-card:has(a):hover::after {
    opacity: 0.88;
    transform: translate3d(0, 0, 0);
  }
}
/* #endregion */

/* #region 8) RESPONSIVE */
@media (max-width: 1199.98px) {
  .milo-work-card {
    --milo-work-card-title-size: clamp(1.05rem, 1.45vw, 1.34rem);
    --milo-work-card-description-max: 38ch;
  }
}

@media (max-width: 1024px) {
  .milo-work-card {
    --milo-work-card-media-aspect: 16 / 10;
    --milo-work-card-description-max: 44ch;
  }
}

@media (max-width: 767.98px) {
  .milo-work-card {
    --milo-work-card-radius: var(--milo-radius-md, 18px);
    --milo-work-card-padding: 8px;
    --milo-work-card-media-radius: calc(var(--milo-work-card-radius) - 6px);
    --milo-work-card-media-aspect: 1.5 / 1;

    --milo-work-card-title-max: 100%;
    --milo-work-card-description-max: 100%;
  }

  .milo-work-card__terms {
    margin-top: 14px;
  }

  .milo-work-card__terms,
  .milo-work-card__title,
  .milo-work-card__description {
    padding-inline: 14px;
  }

  .milo-work-card__description {
    padding-bottom: 18px;
  }
}

@media (max-width: 479.98px) {
  .milo-work-card {
    --milo-work-card-radius: 16px;
    --milo-work-card-media-aspect: 4 / 3;
  }

  @supports selector(.milo-work-card:has(a)) {
    .milo-work-card:has(a)::after {
      width: 30px;
      height: 30px;
      font-size: 0.85rem;
    }
  }
}
/* #endregion */

/* #region 9) REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .milo-work-card,
  .milo-work-card *,
  .milo-work-card::before,
  .milo-work-card::after,
  .milo-work-card__image::after {
    transition: none !important;
    animation: none !important;
  }

  .milo-work-card:hover {
    transform: none !important;
    border-color: var(--milo-work-card-border);
    box-shadow: var(--milo-work-card-shadow);
  }

  .milo-work-card:hover .milo-work-card__image img {
    transform: none !important;
    filter: var(--milo-work-card-media-filter);
  }
}
/* #endregion */