/**
 * Canva Enhanced Content - Module-Specific Styles
 * Sparkles Design Library Component
 *
 * This file contains layout patterns and styles specific to Canva Enhanced Content
 * that don't fit into generic card, button, or gallery components.
 *
 * Dependencies:
 * - sparkles-tokens.css (CSS variables)
 * - sparkles-utilities.css (base utilities)
 *
 * Used by: CustomHyva_HyvaCanvaContent module
 */

/* ========== CANVA ENHANCED CONTENT - CORE LAYOUT ========== */

/**
 * Primary container for all Canva enhanced content sections
 * Provides consistent spacing and positioning context
 */
.canva-enhanced-content {
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
    container-type: inline-size;
}

/* ========== CANVA HERO SECTION LAYOUTS ========== */

/**
 * Hero section with enhanced visual hierarchy
 * Designed for product introduction and key messaging
 */
.canva-hero-section {
    position: relative;
    margin-bottom: 3rem;
}

.canva-hero-section .sparkles-card {
    background: linear-gradient(135deg, var(--color-accent) 0%, rgba(255, 255, 255, 0.95) 100%);
    border: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/**
 * Premium badge styling for Canva content
 * Used to highlight premium or featured content
 */
.canva-hero-section .sparkles-badge-premium {
    background: var(--color-primary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.canva-hero-section .sparkles-badge-premium::before {
    content: '✨';
    font-size: 1rem;
}

/* ========== CANVA BENEFITS GRID LAYOUT ========== */

/**
 * Grid layout for benefit features
 * Supports responsive behavior and hover interactions
 */
.canva-benefits-grid {
    margin-bottom: 3rem;
}

.canva-benefits-grid h3,
.canva-gallery h3,
.canva-specifications h3,
.canva-cta-section h3 {
    color: var(--color-secondary);
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    text-align: center;
    font-family: var(--font-heading, inherit);
}

.canva-benefits-grid h3,
.canva-gallery h3 {
    margin-bottom: 2rem;
}

/**
 * Individual benefit cards with enhanced hover states
 * Features animated border reveal and transform effects
 */
.canva-benefits-grid .sparkles-card {
    position: relative;
    border-top: 3px solid var(--color-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

.canva-benefits-grid .sparkles-card:hover {
    transform: translateY(-0.5rem) scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/**
 * Animated border reveal effect on hover
 * Creates a visual "fill" animation on the top border
 */
.canva-benefits-grid .sparkles-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.canva-benefits-grid .sparkles-card:hover::after {
    transform: scaleX(1);
}

/* ========== CANVA SPECIFICATIONS SECTION ========== */

/**
 * Product specifications and detailed information layout
 * Uses subtle background gradients for visual hierarchy
 */
.canva-specifications {
    margin-bottom: 3rem;
}

.canva-specifications .sparkles-card {
    background: linear-gradient(135deg, var(--color-accent) 0%, rgba(255, 255, 255, 0.8) 100%);
    border: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent);
}

.canva-specifications h3 {
    margin-bottom: 1.5rem;
}

/* ========== CANVA GALLERY LAYOUTS ========== */

/**
 * Image gallery section with thumbnail navigation
 * Supports both grid and carousel layouts
 */
.canva-gallery {
    margin-bottom: 3rem;
}

/**
 * Gallery thumbnail with advanced hover interactions
 * Features scale effects, overlay reveals, and selection states
 */
.canva-gallery-thumbnail {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.canva-gallery-thumbnail:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.canva-gallery-thumbnail.thumbnail-selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.canva-gallery-thumbnail img {
    --sparkles-img-hover-duration: 0.3s;
}

.canva-gallery-thumbnail:hover img {
    transform: scale(1.1);
}

/**
 * Overlay for thumbnail titles and interactions
 * Reveals on hover with gradient background
 */
.canva-gallery-thumbnail .thumbnail-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
    display: flex;
    align-items: end;
    padding: 0.75rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.canva-gallery-thumbnail:hover .thumbnail-overlay {
    opacity: 1;
}

.canva-gallery-thumbnail .thumbnail-title {
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/**
 * Selected content display area
 * Shows detailed view of selected gallery item
 */
.selected-content {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    padding: 1.5rem;
    border: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.selected-content h4 {
    color: var(--color-secondary);
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    font-family: var(--font-heading, inherit);
}

/* ========== CALL TO ACTION SECTIONS ========== */

/**
 * Enhanced CTA section with gradient backgrounds
 * Designed for conversion-focused content areas
 */
.canva-cta-section {
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent) 0%, color-mix(in srgb, var(--color-primary-light) 5%, transparent) 100%);
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    margin-top: 3rem;
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.canva-cta-section h3 {
    margin-bottom: 1rem;
}

.canva-cta-section p {
    color: var(--color-secondary);
    opacity: 0.8;
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
}

/* ========== RESPONSIVE PICTURE ELEMENTS ========== */

/**
 * Responsive image containers for Canva content
 * Supports multiple breakpoint optimizations
 */
.canva-picture {
    display: block;
    width: 100%;
}

.canva-picture img {
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== MODULE-SPECIFIC ANIMATIONS ========== */

/**
 * Fade-in animation for content reveals
 * Used in conjunction with intersection observers
 */
.canva-fade-in {
    animation: canvaFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.canva-scale-hover:hover {
    transform: scale(1.02);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.canva-slide-up {
    animation: canvaSlideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes canvaFadeIn {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes canvaSlideUp {
    from {
        opacity: 0;
        transform: translateY(2rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== SPARKLES INTEGRATION OVERRIDES ========== */

/**
 * Button styling overrides for Canva contexts
 * Enhances standard Sparkles buttons with gradients and shadows
 */
.canva-enhanced-content .sparkles-btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border: none;
    box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.canva-enhanced-content .sparkles-btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.canva-enhanced-content .sparkles-btn-secondary {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.canva-enhanced-content .sparkles-btn-secondary:hover {
    background: var(--color-primary);
    color: white;
    transform: translateY(-1px);
}

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

/**
 * Mobile-first responsive design
 * Optimizes layouts for different screen sizes
 */
@container (max-width: 480px) {
    .canva-enhanced-content {
        margin-top: 0;
        margin-bottom: 0;
    }

    .canva-hero-section,
    .canva-benefits-grid,
    .canva-specifications,
    .canva-gallery {
        margin-bottom: 2rem;
    }

    .canva-benefits-grid h3,
    .canva-specifications h3,
    .canva-gallery h3 {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .canva-cta-section {
        padding: 1.5rem;
    }

    .canva-cta-section h3 {
        font-size: 1.5rem;
        line-height: 2rem;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .canva-benefits-grid .sparkles-card:hover {
        transform: translateY(-0.25rem) scale(1.01);
    }
}

@media (min-width: 1200px) {
    .canva-enhanced-content {
        margin-top: 0;
    }

    .canva-hero-section,
    .canva-benefits-grid,
    .canva-specifications,
    .canva-gallery {
        margin-bottom: 4rem;
    }
}

/* ========== ACCESSIBILITY FEATURES ========== */

/**
 * Focus styles for keyboard navigation
 * Ensures accessibility compliance
 */
.canva-gallery-thumbnail:focus,
.sparkles-btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.canva-gallery-thumbnail:focus-visible {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/**
 * Reduced motion support
 * Respects user preferences for motion
 */
@media (prefers-reduced-motion: reduce) {
    .canva-gallery-thumbnail,
    .canva-benefits-grid .sparkles-card,
    .canva-picture img,
    .canva-scale-hover:hover {
        transform: none;
        transition: none;
    }

    .canva-fade-in,
    .canva-slide-up {
        animation: none;
    }

    .canva-gallery-thumbnail:hover img {
        transform: none;
    }
}

/**
 * High contrast mode support
 * Enhances visibility in high contrast settings
 */
@media (prefers-contrast: high) {
    .canva-hero-section .sparkles-card,
    .canva-specifications .sparkles-card,
    .selected-content {
        border-width: 2px;
        border-color: var(--color-primary);
    }

    .canva-gallery-thumbnail.thumbnail-selected {
        border-width: 3px;
    }

    .canva-cta-section {
        border-width: 2px;
    }
}