/*
Theme: Reign Child
File: assets/css/r24-article-blocks.css
Purpose: Custom editorial blocks for articles on "Работа в Европе от А до Я"

Usage:
1. Put this file into: /wp-content/themes/reign-theme-child/assets/css/r24-article-blocks.css
2. Enqueue it from functions.php after the main child theme styles.
3. In articles, insert only HTML with classes like .pwa-art, without <style>...</style>.

Notes:
- Styles are scoped to .pwa-art so they do not affect the whole site.
- Selectors are strengthened through .entry-content / .single-post to reduce conflicts with Reign.
- Avoids mass !important usage. Use !important only if Reign applies it first.
*/

/* ==========================================================================
   R24 Article Blocks — Base wrapper
   ========================================================================== */

.entry-content .pwa-art,
.single-post .entry-content .pwa-art,
.site-content .entry-content .pwa-art {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    max-width: 780px;
    width: 100%;
    margin: 0 auto 24px;
    color: #333;
    line-height: 1.75;
}

.entry-content .pwa-art *,
.single-post .entry-content .pwa-art *,
.site-content .entry-content .pwa-art * {
    box-sizing: border-box;
}

.entry-content .pwa-art p,
.entry-content .pwa-art div,
.entry-content .pwa-art span,
.entry-content .pwa-art a,
.entry-content .pwa-art h1,
.entry-content .pwa-art h2,
.entry-content .pwa-art h3,
.entry-content .pwa-art h4 {
    font-family: inherit;
}

/* Reign often adds margins to paragraphs and links inside posts.
   These rules keep the custom article cards visually stable. */
.entry-content .pwa-art p {
    margin-top: 0;
}

.entry-content .pwa-art a {
    outline: none;
}

/* ==========================================================================
   Hero / Intro block
   ========================================================================== */

.entry-content .pwa-art .pwa-hero {
    background: #E1F5EE;
    border-radius: 12px;
    padding: 1.5rem 1.5rem 1.25rem;
    margin: 0 0 1.5rem;
    border-left: 4px solid #0F6E56;
}

.entry-content .pwa-art .pwa-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 0.75rem;
    padding: 0;
}

.entry-content .pwa-art .pwa-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    padding: 3px 10px;
    border-radius: 20px;
    background: #9FE1CB;
    color: #085041;
    white-space: nowrap;
}

.entry-content .pwa-art .pwa-headline {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.35;
    margin: 0 0 0.6rem;
    padding: 0;
}

.entry-content .pwa-art .pwa-lead {
    font-size: 15px;
    color: #555;
    line-height: 1.65;
    margin: 0;
}

.entry-content .pwa-art .pwa-meta {
    font-size: 12px;
    color: #999;
    line-height: 1.45;
    margin: 0.75rem 0 0;
}

/* ==========================================================================
   Body text and section labels
   ========================================================================== */

.entry-content .pwa-art .pwa-body {
    font-size: 15px;
    color: #333;
    line-height: 1.75;
    margin: 0 0 1rem;
}

.entry-content .pwa-art .pwa-section-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #0F6E56;
    text-transform: uppercase;
    line-height: 1.4;
    margin: 1.5rem 0 0.75rem;
    padding: 0;
}

/* ==========================================================================
   App section
   ========================================================================== */

.entry-content .pwa-art .pwa-app-section {
    background: #f7f7f5;
    border-radius: 12px;
    padding: 1.25rem;
    margin: 0 0 1.5rem;
}

.entry-content .pwa-art .pwa-app-note {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 0.75rem;
}

.entry-content .pwa-art .pwa-app-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.entry-content .pwa-art .pwa-app-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 30px;
    padding: 6px 14px 6px 6px;
    text-decoration: none;
    color: inherit;
    box-shadow: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.entry-content .pwa-art .pwa-app-pill:hover,
.entry-content .pwa-art .pwa-app-pill:focus {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    text-decoration: none;
    color: inherit;
    border-color: #d5d5d5;
}

.entry-content .pwa-art .pwa-app-pill:active {
    transform: translateY(1px);
}

.entry-content .pwa-art .pwa-app-circle {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.entry-content .pwa-art .pwa-app-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.25;
    display: block;
    margin: 0;
}

.entry-content .pwa-art .pwa-app-desc {
    font-size: 11px;
    color: #888;
    line-height: 1.25;
    display: block;
    margin: 1px 0 0;
}

.entry-content .pwa-art .pwa-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin: 3px 0 0;
    padding: 0;
}

.entry-content .pwa-art .pwa-badge {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.4;
    padding: 1px 6px;
    border-radius: 3px;
}

.entry-content .pwa-art .pwa-badge-gp {
    background: #E1F5EE;
    color: #0F6E56;
}

.entry-content .pwa-art .pwa-badge-as {
    background: #E6F1FB;
    color: #185FA5;
}

/* ==========================================================================
   Tips grid
   ========================================================================== */

.entry-content .pwa-art .pwa-tip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin: 0 0 1.5rem;
    padding: 0;
}

.entry-content .pwa-art .pwa-tip-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 1rem;
    margin: 0;
    box-shadow: none;
}

.entry-content .pwa-art .pwa-tip-icon {
    font-size: 22px;
    line-height: 1;
    margin: 0 0 8px;
    padding: 0;
}

.entry-content .pwa-art .pwa-tip-title {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.35;
    margin: 0 0 4px;
    padding: 0;
}

.entry-content .pwa-art .pwa-tip-body {
    font-size: 12px;
    color: #666;
    line-height: 1.55;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Conclusion block
   ========================================================================== */

.entry-content .pwa-art .pwa-conclusion {
    background: #EAF3DE;
    border-radius: 12px;
    padding: 1.25rem;
    border-left: 4px solid #3B6D11;
    margin: 0 0 1.5rem;
}

.entry-content .pwa-art .pwa-conclusion-title {
    font-size: 14px;
    font-weight: 700;
    color: #27500A;
    line-height: 1.45;
    margin: 0 0 0.5rem;
    padding: 0;
}

.entry-content .pwa-art .pwa-conclusion-text {
    font-size: 13px;
    color: #3B6D11;
    line-height: 1.65;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   SEO keywords block
   ========================================================================== */

.entry-content .pwa-art .pwa-seo-block {
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 1rem;
    margin: 0 0 1.5rem;
    background: #fff;
}

.entry-content .pwa-art .pwa-seo-title {
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.4;
    margin: 0 0 0.5rem;
    padding: 0;
}

.entry-content .pwa-art .pwa-kw-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 0;
}

.entry-content .pwa-art .pwa-kw {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    line-height: 1.35;
    padding: 2px 8px;
    border-radius: 20px;
    background: #f0f0f0;
    color: #666;
    border: 1px solid #e0e0e0;
}

/* ==========================================================================
   Optional reusable blocks for future articles
   ========================================================================== */

/* Warning / risk block */
.entry-content .pwa-art .pwa-warning {
    background: #FFF4E5;
    border-left: 4px solid #D98200;
    border-radius: 12px;
    padding: 1.25rem;
    margin: 0 0 1.5rem;
}

.entry-content .pwa-art .pwa-warning-title {
    font-size: 14px;
    font-weight: 700;
    color: #8A4B00;
    line-height: 1.45;
    margin: 0 0 0.5rem;
}

.entry-content .pwa-art .pwa-warning-text {
    font-size: 13px;
    color: #6A3A00;
    line-height: 1.65;
    margin: 0;
}

/* Document checklist block */
.entry-content .pwa-art .pwa-checklist {
    background: #F7FAFF;
    border: 1px solid #DDEBFF;
    border-radius: 12px;
    padding: 1.25rem;
    margin: 0 0 1.5rem;
}

.entry-content .pwa-art .pwa-checklist-title {
    font-size: 14px;
    font-weight: 700;
    color: #1F4E79;
    line-height: 1.45;
    margin: 0 0 0.75rem;
}

.entry-content .pwa-art .pwa-checklist-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.entry-content .pwa-art .pwa-checklist-list li {
    position: relative;
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    margin: 0 0 0.45rem;
    padding-left: 1.35rem;
}

.entry-content .pwa-art .pwa-checklist-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #0F6E56;
    font-weight: 700;
}

/* Step-by-step block */
.entry-content .pwa-art .pwa-steps {
    counter-reset: pwa-step;
    display: grid;
    gap: 10px;
    margin: 0 0 1.5rem;
    padding: 0;
}

.entry-content .pwa-art .pwa-step {
    counter-increment: pwa-step;
    position: relative;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 1rem 1rem 1rem 3rem;
    margin: 0;
}

.entry-content .pwa-art .pwa-step::before {
    content: counter(pwa-step);
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #0F6E56;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
}

.entry-content .pwa-art .pwa-step-title {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.35;
    margin: 0 0 4px;
}

.entry-content .pwa-art .pwa-step-text {
    font-size: 12px;
    color: #666;
    line-height: 1.55;
    margin: 0;
}

/* ==========================================================================
   Mobile adjustments
   ========================================================================== */

@media (max-width: 767px) {
    .entry-content .pwa-art,
    .single-post .entry-content .pwa-art,
    .site-content .entry-content .pwa-art {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .entry-content .pwa-art .pwa-hero,
    .entry-content .pwa-art .pwa-app-section,
    .entry-content .pwa-art .pwa-conclusion,
    .entry-content .pwa-art .pwa-warning,
    .entry-content .pwa-art .pwa-checklist {
        padding: 1rem;
        border-radius: 10px;
    }

    .entry-content .pwa-art .pwa-headline {
        font-size: 20px;
    }

    .entry-content .pwa-art .pwa-lead,
    .entry-content .pwa-art .pwa-body {
        font-size: 14px;
    }

    .entry-content .pwa-art .pwa-app-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .entry-content .pwa-art .pwa-app-pill {
        width: 100%;
        border-radius: 16px;
    }

    .entry-content .pwa-art .pwa-tip-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Last-resort fixes for aggressive theme styles
   Enable only if Reign still overrides a specific element.
   ========================================================================== */

/*
.entry-content .pwa-art .pwa-app-pill {
    text-decoration: none !important;
}

.entry-content .pwa-art .pwa-tip-body,
.entry-content .pwa-art .pwa-app-desc {
    color: #666 !important;
}
*/