/* ===================================================================
   MOYO — Services archive styling
   File: solvior-child/inc/pages/services/services.css

   Page-scoped: enqueued only on the /services/ CPT archive (init.php,
   is_post_type_archive('services')). Scoped to .tj-services-page so the
   homepage services section (same .service-style-2 markup) is untouched.
   =================================================================== */

/* ---- Hover: dual mode (light-lift OR theme image reveal) ----
   Two kinds of service cards exist:
   - NO featured image -> no .thumb in DOM. The theme whitens the text onto a
     (missing) dark thumb = white-on-white. We keep the card LIGHT and lift it:
     raise + shadow + blue accent, text stays dark/blue = readable.
   - HAS featured image -> .thumb renders. The theme's native hover reveals the
     image + dark overlay + white text. That's the intended design — we leave
     it alone; only the lift/shadow/border below applies to both.
   :has(.thumb) branches so each card gets the right hover. */

/* applies to BOTH card kinds: lift + shadow + blue border */
.tj-services-page .service-style-2 {
	background-color: #fff;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tj-services-page .service-style-2:hover {
	transform: translateY(-8px);
	box-shadow: 0 18px 40px rgba(0, 117, 255, .12);
	border-color: var(--tj-color-theme-primary); /* #0075ff */
}

/* Kill the core .title:hover letter-spacing widen — it reflowed the title and
   made the text wrap/jump on hover. No spacing change = no scale/jump. */
.tj-services-page .service-style-2 .service-content .title:hover {
	letter-spacing: normal;
}

/* Core caps the title at max-width:290px (solvior-core.css ~:9261), which
   wrapped long titles ("HR Services & Consulting") to two lines. Let the title
   use the full card width. */
.tj-services-page .service-style-2 .service-content .title {
	max-width: none;
}

/* ---- image-LESS cards only: light-lift palette (text dark/blue) ----
   Scoped :not(:has(.thumb)) so cards WITH a featured image keep the theme's
   white-on-dark-image hover untouched. */
.tj-services-page .service-style-2:not(:has(.thumb)):hover .service-icon {
	background-color: var(--tj-color-theme-primary);
}
.tj-services-page .service-style-2:not(:has(.thumb)):hover .service-icon i,
.tj-services-page .service-style-2:not(:has(.thumb)):hover .service-icon svg path {
	color: #fff;
	fill: #fff;
}
.tj-services-page .service-style-2:not(:has(.thumb)):hover .service-content .title a {
	color: var(--tj-color-theme-primary);
}
.tj-services-page .service-style-2:not(:has(.thumb)):hover .service-content .desc {
	color: var(--tj-color-text-body, #5a6478);
}
.tj-services-page .service-style-2:not(:has(.thumb)):hover .service-button,
.tj-services-page .service-style-2:not(:has(.thumb)):hover .service-button i {
	color: var(--tj-color-theme-primary);
}
.tj-services-page .service-style-2:not(:has(.thumb)):hover .service-button::before {
	background-color: var(--tj-color-theme-primary);
}

/* ---- Sequential numbering ----
   The per-service "number" field is inconsistent (two blank, 05 skipped,
   max 06). Hide it and number strictly by display order so the cards read
   01, 02, 03 … in whatever order they're shown. */
.tj-services-page .row {
	counter-reset: moyo-svc;
}

.tj-services-page .service-style-2 {
	counter-increment: moyo-svc;
}

.tj-services-page .service-style-2 .service-content .number {
	display: none; /* hide the inconsistent manual field */
}

.tj-services-page .service-style-2 .service-content .title::before {
	content: counter(moyo-svc, decimal-leading-zero);
	display: block;
	margin-bottom: 15px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: #8a93a5; /* muted grey, matches the theme's number tone */
}

/* Number color on hover: blue on image-less cards (light bg stays), white on
   image cards (white reads over the dark image overlay). */
.tj-services-page .service-style-2:not(:has(.thumb)):hover .service-content .title::before {
	color: var(--tj-color-theme-primary);
}
.tj-services-page .service-style-2:has(.thumb):hover .service-content .title::before {
	color: #fff;
}

/* ---- Force all cards visible ----
   Cards use `wow fadeInUp`: WOW.js hides them, then reveals on scroll. With
   WOW.js janking the thread some cards never get revealed and stay invisible
   ("not all showing"). Force them shown — content visibility beats the fade. */
.tj-services-page .service-style-2.wow {
	visibility: visible !important;
	opacity: 1 !important;
	animation: none !important;
	transform: none !important;
}