/* ==========================================================
   _11-PORTFOLIO.CSS
   ========================================================== */

/* Arkiv-layout */
#main-content { width: 100%; }
.inside-article { padding-top: var(--sp-8); padding-bottom: var(--section-y); box-sizing: border-box; }
.entry-content { width: 100%; }

/* Grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 5px;
}
.portfolio-item { display: block; text-decoration: none; position: relative; }
.portfolio-item img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; transition: opacity var(--t-base); }
.portfolio-item:hover img { opacity: 0.85; }
.portfolio-item-overlay { padding: 10px 0 0; }
.portfolio-title { font-family: var(--font-display); font-size: 1.1em; font-weight: 500; margin: 0; line-height: 1.3; color: var(--color-text); }
.portfolio-item:hover .portfolio-title { text-decoration: underline; }
.portfolio-kund { display: block; font-size: 0.9em; color: var(--color-muted); margin-top: 2px; margin-bottom: var(--sp-5); }
.portfolio-category { font-size: 12px; text-transform: uppercase; color: var(--color-muted); margin-bottom: 6px; display: block; }

/* Filterknappar */
.portfolio-filter-nav { margin-bottom: var(--sp-10); }
.portfolio-filter-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.filter-button {
    background: transparent;
    border: 1px solid #ccc;
    padding: 8px 15px;
    font-size: 14px;
    color: var(--color-text);
    font-family: var(--font-display);
    transition: all var(--t-base);
}
.filter-button:hover, .filter-button.active {
    background: var(--color-text);
    color: #fff;
    border-color: var(--color-text);
}

/* ── Enkelt projekt — hero wrapper ──
   INGEN horisontell padding här — _99-misc hanterar det
   via .entry-header. Annars blir det dubbel padding.       */
.single-project-hero {
    height: 100vh;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;   /* innehåll ankrat nedtill */
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}
.single-project-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.45) 0%,
        rgba(0,0,0,0.12) 45%,
        rgba(0,0,0,0.04) 100%
    );
}
.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* ── Projektsidans innehåll under hero ── */
.project-content-area {
    padding-top: var(--section-y-sm);
    padding-bottom: var(--section-y);
}

/* Intro-text och body-content: rimlig max-bredd */
.project-intro {
    font-size: clamp(1.1rem, 1.4vw, 1.35rem);
    line-height: 1.65;
    max-width: 820px;
    margin-bottom: var(--sp-16);
    color: var(--color-text);
}

/* Bilder i project-content: max-bredd + alternerar vänster/höger */
.project-content-area .entry-content .wp-block-image {
    margin-top: var(--sp-16);
    margin-bottom: var(--sp-16);
    max-width: 78%;
}

.project-content-area .entry-content .wp-block-image:nth-of-type(odd) {
    margin-left: 0;
    margin-right: auto;
}

.project-content-area .entry-content .wp-block-image:nth-of-type(even) {
    margin-left: auto;
    margin-right: 0;
}

/* Stöd för klassisk editor (figure utan wp-block-image) */
.project-content-area .entry-content figure:not(.wp-block-image):nth-of-type(odd) {
    margin-left: 0;
    margin-right: auto;
    max-width: 78%;
}
.project-content-area .entry-content figure:not(.wp-block-image):nth-of-type(even) {
    margin-left: auto;
    margin-right: 0;
    max-width: 78%;
}

/* ── Mobil ── */
@media (max-width: 900px) {
    .project-content-area .entry-content .wp-block-image,
    .project-content-area .entry-content figure {
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 767px) {
    .portfolio-grid { grid-template-columns: 1fr; gap: 40px; }
    .single-project-hero { min-height: 100svh; height: auto; }
}