/* ====================================
   GRID TEMPLATE - Standalone CSS
   2-Spalten Grid Layout mit Hover-Effekten
   ==================================== */

/* Force Grid Layout */
.template-grid.links-container,
div.links.links-container.template-grid,
.links.template-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 700px !important;
}

/* Grid Items - 25% kleiner */
.template-grid .link-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    padding: 1.5rem 1.125rem !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    gap: 0.75rem !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 2px solid #e2e8f0 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 120px !important;
    color: #2d3748 !important;
}

.template-grid .link-item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, transparent 0%, rgba(102, 126, 234, 0.05) 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.4s !important;
}

.template-grid .link-item:hover {
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.25) !important;
    border-color: rgba(102, 126, 234, 0.4) !important;
}

.template-grid .link-item:hover::before {
    opacity: 1 !important;
}

.template-grid .link-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.7rem !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.4s !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.template-grid .link-item:hover .link-icon {
    transform: scale(1.1) rotate(5deg) !important;
}

/* Default platform icons - centered with padding */
.template-grid .link-icon img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
}

.template-grid .link-icon svg {
    width: 32px !important;
    height: 32px !important;
}

/* Custom icons - stretch mode fills entire icon box */
.template-grid .link-icon img.custom-icon-stretch {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
}

/* Make link-icon container position relative for absolute positioning */
.template-grid .link-icon:has(img.custom-icon-stretch) {
    position: relative !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Fallback for browsers without :has() support */
.template-grid .link-icon {
    position: relative !important;
}

/* Custom icons - centered mode with padding */
.template-grid .link-icon img.custom-icon-centered {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
}

.template-grid .link-content {
    text-align: center !important;
    width: 100% !important;
}

.template-grid .link-title {
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    color: #2d3748 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
}

/* ============ PLATFORM-SPECIFIC HOVER COLORS ============ */

.template-grid .link-item.instagram { border-color: #E4405F !important; }
.template-grid .link-item.instagram:hover { 
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; 
    color: white !important;
    border-color: #E4405F !important;
}
.template-grid .link-item.instagram:hover .link-title { color: white !important; }
.template-grid .link-item.instagram:hover .link-icon svg { fill: white !important; }

.template-grid .link-item.youtube { border-color: #FF0000 !important; }
.template-grid .link-item.youtube:hover { 
    background: #FF0000 !important; 
    color: white !important;
    border-color: #FF0000 !important;
}
.template-grid .link-item.youtube:hover .link-title { color: white !important; }
.template-grid .link-item.youtube:hover .link-icon svg { fill: white !important; }

.template-grid .link-item.tiktok { border-color: #000000 !important; }
.template-grid .link-item.tiktok:hover { 
    background: #000000 !important; 
    color: white !important;
    border-color: #000000 !important;
}
.template-grid .link-item.tiktok:hover .link-title { color: white !important; }
.template-grid .link-item.tiktok:hover .link-icon svg path { fill: white !important; }

.template-grid .link-item.discord { border-color: #5865F2 !important; }
.template-grid .link-item.discord:hover { 
    background: #5865F2 !important; 
    color: white !important;
    border-color: #5865F2 !important;
}
.template-grid .link-item.discord:hover .link-title { color: white !important; }
.template-grid .link-item.discord:hover .link-icon svg { fill: white !important; }

.template-grid .link-item.twitch { border-color: #9146FF !important; }
.template-grid .link-item.twitch:hover { 
    background: #9146FF !important; 
    color: white !important;
    border-color: #9146FF !important;
}
.template-grid .link-item.twitch:hover .link-title { color: white !important; }
.template-grid .link-item.twitch:hover .link-icon svg { fill: white !important; }

.template-grid .link-item.facebook { border-color: #1877F2 !important; }
.template-grid .link-item.facebook:hover { 
    background: #1877F2 !important; 
    color: white !important;
    border-color: #1877F2 !important;
}
.template-grid .link-item.facebook:hover .link-title { color: white !important; }
.template-grid .link-item.facebook:hover .link-icon svg { fill: white !important; }

.template-grid .link-item.twitter { border-color: #1DA1F2 !important; }
.template-grid .link-item.twitter:hover { 
    background: #1DA1F2 !important; 
    color: white !important;
    border-color: #1DA1F2 !important;
}
.template-grid .link-item.twitter:hover .link-title { color: white !important; }
.template-grid .link-item.twitter:hover .link-icon svg { fill: white !important; }

.template-grid .link-item.linkedin { border-color: #0A66C2 !important; }
.template-grid .link-item.linkedin:hover { 
    background: #0A66C2 !important; 
    color: white !important;
    border-color: #0A66C2 !important;
}
.template-grid .link-item.linkedin:hover .link-title { color: white !important; }
.template-grid .link-item.linkedin:hover .link-icon svg { fill: white !important; }

.template-grid .link-item.github { border-color: #333 !important; }
.template-grid .link-item.github:hover { 
    background: #333 !important; 
    color: white !important;
    border-color: #333 !important;
}
.template-grid .link-item.github:hover .link-title { color: white !important; }
.template-grid .link-item.github:hover .link-icon svg { fill: white !important; }

.template-grid .link-item.website { border-color: #667eea !important; }
.template-grid .link-item.website:hover { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; 
    color: white !important;
    border-color: #667eea !important;
}
.template-grid .link-item.website:hover .link-title { color: white !important; }
.template-grid .link-item.website:hover .link-icon svg { fill: white !important; }

.template-grid .link-item.email { border-color: #EA4335 !important; }
.template-grid .link-item.email:hover { 
    background: #EA4335 !important; 
    color: white !important;
    border-color: #EA4335 !important;
}
.template-grid .link-item.email:hover .link-title { color: white !important; }
.template-grid .link-item.email:hover .link-icon svg { fill: white !important; }

.template-grid .link-item.whatsapp { border-color: #25D366 !important; }
.template-grid .link-item.whatsapp:hover { 
    background: #25D366 !important; 
    color: white !important;
    border-color: #25D366 !important;
}
.template-grid .link-item.whatsapp:hover .link-title { color: white !important; }
.template-grid .link-item.whatsapp:hover .link-icon svg { fill: white !important; }

.template-grid .link-item.snapchat { border-color: #FFFC00 !important; }
.template-grid .link-item.snapchat:hover { 
    background: #FFFC00 !important; 
    color: #000 !important;
    border-color: #FFFC00 !important;
}
.template-grid .link-item.snapchat:hover .link-title { color: #000 !important; }
.template-grid .link-item.snapchat:hover .link-icon svg { fill: #000 !important; }

.template-grid .link-item.x { border-color: #000000 !important; }
.template-grid .link-item.x:hover { 
    background: #000000 !important; 
    color: white !important;
    border-color: #000000 !important;
}
.template-grid .link-item.x:hover .link-title { color: white !important; }
.template-grid .link-item.x:hover .link-icon svg { fill: white !important; }

.template-grid .link-item.pinterest { border-color: #E60023 !important; }
.template-grid .link-item.pinterest:hover { 
    background: #E60023 !important; 
    color: white !important;
    border-color: #E60023 !important;
}
.template-grid .link-item.pinterest:hover .link-title { color: white !important; }
.template-grid .link-item.pinterest:hover .link-icon svg { fill: white !important; }

.template-grid .link-item.reddit { border-color: #FF4500 !important; }
.template-grid .link-item.reddit:hover { 
    background: #FF4500 !important; 
    color: white !important;
    border-color: #FF4500 !important;
}
.template-grid .link-item.reddit:hover .link-title { color: white !important; }
.template-grid .link-item.reddit:hover .link-icon svg { fill: white !important; }

.template-grid .link-item.spotify { border-color: #1DB954 !important; }
.template-grid .link-item.spotify:hover { 
    background: #1DB954 !important; 
    color: white !important;
    border-color: #1DB954 !important;
}
.template-grid .link-item.spotify:hover .link-title { color: white !important; }
.template-grid .link-item.spotify:hover .link-icon svg { fill: white !important; }

.template-grid .link-item.telegram { border-color: #26A5E4 !important; }
.template-grid .link-item.telegram:hover { 
    background: #26A5E4 !important; 
    color: white !important;
    border-color: #26A5E4 !important;
}
.template-grid .link-item.telegram:hover .link-title { color: white !important; }
.template-grid .link-item.telegram:hover .link-icon svg { fill: white !important; }

.template-grid .link-item.kofi { border-color: #FF5E5B !important; }
.template-grid .link-item.kofi:hover { 
    background: #FF5E5B !important; 
    color: white !important;
    border-color: #FF5E5B !important;
}
.template-grid .link-item.kofi:hover .link-title { color: white !important; }
.template-grid .link-item.kofi:hover .link-icon svg { fill: white !important; }

.template-grid .link-item.phone { border-color: #34A853 !important; }
.template-grid .link-item.phone:hover { 
    background: #34A853 !important; 
    color: white !important;
    border-color: #34A853 !important;
}
.template-grid .link-item.phone:hover .link-title { color: white !important; }
.template-grid .link-item.phone:hover .link-icon svg { fill: white !important; }

/* Custom icons with dominant color - use CSS variable for border and hover */
.template-grid .link-item[style*="--dominant-color"] {
    border-color: var(--dominant-color) !important;
}

.template-grid .link-item[style*="--dominant-color"]:hover {
    background: var(--dominant-color) !important;
    color: white !important;
    border-color: var(--dominant-color) !important;
}

.template-grid .link-item[style*="--dominant-color"]:hover .link-title {
    color: white !important;
}

/* Override any conflicting flex styles */
.links.template-grid {
    flex-direction: unset !important;
}

/* ============ RESPONSIVE ============ */

@media (max-width: 768px) {
    .template-grid.links-container,
    div.links.links-container.template-grid,
    .links.template-grid {
        gap: 0.875rem !important;
        max-width: 100% !important;
    }

    .template-grid .link-item {
        padding: 1.25rem 1rem !important;
        min-height: 110px !important;
    }

    .template-grid .link-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        font-size: 1.5rem !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .template-grid .link-icon img,
    .template-grid .link-icon svg {
        width: 28px !important;
        height: 28px !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Custom icons - stretch mode on mobile */
    .template-grid .link-icon img.custom-icon-stretch {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
        border-radius: 10px !important;
        margin: 0 !important;
    }

    /* Custom icons - centered mode on mobile */
    .template-grid .link-icon img.custom-icon-centered {
        width: 28px !important;
        height: 28px !important;
    }

    .template-grid .link-title {
        font-size: 0.85rem !important;
    }
}

@media (max-width: 480px) {
    .template-grid.links-container,
    div.links.links-container.template-grid,
    .links.template-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        max-width: 100% !important;
    }

    .template-grid .link-item {
        padding: 1rem 0.75rem !important;
        min-height: 100px !important;
        border-radius: 14px !important;
    }

    .template-grid .link-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        font-size: 1.3rem !important;
        border-radius: 10px !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .template-grid .link-icon img,
    .template-grid .link-icon svg {
        width: 24px !important;
        height: 24px !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Custom icons - stretch mode on small mobile */
    .template-grid .link-icon img.custom-icon-stretch {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
        border-radius: 10px !important;
        margin: 0 !important;
    }

    /* Custom icons - centered mode on small mobile */
    .template-grid .link-icon img[src*="/uploads/icons/"].custom-icon-centered {
        width: 24px !important;
        height: 24px !important;
    }

    .template-grid .link-title {
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
    }

    .template-grid .link-item:hover {
        transform: translateY(-4px) scale(1.01) !important;
    }
}

@media (max-width: 360px) {
    .template-grid .link-item {
        padding: 0.875rem 0.625rem !important;
        min-height: 90px !important;
        gap: 0.5rem !important;
    }

    .template-grid .link-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .template-grid .link-icon img,
    .template-grid .link-icon svg {
        width: 22px !important;
        height: 22px !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Custom icons - stretch mode on very small mobile */
    .template-grid .link-icon img.custom-icon-stretch {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        border-radius: 8px !important;
        margin: 0 !important;
    }

    /* Custom icons - centered mode on very small mobile */
    .template-grid .link-icon img[src*="/uploads/icons/"].custom-icon-centered {
        width: 22px !important;
        height: 22px !important;
    }

    .template-grid .link-title {
        font-size: 0.75rem !important;
    }
}