/* ==========================================================
   _12-TJANSTER.CSS
   Selektorer baserade på faktisk HTML från GenerateBlocks.
   ========================================================== */

/* ── HERO ─────────────────────────────────────────────────────────────────── */
body.page-id-458 .hero-section,
body.page-id-458 .hero-slideshow-wrapper { height: 100vh; }

/* ── LAYOUT ───────────────────────────────────────────────────────────────── */
.tjanster-page {
    width: 100%;
    padding: 0;
    position: relative; /* Referens för fixed sidebar */
}

/* ── SIDEBAR: fixed i vänstermarginalen ───────────────────────────────────── */
.tjanster-sidebar {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: var(--padding-x);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 100;
    opacity: 0;          /* JS styr opacity — börjar dold */
}

/* Räknaren är borttagen — siffrorna är räknaren */
.tjanster-scrollspy-counter { display: none; }

.tjanster-service-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    pointer-events: auto;
}
.tsn-link {
    font-family: var(--font-mono);
    font-size: clamp(9px, 0.7vw, 11px);
    font-weight: 400;
    color: var(--color-faint);
    text-decoration: none;
    letter-spacing: 0.05em;
    line-height: 1;
    display: block;
    padding: clamp(5px, 0.6vw, 9px) 0;
    transition: color var(--t-base), font-size 0.4s ease, font-weight 0.3s ease, padding 0.4s ease;
    text-align: center;
    min-width: 2.5ch;
}
.tsn-link:hover { color: #555; }

/* Aktiv siffra växer och blir räknaren */
.tsn-link.active {
    font-size: clamp(2rem, 4vw, 4rem) !important;
    font-weight: 100 !important;
    color: var(--color-text) !important;
    letter-spacing: -0.02em;
    padding: clamp(10px, 1.5vw, 20px) 0;
}

/* ── INNEHÅLLSKOLUMN ──────────────────────────────────────────────────────── */
.tjanster-content {
    padding: var(--section-y-sm) var(--padding-x) var(--section-y);
    box-sizing: border-box;
    min-width: 0;
}

/* ── GIF ÖVERST ───────────────────────────────────────────────────────────── */
.gb-element-8db35657 img,
.tjanster-entry img[src*="starthing"] {
    max-height: 80px !important;
    width: auto !important;
    display: block;
    margin-bottom: var(--sp-8);
}

/* ── INTRO-TEXT + TJÄNSTE-LINKLISTA ──────────────────────────────────────── */
/* Rutnätet med intro-text till vänster + länklista till höger */
.gb-element-7d3242b6,
.grid-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: clamp(24px, 4vw, 80px) !important;
    align-items: start !important;
    margin: var(--sp-8) 0 var(--section-y-sm) !important;
}

/* Intro-texten (vänster) */
.gb-element-3b306aae p {
    font-family: var(--font-display) !important;
    font-size: clamp(1.2rem, 1.8vw, 1.8rem) !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    margin: 0 !important;
}

/* Tjänste-länkarna (höger) — <p><a> struktur */
.gb-element-b6c8b6cc {
    border-top: 1px solid var(--color-text);
}
.gb-element-b6c8b6cc p {
    border-bottom: 1px solid var(--color-text);
    margin: 0 !important;
    padding: 0 !important;
}
.gb-element-b6c8b6cc p a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: clamp(10px, 1.4vw, 16px) 0 !important;
    font-family: var(--font-display) !important;
    font-size: clamp(0.85rem, 1.1vw, 1.1rem) !important;
    font-weight: 600 !important;
    color: var(--color-text) !important;
    text-decoration: none !important;
    letter-spacing: 0.01em !important;
    transition: padding var(--t-base), opacity var(--t-base) !important;
}
.gb-element-b6c8b6cc p a::after {
    content: '→';
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--t-base), transform var(--t-base);
    flex-shrink: 0;
}
.gb-element-b6c8b6cc p a:hover {
    padding-left: 10px !important;
    opacity: 0.65 !important;
}
.gb-element-b6c8b6cc p a:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* ── AVDELARE ─────────────────────────────────────────────────────────────── */
.tjanster-entry hr,
.tjanster-entry .wp-block-separator {
    border: none !important;
    border-top: 1px solid var(--color-border) !important;
    margin: var(--section-y-sm) 0 var(--sp-8) !important;
    opacity: 0.5 !important;
    background: none !important;
}

/* ── SEKTIONSRUBRIKER: h5.gb-text med <strong> = stor rubrik ─────────────── */
.tjanster-entry h5.gb-text:has(strong),
.tjanster-entry .gb-text:has(strong) {
    font-family: var(--font-display) !important;
    font-size: clamp(1.6rem, 3vw, 3rem) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -0.03em !important;
    color: var(--color-text) !important;
    margin: 0 0 var(--sp-6) !important;
    line-height: 1.1 !important;
}
.tjanster-entry h5.gb-text:has(strong) strong,
.tjanster-entry .gb-text:has(strong) strong {
    font-weight: inherit !important;
    font-size: inherit !important;
}

/* h5.gb-text utan strong = etikett (t.ex. "Exempel på Projekt", "Vi löser det!") */
.tjanster-entry h5.gb-text:not(:has(strong)),
.tjanster-entry .gb-text:not(:has(strong)) {
    font-family: var(--font-mono) !important;
    font-size: clamp(0.62rem, 0.72vw, 0.78rem) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--color-faint) !important;
    margin: var(--sp-8) 0 var(--sp-4) !important;
    line-height: 1.4 !important;
}

/* ── BRÖDTEXT ─────────────────────────────────────────────────────────────── */
.tjanster-entry p {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.65;
    color: #333;
    max-width: 660px;
    margin-bottom: var(--sp-4);
}
/* Extra ordinary har längre text — inga max-width-begränsningar */
#Extra-ordinary p { max-width: 780px; }

/* ── DRÖM-BILD ────────────────────────────────────────────────────────────── */
.gb-element-1ed6a888 img,
.tjanster-entry img[src*="drom"] {
    width: 100% !important;
    max-width: 600px !important;
    height: auto !important;
    margin: var(--sp-6) 0 var(--sp-8) !important;
    display: block;
}

/* jusquici-bilden */
.tjanster-entry img[src*="jusquici"] {
    width: 100% !important;
    max-width: 500px !important;
    height: auto !important;
    margin: var(--sp-4) 0 var(--sp-8) !important;
    display: block;
}

/* ── EXEMPELPROJEKT-GRID ──────────────────────────────────────────────────── */
body.page-id-458 .portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: clamp(8px, 1vw, 14px) !important;
    width: 100% !important;
    margin: var(--sp-4) 0 0 !important;
    box-sizing: border-box !important;
}
body.page-id-458 .portfolio-item {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 3px;
    position: relative;
    display: block;
}
body.page-id-458 .portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.55s ease;
    display: block;
}
body.page-id-458 .portfolio-item:hover img { transform: scale(1.05); }
body.page-id-458 .portfolio-item-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: var(--sp-4);
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 55%);
    transition: opacity var(--t-base);
}
body.page-id-458 .portfolio-category { display: none !important; }
body.page-id-458 .portfolio-kund     { display: none !important; }
body.page-id-458 .portfolio-title {
    color: #fff !important;
    font-family: var(--font-mono) !important;
    font-size: clamp(0.72rem, 0.9vw, 0.9rem) !important;
    font-weight: 700 !important;
    line-height: 1.3;
    background: none;
    padding: 0;
    margin: 0;
}

/* ── SCROLLSPY BAKGRUNDSFÄRGER ────────────────────────────────────────────── */
body.page-id-458 { transition: background-color 0.8s ease; }

/* ── "@YOUR SERVICE" HERO-TEXT ────────────────────────────────────────────── */
.hero-overlay-text {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    pointer-events: none;
}
.hero-overlay-text span {
    font-size: var(--text-hero);
    font-family: var(--font-display);
    font-weight: 700;
    background-image:
        linear-gradient(-75deg, transparent 30%, rgba(255,255,255,0.8) 50%, transparent 90%),
        linear-gradient(to bottom, #cff0ff 0%, #c992ff 50%, #4cede8 100%);
    background-size: 200% 100%, 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 5s infinite linear;
}
@keyframes shimmer {
    0%   { background-position: 200% 0, 0 0; }
    100% { background-position: -200% 0, 0 0; }
}

/* ── SIDEBAR: dölj på alla sidor utom tjänster ────────────────────────────── */
body:not(.page-id-458) .tjanster-sidebar { display: none !important; }

/* ── RESPONSIVT ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .tjanster-sidebar { display: none !important; }
    .tjanster-content { padding: var(--section-y-sm) var(--padding-x); }
    .gb-element-7d3242b6, .grid-container { grid-template-columns: 1fr !important; }
    body.page-id-458 .portfolio-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 600px) {
    body.page-id-458 .portfolio-grid { grid-template-columns: 1fr !important; gap: var(--sp-5) !important; }
}