/* ============================================================
   Service Hero — METRICS visual
   Performance dashboard for SEO / Google Ads / Meta Ads.
   Loaded only when the service's Hero Visual is "metrics".

   Every accent reads from the --svc-* ramp declared on .svc-hero,
   so the family accent in service-theme.css themes this for free.

   The panel's own neutrals are hard-coded rather than shared: this
   sheet loads only for the metrics family, and that family runs on
   the client logo's blue, where the lilac greys of the other
   families read as a bruise.
   ============================================================ */

.svc-metrics {
    position: relative;
    width: 100%;
    max-width: 540px;
    margin-inline: auto;
}

/* ── Panel ────────────────────────────────────────────────── */
.svc-metrics__panel {
    position: relative;
    z-index: 2;
    padding: clamp(1.1rem, 1.8vw, 1.6rem);
    border-radius: var(--radius-xl);
    background: linear-gradient(165deg, #ffffff 0%, #F3F8FC 100%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 34px 70px rgba(3, 20, 40, 0.5);
}

.svc-metrics__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: clamp(0.9rem, 1.5vw, 1.25rem);
}
.svc-metrics__title {
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.3;
}
.svc-metrics__period {
    flex: none;
    padding: 0.3rem 0.65rem;
    border-radius: var(--radius-full);
    background: rgba(var(--color-accent-rgb, 146, 52, 247), 0.1);
    color: var(--color-accent);
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Headline KPI ─────────────────────────────────────────── */
.svc-metrics__kpi {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: clamp(0.75rem, 1.2vw, 1rem);
}
.svc-metrics__kpi-value {
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(100deg, var(--svc-a), var(--svc-b));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.svc-metrics__kpi-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.svc-metrics__kpi-label {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-dark);
}
.svc-metrics__kpi-note {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-style: normal;
    font-size: 0.72rem;
    color: #16A34A;
}
.svc-metrics__kpi-note svg { width: 13px; height: 13px; flex: none; }

/* ── Trend chart ──────────────────────────────────────────── */
.svc-metrics__chart {
    position: relative;
    height: clamp(78px, 11vw, 112px);
    margin-bottom: clamp(0.9rem, 1.5vw, 1.3rem);
}
.svc-metrics__chart svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.svc-metrics__line {
    stroke: var(--svc-b);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Draw-on: the dash length is generous so any point count is covered. */
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: svcMetricsDraw 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}
@keyframes svcMetricsDraw { to { stroke-dashoffset: 0; } }

/* The area gradient is themed here rather than on the <stop> elements —
   var() is not honoured inside SVG presentation attributes. */
.svc-metrics__stop           { stop-color: var(--svc-b); }
.svc-metrics__stop--top      { stop-opacity: 0.34; }
.svc-metrics__stop--bottom   { stop-opacity: 0; }

.svc-metrics__area {
    opacity: 0;
    animation: svcMetricsFade 0.9s ease-out 1.1s forwards;
}
@keyframes svcMetricsFade { to { opacity: 1; } }

.svc-metrics__dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--svc-c);
    border: 2.5px solid #fff;
    box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb, 146, 52, 247), 0.18);
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: svcMetricsFade 0.4s ease-out 1.5s forwards;
}

/* ── Ranking rows ─────────────────────────────────────────── */
.svc-metrics__rows {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: clamp(0.8rem, 1.3vw, 1.1rem) 0 0;
    list-style: none;
    border-top: 1px solid #E3EAF1;
}
.svc-metrics__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 84px;
    align-items: center;
    gap: 0.6rem;
}
/* The badge column is fixed-width, so it can't just collapse when an editor
   leaves the badge blank — the row has to drop the track itself. */
.svc-metrics__row--norank { grid-template-columns: minmax(0, 1fr) 84px; }
.svc-metrics__rank {
    flex: none;
    min-width: 30px;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(140deg, var(--svc-a), var(--svc-b));
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
}
.svc-metrics__row-label {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    line-height: 1.35;
    /* Keyword strings are editor copy — never let one push the panel wide. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.svc-metrics__bar {
    display: block;
    height: 6px;
    border-radius: var(--radius-full);
    background: #E3EAF1;   /* the logo's grey, cooled to sit under blue */
    overflow: hidden;
}
.svc-metrics__bar i {
    display: block;
    width: var(--bar, 50%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--svc-b), var(--svc-c));
    transform: scaleX(0);
    transform-origin: left center;
    animation: svcMetricsBar 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--i, 0) * 0.12s + 0.9s);
}
@keyframes svcMetricsBar { to { transform: scaleX(1); } }

/* ── Floating chips ───────────────────────────────────────── */
/* The wrapper has no box on desktop, so the chips still position against
   .svc-metrics. On phones it becomes a real row below the panel. */
.svc-metrics__chips { display: contents; }

.svc-metrics__chip {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-full);
    background: #fff;
    box-shadow: 0 18px 40px rgba(3, 20, 40, 0.34);
    color: var(--color-dark);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.svc-metrics__chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--svc-a), var(--svc-b));
    color: #fff;
}
.svc-metrics__chip-icon svg { width: 12px; height: 12px; }

.svc-metrics__chip--1 { top: -18px; right: -14px; }
.svc-metrics__chip--2 { bottom: -18px; left: -14px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1180px) {
    .svc-metrics { max-width: 480px; }
    .svc-metrics__chip { font-size: 0.72rem; padding: 0.45rem 0.7rem; }
}

/* Single column — the visual sits below the copy and centres. */
@media (max-width: 980px) {
    .svc-metrics { max-width: 520px; }
}

/* Phones. The panel is the whole visual here, so the chips tuck INSIDE its
   bounds — hanging them off the corners at this width pushed the page sideways. */
@media (max-width: 720px) {
    /*
     * Matches the orbit hero: on a phone the visual sits below the copy, so a
     * sideways slide plus a 200ms wait reads as the panel lagging in.
     */
    .svc-hero__visual--metrics[data-reveal] {
        transform: translateY(24px);
        transition-delay: 0s;
    }
    .svc-hero__visual--metrics[data-reveal].is-visible { transform: none; }

    .svc-metrics { max-width: min(100%, 460px); }
    .svc-metrics__panel.svc-hero__float { animation: none; }
    .svc-metrics__chip.svc-hero__float  { animation: none; }

    /*
     * Chips drop out of the corners into a row beneath the panel. Pinned to the
     * corners at this width they landed on top of the title and the period chip.
     */
    .svc-metrics__chips {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }
    .svc-metrics__chip {
        position: static;
        font-size: 0.7rem;
        padding: 0.4rem 0.65rem;
        box-shadow: 0 10px 26px rgba(3, 20, 40, 0.3);
    }

    /* The period chip is nowrap — let it drop to its own line. */
    .svc-metrics__head { flex-wrap: wrap; }

    .svc-metrics__kpi { gap: var(--space-3); }
    .svc-metrics__rows { gap: 0.5rem; }
    .svc-metrics__row { grid-template-columns: auto minmax(0, 1fr) 62px; }
    .svc-metrics__row--norank { grid-template-columns: minmax(0, 1fr) 62px; }
}

@media (max-width: 560px) {
    /* The rank badge and the bar both compete with the keyword for width.
       The bar is the weaker signal at this size, so it goes. */
    .svc-metrics__row { grid-template-columns: auto minmax(0, 1fr); }
    .svc-metrics__row--norank { grid-template-columns: minmax(0, 1fr); }
    .svc-metrics__bar { display: none; }
    .svc-metrics__row-label { font-size: 0.74rem; }
}

@media (max-width: 400px) {
    .svc-metrics__panel { padding: 0.9rem; }
    .svc-metrics__kpi-value { font-size: 1.7rem; }
    .svc-metrics__chip { font-size: 0.66rem; }
    .svc-metrics__chip-icon { width: 19px; height: 19px; }
    .svc-metrics__chip-icon svg { width: 10px; height: 10px; }
    /* Two chips over a narrow panel start to collide — keep the stronger one. */
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .svc-metrics__line {
        stroke-dashoffset: 0;
        animation: none;
    }
    .svc-metrics__area,
    .svc-metrics__dot { opacity: 1; animation: none; }
    .svc-metrics__bar i { transform: scaleX(1); animation: none; }
}