/* H&C scene cards: image-led composition with a light editorial title strip. */

.triada {
  background: transparent !important;
  border: 0 !important;
}

.triada-card {
  overflow: visible !important;
  background: transparent !important;
}

.triada-card__media {
  overflow: hidden !important;
}

.triada-card__label {
  left: 6% !important;
  right: auto !important;
  bottom: 0 !important;
  width: 88% !important;
  max-width: 360px !important;
  padding: clamp(1rem, 2vw, 1.3rem) clamp(1.15rem, 2.2vw, 1.45rem) !important;
  background: var(--light) !important;
  border: 0 !important;
  border-top: 2px solid rgba(79, 143, 129, 0.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 14px 28px -24px rgba(16, 24, 45, 0.28) !important;
  transform: translateY(52%) !important;
}

.triada-card__label h3 {
  margin: 0 !important;
  line-height: 1.26 !important;
}

.triada-card:hover .triada-card__label {
  transform: translateY(calc(52% + 24px)) !important;
}

/* Reserve only the space actually occupied by the part of the label below the image. */
@media (max-width: 900px) {
  .triada {
    row-gap: 6rem !important;
  }
}

@media (max-width: 560px) {
  .triada {
    row-gap: 5.5rem !important;
  }

  .triada-card__label {
    left: 6% !important;
    width: 88% !important;
    max-width: none !important;
    padding: 1.1rem 1.25rem 1.2rem !important;
    transform: translateY(50%) !important;
  }

  .triada-card:hover .triada-card__label {
    transform: translateY(calc(50% + 24px)) !important;
  }
}

/* Touch devices should not hide the title behind a sticky hover state. */
@media (hover: none) {
  .triada-card__hover {
    display: none !important;
  }

  .triada-card:hover .triada-card__label {
    opacity: 1 !important;
  }

  .triada-card:hover .triada-card__media img {
    transform: none !important;
  }
}

@media (hover: none) and (min-width: 561px) {
  .triada-card:hover .triada-card__label {
    transform: translateY(52%) !important;
  }
}

@media (hover: none) and (max-width: 560px) {
  .triada-card:hover .triada-card__label {
    transform: translateY(50%) !important;
  }
}

/* Instrument grids: separators are lines, never exposed gray grid background. */
.instr-grid {
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid rgba(23, 32, 51, 0.13) !important;
  border-bottom: 1px solid rgba(23, 32, 51, 0.13) !important;
}

.instr-card,
.section--light-2 .instr-card {
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(23, 32, 51, 0.13) !important;
  border-left: 1px solid rgba(23, 32, 51, 0.13) !important;
  box-shadow: none !important;
}

.instr-card:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  box-shadow: none !important;
  transform: none !important;
}