/* Card layout improvements - two column layout with cards on left, widgets on right */

/* Main layout container */
.main-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    grid-template-rows: 1fr; /* Single row that expands to content height */
    gap: 2rem;
    max-width: 80rem;
    width: 100%;
    margin: 0 auto;
    align-items: stretch; /* Stretch both columns to match the tallest content */
    min-height: min-content; /* Ensure minimum height based on content */
}

/* Cards column - left side */
.cards-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-self: stretch; /* Stretch to full available height */
    min-height: min-content; /* Minimum height based on card content */
}

/* Widgets column - right side */
.widgets-column {
    display: flex;
    flex-direction: column;
    position: relative;
    align-self: stretch; /* Stretch to match the cards column height */
    min-height: 100%; /* Ensure it matches the left column height */
}

/* Card containers - provide structure and alignment */
.card-container {
    display: flex;
    flex-direction: column;
    flex: 1; /* Equal height distribution */
}

/* Single widget container - contains both widgets */
.widget-container {
    display: flex;
    flex-direction: column;
    flex: 1; /* Take full height of widgets column */
    height: 100%; /* Take full height to match left column */
    min-height: 100%; /* Ensure it's at least as tall as the left column */
    position: relative; /* For absolute positioning of widgets if needed */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
    align-self: stretch; /* Stretch to match the height allocation */
    background: none; /* No background styling */
    border: none; /* No border styling */
}

/* Hide widgets by default */
.elevenlabs-widget-container.hidden {
    display: none !important;
}

/* Show widgets when visible */
.elevenlabs-widget-container:not(.hidden) {
    display: block;
}

/* Button container styling */
.card-button-container {
    margin-top: 1rem;
    text-align: center;
}

/* Ensure buttons keep their hover effects */
.card-button-container .btn {
    cursor: pointer !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card-button-container .btn:hover {
    background-color: hsl(var(--primary)/.9) !important;
    transform: none; /* No transform effects, just color change */
}

/* Ensure container can accommodate wider layout but remains responsive */
.container-responsive {
    max-width: 90rem !important; /* Maximum width */
    width: 100%; /* Flexible width */
}

/* Flexible card sizing - adjusted for vertical layout */
.option-card {
    width: 100%; /* Take full width of cards column */
    max-width: none; /* Remove any max-width constraints */
    min-width: 0; /* Allow cards to shrink as needed */
    box-sizing: border-box; /* Include padding in width calculations */
    min-height: 200px; /* Reduced height since widgets are separate */
    cursor: default !important; /* Remove pointer cursor */
    transition: none !important; /* Remove all transitions */
}

/* Remove ALL hover effects from cards */
.option-card:hover {
    transform: none !important;
    --tw-scale-x: 1 !important;
    --tw-scale-y: 1 !important;
    --tw-shadow: none !important;
    --tw-shadow-colored: none !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, none) !important;
    border-color: hsl(var(--border)) !important; /* Keep original border color */
    background-color: hsl(var(--card)) !important; /* Keep original background */
    scale: 1 !important; /* Ensure no scaling */
}

/* Mobile-first approach - single column layout on small screens */
@media (max-width: 767px) {
    .main-layout {
        grid-template-columns: 1fr !important; /* Single column on small screens */
        gap: 1rem;
    }
    
    .widgets-column {
        order: -1; /* Put widgets above cards on mobile if visible */
    }
    
    .card-container,
    .widget-container {
        flex: none; /* Remove flex behavior on mobile */
    }
}

/* Tablet and up - maintain two column layout */
@media (min-width: 768px) {
    .main-layout {
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .main-layout {
        gap: 2.5rem;
        max-width: 85rem;
    }
}

@media (min-width: 1200px) {
    .main-layout {
        gap: 3rem;
        max-width: 90rem;
    }
    
    .option-card {
        padding: 2.5rem; /* More padding on larger screens */
    }
}

@media (min-width: 1400px) {
    .main-layout {
        max-width: 95rem;
    }
    
    .option-card {
        padding: 3rem; /* Premium spacing on ultra-wide screens */
    }
}

/* Ensure the landing page content is properly centered */
.landing-page .container-responsive {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 95rem;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Flexible subtitle width */
.landing-subtitle {
    max-width: min(60rem, 90%) !important; /* Responsive max-width */
    width: 100%;
    text-align: center;
}

/* ElevenLabs Widget Container Styling */
.elevenlabs-widget-container {
    width: 100%; /* Full width of widgets column */
    min-height: 600px; /* Increased height for larger chat interface */
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 0.5rem;
    background-color: var(--card, #ffffff);
    overflow: hidden;
    position: relative;
    display: block; /* Ensure block display */
    flex-shrink: 0; /* Prevent shrinking */
    margin: 0; /* Remove any margins that could cause misalignment */
    padding: 0; /* Remove any padding that could cause misalignment */
}

/* Card Content Container */
.card-content-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    gap: 1rem; /* Add consistent gap between header and button */
}

/* Card Header - contains image and text description */
.card-header {
    flex-shrink: 0; /* Prevent header from shrinking */
    padding-bottom: 0;
    border-bottom: none;
}

/* Ensure ElevenLabs widget takes full container */
.elevenlabs-widget-container elevenlabs-convai {
    width: 100% !important;
    height: 100% !important;
    min-height: 600px;
    display: block;
}
/* Mobile responsive adjustments for widgets */
@media (max-width: 767px) {
    .elevenlabs-widget-container {
        min-height: 350px; /* Increased height for mobile */
    }
    
    .elevenlabs-widget-container elevenlabs-convai {
        min-height: 350px;
    }
    
    .card-content-container {
        gap: 0.75rem; /* Reduce gap on mobile */
    }
    
    .card-header {
        padding-bottom: 0;
    }
}

/* Tablet and larger screens - widget below header */
@media (min-width: 768px) {
    .elevenlabs-widget-container {
        min-height: 450px;
    }
    
    .elevenlabs-widget-container elevenlabs-convai {
        min-height: 450px;
    }
}

@media (min-width: 1024px) {
    .elevenlabs-widget-container {
        min-height: 550px;
    }
    
    .elevenlabs-widget-container elevenlabs-convai {
        min-height: 550px;
    }
}