/* =========================================================================
   MLT Case Studies — portable case study card grid
   -------------------------------------------------------------------------
   Light defaults that work on most sites out of the box.
   To match a brand, override the CSS variables in the block below from the
   client's own theme stylesheet. A ready-made DARK override is at the bottom.
   ========================================================================= */

.view-mlt-case-studies {
  --mltcs-card-bg: #ffffff;
  --mltcs-card-border: rgba(0, 0, 0, 0.08);
  --mltcs-text: #2b2b2b;
  --mltcs-muted: #6c757d;
  --mltcs-accent: #34a853;           /* brand accent — links, hover, arrow */
  --mltcs-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --mltcs-shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.15);
  --mltcs-radius: 12px;
  --mltcs-media-ratio: 3 / 2;
}

/* ---- Grid -------------------------------------------------------------- */
.view-mlt-case-studies .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
  align-items: stretch;
}

.view-mlt-case-studies .views-row {
  display: flex;
}

/* ---- Card -------------------------------------------------------------- */
.mltcs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--mltcs-card-bg);
  border: 1px solid var(--mltcs-card-border);
  border-radius: var(--mltcs-radius);
  box-shadow: var(--mltcs-shadow);
  color: var(--mltcs-text);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.mltcs-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mltcs-shadow-hover);
  border-color: color-mix(in srgb, var(--mltcs-accent) 35%, transparent);
}

/* ---- Photo ------------------------------------------------------------- */
.mltcs-card__media {
  display: block;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
  aspect-ratio: var(--mltcs-media-ratio);
}

.mltcs-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.mltcs-card:hover .mltcs-card__media img {
  transform: scale(1.04);
}

/* Views wraps image fields in its own div — make sure it fills the box. */
.mltcs-card__media .field-content,
.mltcs-card__media > div {
  height: 100%;
}

/* ---- Body -------------------------------------------------------------- */
.mltcs-card__inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 24px 24px;
}

.mltcs-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mltcs-muted);
}

.mltcs-card__sep {
  opacity: 0.6;
}

.mltcs-card__title {
  margin: 0 0 6px;
  font-size: 1.2rem;
  line-height: 1.35;
}

.mltcs-card__title a,
.mltcs-card__link {
  color: inherit;
  text-decoration: none;
}

/* Make the whole card clickable via the title link. */
.mltcs-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.mltcs-card:hover .mltcs-card__title a {
  color: var(--mltcs-accent);
}

.mltcs-card__link:focus-visible {
  outline: 2px solid var(--mltcs-accent);
  outline-offset: 3px;
}

.mltcs-card__client {
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: var(--mltcs-muted);
}

.mltcs-card__intro {
  margin: 0 0 18px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--mltcs-text);
}

/* ---- Read more --------------------------------------------------------- */
.mltcs-card__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--mltcs-accent);
}

.mltcs-card__arrow {
  transition: transform 0.25s ease;
}

.mltcs-card:hover .mltcs-card__arrow {
  transform: translateX(4px);
}

/* ---- Page title / pager breathing room --------------------------------- */
.view-mlt-case-studies .pager {
  margin-top: 36px;
}

@media (prefers-reduced-motion: reduce) {
  .mltcs-card,
  .mltcs-card__media img,
  .mltcs-card__arrow {
    transition: none;
  }
  .mltcs-card:hover {
    transform: none;
  }
  .mltcs-card:hover .mltcs-card__media img {
    transform: none;
  }
}

/* =========================================================================
   DARK THEME OVERRIDE
   -------------------------------------------------------------------------
   Uncomment (or copy into the client theme) for sites on a dark background.
   ========================================================================= */
/*
.view-mlt-case-studies {
  --mltcs-card-bg: #1c1f24;
  --mltcs-card-border: rgba(255, 255, 255, 0.10);
  --mltcs-text: #e9ecef;
  --mltcs-muted: #9aa3ad;
  --mltcs-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  --mltcs-shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.6);
}
*/