/* ============================================================
   Why Choose Us — showcase look for the home, About and service pages
   Layers on top of _service-why-choose.css (which still serves the
   service pages unchanged): white cards with solid orange icon
   chips, titles held to two lines so every card's sub-text lines
   up, orange highlighted heading words, and a black CTA banner.
   Each page sets its own band background.
   ============================================================ */

:is(.page-home, .page-about, .single-service) .svc-why {
    /* Highlighted heading words: orange gradient text */
    --hl-bg: var(--gradient-brand); --hl-clip: text; --hl-fill: transparent;
}

/* Home and service pages: the warm band with a faint dot field that the previous
   Why Choose Yagas section used */
:is(main.page-home, main.single-service) .svc-why {
    background: #FFF6F1;
}
:is(main.page-home, main.single-service) .svc-why::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(42rem 26rem at 100% 0%, rgba(var(--color-primary-rgb), .16), transparent 70%),
        radial-gradient(30rem 22rem at 0% 100%, rgba(var(--color-accent-rgb), .10), transparent 70%),
        radial-gradient(rgba(0,0,0,.07) 1px, transparent 1.2px) 0 0 / 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
    pointer-events: none;
}

/* ── Header ───────────────────────────────────────────────── */
:is(.page-home, .page-about, .single-service) .svc-why__pill {
    color: var(--color-dark);
    border: 1px solid rgba(var(--color-primary-rgb), .25);
    box-shadow: none;
}
:is(.page-home, .page-about, .single-service) .svc-why__pill svg { color: var(--color-primary); }
:is(.page-home, .page-about, .single-service) .svc-why__heading .gradient-text {
    background: var(--gradient-brand);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-primary);
}
:is(.page-home, .page-about, .single-service) .svc-why__point svg { color: var(--color-dark); }
:is(.page-home, .page-about, .single-service) .svc-why__media--empty {
    background: linear-gradient(140deg, #FFCDB8 0%, #FFE3D6 100%);
    opacity: 1;
}

/* Icon chips: solid orange, white glyph */
:is(.page-home, .page-about, .single-service) .svc-why__chip-icon,
:is(.page-home, .page-about, .single-service) .svc-why-card__icon {
    background: var(--gradient-brand);
    color: var(--on-brand);
    box-shadow: 0 10px 22px -10px rgba(var(--color-primary-rgb), .75);
}

/* ── Cards ────────────────────────────────────────────────── */
:is(.page-home, .page-about, .single-service) .svc-why-card {
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 14px 32px -20px rgba(0,0,0,.22);
}
:is(.page-home, .page-about, .single-service) .svc-why-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--color-primary-rgb), .3);
    box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 26px 44px -22px rgba(var(--color-primary-rgb), .55);
}
:is(.page-home, .page-about, .single-service) .svc-why-card__icon { width: 52px; height: 52px; border-radius: 16px; }
:is(.page-home, .page-about, .single-service) .svc-why-card__icon svg { width: 24px; height: 24px; }
:is(.page-home, .page-about, .single-service) .svc-why-card:hover .svc-why-card__icon {
    background: var(--gradient-brand);
    color: var(--on-brand);
    transform: rotate(-6deg) scale(1.05);
}
/* The bar grows across the card floor on hover */
:is(.page-home, .page-about, .single-service) .svc-why-card__bar { transition: width var(--transition-slow); }
:is(.page-home, .page-about, .single-service) .svc-why-card:hover .svc-why-card__bar { width: 100%; }

@media (min-width: 768px) {
    /* Every title takes two lines' height, so the sub-text under it
       starts at the same point in all six cards. */
    :is(.page-home, .page-about, .single-service) .svc-why-card__title { min-height: calc(1.28em * 2); }
}

/* ── CTA banner: black card, white copy ───────────────────── */
:is(.page-home, .page-about, .single-service) .svc-why__banner {
    background:
        radial-gradient(24rem 10rem at 0% 50%, rgba(var(--color-primary-rgb), .28), transparent 70%),
        #000;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 30px 60px -34px rgba(0,0,0,.6);
}
:is(.page-home, .page-about, .single-service) .svc-why__banner-title { color: #fff; }
:is(.page-home, .page-about, .single-service) .svc-why__banner-text { color: rgba(255,255,255,.7); }
:is(.page-home, .page-about, .single-service) .svc-why__banner-icon,
:is(.page-home, .page-about, .single-service) .svc-why__banner-btn,
:is(.page-home, .page-about, .single-service) .svc-why__banner-btn:hover { color: var(--on-brand); }
:is(.page-home, .page-about, .single-service) .svc-why__banner-btn { border-radius: var(--radius-full); }