/* ==========================================================================
   TJÄNSTESIDOR — delade komponenter
   ==========================================================================
   Laddas av tjänstesidorna (efter style.css). Allt här är avsett att
   återanvändas på fler tjänstesidor, inte bara den som byggdes först.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO MED BAKGRUNDSBILD
   Samma grepp som .hero-full på index.html, men lägre — en tjänstesida ska
   komma till innehållet snabbare än startsidan.
   -------------------------------------------------------------------------- */

.hero-service {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 46vh;
    /* så heron aldrig blir en tunn remsa på låga fönster */
    padding-top: 7rem;
    /* rensar den fasta nav:en (73–87px) */
    padding-bottom: 3rem;
    overflow: hidden;
}

.hero-service-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
    z-index: 0;
}

/* Bilden är ljus, så texten behöver en bärare. Mörkast till vänster där
   texten står, nästan klar till höger så motivet syns. */
.hero-service-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        100deg,
        rgba(12, 12, 12, 0.86) 0%,
        rgba(12, 12, 12, 0.72) 38%,
        rgba(12, 12, 12, 0.34) 65%,
        rgba(12, 12, 12, 0.18) 100%
    );
}

.hero-service > .container {
    position: relative;
    z-index: 2;
}

.hero-service-breadcrumb {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9rem;
}

.hero-service-breadcrumb a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
}

.hero-service-breadcrumb a:hover,
.hero-service-breadcrumb a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

/* Avdelaren ska linjera mot texten, inte hänga för högt */
.hero-service-breadcrumb .sep {
    display: inline-flex;
    align-items: center;
    transform: translateY(-0.08em);
    opacity: 0.6;
}

.hero-service-title {
    color: #fff !important;
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    line-height: 1.05;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.hero-service-title .text-primary {
    color: var(--yttec-red) !important;
    text-shadow: 0 2px 12px rgba(203, 8, 57, 0.45);
}

.hero-service-lead {
    color: rgba(255, 255, 255, 0.93) !important;
    max-width: 42rem;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

@media (max-width: 991.98px) {
    .hero-service {
        min-height: 0;
        padding-top: 6.5rem;
    }

    /* Vertikal gradient på smala skärmar — texten ligger över bilden, inte bredvid */
    .hero-service-overlay {
        background: linear-gradient(
            180deg,
            rgba(12, 12, 12, 0.82) 0%,
            rgba(12, 12, 12, 0.7) 55%,
            rgba(12, 12, 12, 0.5) 100%
        );
    }
}

/* --------------------------------------------------------------------------
   2. FÖRKLARANDE BILD MED HOTSPOTS
   Pilar/punkter placerade i procent ovanpå en bild. Öppnar .yttec-popover
   med förklarande text. Ersätter handskriven text direkt i fotot, som blir
   oläslig i webbstorlek och omöjlig för skärmläsare.
   -------------------------------------------------------------------------- */

.hotspot-figur {
    position: relative;
    display: block;
    margin: 0;
    line-height: 0;
}

.hotspot-figur > img {
    width: 100%;
    height: auto;
    border-radius: var(--bs-border-radius, 1rem);
}

/* Knapp, inte bara ett hover-område — måste gå att nå med tangentbord och touch */
.hotspot {
    position: absolute;
    z-index: 3;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem 0.3rem 0.45rem;
    background: rgba(12, 12, 12, 0.82);
    color: #fff;
    border: 2px solid var(--yttec-red);
    border-radius: 999px;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    line-height: 1.2;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-medium, 0.25s ease),
                transform var(--transition-medium, 0.25s ease),
                box-shadow var(--transition-medium, 0.25s ease);
}

.hotspot:hover,
.hotspot:focus-visible {
    background: var(--yttec-red);
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    outline: none;
}

.hotspot:focus-visible {
    box-shadow: 0 0 0 4px rgba(203, 8, 57, 0.35);
}

/* Logotrekanten som pilspets — samma motiv som favicon och mobil-togglern */
.hotspot::before {
    content: "";
    flex: 0 0 auto;
    width: 0.95em;
    height: 0.77em;
    background: var(--yttec-red);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: background var(--transition-medium, 0.25s ease);
}

.hotspot:hover::before,
.hotspot:focus-visible::before {
    background: #fff;
}

/* Trekanten pekar mot det den beskriver.
   Grundformen pekar nedåt (▼), så rotationen styr riktningen. */
.hotspot--upp::before     { transform: rotate(180deg); }
.hotspot--ner::before     { transform: rotate(0deg); }
.hotspot--vanster::before { transform: rotate(90deg); }
.hotspot--hoger::before   { transform: rotate(-90deg); }

@media (max-width: 575.98px) {
    /* Mindre text men bibehållen tap-yta — knappen ska gå att träffa med tummen */
    .hotspot {
        font-size: 0.7rem;
        padding: 0.55rem 0.6rem 0.55rem 0.45rem;
        gap: 0.35rem;
    }
}