/* TPRM Pro page
   Every rule is scoped under .p26 so it keeps priority over general theme rules.
   All TPRM illustrations are transparent PNGs, so they are shown at their real
   size with no card, frame, shadow or glow behind them. */

/* ---------- Hero illustration ---------- */
.p26 .p26-hero-visual .p26-hero-img {
    width:auto;          /* real size (346px); never stretched */
    max-width:100%;
    height:auto;
    box-shadow:none;     /* base p26 adds a card shadow */
    border-radius:0;
}

/* the blurred blue glow the base p26 puts behind the hero image */
.p26 .p26-hero-visual .p26-glow {
    display:none;
}

/* ---------- Intro: problem box + dark "solution" panel ---------- */
.p26 .tp-intro .p26-problem {
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.p26 .tp-intro .p26-problem .p26-lead {
    font-size:16px !important;
    margin-top:16px !important;
}

.p26 .tp-solution p + p {
    margin-top:14px !important;
}

/* ---------- Mitratech Prevalent solutions: alternating text / illustration rows ---------- */
.p26 .tp-rows {
    position:relative;
    display:grid;
    gap:96px;
}

.p26 .tp-row {
    align-items:center;
    margin-bottom:0;
}

.p26 .tp-row .p26-heading {
    margin-bottom:0;
}

/* number + icon badge above each solution heading */
.p26 .tp-badge {
    position:relative;
    width:56px;
    height:56px;
    border-radius:16px;
    background:#0A1E3C;
    color:#5FD3BC;
    display:grid;
    place-items:center;
    margin-bottom:18px;
    box-shadow:0 14px 28px -14px rgba(10,30,60,.55);
}

.p26 .tp-badge-icon {
    display:flex;
    line-height:0;
}

.p26 .tp-badge-num {
    position:absolute;
    top:-8px;
    right:-12px;
    min-width:30px;
    height:22px;
    padding:0 7px;
    border-radius:999px;
    background:#2BBFA3;
    color:#06312A;
    font-size:11px;
    font-weight:800;
    letter-spacing:.04em;
    display:flex;
    align-items:center;
    justify-content:center;
}

.p26 .tp-text {
    max-width:560px;
    margin-top:16px !important;
}

/* inline link inside the copy (theme removes link styling inside .p26) */
.p26 .tp-text a {
    color:#126AD2 !important;
    font-weight:700;
    border-bottom:1px solid currentColor;
}

.p26 .tp-text a:hover {
    color:#0E5BB5 !important;
}

/* illustration: centred in its column at real size, no background.
   margin/padding need !important because base p26 zeroes figure spacing with !important */
.p26 .tp-visual {
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 !important;
    padding:0 !important;
}

.p26 .tp-illustration {
    width:auto;
    max-width:100%;
    height:auto;
    transition:transform .4s cubic-bezier(.2,.7,.3,1);
}

.p26 .tp-row:hover .tp-illustration {
    transform:translateY(-6px);
}

/* illustration on the left for every second row (desktop and tablet only) */
@media only screen and (min-width:769px) {
    .p26 .tp-row:nth-child(even) .p26-challenge-left {
        order:2;
    }
}

@media only screen and (max-width:768px) {
    .p26 .tp-rows {
        gap:56px;
    }
}