/**
 * K4 Kitchens Transformation Template Styles
 * Author:  Steve Austen
 * Company: The PCGP
 * Version: 1.0.0
 */

/* ═══════════════════════════════════════════
   Dark Hero Section
   ═══════════════════════════════════════════ */
.transformation-hero {
    background: #231f20;
    padding: 60px 0 80px;
}

/* ── Header Text ── */
.transformation-header {
    text-align: center;
    margin-bottom: 50px;
}

/* Top italic line (e.g. "This Is A True") */
.transformation-top-text {
    display: block;
    font-family: "Poppins", sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    color: #f3af2e;
    margin-bottom: 8px;
}

/* Page title */
.transformation-title {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 1.15;
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 12px 0;
}

/* Bottom subtitle line */
.transformation-bottom-text {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #ccc;
    margin: 0;
}

/* ── Slider + Features Row ── */
.transformation-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 50px;
}

/* Left column – slider */
.transformation-slider-col {
    flex: 1 1 55%;
    min-width: 300px;
}

/* Right column – feature points */
.transformation-features-col {
    flex: 1 1 35%;
    min-width: 260px;
}

/* ═══════════════════════════════════════════
   Before / After Comparison Slider
   ═══════════════════════════════════════════ */
.transformation-slider {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    line-height: 0; /* remove inline-block gap */
    max-height: 420px; /* keep slider comfortably within viewport */
}

/* Both layers share the same dimensions */
.transformation-slider__after,
.transformation-slider__before {
    position: relative;
    width: 100%;
}

.transformation-slider__after img,
.transformation-slider__before img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* After sits in normal flow to set the container height */
.transformation-slider__after {
    position: relative;
    max-height: 420px;
    overflow: hidden;
}

/* Before overlays on top, clipped to the left portion */
.transformation-slider__before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%; /* JS will update this */
    overflow: hidden;
}

.transformation-slider__before img {
    /* Image must fill the full container width, not just the clipped area */
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* "Before" and "After" labels – vertically centred */
.transformation-slider__label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 600;
    padding: 14px 26px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 2;
    letter-spacing: 0.5px;
}

.transformation-slider__label--before {
    left: 16px;
}

.transformation-slider__label--after {
    right: 16px;
}

/* ── Draggable Handle ── */
.transformation-slider__handle {
    position: absolute;
    top: 0;
    left: 50%; /* JS will update this */
    width: 4px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transform: translateX(-50%);
    cursor: ew-resize;
    outline: none;
}

/* Vertical line segments above and below the circle */
.transformation-slider__handle-line {
    flex: 1;
    width: 3px;
    background: #fff;
    border-radius: 2px;
}

/* Central circle with arrows */
.transformation-slider__handle-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
}

.transformation-slider__handle-arrows {
    font-size: 18px;
    font-weight: 700;
    color: #231f20;
    letter-spacing: 4px;
    line-height: 1;
    pointer-events: none;
}

/* ── Placeholder when no images set ── */
.transformation-slider-placeholder {
    background: #333;
    border-radius: 8px;
    padding: 80px 30px;
    text-align: center;
}

.transformation-slider-placeholder p {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    color: #999;
    margin: 0;
}

/* ═══════════════════════════════════════════
   Feature Points
   ═══════════════════════════════════════════ */
.transformation-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.transformation-feature {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Icon image (emoji-style) */
.transformation-feature__icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 50%;
}

/* Feature text */
.transformation-feature__text {
    font-family: "Poppins", sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════
   White Content Section (WordPress editor)
   ═══════════════════════════════════════════ */
.transformation-content-section {
    background: #fff;
    padding: 60px 0;
}

.transformation-editor-content {
    max-width: 900px;
    margin: 0 auto;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}

/* Headings inside the editor content */
.transformation-editor-content h2 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: #231f20;
    margin: 0 0 20px 0;
}

.transformation-editor-content h3 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: #231f20;
    margin: 0 0 15px 0;
}

.transformation-editor-content h4 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #231f20;
    margin: 0 0 12px 0;
}

/* Paragraphs */
.transformation-editor-content p {
    margin-bottom: 18px;
}

/* Lists */
.transformation-editor-content ul,
.transformation-editor-content ol {
    margin-bottom: 18px;
    padding-left: 24px;
}

.transformation-editor-content li {
    margin-bottom: 8px;
}

/* Links */
.transformation-editor-content a {
    color: #f3af2e;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.transformation-editor-content a:hover {
    color: #e2a027;
}

/* Images inside editor content */
.transformation-editor-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
}

/* ═══════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════ */
@media (max-width: 991px) {
    .transformation-row {
        flex-direction: column;
        gap: 40px;
    }

    .transformation-slider-col,
    .transformation-features-col {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Centre features on tablet */
    .transformation-features {
        align-items: center;
    }

    .transformation-title {
        font-size: 36px;
    }
}

@media (max-width: 600px) {
    .transformation-hero {
        padding: 40px 0 50px;
    }

    .transformation-header {
        margin-bottom: 30px;
    }

    .transformation-top-text {
        font-size: 18px;
    }

    .transformation-title {
        font-size: 28px;
    }

    .transformation-bottom-text {
        font-size: 14px;
    }

    .transformation-feature__icon {
        width: 50px;
        height: 50px;
    }

    .transformation-feature__text {
        font-size: 15px;
    }

    .transformation-content-section {
        padding: 40px 0;
    }

    .transformation-editor-content h2 {
        font-size: 26px;
    }
}