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

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

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

.uk-promo-mosaic-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(12.5rem, auto); /* Allow rows to grow for content, min 200px (12.5rem) */
    gap: 1.25rem; /* 20px */
    width: 100%;
    max-width: 87.5rem; /* 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: 0.25rem; /* 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;
    /* Accessibility: Ensure minimum touch target size (WCAG 2.5.5) - 44x44px (2.75rem) */
    min-height: 2.75rem; /* 44px minimum */
    min-width: 2.75rem; /* 44px minimum */
}

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

/* 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;
    max-height: 60%; /* Limit overlay height to prevent overflow */
    overflow-y: auto; /* Allow scrolling if content is very long */
    overflow-x: hidden;
}

/* For items with images: Constrain text content to prevent overflow */
.uk-promo-item.has-image .uk-promo-item-content {
    display: flex;
    flex-direction: column;
}

.uk-promo-item.has-image .uk-promo-item-title {
    flex-shrink: 0; /* Don't shrink title */
    margin-bottom: 0.5rem;
}

.uk-promo-item.has-image .uk-promo-item-text {
    flex: 1;
    overflow: hidden; /* Hide overflow text */
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Limit to 4 lines */
    -webkit-box-orient: vertical;
    line-clamp: 4;
    text-overflow: ellipsis;
}

/* 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;
    max-height: none; /* No height limit for items without images */
    overflow: visible; /* Allow content to expand naturally */
}

/* ========================================
   QUOTE CONTENT TYPE STYLES
   ======================================== */

/* Quote item blockquote */
.uk-promo-item-blockquote {
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Quote text */
.uk-promo-quote-text {
    font-family: alternate-gothic-atf, sans-serif;
    font-size: 2.1875em;
    font-weight: 900;
    font-style: normal;
    line-height: 1.3;
    margin: 0 0 1rem 0;
    color: inherit;
    text-align: center;
}

/* Quote marks - inline */
.uk-promo-quote-text::before {
    content: "\201C"; /* Left double quotation mark " */
}

.uk-promo-quote-text::after {
    content: "\201D"; /* Right double quotation mark " */
}

/* Quote citation */
.uk-promo-quote-citation {
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
    font-style: normal;
    display: block;
    margin-top: 0;
    color: inherit;
    font-family: "usual", sans-serif;
    text-align: center;
}

/* Quote content wrapper */
.uk-promo-quote-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Larger quote text for featured items */
.uk-promo-item-large-featured .uk-promo-quote-text,
.uk-promo-item-tall .uk-promo-quote-text {
    font-size: 2.5em;
}

.uk-promo-item-tall-featured .uk-promo-quote-text {
    font-size: 2.25em;
}

/* Quote text colors based on background */
.uk-promo-item.uk-promo-bg-yellow .uk-promo-quote-text,
.uk-promo-item.uk-promo-bg-yellow .uk-promo-quote-citation {
    color: #1b365d;
}

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

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

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

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

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

/* Responsive quote text */
@media (max-width: 768px) {
    .uk-promo-quote-text {
        font-size: 1.5em;
    }
    
    .uk-promo-item-large-featured .uk-promo-quote-text,
    .uk-promo-item-tall .uk-promo-quote-text,
    .uk-promo-item-tall-featured .uk-promo-quote-text {
        font-size: 1.5em;
    }
    
    .uk-promo-quote-citation {
        font-size: 0.875rem;
    }
}

/* ========================================
   END QUOTE STYLES
   ======================================== */

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

/* 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;
}

/* Text colors for items with images - based on background overlay for WCAG 2.1 AA compliance */
/* Accessibility Note: Ensure sufficient contrast (WCAG 2.1 AA: 4.5:1 for normal text, 3:1 for large text) */

/* Default: white text for dark overlays (blue/black gradient) */
.uk-promo-item.has-image .uk-promo-item-title {
    font-size: 1.125em; /* 18px */
    color: #fff; /* Default for dark backgrounds */
}

/* Yellow overlay: use dark blue text for accessibility (WCAG 2.1 AA compliant) */
.uk-promo-item.has-image.uk-promo-bg-yellow .uk-promo-item-title,
.uk-promo-item.has-image.uk-promo-bg-yellow .uk-promo-item-text {
    color: #1b365d !important; /* Dark blue - ~8.2:1 contrast ratio */
}

/* Green overlay: use dark teal text for accessibility (WCAG 2.1 AA compliant) */
.uk-promo-item.has-image.uk-promo-bg-green .uk-promo-item-title,
.uk-promo-item.has-image.uk-promo-bg-green .uk-promo-item-text {
    color: #032b35 !important; /* Dark teal - ~4.8:1 contrast ratio */
}

/* Sunset overlay: use dark blue text for accessibility (WCAG 2.1 AA compliant) */
.uk-promo-item.has-image.uk-promo-bg-sunset .uk-promo-item-title,
.uk-promo-item.has-image.uk-promo-bg-sunset .uk-promo-item-text {
    color: #1b365d !important; /* Dark blue - ~5.1:1 contrast ratio */
}

/* Blue/Black overlay: keep white text (WCAG 2.1 AA compliant) */
.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; /* White - ~12.6:1 contrast ratio */
}

/* Light Blue overlay: use blue text for accessibility (WCAG 2.1 AA compliant) */
.uk-promo-item.has-image.uk-promo-bg-light-blue .uk-promo-item-title,
.uk-promo-item.has-image.uk-promo-bg-light-blue .uk-promo-item-text {
    color: #0033a0 !important; /* Blue - ~4.6:1 contrast ratio */
}

/* White overlay: use blue text for accessibility (WCAG 2.1 AA compliant) */
.uk-promo-item.has-image.uk-promo-bg-white .uk-promo-item-title,
.uk-promo-item.has-image.uk-promo-bg-white .uk-promo-item-text {
    color: #0033a0 !important; /* Blue - ~8.6:1 contrast ratio */
}

.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 */
/* Auto-formatting creates: large-featured (2×2), tall-featured (1×2), standard (1×1) */
/* Backward compatibility: old manual sizes (tall, small, medium, x-small) still work */

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

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

/* Tall featured items (1×2) - slightly larger than standard */
.uk-promo-item-tall-featured .uk-promo-item-title {
    font-size: 1.625rem;
}

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

/* Responsive Design */

/* Tablet: 2-column grid, all items single-cell (no 2×2 spans) */
@media (max-width: 1200px) and (min-width: 769px) {
    .uk-promo-mosaic-container {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(12.5rem, auto);
        gap: 0.9375rem; /* 15px */
    }
    .uk-promo-item {
        grid-row: span 1 !important;
        grid-column: span 1 !important;
    }
}

/* Small tablet / large phone: same 2-column grid */
@media (max-width: 768px) and (min-width: 481px) {
    .uk-promo-mosaic-container {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(12.5rem, auto);
        gap: 0.9375rem;
        padding: 0rem;
    }
    .uk-promo-item {
        grid-row: span 1 !important;
        grid-column: span 1 !important;
    }
}

/* Mobile: single column */
@media (max-width: 480px) {
    .uk-promo-mosaic-container {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(15.625rem, auto); /* Allow rows to grow on mobile, min 250px (15.625rem) */
        gap: 0.9375rem; /* 15px */
        padding: 0rem;
    }
    .uk-promo-item {
        grid-row: span 1 !important;
        grid-column: span 1 !important;
    }
    
}

/* Shared mobile/tablet: reduce line clamp and typography */
@media (max-width: 768px) {
    .uk-promo-item.has-image .uk-promo-item-text {
        -webkit-line-clamp: 3; /* 3 lines on mobile/tablet */
        line-clamp: 3;
    }
    .uk-promo-item-content {
        padding: 1rem;
    }
    .uk-promo-item-title {
        font-size: 1.25rem;
    }
    .uk-promo-item-tall .uk-promo-item-title,
    .uk-promo-item-large-featured .uk-promo-item-title {
        font-size: 1.5rem;
    }
    .uk-promo-item-tall-featured .uk-promo-item-title {
        font-size: 1.375rem;
    }
}

/* 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: 75rem; /* 1200px */
    margin-left: auto;
    margin-right: auto;
}

/* Editor Styles */
body.wp-admin .editor-styles-wrapper .uk-promo-block {
    margin: 1.25rem 0; /* 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 (WCAG 2.4.7) */
.uk-promo-item-link:focus-visible {
    outline: 0.1875rem solid #FFDC00; /* 3px - High contrast yellow */
    outline-offset: 0.125rem; /* 2px */
    box-shadow: 0 0 0 0.1875rem rgba(255, 220, 0, 0.5), 0 0 0 0.3125rem rgba(0, 51, 160, 0.3); /* 3px and 5px - Blue shadow for depth */
    /* Ensure focus indicator is visible against all backgrounds */
    z-index: 10;
}
.uk-promo-item-link:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Accessibility: Ensure focus is visible in high contrast mode */
@media (prefers-contrast: high) {
    .uk-promo-item-link:focus-visible {
        outline: 0.1875rem solid Highlight !important;
        outline-offset: 0.125rem;
        box-shadow: 0 0 0 0.25rem HighlightText !important;
    }
}

/* 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: 0.125rem solid CanvasText; /* 2px */
    }
    
    .uk-promo-item {
        border: 0.125rem solid CanvasText; /* 2px */
        margin-bottom: 0.5rem;
    }
    
    .uk-promo-item-title,
    .uk-promo-item-text {
        color: CanvasText !important;
    }
    
    .uk-promo-item-content {
        background: Canvas !important;
        border: 0.125rem solid CanvasText; /* 2px */
    }
    
    .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: 0.1875rem solid Highlight; /* 3px */
        box-shadow: none;
    }
    
    .uk-promo-item-image img {
        border: 0.125rem solid CanvasText; /* 2px */
    }
}