.gjr-series-worlds {
    position: relative;
    z-index: 8;
    margin-top: -104px;
    padding: 0 0 clamp(28px, 3vw, 46px);
    background: linear-gradient(to bottom, transparent 0 104px, var(--gjr-off-white) 104px 100%);
}

.gjr-series-worlds__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.gjr-series-card {
    position: relative;
    min-height: clamp(350px, 29vw, 430px);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 8px;
    background: #102d40;
    box-shadow: 0 18px 42px rgba(12,31,43,.18);
}

.gjr-series-card__media,
.gjr-series-card__shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gjr-series-card__media {
    z-index: -3;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform 900ms cubic-bezier(.2,.7,.2,1), filter 700ms ease;
    will-change: transform;
}

.gjr-series-card--jack .gjr-series-card__media {
    background-image: url('../images/gjranger-card-jack-v01.webp');
    background-position: center center;
    transform: scale(1.075) translateX(7%);
    filter: saturate(.94) brightness(.94) contrast(1.08) hue-rotate(-4deg);
}

.gjr-series-card--noah .gjr-series-card__media {
    background-image: url('../images/gjranger-card-noah-v01.webp');
    background-position: 69% center;
    filter: saturate(1.06) brightness(.82) contrast(1.06);
}

.gjr-series-card__shade { z-index: -2; }

.gjr-series-card--jack .gjr-series-card__shade {
    background:
        linear-gradient(90deg, rgba(4,26,40,.98) 0%, rgba(7,35,52,.92) 39%, rgba(9,39,57,.52) 63%, rgba(9,39,57,.08) 100%),
        linear-gradient(to top, rgba(3,19,30,.76), transparent 60%);
}

.gjr-series-card--noah .gjr-series-card__shade {
    background:
        linear-gradient(90deg, rgba(45,17,5,.98) 0%, rgba(66,24,6,.90) 39%, rgba(86,31,5,.45) 63%, rgba(87,31,6,.05) 100%),
        linear-gradient(to top, rgba(31,12,4,.78), transparent 60%);
}

.gjr-series-card__content {
    display: flex;
    min-height: inherit;
    max-width: 430px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(34px, 4vw, 58px);
    color: var(--gjr-white);
}

.gjr-series-card__eyebrow {
    margin: 0 0 9px;
    color: #9bc8df;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.gjr-series-card--noah .gjr-series-card__eyebrow { color: #efad6f; }

.gjr-series-card h3 {
    margin: 0;
    color: var(--gjr-white);
    font-family: var(--gjr-font-display);
    font-size: clamp(48px, 4.2vw, 68px);
    font-weight: 400;
    letter-spacing: .018em;
    line-height: .95;
    text-transform: uppercase;
}

.gjr-series-card__role {
    margin: 18px 0 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .045em;
    line-height: 1.48;
    text-transform: uppercase;
}

.gjr-series-card--noah .gjr-series-card__role { color: #f2a15b; }

.gjr-series-card__rule {
    width: 43px;
    height: 1px;
    margin: 21px 0 18px;
    background: rgba(255,255,255,.72);
}

.gjr-series-card--noah .gjr-series-card__rule { background: rgba(239,173,111,.9); }

.gjr-series-card__tagline {
    max-width: 250px;
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
}

.gjr-series-card__button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 27px;
    padding: 13px 17px;
    border: 1px solid rgba(155,200,223,.95);
    border-radius: 4px;
    background: rgba(4,26,40,.16);
    color: var(--gjr-white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .045em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform var(--gjr-transition), background-color var(--gjr-transition), border-color var(--gjr-transition);
}

.gjr-series-card--noah .gjr-series-card__button {
    border-color: var(--gjr-orange);
    background: rgba(198,106,34,.08);
    color: #ffd5ae;
}

.gjr-series-card__button:hover,
.gjr-series-card__button:focus-visible {
    transform: translateY(-2px);
    background: rgba(255,255,255,.12);
}

.gjr-series-card--noah .gjr-series-card__button:hover,
.gjr-series-card--noah .gjr-series-card__button:focus-visible {
    border-color: #e98232;
    background: rgba(198,106,34,.24);
    color: #fff;
}

.gjr-series-card:hover .gjr-series-card__media,
.gjr-series-card:focus-within .gjr-series-card__media {
    transform: scale(1.035);
}

.gjr-series-card--jack:hover .gjr-series-card__media,
.gjr-series-card--jack:focus-within .gjr-series-card__media {
    transform: scale(1.105) translateX(7%);
}


@media (max-width: 900px) {
    .gjr-series-worlds {
        margin-top: -74px;
        background: linear-gradient(to bottom, transparent 0 74px, var(--gjr-off-white) 74px 100%);
    }

    .gjr-series-worlds__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .gjr-series-card { min-height: 410px; }
}

@media (max-width: 600px) {
    .gjr-series-worlds {
        margin-top: -24px;
        padding-bottom: 34px;
        background: linear-gradient(to bottom, transparent 0 24px, var(--gjr-off-white) 24px 100%);
    }

    .gjr-series-card { min-height: 390px; }

    .gjr-series-card--jack .gjr-series-card__media { background-position: center center; transform: scale(1.08) translateX(4%); }
    .gjr-series-card--noah .gjr-series-card__media { background-position: 69% center; }

    .gjr-series-card__content { padding: 34px 28px; }
}

/* Mobile polish v1.3 — first card stays visually attached to the hero. */
@media (max-width: 600px) {
    .gjr-series-worlds {
        margin-top: -36px;
        background: linear-gradient(
            to bottom,
            transparent 0 36px,
            var(--gjr-off-white) 36px 100%
        );
    }

    .gjr-series-worlds__grid {
        gap: 14px;
    }

    .gjr-series-card__button {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
    }
}

/* === Homepage hero → Meet cards spacing v1.4.7 ===
   The homepage character cards are .gjr-series-worlds, not .gjr-home-character-grid. */
.gjr-series-worlds {
    margin-top: -78px !important;
}

@media (max-width: 1024px) {
    .gjr-series-worlds {
        margin-top: -12px !important;
    }
}

@media (max-width: 767px) {
    .gjr-series-worlds {
        margin-top: 0 !important;
    }
}


/* === Jack custom artwork v1 === */
.gjr-series-card--jack .gjr-series-card__media{
    background-image:
      linear-gradient(90deg,
        rgba(8,28,49,.88) 0%,
        rgba(10,36,60,.74) 24%,
        rgba(10,36,60,.38) 52%,
        rgba(10,36,60,.12) 74%,
        rgba(10,36,60,0) 100%),
      url("/wp-content/uploads/2026/08/gjranger-meet-jack-reyes-v1.webp") !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
}

/* === Noah custom artwork v2 — image left, copy right === */
.gjr-series-card--noah .gjr-series-card__media{
    background-image:
      url("/wp-content/uploads/2026/08/gjranger-meet-noah-kane-v1.webp") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    filter: saturate(1.03) brightness(.93) contrast(1.04);
}

.gjr-series-card--noah .gjr-series-card__shade{
    background:
        linear-gradient(
            270deg,
            rgba(48,16,4,.97) 0%,
            rgba(62,21,5,.92) 34%,
            rgba(80,29,6,.62) 58%,
            rgba(94,36,8,.22) 76%,
            rgba(94,36,8,0) 100%
        ),
        linear-gradient(to top, rgba(31,12,4,.58), transparent 58%);
}

.gjr-series-card--noah .gjr-series-card__content{
    max-width: 430px;
    margin-left: auto;
    align-items: flex-end;
    text-align: right;
}

.gjr-series-card--noah .gjr-series-card__tagline{
    margin-left: auto;
}

.gjr-series-card--noah .gjr-series-card__button{
    margin-left: auto;
}

@media (max-width: 900px){
    .gjr-series-card--noah .gjr-series-card__media{
        background-position: center center !important;
    }

    .gjr-series-card--noah .gjr-series-card__content{
        margin-left: auto;
        align-items: flex-end;
        text-align: right;
    }
}

@media (max-width: 600px){
    .gjr-series-card--noah .gjr-series-card__media{
        background-position: 42% center !important;
    }
}