/* ==========================================================
   _16-ARTIKLAR.CSS
   ========================================================== */

/* Transparent header på artiklar med hero */
body.has-hero-header .site-header { background: transparent !important; }
body.has-hero-header .main-navigation a { color: #fff !important; }

/* Artikel-hero (enskilt inlägg) */
.article-static-hero {
    width: 100%;
    height: 60vh;
    min-height: 400px;
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
}
.article-static-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.article-static-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 30%);
}

/* Arkiv-grid */
.articles-content-wrapper {
    padding-top: var(--sp-10);
    padding-bottom: var(--section-y);
}
.articles-intro { margin-bottom: var(--section-y-sm); max-width: 900px; }
.articles-intro h1 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--sp-5);
}
.articles-intro .intro-text {
    font-family: var(--font-mono);
    font-size: var(--text-md);
    color: var(--color-muted);
    max-width: 600px;
}
.articles-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: clamp(40px,5vw,60px) clamp(20px,3vw,40px);
}
.article-card { display: flex; flex-direction: column; }
.article-link-wrapper { text-decoration: none; color: inherit; display: block; }
.article-image-container { width: 100%; aspect-ratio: 4/3; overflow: hidden; margin-bottom: var(--block-gap); background: #f0f0f0; }
.article-image-container img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.article-card:hover .article-image-container img { transform: scale(1.05); }
.article-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-faint); text-transform: uppercase; margin-bottom: var(--sp-4); display: flex; gap: var(--sp-3); }
.article-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1.15; margin-bottom: var(--sp-4); transition: color var(--t-base); }
.article-excerpt { font-family: var(--font-mono); font-size: var(--text-base); line-height: 1.6; color: #444; margin-bottom: var(--block-gap); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.read-more-link { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; display: inline-flex; align-items: center; gap: var(--sp-3); transition: gap var(--t-base); }
.article-card:hover .article-title { text-decoration: underline; }
.article-card:hover .read-more-link { gap: var(--sp-5); }

/* Enskilt inlägg */
.single-post .entry-header { max-width: var(--read-width); margin: 0 auto var(--sp-16); border-bottom: 1px solid var(--color-border); padding-bottom: var(--sp-10); }
.cat-links { display: block; font-family: var(--font-mono); font-size: 0.9rem; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--sp-5); }
.entry-title { font-family: var(--font-display); font-size: clamp(2.2rem,4vw,3.5rem); font-weight: 700; line-height: 1.1; margin: 0 0 var(--sp-5); }
.entry-meta { font-family: var(--font-mono); font-size: 0.9rem; color: var(--color-faint); }
.entry-content > p,
.entry-content > h2,
.entry-content > h3,
.entry-content > ul,
.entry-content > ol { max-width: var(--read-width); margin-left: auto; margin-right: auto; font-family: var(--font-mono); font-size: var(--text-md); line-height: 1.8; color: #333; margin-bottom: var(--sp-8); }
.entry-content > h2 { font-family: var(--font-display); font-size: clamp(1.8rem,2.5vw,2.2rem); font-weight: 700; margin-top: var(--sp-16); }
.entry-content blockquote { max-width: 1000px; margin: var(--sp-16) auto; font-family: var(--font-display); font-size: clamp(1.5rem,2.5vw,2rem); border: none; padding: 0; text-align: center; }

/* ── BILDER I ARTIKLAR ────────────────────────────────────────────────────
   Bilder klistrade från Google Docs hamnar antingen som nakna <img> inuti
   ett <p>, eller som .wp-block-image figure från block-editorn.
   Båda begränsas till read-width och centreras – precis som texten.
   Vill man ha en bild som bryter ut kan man sätta align-wide i editorn.
──────────────────────────────────────────────────────────────────────── */
.single-post .entry-content img,
.single-post .entry-content figure,
.single-post .entry-content .wp-block-image {
    max-width: var(--read-width);
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.single-post .entry-content .wp-block-image img { max-width: 100%; margin: 0; }
.single-post .entry-content .wp-block-image figcaption {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-muted);
    text-align: center;
    margin-top: var(--sp-3);
}
/* Avsiktliga utbrytningar */
.single-post .entry-content .alignwide  { max-width: min(1200px, 90vw); }
.single-post .entry-content .alignfull  { max-width: 100vw; margin-left: calc(-1 * var(--padding-x)); margin-right: calc(-1 * var(--padding-x)); }

/* Bildavstånd */
.single-post .entry-content figure,
.single-post .entry-content .wp-block-image { margin-top: var(--sp-12); margin-bottom: var(--sp-12); }
.single-post .entry-content p img { margin-top: var(--sp-12); margin-bottom: var(--sp-12); }
.article-footer-nav {
    max-width: var(--read-width);
    margin: var(--sp-20) auto 0;
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-20);
    border-top: 2px solid var(--color-text);
}
.back-to-articles-link {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-6);
    border: 2px solid var(--color-text);
    transition: gap var(--t-base), background var(--t-base), color var(--t-base);
}
.back-to-articles-link svg {
    flex-shrink: 0;
    transition: transform var(--t-base);
}
.back-to-articles-link:hover {
    background: var(--color-text);
    color: #fff;
    gap: var(--sp-6);
}
.back-to-articles-link:hover svg {
    transform: translateX(-5px);
}

@media (max-width: 1024px) { .articles-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 767px) {
    .article-static-hero { height: 40vh; min-height: 250px; }
    .articles-grid { grid-template-columns: 1fr; gap: 50px; }
    .entry-title { font-size: 2.2rem; }
}