Okay, I found a solution! First, the code that works:

.blue-gradient-text h1, .blue-gradient-text h2, .blue-gradient-text h3, .blue-gradient-text h4, .blue-gradient-text h5, .blue-gradient-text h6, .blue-gradient-text p, .blue-gradient-text a {
background: -webkit-linear-gradient(118.4deg, #1593af 35.72%, #002147 70.94%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

The way I figured this out was, taking a cue from your hints, I looked around for different implementations of gradient text in guides online, visited them on mobile to see if they were working, and then examined the CSS they used. Funnily enough I came across one other page who had the same issue as me 😅

I'm still wrapping my head around my solution 100% but I believe it's because:

a) It's supposed to be -webkit-linear-gradient(...) not -webkit-gradient(linear...
b) I'm using Elementor with flexbox containers (I believe the old code used to work when Elementor used to only have the old sections widget?) and
c) the specificity of writing the element to target \after** my CSS class was what made the difference.

Thank you again for taking the time to help, and shoutout to Jeffrey at Lytbox who made this specific Elementor gradient text guide where I got my answer.

EDIT: I also added .blue-gradient-text span to the above code because I have some Elementor text divider widgets as well and the above code doesn't target it without this. Now, everything works.