/* ==========================================================
   _10-FRONTPAGE.CSS
   ========================================================== */

/* Snurrande logga */
.rotating-logo-container {
    position: absolute !important;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
}
.rotating-logo-container a { display: inline-block; line-height: 0; }
.rotating-logo-image { max-width: clamp(60px, 5vw, 90px) !important; height: auto !important; }

/* ── UTVALDA PROJEKT ──────────────────────────────────────────────────────── */
.featured-projects-fullwidth {
    width: 100%;
    margin: var(--section-y) 0;
}
/* ── Sticky-scroll-sektion (endast desktop) ── */
.featured-projects-fullwidth { position: relative; }

@media (min-width: 768px) {
    .fp-sticky-card {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
        /* z-index sätts inline i PHP för korrekt stapelordning */
    }

    /* Subtil skugga överst — djupkänsla vid stacking */
    .fp-sticky-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 60px;
        background: linear-gradient(to bottom, rgba(0,0,0,0.18), transparent);
        z-index: 10;
        pointer-events: none;
    }
    .fp-sticky-card:first-child::before { display: none; }

    .fp-sticky-card .project-card-fullwidth {
        height: 100%;
        margin-bottom: 0;
    }

    /* fp-category och fp-info döljs på desktop — overlays visar samma info */
    .fp-category,
    .fp-info { display: none; }
}

/* Default cards (mobil använder dessa) */
.project-card-fullwidth {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: block;
}
.project-card-image-link {
    display: block;
    position: absolute; inset: 0;
    z-index: 1;
}
.project-card-fullwidth img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease, opacity 0.4s ease;
    opacity: 0.9;
}
.project-card-fullwidth:hover img { transform: scale(1.025); opacity: 1; }

.text-highlight {
    display: inline;           /* ← var troligen inline-block eller block */
    background-color: var(--color-highlight);
    color: var(--color-text) !important;
    padding: 0.1em 0.15em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    font-family: var(--font-mono) !important;
    line-height: 1.65;
}
a.text-highlight { text-decoration: none; }
a.text-highlight:hover { text-decoration: underline; }

/* Overlay övre vänster */
.project-overlay-top-left {
    position: absolute;
    bottom: 50%;
    margin-bottom: clamp(12px, 1.5vw, 28px);
    left: var(--padding-x);
    z-index: 2;
    pointer-events: none;
    max-width: 55%;
}
.project-overlay-top-left > div { margin-bottom: 0.4em; }
.category-name  { font-size: clamp(11px, 0.85vw, 14px); text-transform: uppercase; letter-spacing: 0.08em; }
.project-title  { font-size: clamp(1.4rem, 2.2vw, 2.2rem); font-weight: 700; line-height: 1.3; }
.project-client { font-size: clamp(0.9rem, 1.3vw, 1.2rem); }

/* Overlay nedre vänster */
.project-overlay-bottom-left {
    position: absolute;
    top: 50%;
    margin-top: clamp(12px, 1.5vw, 28px);
    left: var(--padding-x);
    z-index: 2;
    max-width: min(30vw, 500px);
    pointer-events: none;
}
.project-overlay-bottom-left > div,
.project-overlay-bottom-left > p { margin-bottom: 0.4em; }
.category-description { font-size: clamp(1.1rem, 1.8vw, 2rem); line-height: 1.5; }
.project-excerpt       { font-size: var(--text-base); line-height: 1.5; }
.project-read-more {
    display: inline-block;
    background: var(--color-highlight);
    border: 1px solid #ccc;
    padding: 8px 16px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text);
    text-decoration: none;
    margin-top: clamp(12px, 1.5vw, 24px);
    pointer-events: auto;
    transition: all var(--t-base);
}
.project-read-more:hover { background: var(--color-text); color: #fff; }

/* ── KLIENT-SEKTION ───────────────────────────────────────────────────────── */
.client-section-full {
    position: relative;
    width: 100%;
    padding: 0 var(--padding-x) !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.client-section-full .wp-block-group__inner-container {
    padding-top: 180px !important;
    padding-bottom: 180px !important;
    max-width: 100% !important;
}
.client-section-full::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 100vw; height: 100%;
    background: var(--color-accent);
    z-index: -1;
}
.client-section-full h2,
.client-section-full p { color: #fff; margin-bottom: var(--sp-8); }
.client-section-full h2 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--sp-10);
}

/* Logotyp-grid — fluid kolumner */
.logo-grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(12px, 2vw, 30px) clamp(20px, 4vw, 60px);
    width: 100%;
}
.logo-item-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: clamp(50px, 5vw, 80px);
}
.logo-item-container img {
    max-width: 100%; max-height: 75%;
    object-fit: contain;
    filter: brightness(0) invert(1) !important;
    transition: opacity var(--t-base);
    opacity: 0.85;
}
.logo-item-container img:hover { opacity: 1; }

/* ── INTRO-STATEMENT ─────────────────────────────────────────────────────── */
.intro-statement-section {
    padding: var(--section-y) var(--padding-x);
    box-sizing: border-box;
}
.intro-body {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    line-height: 1.55;
    color: #222;
    max-width: min(900px, 65vw);
    margin-bottom: var(--section-y-sm);
}

/* ── MINIMAL LIST ─────────────────────────────────────────────────────────── */
.minimal-list-section {
    padding: 0 var(--padding-x) var(--section-y);
    box-sizing: border-box;
}
.minimal-list-item,
.intro-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--block-gap) 0;
    text-decoration: none !important;
    color: var(--color-text) !important;
    border-bottom: 2px solid var(--color-text);
    transition: padding var(--t-base);
}
.minimal-list-item:first-child,
.intro-list-item:first-child { border-top: 2px solid var(--color-text); }
.minimal-list-item .list-text,
.intro-list-item .link-text {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.025em;
}
.list-arrow {
    width: clamp(28px, 3.5vw, 56px);
    height: auto;
    transition: transform var(--t-base);
    flex-shrink: 0;
}
.minimal-list-item:hover,
.intro-list-item:hover { padding-left: 18px; padding-right: 18px; }
.minimal-list-item:hover .list-arrow,
.intro-list-item:hover .list-arrow { transform: translateX(10px); }

/* Responsivt */
@media (max-width: 1024px) { .logo-grid-container { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 767px) {
    .logo-grid-container { grid-template-columns: repeat(2,1fr); gap: 10px 20px; }
    .logo-item-container { height: 50px; }
    .intro-body { font-size: var(--text-md); max-width: 100%; }

    /* ── FEATURED PROJECTS — matchar portfolio-undersidan ── */
    .featured-projects-fullwidth {
        padding: 0 var(--padding-x);   /* sidmarginaler */
    }

    .project-card-fullwidth {
        aspect-ratio: auto;
        position: static;
        overflow: visible;
        margin-bottom: 40px;
    }

    /* Dölj desktop-overlays på mobil */
    .project-overlay-top-left,
    .project-overlay-bottom-left { display: none !important; }

    /* Visa mobil-elementen */
    .fp-category {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-muted);
        font-family: var(--font-mono);
        margin-bottom: 6px;
    }
    .fp-category-link { color: inherit; text-decoration: none; }
    .fp-category-link:hover { text-decoration: underline; }

    .project-card-image-link {
        position: static;
        display: block;
        aspect-ratio: 16/9;
        overflow: hidden;
    }

    .fp-info { padding: 10px 0 0; }
    .fp-title {
        font-family: var(--font-display);
        font-size: 1.1em;
        font-weight: 500;
        margin: 0 0 2px;
        line-height: 1.3;
        color: var(--color-text);
    }
    .fp-title a { color: inherit; text-decoration: none; }
    .fp-title a:hover { text-decoration: underline; }

    .fp-client {
        display: block;
        font-size: 0.9em;
        color: var(--color-muted);
        font-family: var(--font-display);
    }
}