/* =========================================================================
   WTL TECH — premium.css  (final depth pass; loaded last)
   Adds: gradient fill + resting top hairline on flat surfaces, a button
   sheen sweep, richer card hover glow, partner-tier accents on the logo
   wall, and a soft glow halo behind each service-detail icon.
   Every rule here only ADDS to earlier layers (background-image alongside
   an existing background-color; a fresh box-shadow only where none existed
   at rest) so nothing here can silently cancel an earlier declaration.
   ========================================================================= */

/* ---------- Surface depth: gradient sheen + resting top hairline ---------- */
.card--service,
.mv-card,
.vision-pillar,
.sector,
.vendor,
.partner-card,
.client-card,
.logo-chip,
.stat {
	background-image: linear-gradient(165deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
	box-shadow: inset 0 1px 0 var(--hairline-top);
}

/* ---------- Five-card layout: 2 lead + 3 supporting ----------
   A plain auto-fit grid puts five cards on a 3+2 row and leaves an orphan
   gap on the right of the second row, which reads as unfinished. Six columns
   with deliberate spans gives two complete rows and, as a bonus, a real
   hierarchy: the two lead practices get the wider cards. Applied only when
   the section actually has five cards (class added in PHP). */
@media (min-width: 981px) {
	.cards--five { grid-template-columns: repeat(6, 1fr); }
	.cards--five > :nth-child(1),
	.cards--five > :nth-child(2) { grid-column: span 3; }
	.cards--five > :nth-child(n + 3) { grid-column: span 2; }
	/* The two lead cards get a little more room to breathe. */
	.cards--five > :nth-child(-n + 2) { padding: 34px; }
	.cards--five > :nth-child(-n + 2) .card__title { font-size: 23px; }
}
/* Tablet: two even columns, last card spans full width so no orphan remains. */
@media (min-width: 641px) and (max-width: 980px) {
	.cards--five { grid-template-columns: repeat(2, 1fr); }
	.cards--five > :nth-child(5) { grid-column: 1 / -1; }
}

/* ---------- Scroll progress ----------
   A hairline reading position indicator across the very top of the sticky
   header. scaleX is driven by a CSS var from motion.js (compositor-only, so
   it never triggers layout on scroll). */
.scroll-progress {
	position: absolute; inset-inline: 0; top: 0; height: 2px; z-index: 5;
	transform: scaleX(var(--progress, 0)); transform-origin: left center;
	background: linear-gradient(90deg, var(--teal), var(--cyan) 55%, var(--cyan-2));
	box-shadow: 0 0 12px -2px rgba(43, 177, 222, .8);
	pointer-events: none;
}
.lang-ar .scroll-progress { transform-origin: right center; }

/* Sticky nav compacts a little once the page starts moving. */
.nav { transition: background .3s var(--ease), border-color .3s var(--ease); }
.site-header.is-scrolled .nav__in { min-height: 64px; }
.nav__in { transition: min-height .3s var(--ease-out); }

/* ---------- Button sheen sweep ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%);
	background-size: 220% 220%; background-position: 140% 0;
	opacity: 0; transition: opacity .2s var(--ease);
}
.btn:hover::after { opacity: 1; animation: wtl-btn-sheen .9s var(--ease-out); }
@keyframes wtl-btn-sheen { from { background-position: 140% 0; } to { background-position: -60% 0; } }
.btn > * { position: relative; z-index: 2; }

/* ---------- Richer hover glow (layers on top of each component's own
   existing transform/border-color transition — only the box-shadow value
   changes here, so it animates smoothly using the transition already
   declared where the card is defined). ---------- */
.card--service:hover, .sector:hover, .vendor:hover, .partner-card:hover, .vision-pillar:hover {
	box-shadow: var(--shadow-lift), 0 0 46px -18px rgba(43, 177, 222, .35);
}

/* ---------- Partner tier accents (homepage logo wall) ---------- */
.logo-chip--partner { position: relative; }
.logo-chip--partner::before {
	content: ""; position: absolute; inset-inline: 14px; top: 0; height: 2px; border-radius: 2px;
	background: var(--line);
}
.logo-chip--partner.tier--gold::before { background: linear-gradient(90deg, #d6aa46, #f0d38a); }
.logo-chip--partner.tier--partner::before { background: linear-gradient(90deg, var(--cyan), var(--cyan-2)); }
.logo-chip--partner.tier--strategic::before { background: linear-gradient(90deg, var(--teal), var(--indigo)); opacity: .7; }

/* ---------- Services detail: soft glow halo behind each icon ---------- */
.svc-block__icon { position: relative; z-index: 0; }
.svc-block__icon::before {
	content: ""; position: absolute; top: 50%; left: 50%; width: 180px; height: 180px;
	transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
	background: radial-gradient(circle, rgba(43, 177, 222, .10) 0%, transparent 68%);
	border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
	.btn::after { display: none; }
}