/* ==========================================================
   _14-TJANSTER.CSS (VERSION 4.0 - SLUTGILTLIG REN FIL)
   Denna fil fungerar ENDAST med template-tjanster.php
   ========================================================== */

/* 1. "STICKY"-FIX: Tvingar föräldrar att tillåta 'position: sticky' */
body.page-id-458,
.page-id-458 #page,
.page-id-458 #content {
    overflow: visible !important;
    overflow-x: visible !important;
}

/* 2. HERO-FIX: Tvingar hero-slidern att bli kant-i-kant */
.page-id-458 #hero-section-standard {
    width: 100vw;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw); 
    box-sizing: border-box; 
}

/*
 * Styling för "@ your service" texten i heron
 * REN VERSION MED BORSTAT STÅL
 */

/* 1. Själva text-containern (Din layout) */
.hero-overlay-text {
    position: absolute; /* "Frikopplar" elementet från layoutflödet */
    width: 100%;         /* Tar upp hela bredden för centrering */
    text-align: center;  /* Centrerar texten inuti */
    text-transform: uppercase; 
    
    /* Placering: Ovanför den andra texten */
    top: 15%;
    
    /* Exakt horisontell centrering */
    left: 50%;
    transform: translateX(-50%);
    
    /* Z-index: Säkerställer att den ligger "ovanpå" bildspelet */
    z-index: 3; 
    
    /* Gör så att texten inte blockerar klick på element under */
    pointer-events: none; 
}

/* * 2. Själva texten (span inuti) 
 * Kombinerar dina typsnittsval med "borstad stål"-effekten.
 */
.hero-overlay-text span {
    /* Dina val av typsnitt och storlek */
    font-size: 5rem; 
    font-family: 'Space grotesk', monospace; 
    font-weight: 700;
    
    /* * Bakgrunder för "borstat stål"-effekten
     * Lager 1: Blänket (rörligt)
     * Lager 2: Stål-texturen (statisk)
     */
    background-image: 
        /* Lager 1: Blänket (transparent -> vitt -> transparent) */
        linear-gradient(
            -75deg, /* Vinkeln på blänket */
            transparent 30%, 
            rgba(255, 255, 255, 0.8) 50%, /* Ljusstyrkan på blänket */
            transparent 90%
        ),
        /* Lager 2: Stål-texturen (vertikal grå gradient) */
        linear-gradient(
            to bottom, 
            #cff0ff 0%,   /* Ljusare kant upptill */
            #c992ff 50%,  /* Mörkare i mitten */
            #4cede8 100%  /* Ljusare kant nertill */
        );
    
    /* Storlek för varje lager (blänket 200% för att kunna röra sig) */
    background-size: 200% 100%, 100% 100%;
    
    /* Startposition (blänket börjar utanför till höger) */
    background-position: 200% 0, 0 0;
    
    /* Blänket ska inte upprepas, stål-texturen ska inte heller */
    background-repeat: no-repeat;

    /* Klipp bakgrunden så den bara syns "inuti" texten */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* Gör textfärgen transparent så bakgrunden syns */
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent; 

    /* Fallback färg om background-clip inte stöds */
    color: #ccc;
    
    /* En ren, subtil skugga för att lyfta texten lite */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    
    /* Applicera blänk-animationen */
    animation: shimmer 5s infinite linear;
}

/* 3. Responsivitet (Dina regler) */
@media (max-width: 991px) {
    .hero-overlay-text {
        top: 20%; /* Justera placering för tablet */
    }
    .hero-overlay-text span {
        font-size: 4.5rem;
    }
}

@media (max-width: 767px) {
    .hero-overlay-text {
        top: 15%; /* Justera placering för mobil */
    }
    .hero-overlay-text span {
        font-size: 3rem; /* Mindre text på mobil */
    }
}

/* * 4. Animation-definition (Keyframes)
 * Animerar 'background-position' för det första lagret (blänket).
 */
@keyframes shimmer {
    0% {
        /* Blänket är till höger (utanför bild) */
        background-position: 200% 0, 0 0;
    }
    100% {
        /* Blänket har rört sig helt till vänster (utanför bild) */
        background-position: -200% 0, 0 0;
    }
}



/* ==========================================================
   TJÄNSTER - SCROLLSPY (DEN ENKLA GRID-LAYOUTEN)
   ========================================================== */

/* 3. Sätter 2-kolumns-layouten på #primary-elementet */
/* Detta är den ENDA grid-regeln vi behöver för layouten */
.page-id-458 #primary.content-area {
    display: grid;
    /* 150px vänsterkolumn, 1fr = resten av utrymmet */
    grid-template-columns: 150px 1fr; 
    gap: 30px; 
    /* Vi sätter INGA marginaler eller max-width här, 
       det sköts av temats #page.grid-container */
}

/* 4. Vänster-kolumnen (med räknaren) */
.page-id-458 .tjanster-scrollspy-column {
    grid-column: 1 / 2;
}

/* 5. Höger-kolumnen (där allt ditt block-innehåll hamnar) */
.page-id-458 .tjanster-content-column {
    grid-column: 2 / 3;
    width: 100%; 
    /* Vi sätter INTE max-width här, det sköts av #primary's förälder */
}

/* 6. Styla själva räknaren (sticky inuti sin kolumn) */
.tjanster-scrollspy-counter {
    position: sticky;
    top: 45vh; /* Centrera vertikalt i fönstret */
    width: 100%; /* Fyller sin 150px-kolumn */
    
    /* Utseende */
    font-size: 5rem; 
    font-weight: 100;
    font-family: 'Space Mono', monospace;
    color: #ffffff; 
    line-height: 1;
    text-align: right; 
    z-index: 1; 
}

/* 7. Göm räknar-kolumnen helt på mobil */
@media (max-width: 1024px) { 
    /* Återgå till vanlig 1-kolumn-layout */
    .page-id-458 #primary.content-area {
        display: block; 
    }
    /* Göm räknaren helt */
    .page-id-458 .tjanster-scrollspy-column {
        display: none; 
    }
}

/* ==========================================================
   STYLING FÖR PROJEKTRUTNÄT PÅ TJÄNSTER-SIDAN (TJÄNSTER)
   (DENNA KOD ÄR 100% BEVARAD FRÅN DIN FIL)
   ========================================================== */

/* 7. Huvudcontainer för gridden (KORRIGERAD MARGINAL) */
body.page-id-458 .portfolio-grid {
    display: grid !important;
    gap: 10px !important; 
    margin-top: 1em !important;
    margin-bottom: 2em !important;
    max-width: 1200px !important; 
    
    /* Centrera rutnätet */
    margin-left: auto !important; 
    margin-right: auto !important;
    
    padding: 0 !important; 
    box-sizing: border-box !important;
    grid-template-columns: repeat(3, 1fr) !important;
}

/* 8. Mobilanpassning för rutnätet */
@media (max-width: 767px) {
    body.page-id-458 .portfolio-grid {
        max-width: 600px !important;
        padding: 0 0px !important;
        gap: 40px !important; 
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* ==========================================================
   STYLING FÖR PROJEKTKORT PÅ TJÄNSTER-SIDAN (INDIVIDUELLA KORT)
   (DENNA KOD ÄR 100% BEVARAD FRÅN DIN FIL)
   ========================================================== */

/* 9. Dölj kategori-taggen */
body.page-id-458 .entry-content .portfolio-grid .portfolio-category {
    display: none !important;
}

/* 10. Dölj kund-texten */
body.page-id-458 .entry-content .portfolio-grid .portfolio-kund {
    display: none !important;
}

/* 11. Kort-styling (16:9 ratio) */
body.page-id-458 .entry-content .portfolio-grid .portfolio-item {
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 16 / 9 !important; 
    border-radius: 5px !important; 
    display: block !important;
    text-decoration: none !important;
    background-color: #eee !important; 
}

/* 12. Bild-styling (fyller kortet) */
body.page-id-458 .entry-content .portfolio-grid .portfolio-item img {
    display: block !important;
    width: 100% !important;
    height: 100% !important; 
    aspect-ratio: unset !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 0.3s ease !important;
}

/* 13. Text-overlay (centrerad) */
body.page-id-458 .entry-content .portfolio-grid .portfolio-item .portfolio-item-overlay {
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    position: absolute !important;
    z-index: 10 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90% !important; 
    text-align: center !important; 
}

/* 14. Text-stil (highlight-effekt) */
body.page-id-458 .entry-content .portfolio-grid .portfolio-item .portfolio-title {
    color: #fff !important;
    font-family: 'Space Mono', monospace !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.6 !important;
    display: inline !important;
    background-color: #000 !important;
    padding: 0em 0.1em !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
    font-size: 1.2em !important; 
    margin: 0 !important;
    transition: all 0.3s ease !important;
}

/* 15. Hover-effekter */
body.page-id-458 .entry-content .portfolio-grid .portfolio-item:hover img {
    transform: scale(1.05) !important;
}

body.page-id-458 .entry-content .portfolio-grid .portfolio-item:hover .portfolio-title {
    background-color: #000 !important;
    text-decoration: none !important;
}