/* =========================================================
   Services — /services/ (987)
   Design: "Services.dc.html", 2026-09-23.

   Classes on the page's Bricks elements (.brk-sv-*), set as
   _cssClasses by _project-docs/scripts/services-uptime-2026-09-23.php.
   Loaded on page 987 only (services.php).

   Headings and buttons inherit their font from the theme
   style and ACSS; nothing here declares a font-family.
   Radii follow DESIGN.md > Shapes.

   Icons that sit in running CSS (arrow, external, download)
   are the theme's icon files used as masks, so they take the
   text colour like the rest of the icon language.
   ========================================================= */

/* ── Shared type ── */
.brk-sv-kicker,
.brk-sv-label,
.brk-sv-card__kicker,
.brk-sv-jump__label {
    font-size: var(--text-xs, 1.2rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dark-muted, rgba(0, 0, 0, 0.8));
    margin: 0;
}

/* Spacing inside the page's Bricks containers and blocks comes from their
   row-gap (1.6rem). The margins below are only what the design adds on top —
   a full margin here doubles the gap. */

/* Snedstrecket före etiketten. Samma gula som .brk-pk__slash. */
.brk-sv-kicker span {
    color: var(--secondary, #f1b204);
    margin-right: 0.15em;
}

.brk-sv-lead {
    font-size: var(--text-l, 1.9rem);
    color: var(--text-dark, #000);
}

.brk-sv-sub {
    color: var(--text-dark-muted, rgba(0, 0, 0, 0.8));
    margin: 0 0 var(--space-m, 3rem);
}

/* Theme icon files as masks: they take currentColor like inline icons do. */
.brk-sv-linklist a:not([href^="tel:"])::after,
.brk-sv-card__cta::after,
.brk-sv-self__cta::after {
    content: "";
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    background: currentColor;
    mask: url(../../icons/brokk-arrow.svg) center / contain no-repeat;
}

/* ── Hero ──
   Image element carries the site's hero image class (vnflvn: absolute, cover,
   focus point from the featured image). The gradient keeps the left-hand text
   legible on any photo; the right side stays mostly photo. */
.brk-sv-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    justify-content: center;
    min-height: 44rem;
    background: var(--bg-ultra-dark, #1a1a1a);
    color: var(--text-light, #fff);
}

.brk-sv-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgb(0 0 0 / 0.8) 0%, rgb(0 0 0 / 0.55) 45%, rgb(0 0 0 / 0.1) 100%);
}

.brk-sv-hero .brk-sv-kicker {
    color: var(--text-light-muted, rgba(255, 255, 255, 0.8));
}

.brk-sv-hero__title {
    max-width: 13em;
    margin: 0 0 0.6rem;
}

.brk-sv-hero__lead {
    max-width: 52ch;
    font-size: var(--text-l, 1.9rem);
    color: var(--text-light-muted, rgba(255, 255, 255, 0.8));
    margin: 0 0 1.4rem;
}

/* ── Hero som bara bild + titelrad (design 1b, "Services hero utan text", 2026-10-05) ──
   Heron bär bara fotot; rubrik, kicker och knapp ligger i titelraden under den.
   Linjen under titelraden är ljusgrå, inte svart (Anders: inga hårda svarta linjer). */
.brk-sv-hero--image {
    min-height: 0;
    height: 40rem;
}
.brk-sv-hero--image::after {
    content: none;
}

.brk-sv-title {
    padding-block: var(--space-xl) var(--space-l);
    border-bottom: 1px solid var(--neutral-light, #d9d9d9);
}
.brk-sv-title__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-xl);
}
.brk-sv-title__text {
    gap: var(--space-xs);
}
.brk-sv-title__heading {
    margin: 0;
    max-width: 22em;
    text-transform: uppercase;
}
/* Två textnoder i markupen (för översättningarna) — samma färg här. */
.brk-sv-title__heading span {
    color: inherit;
}
.brk-sv-title__inner > .brxe-button {
    flex: none;
}

@media (max-width: 767px) {
    .brk-sv-hero--image {
        height: 24rem;
    }
    .brk-sv-title__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-m);
    }
}

/* ── "On this page" ── */
.brk-sv-jump {
    padding-block: 0;
    border-bottom: 1px solid var(--neutral-light, #d9d9d9);
}

/* "On this page" följer med under den klibbiga sidhuvudet (124 px, samma som .brk-sv-eco nedan).
   Under 768 px är sidhuvudet inte klibbigt och raden bryts på flera rader, så den får scrolla bort. */
@media (min-width: 768px) {
    .brk-sv-jump {
        position: sticky;
        top: calc(124px + var(--wp-admin--admin-bar--height, 0px));
        z-index: 10;
        background: var(--white, #fff);
    }
}

.brk-sv-jump__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-l, 4rem);
    row-gap: 0.4rem;
    min-height: 5.2rem;
    padding-block: 1rem;
}

.brk-sv-jump__inner a {
    font-size: var(--text-s, 1.4rem);
    font-weight: 500;
}

/* Pil upp sist i raden (läggs dit av jump-spy.js). Pilikonen pekar åt höger och vrids uppåt. */
.brk-sv-jump__top {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    margin-left: auto;
}
.brk-sv-jump__top::after {
    content: "";
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    background: currentColor;
    mask: url(../../icons/brokk-arrow.svg) center / contain no-repeat;
    transform: rotate(-90deg);
}

/* Aktiv sektion (jump-spy.js): understruket i primärfärg, inte bara färg. */
.brk-sv-jump__inner a[aria-current] {
    text-decoration: underline;
    text-decoration-color: var(--primary);
    text-decoration-thickness: 0.2rem;
    text-underline-offset: 0.6rem;
}

/* ── Intro ── */
.brk-sv-intro {
    padding-bottom: 0;
}

.brk-sv-intro__grid {
    display: grid;
    grid-template-columns: var(--grid-3-2);
    gap: var(--space-xxl, 8rem);
    align-items: start;
    padding-bottom: var(--section-space-s);
    border-bottom: 1px solid var(--neutral-light, #d9d9d9);
}

/* Tätare mellan introts linje och "The Uptime ecosystem" (Anders 2026-10-06). */
.brk-sv-intro + .brk-sv-eco {
    padding-top: var(--section-space-s);
}

.brk-sv-intro__main > * {
    max-width: 68ch;
}

.brk-sv-intro__main .brk-sv-label {
    margin-top: 1.2rem;
}

/* The three ingredients: a rich-text <ol>, numbered 01–03 by CSS so the
   editor only types the list. */
.brk-sv-numlist {
    width: 100%;
}

.brk-sv-numlist ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: brk-sv;
    border-top: 1px solid var(--neutral-light, #d9d9d9);
}

.brk-sv-numlist li {
    counter-increment: brk-sv;
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    margin: 0;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--neutral-light, #d9d9d9);
}

.brk-sv-numlist li::before {
    content: counter(brk-sv, decimal-leading-zero);
    font-size: var(--text-xs, 1.2rem);
    font-weight: 600;
    line-height: 2;
    color: var(--text-dark-muted); /* inte gult, Anders 2026-10-06 */
}

/* "Need support?" — a ruled list, not a box. */

.brk-sv-support h3,
.brk-sv-ingredients h3 {
    font-size: var(--h4, 2rem);
    margin: 0;
}

.brk-sv-support p {
    font-size: var(--text-s, 1.4rem);
    color: var(--text-dark-muted, rgba(0, 0, 0, 0.8));
    margin: 0;
}

.brk-sv-linklist {
    width: 100%;
    border-top: 1px solid var(--neutral-light, #d9d9d9);
}

/* Raderna har egen padding; blockets standardgap (16 px) gav mer luft ovanför
   rad 2–3 än under (Anders 2026-10-06). Två klasser väger över .brxe-block. */
.brk-sv-support .brk-sv-linklist {
    gap: 0;
}

.brk-sv-linklist a {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--neutral-light, #d9d9d9);
    font-size: var(--text-s, 1.4rem);
    font-weight: 600;
    color: var(--text-dark, #000);
}

.brk-sv-linklist a::after {
    margin-left: auto;
}

.brk-sv-linklist .icon svg {
    width: 1.8rem;
    height: 1.8rem;
}

/* ── Uptime ecosystem: four link cards (618 / 999 / 1003 / my.brokk.com) ── */
/* align-items: Bricks' .brxe-block sets flex-start, which in a grid stops the
   cards in a row from sharing a height. Same on .brk-sv-self__grid. */
.brk-sv-cards {
    display: grid;
    grid-template-columns: var(--grid-2);
    align-items: stretch;
    gap: 1px;
    width: 100%;
    background: var(--neutral-light, #d9d9d9);
    border: 1px solid var(--neutral-light, #d9d9d9);
    border-radius: var(--radius, 5px);
    overflow: hidden;
}

.brk-sv-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-m);
    background: var(--white, #fff);
    color: var(--text-dark, #000);
    /* The whole card is a link, and site links are 600; the CTA row sets its own. */
    font-weight: 400;
    text-decoration: none;
    transition: background-color var(--dur-fast) ease;
}

.brk-sv-card:hover {
    background: var(--neutral-ultra-light, #f2f2f2);
}

.brk-sv-card:focus-visible {
    outline: 2px solid var(--secondary, #f1b204);
    outline-offset: -2px;
}

.brk-sv-card__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin: 0 0 var(--space-xs);   /* extra luft under bilden (2026-10-02) */
}

.brk-sv-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brk-sv-card__title {
    font-size: var(--h4, 2rem);
    margin: 0;
}

.brk-sv-card__text {
    flex: 1;
    font-size: var(--text-s, 1.4rem);
    color: var(--text-dark-muted, rgba(0, 0, 0, 0.8));
    line-height: 1.6;
    margin: 0;
}

.brk-sv-card__cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin-top: var(--space-xs);
    padding-top: var(--space-s);
    border-top: 1px solid var(--neutral-light, #d9d9d9);
    font-size: var(--text-s, 1.4rem);
    font-weight: 600;
}

.brk-sv-card--external .brk-sv-card__cta::after {
    mask-image: url(../../icons/brokk-external.svg);
}

/* Jump targets clear the sticky header (124px, same offset as dealer-locator). */
.brk-sv-eco,
.brk-sv-self,
.brk-sv-cta {
    scroll-margin-top: calc(124px + var(--wp-admin--admin-bar--height, 0px) + var(--space-m, 3rem));
}

/* Från 768 px ligger även "On this page" (5,3 rem) kvar överst: målet ska landa under båda. */
@media (min-width: 768px) {
    .brk-sv-eco,
    .brk-sv-self,
    .brk-sv-cta {
        scroll-margin-top: calc(124px + var(--wp-admin--admin-bar--height, 0px) + 5.3rem + var(--space-m, 3rem));
    }
}

/* ── Self-service — dark surface ──
   Same values as the black "Technical support & self-service" box in the 8C
   evaluation (ec0ijj on this page): --bg-ultra-dark, light heading,
   --text-light-muted body, --neutral-dark hairlines. */
.brk-sv-self {
    --brk-sv-self-line: var(--neutral-dark, #404040);
    /* ACSS link hover defaults to --neutral (black): invisible on this surface. */
    --link-color-hover: var(--primary, #ffcd00);
    background: var(--bg-ultra-dark, #1a1a1a);
    color: var(--text-light, #fff);
}

.brk-sv-self :is(h2, h3) {
    color: var(--text-light, #fff);
}

.brk-sv-self .brk-sv-kicker,
.brk-sv-self .brk-sv-sub {
    color: var(--text-light-muted, rgba(255, 255, 255, 0.8));
}

/* Cards: a plate each, yellow left edge — the same edge as the wear-parts box
   on /services/spare-parts/ (3px --primary on --radius). */
/* Två kort sedan Troubleshooting-PDF:en togs bort (Ida 2026-09-28). */
.brk-sv-self__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--grid-gap, 2.4rem);
    width: 100%;
}

.brk-sv-self__item {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: var(--space-l, 3.2rem) var(--space-l, 3.2rem) var(--space-xl, 4rem);
    background: var(--base, #2d2d2d);
    border: 1px solid var(--brk-sv-self-line);
    border-radius: var(--radius, 5px);
    color: var(--text-light, #fff);
    font-weight: 400;   /* same reason as .brk-sv-card */
    text-decoration: none;
    transition: background-color var(--dur-fast) ease;
}

.brk-sv-self__item:hover {
    background: var(--neutral-dark, #404040);
}

.brk-sv-self__item:focus-visible {
    outline: 2px solid var(--primary, #ffcd00);
    outline-offset: 2px;
}

/* Gult på mörk botten är tillåtet i ikonspråket — bara inte gult på vitt. */
.brk-sv-self__icon {
    color: var(--primary, #ffcd00);
}

.brk-sv-self__icon,
.brk-sv-self__icon svg {
    width: 2.4rem;
    height: 2.4rem;
}

.brk-sv-self__item h3 {
    font-size: var(--h4, 2rem);
    margin: 0;
}

.brk-sv-self__text {
    flex: 1;
    font-size: var(--text-s, 1.4rem);
    color: var(--text-light-muted, rgba(255, 255, 255, 0.8));
    margin: 0;
}

.brk-sv-self__cta {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    margin-top: 0.8rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--text-light-muted, rgba(255, 255, 255, 0.8));
    font-size: var(--text-m, 1.6rem);
    font-weight: 600;
}

.brk-sv-self__item--download .brk-sv-self__cta::after {
    mask-image: url(../../icons/brokk-download.svg);
}

/* Pilknuffen (även .brk-sv-self__cta::after): style.css (plan 079). */

.brk-sv-self__more {
    margin: 0.6rem 0 0;
    font-size: var(--text-s, 1.4rem);
    color: var(--text-light-muted, rgba(255, 255, 255, 0.8));
}

.brk-sv-self__more a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    color: var(--text-light, #fff);
    border-bottom: 1px solid currentColor;
}

.brk-sv-self__more a::after {
    content: "";
    width: 1.6rem;
    height: 1.6rem;
    background: currentColor;
    mask: url(../../icons/brokk-arrow.svg) center / contain no-repeat;
}

/* ── CTA (yellow) ── */
.brk-sv-cta {
    background: var(--primary, #ffcd00);
    color: var(--text-dark, #000);
}

.brk-sv-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-xl, 4.8rem);
    align-items: end;
}

.brk-sv-cta h2 {
    color: var(--text-dark, #000);
    margin: 0;
}

.brk-sv-cta p {
    max-width: 52ch;
    margin: 0;
}

.brk-sv-cta__buttons {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.2rem;
    width: auto;
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .brk-sv-intro__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-l, 4rem);
    }

    .brk-sv-cta__inner {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }
}

@media (max-width: 767px) {
    .brk-sv-hero {
        min-height: 0;
    }

    .brk-sv-cards,
    .brk-sv-self__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}