/* ============================================================
   De Hoeve Multipower B.V. — Segment Landing Page Styles
   Class prefix: slp-  (segment landing page)

   Loaded via $pageStyles in products.php only when
   $mode === 'segment' and landing content exists.

   All values use CSS custom properties from :root (style.css).
   All breakpoints mirror those in style.css:
     1024px — collapse two-column grids
      768px — section padding reduction + mobile typography
      640px — narrow mobile adjustments
   ============================================================ */


/* ============================================================
   1. INTRO SECTION
   Two-column: lead text + USP bullets left, hero image right.
   Background: #fff  |  Section: .section.section-lg
   ============================================================ */

.slp-intro {
    background: #fff;
    padding-top: var(--spacing-8); /* tighter — sits directly below search bar */
}

.slp-intro-inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--spacing-12);
    align-items: center;
}

.slp-intro-content {
    /* text column */
}

.slp-lead {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--color-gray-700);
    line-height: 1.7;
    margin-bottom: var(--spacing-6);
}

/* USP bullet grid: two columns on desktop */
.slp-usp-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-3) var(--spacing-6);
    margin: 0;
    padding: 0;
}

.slp-usp-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    line-height: 1.4;
}

.slp-usp-icon {
    color: var(--color-accent);
    font-size: 0.7rem;
    flex-shrink: 0;
}

/* Intro image */
.slp-intro-image {
    position: relative;
}

.slp-hero-img {
    width: 100%;
    display: block;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}


/* ============================================================
   2. CATEGORY NAVIGATION CARDS
   Grid of category cards linking into the segment.
   Background: var(--color-gray-50)  |  Section: .section
   ============================================================ */

.slp-categories {
    background: var(--color-gray-50);
}

.slp-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-6);
}

.slp-cat-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-6);
    background: #fff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition),
                box-shadow var(--transition),
                border-color var(--transition);
}

@media (hover: hover) {
    .slp-cat-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-lg);
        border-color: var(--color-accent);
    }
}

.slp-cat-card-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-light);
    border-radius: var(--radius);
    color: var(--color-accent);
    font-size: 1.1rem;
}

.slp-cat-card-body {
    flex: 1;
    min-width: 0;
}

.slp-cat-card-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-1);
    line-height: 1.3;
}

.slp-cat-card-desc {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0;
}

.slp-cat-card-count {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
    margin-top: var(--spacing-1);
    font-weight: 500;
}

.slp-cat-card-arrow {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--color-gray-300);
    transition: color var(--transition), transform var(--transition);
}

@media (hover: hover) {
    .slp-cat-card:hover .slp-cat-card-arrow {
        color: var(--color-accent);
        transform: translateX(4px);
    }
}


/* ============================================================
   3. EDITORIAL SECTIONS — split (image + text) variants
   Two-column grid; background is set inline (alternates white / gray-50).
   Section wrapper: .slp-section.slp-section--image
   ============================================================ */

.slp-section {
    /* background applied inline via PHP for alternation */
}

/* ── Two-column split grid ─────────────────────────────────── */
.slp-split {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--spacing-12);
    align-items: center;
}

/* Image on left: swap column proportions + DOM order */
.slp-split--img-left {
    grid-template-columns: 1fr 1.1fr;
}

.slp-split--img-left .slp-split-content {
    order: 2;
}

.slp-split--img-left .slp-split-image {
    order: 1;
}

/* Text column */
.slp-split-content .section-header {
    margin-bottom: var(--spacing-6);
}

/* Image column */
.slp-split-image {
    position: relative;
}

.slp-split-image img {
    width: 100%;
    display: block;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Lead paragraph (first, heavier) */
.slp-text-lead {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--color-gray-700);
    line-height: 1.7;
    margin-bottom: var(--spacing-4);
}

/* Body paragraphs */
.slp-text-body {
    font-size: var(--font-size-base);
    color: var(--color-gray-600);
    line-height: 1.8;
    margin-bottom: var(--spacing-4);
}

.slp-text-body:last-of-type {
    margin-bottom: 0;
}

/* Bullet list within split or fullwidth sections */
.slp-list {
    list-style: none;
    margin: var(--spacing-6) 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.slp-list-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
    line-height: 1.6;
}

.slp-list-icon {
    color: var(--color-accent);
    font-size: 0.75rem;
    margin-top: 0.3em;
    flex-shrink: 0;
}


/* ============================================================
   4. EDITORIAL SECTIONS — full-width text variant
   Section wrapper: .slp-section.slp-section--text
   ============================================================ */

.slp-fullwidth .section-header {
    max-width: 700px;
}

.slp-fullwidth .slp-text-lead,
.slp-fullwidth .slp-text-body {
    max-width: 860px;
}

/* Card grid for bullet items in full-width sections */
.slp-list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
    margin-top: var(--spacing-8);
}

/* Bullet item rendered as a card */
.slp-list-item--card {
    background: #fff;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
    padding: var(--spacing-4) var(--spacing-5);
    box-shadow: var(--shadow-sm);
    align-items: center;
}

/* Numbered list (e.g. "Van analyse tot realisatie") */
.slp-numbered-list {
    list-style: none;
    margin: var(--spacing-6) 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    max-width: 700px;
}

.slp-numbered-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    font-size: var(--font-size-base);
    color: var(--color-gray-700);
    line-height: 1.6;
}

.slp-numbered-num {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 700;
}


/* ============================================================
   5. IMAGE PLACEHOLDER FALLBACK
   Shown via JS onerror when image file is not yet deployed.
   .slp-img-missing is added to the parent container by onerror.
   ============================================================ */

.slp-img-placeholder-label {
    position: absolute;
    bottom: var(--spacing-3);
    right: var(--spacing-3);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: var(--font-size-xs);
    font-family: monospace;
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    pointer-events: none;
    display: none; /* hidden until image fails */
}

/* Show label and stub box when image is missing */
.slp-img-missing .slp-img-placeholder-label {
    display: block;
}

.slp-img-missing img {
    opacity: 0;
}

.slp-intro-image.slp-img-missing,
.slp-split-image.slp-img-missing {
    background: var(--color-gray-100);
    border: 2px dashed var(--color-gray-300);
    border-radius: var(--radius-lg);
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================================
   6. CTA SECTION
   Reuses the global .cta-section class (dark bg, white text).
   .slp-cta is added as a modifier for any landing-page-specific
   overrides — currently none; included for future targeting.
   ============================================================ */

.slp-cta {
    /* inherits all styles from .cta-section in style.css */
}


/* ============================================================
   7. RESPONSIVE BREAKPOINTS
   Mirror exact breakpoints used in style.css.
   ============================================================ */

/* Tablet / small desktop — collapse two-column grids */
@media (max-width: 1024px) {
    .slp-intro-inner,
    .slp-split,
    .slp-split--img-left {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }

    /* Image on top on tablet */
    .slp-intro-image {
        order: -1;
    }

    /* Reset order overrides from --img-left modifier */
    .slp-split--img-left .slp-split-content {
        order: 1;
    }

    .slp-split--img-left .slp-split-image {
        order: -1;
    }

    .slp-cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .slp-list-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile — typography and spacing adjustments */
@media (max-width: 768px) {
    .slp-lead {
        font-size: var(--font-size-base);
    }

    .slp-text-lead {
        font-size: var(--font-size-base);
    }

    .slp-fullwidth .slp-text-lead,
    .slp-fullwidth .slp-text-body {
        max-width: 100%;
    }

    .slp-cat-card {
        padding: var(--spacing-4);
    }

    .slp-intro-image.slp-img-missing,
    .slp-split-image.slp-img-missing {
        min-height: 200px;
    }
}

/* Narrow mobile */
@media (max-width: 640px) {
    .slp-usp-list {
        grid-template-columns: 1fr;
    }

    .slp-cat-grid {
        grid-template-columns: 1fr;
    }

    .slp-list-grid {
        grid-template-columns: 1fr;
    }

    .slp-numbered-list {
        max-width: 100%;
    }
}