/**
 * TP Service Detail — two-column layout (sidebar + content)
 *
 * Uses ultra-specific selectors (0-4-0+) to beat Elementor's
 * .e-con-boxed > .e-con-inner (0-2-0) every time.
 *
 * @package Technoproekt
 * @author  Kkalganov <https://kkalganov.com>
 */

/* ==========================================================================
   Content Section — overflow visible for sticky sidebar
   ========================================================================== */

.tp-content-section.e-con.e-con-full,
.tp-content-section.e-con.e-con-full > .e-con-inner {
    overflow: visible !important;
}

/* ==========================================================================
   Content Layout — CSS Grid (two-column: sidebar 320px + main)
   Specificity: 0-4-0 — guaranteed to beat Elementor 0-2-0
   ========================================================================== */

/* Boxed variant (has .e-con-inner wrapper) */
.tp-content-layout.e-con.e-con-boxed > .e-con-inner {
    display: grid !important;
    grid-template-columns: 320px 1fr !important;
    gap: 48px !important;
    align-items: stretch !important;
    overflow: visible !important;
}

/* Full variant (no wrapper) */
.tp-content-layout.e-con.e-con-full {
    display: grid !important;
    grid-template-columns: 320px 1fr !important;
    gap: 48px !important;
    align-items: stretch !important;
    overflow: visible !important;
    max-width: 1400px;
    margin: 0 auto;
}

/* Child containers — fill grid cells */
.tp-content-layout.e-con > .e-con-inner > .e-con,
.tp-content-layout.e-con.e-con-full > .e-con {
    width: 100% !important;
    max-width: 100% !important;
}

/* ==========================================================================
   Sidebar Column — Elementor overrides for JS-based sticky
   Sticky positioning is handled by sidebar.js (position:fixed),
   not CSS position:sticky, because Elementor's grid limits parent height.
   ========================================================================== */

.tp-content-sidebar.e-con {
    /* display: block prevents Elementor's flex from stretching .e-con-inner */
    display: block !important;
    order: -1 !important;
    overflow: visible !important;
}

.tp-content-sidebar.e-con > .e-con-inner {
    /* height: auto overrides Elementor's .e-con > .e-con-inner { height: 100% } */
    height: auto !important;
}

/* Widget inside sidebar — no extra margins */
.tp-content-sidebar .elementor-widget {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   Main Content
   ========================================================================== */

.tp-content-intro {
    font-size: 16px;
    line-height: 1.8;
    color: var(--tp-text);
    margin-bottom: 0;
}

.tp-content-intro p {
    margin-bottom: 16px;
}

.tp-content-intro strong {
    color: var(--tp-green-dark);
}

/* ==========================================================================
   Spacing between content blocks inside main column
   ========================================================================== */

.tp-content-main .elementor-widget + .elementor-widget {
    margin-top: 48px !important;
}

.tp-content-main .elementor-widget-tp_section_header {
    margin-top: 60px !important;
}

.tp-content-main .elementor-widget:first-child {
    margin-top: 0 !important;
}

.tp-content-main .tp-sub-services-grid {
    margin-top: 32px;
}

/* ==========================================================================
   Section Label & Title (inline in text-editor widgets)
   Used on sub-service pages for styled content blocks.
   ========================================================================== */

.tp-section-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--tp-green-main);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.tp-section-label::before {
    content: '';
    width: 30px;
    height: 2px;
    background: var(--tp-green-main);
}

.tp-section-title {
    font-family: 'Unbounded', system-ui, sans-serif;
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 700;
    color: var(--tp-text);
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
}

/* ==========================================================================
   Text Block (styled content inside text-editor widget)
   ========================================================================== */

.tp-text-block {
    margin-bottom: 0;
}

.tp-text-block p {
    font-size: 15px;
    color: var(--tp-text);
    line-height: 1.8;
    margin-bottom: 14px;
}

.tp-text-block p:last-child {
    margin-bottom: 0;
}

.tp-text-block strong {
    color: var(--tp-green-dark);
}

.tp-text-block h3 {
    font-family: 'Unbounded', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--tp-text);
    margin-bottom: 12px;
    margin-top: 32px;
}

.tp-text-block h3:first-child {
    margin-top: 0;
}

/* ==========================================================================
   Key Points List (diamond markers)
   ========================================================================== */

.tp-key-points {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

.tp-key-points li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--tp-cream);
    font-size: 14px;
    color: var(--tp-text);
    line-height: 1.6;
}

.tp-key-points li:last-child {
    border-bottom: none;
}

.tp-key-points__marker {
    display: block;
    width: 8px;
    height: 8px;
    min-width: 8px;
    background: var(--tp-green-main);
    transform: rotate(45deg);
    flex-shrink: 0;
    margin-top: 5px;
}

.tp-key-points li strong {
    color: var(--tp-green-dark);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .tp-section-title {
        font-size: 18px;
    }
}

@media (max-width: 1024px) {
    .tp-content-layout.e-con.e-con-boxed > .e-con-inner,
    .tp-content-layout.e-con.e-con-full {
        grid-template-columns: 1fr !important;
    }

    .tp-content-sidebar.e-con {
        order: 1 !important;
    }

    .tp-content-sidebar.e-con > .e-con-inner {
        position: static !important;
        top: auto !important;
    }
}

@media (max-width: 768px) {
    .tp-content-layout.e-con.e-con-boxed > .e-con-inner,
    .tp-content-layout.e-con.e-con-full {
        gap: 40px !important;
    }
}