/**
 * CockpitOS Light Theme - Contact Widget Styles
 *
 * Verantwortlichkeit: Contact & Map Styling
 *
 * @package CockpitOS_MEC_Light_Theme
 * @version 1.0.0
 */

/* ========================================
   Container
   ======================================== */

/* Container-System: Background und Paddings werden von .cockpit-widget__wrapper gehandhabt */
.cockpit-contact {
    width: 100%;
    /* Background wird vom Container-System (.cockpit-widget__wrapper) gehandhabt */
    /* Padding wird vom Container-System (.cockpit-widget__content) gehandhabt */
}

/* WICHTIG: Kein max-width hier - wird vom Container-System gesteuert */
.cockpit-contact__container {
    width: 100%;
    margin: 0 auto;
}

/* ========================================
   Header (Erweitert gemeinsame Basis-Klassen)
   ======================================== */

/* Nutzt .cockpit-widget-header, .cockpit-widget-eyebrow, etc. als Basis */
/* Widget-spezifische Anpassungen nur wenn nötig */

.cockpit-contact__description {
    max-width: 600px; /* Etwas schmaler als Standard */
}

/* ========================================
   Content Layout
   ======================================== */

.cockpit-contact__content {
    display: grid;
    gap: var(--spacing-10, 2.5rem);
}

/* Side by Side Layout */
.cockpit-contact--side-by-side .cockpit-contact__content {
    grid-template-columns: 1fr 1fr;
    align-items: stretch; /* Beide Kinder gleiche Höhe */
}

/* Side by Side: Info-Box und Map gleiche Höhe */
.cockpit-contact--side-by-side .cockpit-contact__info,
.cockpit-contact--side-by-side .cockpit-contact__map {
    height: 100%; /* Beide füllen die Grid-Row-Höhe */
    display: flex;
    flex-direction: column;
}

/* Stacked Layout */
.cockpit-contact--stacked .cockpit-contact__content {
    grid-template-columns: 1fr;
}

/* Map Only */
.cockpit-contact--map-only .cockpit-contact__content {
    grid-template-columns: 1fr;
}

/* Form Only */
.cockpit-contact--form-only .cockpit-contact__content {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 0 auto;
}

/* ========================================
   Contact Info Box
   ======================================== */

.cockpit-contact__info {
    /* Background und Color werden vom Container-System gesteuert */
    padding: var(--spacing-10, 2.5rem);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg, 0 4px 20px rgba(0, 0, 0, 0.1));
}

.cockpit-contact__info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4, 1rem);
    margin-bottom: var(--spacing-6, 1.5rem);
}

.cockpit-contact__info-item:last-child {
    margin-bottom: 0;
}

.cockpit-contact__icon {
    flex-shrink: 0;
    width: var(--spacing-6, 1.5rem);
    height: var(--spacing-6, 1.5rem);
    /* Color wird vom Container-System gesteuert */
}

.cockpit-contact__info-item a {
    /* Color wird vom Container-System gesteuert */
    text-decoration: none;
    font-size: var(--font-size-base, 1rem);
    line-height: var(--line-height-normal, 1.5);
    transition: opacity var(--transition-base, 0.3s ease);
}

.cockpit-contact__info-item a:hover {
    opacity: 0.8;
}

.cockpit-contact__info-item span {
    font-size: var(--font-size-base, 1rem);
    line-height: var(--line-height-normal, 1.5);
}

/* ========================================
   Map
   ======================================== */

.cockpit-contact__map {
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    box-shadow: var(--shadow-lg, 0 4px 20px rgba(0, 0, 0, 0.1));
    height: 100%; /* Flexible Height */
    min-height: 500px; /* Mindesthöhe für Side-by-Side Desktop */
    position: relative; /* Für iframe positioning */
}

.cockpit-contact__map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ========================================
   Contact Form
   ======================================== */

.cockpit-contact__form {
    margin-top: var(--spacing-8, 2rem);
}

.cockpit-contact__default-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5, 1.25rem);
}

.cockpit-contact__form-header {
    margin-bottom: var(--spacing-xs, 0.5rem);
}

.cockpit-contact__form-header h3 {
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-white, #ffffff);
    margin: 0;
}

.cockpit-contact__form-row {
    display: flex;
    gap: var(--spacing-4, 1rem);
}

.cockpit-contact__form-row--half {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4, 1rem);
}

.cockpit-contact__form-row input,
.cockpit-contact__form-row textarea {
    width: 100%;
    padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md, 8px);
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-white, #ffffff);
    font-size: var(--font-size-base, 1rem);
    font-family: inherit;
    transition: all var(--transition-base, 0.3s ease);
}

.cockpit-contact__form-row input::placeholder,
.cockpit-contact__form-row textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.cockpit-contact__form-row input:focus,
.cockpit-contact__form-row textarea:focus {
    outline: none;
    border-color: var(--color-white, #ffffff);
    background-color: rgba(255, 255, 255, 0.15);
}

.cockpit-contact__button {
    width: 100%;
    background-color: var(--color-white, #ffffff);
    color: var(--color-primary, #343d4c);
}

.cockpit-contact__button:hover {
    background-color: var(--color-neutral-ultra-light, #f2f2f2);
    color: var(--color-primary-dark, #343d4c);
}

.cockpit-contact__button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ========================================
   Form Message
   ======================================== */

.cockpit-contact__form-message {
    padding: var(--spacing-4, 1rem);
    border-radius: var(--radius-md, 8px);
    font-size: var(--font-size-base, 1rem);
    line-height: var(--line-height-normal, 1.5);
    margin-top: var(--spacing-4, 1rem);
}

.cockpit-contact__form-message--success {
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #059669; /* Success green - kann als Variable hinzugefügt werden */
}

.cockpit-contact__form-message--error {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #dc2626; /* Error red - kann als Variable hinzugefügt werden */
}

.cockpit-contact__form-message--loading {
    background-color: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #2563eb; /* Info blue - kann als Variable hinzugefügt werden */
}

/* ========================================
   Max Bonn Layout
   ======================================== */

/* Background wird vom Container-System (.cockpit-widget__wrapper) gehandhabt */
.cockpit-contact--max-bonn {
    /* background-color wird vom Container-System gehandhabt */
    /* color wird vom Container-System gehandhabt */
}

.cockpit-contact__max-bonn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-8, 3rem);
    align-items: start;
    /* Padding wird vom Container-System (.cockpit-widget__content) gehandhabt */
    /* Nur vertical padding für Abstand zwischen Grid-Elementen */
    padding: 0;
}

/* Contact Max Bonn Title nutzt globale h2 Styles */
.cockpit-contact__max-bonn-title {
    /* Nutzt globale h2 Styles (font-family, font-size, font-weight, text-transform, letter-spacing) */
    /* color wird vom Container-System gehandhabt */
    margin: 0 0 var(--spacing-6, 2rem) 0;
    line-height: var(--line-height-tight, 1.2);
}

.cockpit-contact__max-bonn-left {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4, 1.5rem);
}

.cockpit-contact__max-bonn-address {
    /* color wird vom Container-System gehandhabt */
    font-size: var(--font-size-base, 1rem);
    line-height: 1.6;
    white-space: pre-line;
}

/* Map with Consent */
.cockpit-contact__map-wrapper {
    position: relative;
    width: 100%;
    background-color: var(--color-white);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.cockpit-contact__map-consent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8, 3rem);
    min-height: 400px;
    text-align: center;
    background-color: var(--color-white);
}

.cockpit-contact__map-consent-text {
    color: var(--color-text, #595959);
    font-size: var(--font-size-base, 1rem);
    line-height: 1.6;
    margin-bottom: var(--spacing-4, 1.5rem);
    max-width: 400px;
}

.cockpit-contact__map-consent-button {
    background-color: var(--color-neutral-semi-dark, #595959);
    color: var(--color-white);
    border: none;
    padding: var(--spacing-3, 1rem) var(--spacing-6, 2rem);
    border-radius: var(--radius-md, 8px);
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-family-base);
}

.cockpit-contact__map-consent-button:hover {
    background-color: var(--color-neutral-dark, #404040);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.cockpit-contact__map {
    width: 100%;
    position: relative;
}

.cockpit-contact__map--hidden {
    display: none;
}

.cockpit-contact__map iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Transport Options */
.cockpit-contact__max-bonn-right {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6, 2rem);
}

.cockpit-contact__transport-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6, 2rem);
}

.cockpit-contact__transport-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3, 1rem);
}

.cockpit-contact__transport-icon {
    width: 48px;
    height: 48px;
    /* color wird vom Container-System gehandhabt */
    display: flex;
    align-items: center;
    justify-content: center;
}

.cockpit-contact__transport-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.cockpit-contact__transport-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-bold);
    /* color wird vom Container-System gehandhabt */
    margin: 0;
    line-height: 1.3;
}

.cockpit-contact__transport-description {
    /* color wird vom Container-System gehandhabt */
    font-size: var(--font-size-base, 1rem);
    line-height: 1.6;
    opacity: 0.9;
}

.cockpit-contact__transport-description p {
    margin: 0 0 var(--spacing-2, 0.5rem) 0;
}

.cockpit-contact__transport-description p:last-child {
    margin-bottom: 0;
}

.cockpit-contact__transport-description a {
    color: var(--color-white);
    text-decoration: underline;
    transition: opacity var(--transition-base);
}

.cockpit-contact__transport-description a:hover {
    opacity: 0.8;
}

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

@media (max-width: 1024px) {
    .cockpit-contact--side-by-side .cockpit-contact__content {
        grid-template-columns: 1fr; /* Stack auf Tablet */
    }
    
    /* Max Bonn Layout: Stack auf Tablet */
    .cockpit-contact__max-bonn-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-6, 2rem);
    }
    
    /* Tablet: Map etwas niedriger */
    .cockpit-contact__map {
        min-height: 400px;
    }
    
    .cockpit-contact__map-consent {
        min-height: 350px;
        padding: var(--spacing-6, 2rem);
    }
    
    /* Responsive Styles für Header werden von .cockpit-widget-header gehandhabt */
}

@media (max-width: 768px) {
    /* Padding wird vom Container-System gehandhabt */
    .cockpit-contact {
        /* padding wird vom Container-System gehandhabt */
    }
    
    .cockpit-contact__header {
        margin-bottom: var(--spacing-10, 2.5rem);
    }
    
    /* Max Bonn Layout: Mobile */
    .cockpit-contact__max-bonn-grid {
        gap: var(--spacing-4, 1.5rem);
        /* padding wird vom Container-System gehandhabt */
        padding: 0;
    }
    
    .cockpit-contact__max-bonn-title {
        font-size: var(--font-size-3xl, 1.875rem);
        margin-bottom: var(--spacing-4, 1.5rem);
    }
    
    .cockpit-contact__map-consent {
        min-height: 300px;
        padding: var(--spacing-4, 1.5rem);
    }
    
    .cockpit-contact__map-consent-text {
        font-size: var(--font-size-sm, 0.875rem);
    }
    
    .cockpit-contact__transport-title {
        font-size: var(--font-size-base, 1rem);
    }
    
    /* Mobile: Map deutlich niedriger (nicht zu hoch!) */
    .cockpit-contact__map {
        min-height: 300px; /* 300px statt 500px */
        height: 300px; /* Feste Höhe auf Mobile */
    }
    
    /* Responsive Styles für Header werden von .cockpit-widget-header gehandhabt */
    
    .cockpit-contact__info {
        padding: var(--spacing-8, 2rem);
    }
    
    .cockpit-contact__form-row--half {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    /* Padding wird vom Container-System gehandhabt */
    .cockpit-contact {
        /* padding wird vom Container-System gehandhabt */
    }
    
    /* Small Mobile: Map noch niedriger */
    .cockpit-contact__map {
        min-height: 250px;
        height: 250px;
    }
    
    /* Responsive Styles für Header werden von .cockpit-widget-header gehandhabt */
    
    .cockpit-contact__info {
        padding: var(--spacing-6, 1.5rem);
    }
    
    .cockpit-contact__content {
        gap: var(--spacing-6, 1.5rem); /* Kleinerer Gap */
    }
}