/* Home operations: one lead card and two stacked cards, using CMAP's palette. */
.operations-feature { scroll-margin-top: 150px; }

.operations-feature .operations-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.operations-feature .image-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: none;
  height: 100%;
  padding: 14px;
}

.operations-feature .operation-featured { grid-row: 1 / 3; }

.operations-feature .image-card-media {
  flex: none;
  height: clamp(156px, 15vw, 190px);
  border-radius: 9px;
}

.operations-feature .operation-featured .image-card-media {
  height: auto;
  aspect-ratio: 4 / 3;
}

.operations-feature .image-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 28px 12px 14px;
}

.operations-feature .image-card-body::before {
  top: 12px;
  left: 12px;
  right: auto;
  width: 30px;
  height: 2px;
}

.operations-feature .image-card-body h3 {
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  line-height: 1.2;
  margin-block: 10px 12px;
}

.operations-feature .image-card-body p {
  font-size: .9rem;
  line-height: 1.65;
}

.operations-feature .operation-featured .image-card-body {
  padding: 36px 20px 26px;
}

.operations-feature .operation-featured .image-card-body::before {
  top: 16px;
  left: 20px;
  width: 36px;
}

.operations-feature .operation-featured h3 {
  font-size: clamp(1.8rem, 2.7vw, 2.45rem);
  line-height: 1.12;
  margin-bottom: 18px;
}

.operations-feature .operation-featured p {
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .operations-feature .operations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 20px;
  }
  .operations-feature .operation-featured {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .operations-feature .image-card-media,
  .operations-feature .operation-featured .image-card-media {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .operations-feature .image-card-body { justify-content: flex-start; }
}

@media (max-width: 600px) {
  .operations-feature { scroll-margin-top: 96px; }
  .operations-feature .operations-grid { grid-template-columns: minmax(0, 1fr); }
  .operations-feature .operation-featured { grid-column: auto; }
  .operations-feature .image-card { padding: 12px; }
  .operations-feature .image-card-body,
  .operations-feature .operation-featured .image-card-body { padding: 28px 10px 16px; }
  .operations-feature .image-card-body::before,
  .operations-feature .operation-featured .image-card-body::before { top: 12px; left: 10px; width: 30px; }
  .operations-feature .image-card-body h3,
  .operations-feature .operation-featured h3 { font-size: 1.4rem; line-height: 1.2; margin-bottom: 12px; }
  .operations-feature .image-card-body p,
  .operations-feature .operation-featured p { font-size: .95rem; line-height: 1.65; }
}
