/**
 * Image Text CSS - AKT Image Text Single Element
 * 
 * Single Image-Text Element für VC Columns mit:
 * - Responsive Design
 * - Verschiedene Bildverhältnisse  
 * - Hover-Overlay-Effekte
 * - Smooth Transitions
 * - Accessibility Features
 * - Animation Support
 */

/* CSS Custom Properties */
:root {
    --akt-image-text-transition: all 0.3s ease;
    --akt-image-text-overlay-bg: rgba(0, 0, 0, 0.7);
    --akt-image-text-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --akt-image-text-hover-transform: translateY(-8px);
    --akt-image-text-container-scale: 1.05; /* Neue Variable für Container-Skalierung */
}


/* Single Element Base */
.akt-image-text-single {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    transition: var(--akt-image-text-transition);
}

/* Link Wrapper - MODIFIZIERT: Separate Links für Bild und Text */
.akt-image-text-single__image-link,
.akt-image-text-single__text-link {
    display: block;
    text-decoration: none !important; /* Wichtig: Unterstrich komplett entfernen */
    color: inherit;
    transition: var(--akt-image-text-transition);
}

.akt-image-text-single__image-link {
    width: 100%;
}

.akt-image-text-single__text-link {
    width: 100%;
}

/* Zusätzliche Sicherheit: Alle Links in diesem Element ohne Unterstrich */
.akt-image-text-single a {
    text-decoration: none !important;
}

/* Image Container */
.akt-image-text-single__image-container {
    position: relative;
    overflow: hidden;
    background: var(--aktd-color-ice, #F2F4F6);
    transition: var(--akt-image-text-transition);
    width: 100%;
}

/* Aspect Ratios */
.akt-image-text-single--aspect-square .akt-image-text-single__image-container {
    aspect-ratio: 1 / 1;
}

.akt-image-text-single--aspect-landscape .akt-image-text-single__image-container {
    aspect-ratio: 4 / 3;
}

.akt-image-text-single--aspect-wide .akt-image-text-single__image-container {
    aspect-ratio: 16 / 9;
}

.akt-image-text-single--aspect-portrait .akt-image-text-single__image-container {
    aspect-ratio: 3 / 4;
}

.akt-image-text-single--aspect-auto .akt-image-text-single__image-container {
    aspect-ratio: auto;
}

/* Image */
.akt-image-text-single__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: var(--akt-image-text-transition);
}

/* Design-Preset: Container 320x210 (Non-Hover), 320x236 (Hover) */
/*
   Nutzung: Füge der Komponente die Klasse
   .akt-image-text-single--design-320x210 hinzu.
   - Basis: Aspect Ratio 320/210 (responsiv)
   - Hover: vertikale Skalierung auf 236/210; Bild skaliert voll, wird seitlich geclippt
*/
.akt-image-text-single--design-320x210 {
    /* Exakte Skalierung: 236 / 210 ≈ 1.12381 */
    --akt-image-text-container-scale: calc(236 / 210);
}

.akt-image-text-single--design-320x210 .akt-image-text-single__image-container {
    aspect-ratio: calc(320 / 210);
}

/* Image Placeholder */
.akt-image-text-single__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: var(--aktd-color-ice, #F2F4F6);
    border: 2px dashed #ccc;
}

.akt-image-text-single__placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: #999;
    text-align: center;
}

.akt-image-text-single__placeholder-icon {
    opacity: 0.5;
}

.akt-image-text-single__placeholder-content small {
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    opacity: 0.7;
}

/* Overlay - ENTFERNT: Kein Overlay mehr beim Hover */
.akt-image-text-single__overlay {
    display: none; /* Overlay komplett deaktiviert */
}

/* ENTFERNT: Overlay Content und Icon Styles, da kein Pfeil mehr angezeigt werden soll */

/* Text Container */
.akt-image-text-single__text-container {
    padding: 2rem 0 0 0;
    width: 100%;
}

.akt-image-text-single__text {
    color: var(--aktd-color-font, #363D52);
    font-family: "DM Sans", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
    transition: var(--akt-image-text-transition);
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    text-decoration: none !important; /* Unterstrich entfernt mit !important */
}

/* Zusätzliche Regel für H3 innerhalb von Links */
.akt-image-text-single__text-link h3,
.akt-image-text-single a h3 {
    text-decoration: none !important;
    margin-bottom:30px;
}

/* Text Alignment */
.akt-image-text-single--align-left .akt-image-text-single__text-container {
    text-align: left;
}

.akt-image-text-single--align-center .akt-image-text-single__text-container {
    text-align: center;
}

.akt-image-text-single--align-right .akt-image-text-single__text-container {
    text-align: right;
}

/* Shadow Effect */
.akt-image-text-single--shadow .akt-image-text-single__image-container {
    box-shadow: var(--akt-image-text-shadow);
}

/* Hover Effects - MODIFIZIERT: Separate Hover-Effekte für Bild- und Text-Links */
.akt-image-text-single--clickable .akt-image-text-single__image-link:hover .akt-image-text-single__image-container {
    transform: scaleY(var(--akt-image-text-container-scale));
}

/* Bild selbst skaliert in beide Richtungen, bleibt durch Container geclippt */
.akt-image-text-single--clickable .akt-image-text-single__image-link:hover .akt-image-text-single__image {
    /* Kombiniert mit parent scaleY -> effektive uniforme Skalierung, Ratio bleibt erhalten */
    transform: scaleX(var(--akt-image-text-container-scale));
}

.akt-image-text-single--clickable .akt-image-text-single__text-link:hover .akt-image-text-single__text {
    color: var(--aktd-color-light-blue, #009FE3);
    text-decoration: none !important; /* Sicherstellen, dass auch beim Hover kein Unterstrich erscheint */
}

/* Kompatibilität: Falls noch alte Link-Klasse verwendet wird */
.akt-image-text-single--clickable:hover .akt-image-text-single__image-container {
    transform: scaleY(var(--akt-image-text-container-scale));
}

.akt-image-text-single--clickable:hover .akt-image-text-single__image {
    transform: scaleX(var(--akt-image-text-container-scale));
}

.akt-image-text-single--clickable:hover .akt-image-text-single__text {
    color: var(--aktd-color-light-blue, #009FE3);
    text-decoration: none !important;
}

.akt-image-text-single--shadow.akt-image-text-single--clickable:hover .akt-image-text-single__image-container {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: scaleY(var(--akt-image-text-container-scale)); /* Kombiniert Shadow und Scale */
}

.akt-image-text-single--shadow.akt-image-text-single--clickable:hover .akt-image-text-single__image {
    transform: scaleX(var(--akt-image-text-container-scale));
}

/* Focus States for Accessibility - MODIFIZIERT: Separate Focus-States */
.akt-image-text-single__image-link:focus,
.akt-image-text-single__text-link:focus {
    outline: none;
}

.akt-image-text-single__image-link:focus .akt-image-text-single__image-container {
    transform: scaleY(var(--akt-image-text-container-scale));
}

.akt-image-text-single__image-link:focus .akt-image-text-single__image {
    transform: scaleX(var(--akt-image-text-container-scale));
}

.akt-image-text-single__text-link:focus .akt-image-text-single__text {
    color: var(--aktd-color-light-blue, #009FE3);
}

/* Kompatibilität: Falls noch alte Link-Klasse verwendet wird */
.akt-image-text-single__link:focus {
    outline: none;
}

.akt-image-text-single__link:focus .akt-image-text-single__image-container {
    transform: scaleY(var(--akt-image-text-container-scale));
}

.akt-image-text-single__link:focus .akt-image-text-single__image {
    transform: scaleX(var(--akt-image-text-container-scale));
}

.akt-image-text-single__link:focus .akt-image-text-single__text {
    color: var(--aktd-color-light-blue, #009FE3);
}

/* Animation Classes */

/* Initial state for animations */
.akt-image-text-single--animate-fade-in {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.akt-image-text-single--animate-slide-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.akt-image-text-single--animate-scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Animated state (triggered by JavaScript) */
.akt-image-text-single--animated.akt-image-text-single--animate-fade-in {
    opacity: 1;
}

.akt-image-text-single--animated.akt-image-text-single--animate-slide-up {
    opacity: 1;
    transform: translateY(0);
}

.akt-image-text-single--animated.akt-image-text-single--animate-scale-in {
    opacity: 1;
    transform: scale(1);
}

/* No Content State */
.akt-image-text__no-content {
    padding: 2rem;
    text-align: center;
    background: var(--aktd-color-ice, #F2F4F6);
    border: 2px dashed #ccc;
    color: #666;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    :root {
        --akt-image-text-container-scale: 1.03; /* Kleinere Skalierung auf Tablets */
    }
    
    .akt-image-text-single__text {
    }
}

@media (max-width: 768px) {
    :root {
        --akt-image-text-hover-transform: translateY(-4px);
        --akt-image-text-container-scale: 1.02; /* Noch kleinere Skalierung auf Mobile */
    }
    
    .akt-image-text-single__text {
    }
    
    .akt-image-text-single__text-container {
        padding: 0.75rem 0 0 0;
    }
    
    /* Touch-friendly hover states - MODIFIZIERT: Separate Active-States */
    .akt-image-text-single--clickable .akt-image-text-single__image-link:active .akt-image-text-single__image-container {
        transform: scaleY(var(--akt-image-text-container-scale));
    }

    .akt-image-text-single--clickable .akt-image-text-single__image-link:active .akt-image-text-single__image {
        transform: scaleX(var(--akt-image-text-container-scale));
    }
    
    .akt-image-text-single--clickable .akt-image-text-single__text-link:active .akt-image-text-single__text {
        color: var(--aktd-color-light-blue, #009FE3);
    }
    
    /* Kompatibilität: Falls noch alte Klasse verwendet wird */
    .akt-image-text-single--clickable:active .akt-image-text-single__image-container {
        transform: scaleY(var(--akt-image-text-container-scale));
    }

    .akt-image-text-single--clickable:active .akt-image-text-single__image {
        transform: scaleX(var(--akt-image-text-container-scale));
    }
}

@media (max-width: 480px) {
    .akt-image-text-single__text {
    }
    
    .akt-image-text-single__image-placeholder {
        min-height: 150px;
    }
    
    .akt-image-text-single__placeholder-content small {
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .akt-image-text-single__image-container {
        border: 2px solid #000;
    }
    
    .akt-image-text-single__text {
        font-weight: 600;
    }
    
    .akt-image-text-single__overlay {
        background: rgba(0, 0, 0, 0.9);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --akt-image-text-transition: none;
        --akt-image-text-container-scale: 1; /* Keine Skalierung bei reduzierter Bewegung */
    }
    
    .akt-image-text-single--clickable:hover .akt-image-text-single__image-container {
        transform: none;
    }
    
    /* Disable animations */
    .akt-image-text-single--animate-fade-in,
    .akt-image-text-single--animate-slide-up,
    .akt-image-text-single--animate-scale-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .akt-image-text-single__image-placeholder {
        background: #333;
        border-color: #666;
        color: #ccc;
    }
    
    .akt-image-text__no-content {
        background: #333;
        border-color: #666;
        color: #ccc;
    }
}

/* Print Styles */
@media print {
    .akt-image-text-single {
        break-inside: avoid;
        border: 1px solid #ddd;
        padding: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .akt-image-text-single__text {
        color: #000 !important;
        font-size: 12px;
        text-decoration: none !important; /* Kein Unterstrich beim Drucken */
    }
    
    .akt-image-text-single__image-container {
        max-height: 200px;
        transform: none !important; /* Keine Transformation beim Drucken */
    }
    
    .akt-image-text-single__image {
        max-height: 200px;
        object-fit: contain;
    }
}

/* Compatibility with VC Column Spacing */
.vc_column-inner > .wpb_wrapper > .akt-image-text-single:last-child {
    margin-bottom: 0;
}

/* Integration with VC Responsive Classes */
.vc_hidden-xs .akt-image-text-single,
.vc_hidden-sm .akt-image-text-single,
.vc_hidden-md .akt-image-text-single,
.vc_hidden-lg .akt-image-text-single {
    display: none;
}

@media (max-width: 767px) {
    .vc_visible-xs .akt-image-text-single {
        display: flex !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .vc_visible-sm .akt-image-text-single {
        display: flex !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .vc_visible-md .akt-image-text-single {
        display: flex !important;
    }
}

@media (min-width: 1200px) {
    .vc_visible-lg .akt-image-text-single {
        display: flex !important;
    }
}