/**
 * Intro Component - Introduction/Welcome Widget
 *
 * Exakt wie TYPO3 Original .container-columns
 * - Layout: Flexbox mit 64px gap
 * - First Column: Kein Padding
 * - Second Column: 80px/40px Margins
 * - Border Radius: 20px
 * - Icon Size: 30px
 *
 * @package Kurpfalz_Theme
 * @author Saad Badr
 * @copyright 2025 SawatzkiMühlenbruch GmbH
 */

/* ============================================
   Intro - Widget-specific styles
   ============================================ */

/* Outer Header - Displayed above the main intro section */
.kurpfalz-intro-outer-header {
    padding-top: var(--widget-margin-top); /* Responsive: prevents logo overlap */
    padding-bottom: var(--spacing-md);
    padding-left: var(--margin-horizontal);
    padding-right: var(--margin-horizontal);
    margin: 0;
}

.kurpfalz-intro-outer-header h2 {
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-h2);
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.3;
}

/* Outer Container */
.kurpfalz-intro {
    overflow-x: visible;
    overflow-y: hidden;
}

/* Container */
.kurpfalz-intro .container-columns {
    max-width: 1350px; /* Exakt wie Original */
    margin-left: auto;
    margin-right: auto;
}

/* Container Columns Inner - Two Column Layout */
.kurpfalz-intro .container-columns-inner {
    display: flex; /* Exakt wie Original (nicht Grid) */
    gap: 64px; /* Exakt wie Original */
    margin-left: 40px; /* Matches TYPO3 original */
    margin-right: 40px; /* Matches TYPO3 original */
    margin-top: 0; /* Exakt wie Original - KEIN Abstand nach oben */
    margin-bottom: 40px; /* Matches TYPO3 original */
}

/* First Column - 60% width for symmetric layout */
.kurpfalz-intro--symmetric .first-column {
    flex: 1.5; /* 60% of available space (1.5 / 2.5 = 60%) */
}

.kurpfalz-intro--asymmetric .first-column {
    flex: 1; /* Nimmt verfügbaren Platz */
}

.kurpfalz-intro .first-column {
    flex: 1; /* Default for backward compatibility */
}

.kurpfalz-intro .first-column .column-inner {
    padding: 0; /* Exakt wie Original (kein Padding) */
    width: 100%;
}

/* Second Column - 40% width for symmetric layout */
.kurpfalz-intro--symmetric .second-column {
    flex: 1; /* 40% of available space (1 / 2.5 = 40%) */
}

.kurpfalz-intro--asymmetric .second-column {
    width: fit-content; /* Exakt wie Original */
}

.kurpfalz-intro .second-column {
    width: fit-content; /* Default for backward compatibility */
}

.kurpfalz-intro .second-column .column-background {
    overflow: hidden; /* Exakt wie Original */
    border-bottom-right-radius: var(--border-radius-md); /* 20px */
}

.kurpfalz-intro .second-column .column-background .column-inner {
    margin-top: 0; /* Exakt wie Original */
    margin-bottom: var(--spacing-lg); /* 40px */
    margin-left: var(--spacing-xl); /* 80px */
    margin-right: var(--spacing-xl); /* 80px */
    width: 100%;
}



/* Content Styling */
.kurpfalz-intro h2 {
    /* Inherits global widget heading styles from widget-headings.css */
    font-size: var(--font-size-intro-h2); /* 1.8rem - Override for intro context */
    line-height: 1.3;
}

.kurpfalz-intro p {
    margin-bottom: var(--spacing-sm);
    line-height: 1.6;
    /* Inherits global p styles */
}

.kurpfalz-intro p:last-child {
    margin-bottom: 0;
}

/* Frame structure for symmetric layout (TYPO3 style) */
.kurpfalz-intro .frame {
    margin: 0;
}

.kurpfalz-intro .frame-inner {
    padding: 0;
}

.kurpfalz-intro .frame-inner header {
    margin: 0;
}

.kurpfalz-intro .frame-inner header h2 {
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-h2);
    text-transform: uppercase;
    margin-top: var(--spacing-md);
    margin-bottom: 22px; /* TYPO3-specific value */
    color: var(--color-primary);
}

.kurpfalz-intro .frame-inner p {
    color: var(--color-primary);
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
}

.kurpfalz-intro .frame-inner p:last-child {
    margin-bottom: 0;
}

.kurpfalz-intro .frame-inner a {
    color: var(--color-primary);
    text-decoration: underline;
}

.kurpfalz-intro .frame-inner a:hover {
    color: var(--color-primary);
}

/* Second column background variants - matches TYPO3 original */
.kurpfalz-intro .second-column .column-background.kurpfalz-bg-secondary {
    background-color: var(--color-secondary);
    --text-color: var(--color-primary);
    --link-color: var(--color-primary);
    --link-color-hover: var(--color-white);
}

.kurpfalz-intro .second-column .column-background.kurpfalz-bg-primary {
    background-color: var(--color-primary);
    --text-color: var(--color-white);
    --link-color: var(--color-white);
    --link-color-hover: var(--color-white);
}

/* Apply CSS variables to second column content */
.kurpfalz-intro .second-column .column-background .frame-inner header h2,
.kurpfalz-intro .second-column .column-background .frame-inner p,
.kurpfalz-intro .second-column .column-background .frame-inner a {
    color: var(--text-color);
}

.kurpfalz-intro .second-column .column-background .frame-inner a:hover {
    color: var(--link-color-hover);
}



/* Text Color Classes */
.text-color-white,
.text-color-white * {
    color: var(--color-white) !important;
}

.text-color-primary,
.text-color-primary * {
    color: var(--color-primary) !important;
}

.text-color-white a,
.text-color-primary a {
    color: inherit;
    text-decoration: underline;
}

/* Icon color for white text */
.text-color-white .kurpfalz-intro-item-icon img {
    filter: brightness(0) invert(1); /* Make icons white */
}

/* Info Items Container */
.kurpfalz-intro-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
}

/* Individual Info Item */
.kurpfalz-intro-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.kurpfalz-intro-item-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
}

.kurpfalz-intro-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1); /* White icons on dark background */
}

.kurpfalz-intro-item-content {
    flex: 1;
    font-size: var(--font-size-small);
    line-height: 1.5;
}

.kurpfalz-intro-item-content p {
    margin: 0;
}

.kurpfalz-intro-item-content p:first-child {
    margin-top: 6px;
}

.kurpfalz-intro-item-content p:last-child {
    margin-bottom: 6px;
}

.kurpfalz-intro-item-content p + p {
    margin-top: 0.5em;
}

.kurpfalz-intro-item-content strong {
    font-weight: var(--font-weight-bold);
}

.kurpfalz-intro-item-content a {
    color: inherit;
    text-decoration: none;
}

.kurpfalz-intro-item-content a:hover {
    opacity: 0.85;
    text-decoration: underline;
}

/* Responsive */
@media screen and (max-width: 750px) {
    .kurpfalz-intro-outer-header {
        padding: var(--spacing-sm) var(--margin-horizontal);
    }

    .kurpfalz-intro-outer-header h2 {
        font-size: var(--font-size-large);
    }

    .kurpfalz-intro .container-columns-inner {
        flex-direction: column; /* Stack columns */
        gap: 32px; /* Exakt wie Original */
        margin-left: 0; /* Exakt wie Original */
        margin-right: 0; /* Exakt wie Original */
        margin-top: 0; /* Exakt wie Original - KEIN Abstand nach oben */
        margin-bottom: 20px; /* Reduziert auf Tablet/Mobile */
    }

    .kurpfalz-intro .first-column {
        margin-left: 40px; /* Matches TYPO3 original */
        margin-right: 40px; /* Matches TYPO3 original */
    }

    .kurpfalz-intro .second-column {
        width: auto; /* Exakt wie Original */
        order: -1; /* Second column first on mobile - Exakt wie Original */
    }

    .kurpfalz-intro .second-column .column-background .column-inner {
        margin-left: var(--margin-horizontal);
        margin-right: var(--margin-horizontal);
        margin-bottom: var(--spacing-sm);
    }

    .kurpfalz-intro h2 {
        font-size: var(--font-size-large);
    }
}

@media screen and (max-width: 540px) {
    .kurpfalz-intro .container-columns-inner {
        margin-top: 0; /* Exakt wie Original - KEIN Abstand nach oben */
        margin-bottom: var(--spacing-sm);
    }

    .kurpfalz-intro .first-column {
        margin-left: var(--margin-horizontal);
        margin-right: var(--margin-horizontal);
    }

    .kurpfalz-intro .second-column .column-background .column-inner {
        margin-left: var(--margin-horizontal);
        margin-right: var(--margin-horizontal);
        margin-bottom: var(--spacing-sm);
    }
}