/**
 * UK Promo Block Styles
 * Mosaic layout for images and content
 */

.uk-promo-block {
    margin: 60px 0;
    width: 100%;
}

.uk-promo-block-placeholder {
    padding: 40px;
    text-align: center;
    background-color: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 4px;
    color: #666;
}

.uk-promo-mosaic-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    gap: 20px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Promo Item Base Styles */
.uk-promo-item {
    position: relative; /* Required for absolute positioning of .uk-promo-item-content */
    overflow: hidden;
    border-radius: 4px;
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%; /* Fill the grid cell */
}

.uk-promo-item-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.uk-promo-item-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Image Styles */
.uk-promo-item-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    flex: 1;
    margin: 0; /* Remove default figure margins */
}

/* Remove margins from all figure elements in promo block */
.uk-promo-block figure {
    margin: 0;
}

.uk-promo-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.uk-promo-item-link:hover .uk-promo-item-image img {
    transform: scale(1.05);
}

/* Content Overlay */
.uk-promo-item-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
    color: #ffffff;
    z-index: 2;
}

/* Remove gradient when background color is set for items with images */
.uk-promo-item.has-image[class*="uk-promo-bg-"] .uk-promo-item-content {
    background: transparent;
}

/* Items without images - content takes full space */
.uk-promo-item.no-image .uk-promo-item-content {
    position: relative;
    background: #0033a0;
    color: #ffffff;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* H3 color for default blue background (#0033a0) only */
.uk-promo-item.no-image .uk-promo-item-content h3 {
    color: #ffffff !important;
    font-size: 35px !important;
}

/* Override H3 color for other background colors */
.uk-promo-item.no-image.uk-promo-bg-yellow .uk-promo-item-content h3 {
    color: #1b365d !important;
}

.uk-promo-item.no-image.uk-promo-bg-green .uk-promo-item-content h3 {
    color: #032b35 !important;
}

.uk-promo-item.no-image.uk-promo-bg-sunset .uk-promo-item-content h3 {
    color: #1b365d !important;
}

.uk-promo-item.no-image.uk-promo-bg-light-blue .uk-promo-item-content h3 {
    color: #0033a0 !important;
}

.uk-promo-item.no-image.uk-promo-bg-white .uk-promo-item-content h3 {
    color: #0033a0 !important;
}

/* Background Color Options */
.uk-promo-item.uk-promo-bg-yellow .uk-promo-item-content {
    background: #ffdc00;
    color: #1b365d;
}

.uk-promo-item.uk-promo-bg-green .uk-promo-item-content {
    background: #4cbcc0;
    color: #032b35;
}

.uk-promo-item.uk-promo-bg-sunset .uk-promo-item-content {
    background: #ffa360;
    color: #1b365d;
}

.uk-promo-item.uk-promo-bg-blue .uk-promo-item-content {
    background: #0033a0;
    color: #ffffff;
}

.uk-promo-item.uk-promo-bg-light-blue .uk-promo-item-content {
    background: #c7e2ff;
    color: #0033a0;
}

.uk-promo-item.uk-promo-bg-white .uk-promo-item-content {
    background: #ffffff;
    color: #0033a0;
}

/* Update text colors for light backgrounds */
.uk-promo-item.uk-promo-bg-yellow .uk-promo-item-title,
.uk-promo-item.uk-promo-bg-yellow .uk-promo-item-text {
    color: #1b365d;
}

.uk-promo-item.uk-promo-bg-green .uk-promo-item-title,
.uk-promo-item.uk-promo-bg-green .uk-promo-item-text {
    color: #032b35;
}

.uk-promo-item.uk-promo-bg-sunset .uk-promo-item-title,
.uk-promo-item.uk-promo-bg-sunset .uk-promo-item-text {
    color: #1b365d;
}

.uk-promo-item.uk-promo-bg-blue .uk-promo-item-title,
.uk-promo-item.uk-promo-bg-blue .uk-promo-item-text {
    color: #ffffff;
}

.uk-promo-item.uk-promo-bg-light-blue .uk-promo-item-title,
.uk-promo-item.uk-promo-bg-light-blue .uk-promo-item-text {
    color: #0033a0;
}

.uk-promo-item.uk-promo-bg-white .uk-promo-item-title,
.uk-promo-item.uk-promo-bg-white .uk-promo-item-text {
    color: #0033a0;
}

/* Background colors for items with images (semi-transparent overlay) */
.uk-promo-item.has-image.uk-promo-bg-yellow .uk-promo-item-content {
    background: rgba(255, 220, 0, 0.9);
}

.uk-promo-item.has-image.uk-promo-bg-green .uk-promo-item-content {
    background: rgba(76, 188, 192, 0.9);
}

.uk-promo-item.has-image.uk-promo-bg-sunset .uk-promo-item-content {
    background: rgba(255, 163, 96, 0.9);
}

.uk-promo-item.has-image.uk-promo-bg-blue .uk-promo-item-content {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 9%, transparent 100%);
    color: #fff;
}

/* Ensure text is white for blue background items with images */
/* Use !important to override conflicting styles from columns-enhancements.css */
.uk-promo-item.has-image.uk-promo-bg-blue .uk-promo-item-title,
.uk-promo-item.has-image.uk-promo-bg-blue .uk-promo-item-text {
    color: #fff !important;
}

/* Also ensure title is white for any item with image (not just blue bg) */
.uk-promo-item.has-image .uk-promo-item-title {
    color: #fff !important;
    font-size: 18px;
}

.uk-promo-item.has-image.uk-promo-bg-light-blue .uk-promo-item-content {
    background: rgba(199, 226, 255, 0.9);
}

.uk-promo-item.has-image.uk-promo-bg-white .uk-promo-item-content {
    background: rgba(255, 255, 255, 0.9);
}

.uk-promo-item-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    color: #ffffff;
    font-family: "usual", sans-serif;
    line-height: 1.3;
}

.uk-promo-item-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #ffffff;
    font-family: "usual", sans-serif;
}

.uk-promo-item-text h3 {
    color: #fff !important;
}

.uk-promo-item-text p {
    margin: 0 0 0.5rem 0;
}

.uk-promo-item-text p:last-child {
    margin-bottom: 0;
}

/* Item Size Variations */
/* Grid spans are set via inline styles from PHP */
/* These classes are for additional styling if needed */

/* Typography adjustments for larger items */
.uk-promo-item-tall .uk-promo-item-title {
    font-size: 1.75rem;
}

.uk-promo-item-tall .uk-promo-item-text {
    font-size: 1.125rem;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .uk-promo-mosaic-container {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .uk-promo-mosaic-container {
        grid-template-columns: 1fr;
        grid-auto-rows: 250px;
        gap: 15px;
        padding: 0 1rem;
    }
    
    /* Reset grid spans for mobile - let them stack naturally */
    .uk-promo-item {
        grid-row: span 1 !important;
        grid-column: span 1 !important;
    }
    
    .uk-promo-item-content {
        padding: 1rem;
    }
    
    .uk-promo-item-title {
        font-size: 1.25rem;
    }
    
    .uk-promo-item-tall .uk-promo-item-title {
        font-size: 1.5rem;
    }
}

/* Full Width Support */
.uk-promo-block.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: clamp(1.5rem, 5vw, 4rem);
    padding-right: clamp(1.5rem, 5vw, 4rem);
    box-sizing: border-box;
}

.uk-promo-block.alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Editor Styles */
body.wp-admin .editor-styles-wrapper .uk-promo-block {
    margin: 20px 0;
}

/* ========================================
       ACCESSIBILITY ENHANCEMENTS
       ======================================== */

/* Accessibility: Screen reader only class */
.uk-promo-block .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    clip-path: inset(50%);
}

/* Accessibility: Focus states for interactive elements */
.uk-promo-item-link:focus-visible {
    outline: 3px solid #FFDC00; /* High contrast yellow */
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(255, 220, 0, 0.5), 0 0 0 5px rgba(0, 51, 160, 0.3); /* Blue shadow for depth */
}
.uk-promo-item-link:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Accessibility: Reduced motion support (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    .uk-promo-item-link,
    .uk-promo-item-image img {
        transition: none !important;
        animation: none !important;
    }
    
    .uk-promo-item-link:hover {
        transform: none !important;
    }
    
    .uk-promo-item-link:hover .uk-promo-item-image img {
        transform: none !important;
    }
}

/* Accessibility: High contrast mode support (WCAG 1.4.11) */
@media (prefers-contrast: high) {
    .uk-promo-block {
        border: 2px solid CanvasText;
    }
    
    .uk-promo-item {
        border: 2px solid CanvasText;
        margin-bottom: 0.5rem;
    }
    
    .uk-promo-item-title,
    .uk-promo-item-text {
        color: CanvasText !important;
    }
    
    .uk-promo-item-content {
        background: Canvas !important;
        border: 2px solid CanvasText;
    }
    
    .uk-promo-item.has-image .uk-promo-item-content {
        background: rgba(0, 0, 0, 0.9) !important;
        color: Canvas !important;
    }
    
    .uk-promo-item.no-image .uk-promo-item-content {
        background: Canvas !important;
        color: CanvasText !important;
    }
    
    .uk-promo-item-link:focus-visible {
        outline: 3px solid Highlight;
        box-shadow: none;
    }
    
    .uk-promo-item-image img {
        border: 2px solid CanvasText;
    }
}