/* ============================================================
   SERVICES PAGE -- dark "stage" treatment matching page-about.php
   and page-contact.php. Same visual language: one dark panel
   (--card-public-bg-alt), a single soft --color-accent glow
   top-right, bold heading, eyebrow label. Services are admin-
   configurable (variable count/length), so instead of About's
   fixed borderless pillar list, each service gets its own bordered
   panel (same treatment as Contact's map panel) in a responsive
   auto-fill grid. Text-color selectors are scoped under
   .services-stage from the start -- assets/css/main.css's
   .public-main p/.public-main ul/.public-main a are more specific
   than a lone class and will silently win otherwise (see the fix
   that had to be made to contact.css for this same reason).
   Loaded only on page-services.php. */

/* ---- Stage ---- */
.services-stage {
    position: relative;
    overflow: hidden;
    background: var(--card-public-bg-alt);
    border-radius: 28px;
    padding: 56px 48px 64px;
    margin-top: 24px;
    color: var(--public-text-bright);
}

.services-stage-glow {
    position: absolute;
    right: -20%;
    top: -35%;
    width: 820px;
    height: 820px;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--color-accent) 45%, transparent) 0%,
        color-mix(in srgb, var(--color-accent) 20%, transparent) 45%,
        transparent 75%);
    filter: blur(100px);
    pointer-events: none;
    animation: services-glow-drift 16s ease-in-out infinite;
}

@keyframes services-glow-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-30px, 20px) scale(1.1); }
}

.services-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--public-text-special);
    margin-bottom: 14px;
    position: relative;
}

.services-stage h1 {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 18px;
    position: relative;
}

.services-stage .breadcrumbs {
    margin-bottom: 22px;
    position: relative;
}

.services-stage .breadcrumbs a,
.services-stage .breadcrumbs span {
    color: rgba(255, 255, 255, 0.6);
}

.services-stage .breadcrumbs a:hover {
    color: #fff;
}

.services-stage .services-intro-text {
    max-width: 720px;
    color: var(--public-text-bright);
    font-size: 18px;
    line-height: 1.7;
    position: relative;
}

.services-stage .services-intro-text strong {
    color: #fff;
}

/* ---- Services grid: bordered panels, same treatment as Contact's
   .contact-map-panel, in a responsive auto-fill grid since the
   number of services is admin-configurable. ---- */
.services-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
    margin-top: 56px;
}

.services-card {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 28px;
    background: rgba(255, 255, 255, 0.03);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.services-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
}

/* Icon + heading share a row so the icon centers against the
   heading's line specifically (same fix as Contact's info blocks
   and About's pillars). */
.services-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.services-card-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--color-accent) 60%, transparent);
    color: var(--color-accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-card-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.services-card-heading {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.services-stage .services-card-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 16px;
    line-height: 1.6;
}

.services-stage .services-card-list {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
}

.services-stage .services-card-list li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    line-height: 1.5;
}

.services-stage .services-card-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--color-accent-light);
    font-weight: 700;
}

/* ---- Scroll reveal ----
   Progressive enhancement: elements are fully visible by default
   so a JS failure never hides content. assets/js/services-page.js
   adds .reveal-pending right before it starts observing, then
   swaps it for .is-visible as each element scrolls into view. ---- */
[data-reveal] {
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal].reveal-pending {
    opacity: 0;
    transform: translateY(24px);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .services-stage-glow {
        animation: none;
    }

    [data-reveal] {
        transition: none;
    }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .services-stage {
        padding: 40px 24px 48px;
        border-radius: 20px;
    }

    .services-stage h1 {
        font-size: 34px;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}