/* ==========================================================================
   Gulf Publications — Services Page (service-1.php)
   Additive, page-specific rules only. Every shared component (.gp-hero,
   .gp-num-card, .gp-price-card, .gp-cap-table, .gp-pillar-card,
   .gp-pub-card, .gp-badge-pill, .gp-advisory-bar, .gp-certified-bar …)
   already lives in assets/css/style.css and is reused as-is — this file
   only fills the gaps that are unique to this page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero — smooth diagonal gradient instead of the homepage photo texture
   -------------------------------------------------------------------------- */
.gp-hero--services {
    background-image: linear-gradient(135deg, #0d5c3d 0%, #063b27 60%, #052e1e 100%);
}

.gp-hero--services .gp-hero-overlay {
    opacity: .6;
}

.w-85 {
    width: 75%;
}

.w-15 {
    width: 15%;
}

.gp-hero--services .gp-leader-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--primary-green);
}

/* --------------------------------------------------------------------------
   2. Hero split media — rounded frame + bottom gradient caption
   (the shared .gp-hero-media / .gp-hero-media-caption rules in style.css
   ship with their positioning commented out; restore it here)
   -------------------------------------------------------------------------- */
.gp-hero-media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* box-shadow: 0 24px 60px rgba(0, 0, 0, .28); */
}

.gp-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gp-hero-media-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 22px;
    background: linear-gradient(to top, rgba(6, 59, 39, .92) 0%, rgba(6, 59, 39, 0) 100%);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
}

/* --------------------------------------------------------------------------
   3. "Streamline Your Submission" — permanent reveal on the highlighted
   4th step card (style.css only ever reveals .gp-step-link on :hover)
   -------------------------------------------------------------------------- */
.gp-step-active .gp-step-link {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   3b. Icon sizing — style.css only sizes .gp-step-icon's <img> variant and
   never sizes the arrow inside .gp-step-link / .gp-num-card-link. Left
   unstyled, inline <svg> falls back to its intrinsic 300x150 box, which is
   the oversized-icon bug seen across this page (4-step icons, "Streamline
   Your Submission", every card's "Learn More" arrow).
   -------------------------------------------------------------------------- */
.gp-step-icon svg {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--primary-green);
}

.gp-step-link svg,
.gp-num-card-link svg {
    flex: none;
    width: 16px;
    height: 16px;
}

/* --------------------------------------------------------------------------
   4. Publication Services header row — small "starting from" pricing note
   -------------------------------------------------------------------------- */
.gp-services-journey--price {
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
   5. Capabilities table — small leading icon per service row
   -------------------------------------------------------------------------- */
.gp-cap-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    color: var(--primary-green);
    vertical-align: -5px;
}

.gp-cap-icon svg {
    width: 16px;
    height: 16px;
}

/* --------------------------------------------------------------------------
   6. Recent Successes — plain gradient placeholder (no photography)
   -------------------------------------------------------------------------- */
.gp-pub-img--placeholder {
    background-image:
        linear-gradient(rgba(6, 59, 39, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 59, 39, .06) 1px, transparent 1px),
        linear-gradient(135deg, #eef2fb, #e3e9fa);
    background-size: 22px 22px, 22px 22px, cover;
}

/* --------------------------------------------------------------------------
   7. Certified bar — plain notice variant (no trailing CTA button on this
   page, so drop the space-between the base .gp-certified-bar assumes)
   -------------------------------------------------------------------------- */
.gp-certified-bar--notice {
    justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   8. Small responsive touch-ups specific to this page's layouts
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .gp-hero-media {
        margin-top: 32px;
    }

    .gp-head-row .btn {
        width: 100%;
        text-align: center;
    }
}