/*
 * Article Layout Styles - Refactored
 * Strategy: Mobile-first
 * Architecture: Clean Code, Encapsulated Content (Image inside Content)
 * Author: Senior Full-stack Developer
 */
.article-page-body{
    margin-top: 0px !important;
}
/* --- 1. Title Styling --- */
.article-title {
    padding-top: 40px;
    padding-bottom: 0px;
    font-family: var(--font-primary);
    font-size: var(--mobile-h2-font-size);
    font-weight: var(--h1-font-weight);
    letter-spacing: var(--h1-letter-spacing);
    text-transform: var(--h1-text-transform);
    color: var(--h1-text-color);
    text-align: center;
    margin: clamp(40px, 6vw, 80px) auto 30px;
    line-height: 1.1;
    /* Hardware acceleration for rendering */
    transform: translateZ(0);
}

/* --- 2. Content Capsule (Parent Container) --- */
.article-content {
    background-color: var(--high-contrast-bg-color);
    border: var(--element-general-border);
    border-color: var(--site-light-bg-color) !important;
    border-radius: var(--post-cards-main-card-radius, 50px);
    /* Zoptymalizowany padding: mniejszy z góry, aby ramka obrazu dobrze komponowała się z ramką kontenera */
    padding: clamp(20px, 4vw, 40px) clamp(20px, 4vw, 60px) clamp(40px, 6vw, 80px);
    margin: 0 auto;
    max-width: 1000px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    color: var(--text-high-contrast-color);
    font-family: var(--font-primary);
    position: relative;
    z-index: 2; 
}
.article-content .wp-block-button__link.wp-element-button{
    background-color: var(--content-button-bg-color) !important;
    color: var(--content-button-text-color) !important;
}
.article-content .wp-block-button__link.wp-element-button:hover{
    background-color: var(--content-button-hover-bg-color) !important;
    color: var(--content-button-hover-text-color) !important;
    outline-color: var(--content-button-hover-text-color) !important;
}

/* --- 3. Featured Image Styling (Child Component) --- */
.article-content .article-image {
    width: 100%;
    /* Ograniczenie szerokości do szerokości tekstu w celu utrzymania pionowego rytmu (Vertical Rhythm) */
    max-width: 800px; 
    /* Margin 'auto' na osi X gwarantuje wyśrodkowanie względem rodzica */
    margin: 0 auto clamp(30px, 5vw, 60px) auto;
    border: var(--element-general-border);
    /* Wewnętrzna ramka powinna mieć nieco mniejszy border-radius niż kontener główny dla lepszej optyki */
    border-radius: calc(var(--post-cards-main-card-radius, 50px) * 0.7);
    overflow: hidden;
    background-color: var(--img-placeholder-bg);
    aspect-ratio: 3 / 2;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* Prevent rendering artifacts on border-radius */
    transform: translateZ(0); 
    display: block;
}

.article-content .article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- 4. Inner Typography --- */
.article-content .wp-block-heading {
    font-size: var(--mobile-h3-font-size);
    font-weight: var(--h3-font-weight);
    letter-spacing: var(--h3-letter-spacing);
    text-transform: var(--h3-text-transform);
    color: var(--text-high-contrast-color);
    margin: 45px 0 20px;
}

.article-content p {
    font-size: var(--p-mobile-font-size);
    line-height: var(--p-line-heght); 
    font-weight: var(--p-font-weight);
    color: var(--text-high-contrast-color);
    margin-bottom: 24px;
}

/* Reading area constraints */
.article-content .entry-content {
    max-width: 800px;
    margin: 0 auto;
}

/* Buttons inside content */
.article-content .wp-block-buttons {
    margin: 50px 0;
    justify-content: center;
}

/* --- 5. Desktop Overrides --- */
@media (min-width: 768px) {
    .article-page-body{
        margin-top: -100px !important;
    }
    .article-title {
        font-size: var(--h2-font-size);
        margin-bottom: 50px;
    }

    /* Usunięto ujemny margin-top (zrezygnowano ze strategii Overlapping Layout) */
    .article-content {
    max-width: 1000px;
        margin-top: 0; 
    }

    .article-content .wp-block-heading {
        font-size: var(--h3-font-size);
    }

    .article-content p {
        font-size: var(--p-font-size);
    }
}