/* Actions Page - Banner Tile Layout */
.actions-page {
    padding: 0;
}

.actions-grid {
    margin: 0 auto;
    padding: 0;
}

.actions-page .container-fluid {
    padding: 0;
    margin: 0;
    background: transparent;
}

/* Actions Row - Base Container */
.actions-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    min-height: 20rem; /* Desktop base height in rem */
}

/* Row Type Layouts - Desktop (992px+) */
@media (min-width: 992px) {
    /* Odd rows: 1 large / 2 small (1 / 0.5+0.5) */
    .actions-row.row-odd {
        flex-direction: row;
    }
    
    .actions-row.row-odd .banner-large {
        flex: 2;
        max-width: 66.666%;
    }
    
    .actions-row.row-odd .action-small-group {
        flex: 1;
        max-width: 33.333%;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .actions-row.row-odd .banner-small {
        flex: 1;
        min-height: calc((20rem - 1.5rem) / 2);
    }
    
    /* Even rows: 2 small / 1 large (0.5+0.5 / 1) */
    .actions-row.row-even {
        flex-direction: row;
    }
    
    .actions-row.row-even .action-small-group {
        flex: 1;
        max-width: 33.333%;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        order: 1;
    }
    
    .actions-row.row-even .banner-large {
        flex: 2;
        max-width: 66.666%;
        order: 2;
    }
    
    .actions-row.row-even .banner-small {
        flex: 1;
        min-height: calc((20rem - 1.5rem) / 2);
    }
}

/* Banner Base Styles */
.action-banner {
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.action-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 207, 157, 0.4);
}

.banner-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.banner-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    min-height: inherit;
    flex: 1;
    display: flex;
    align-items: flex-end;
}

.banner-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
    z-index: 1;
}

/* Beautiful gradient backgrounds for banners without images */
.banner-gradient-1 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.banner-gradient-2 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.banner-gradient-3 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.banner-gradient-4 {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.banner-gradient-5 {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.banner-gradient-6 {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

/* Banner Content */
.banner-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    z-index: 2;
    color: white;
}

.banner-title {
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    color: var(--primary-peach);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.banner-text {
    font-size: 1rem;
    line-height: 1.4;
    opacity: 0.95;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Desktop Large Banner Content */
@media (min-width: 992px) {
    .banner-large .banner-title {
        font-size: 2rem;
    }
    
    .banner-large .banner-text {
        font-size: 1.125rem;
    }
    
    .banner-large .banner-content {
        padding: 2.5rem;
    }
    
    /* Hide text in small banners on desktop - only show title */
    .banner-small .banner-text {
        display: none;
    }
}

/* Mobile Layout - Stack Vertically (up to 991px) */
@media (max-width: 991px) {
    .actions-page {
        padding: 16px 0; /* px units for mobile */
    }
    
    .actions-page .container-fluid {
        padding: 0;
        margin: 0;
    }
    
    .actions-grid {
        padding: 0 16px;
        background: transparent;
    }
    
    .actions-row {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 24px;
        min-height: auto;
    }
    
    /* Reset desktop-specific styles */
    .actions-row.row-odd,
    .actions-row.row-even {
        flex-direction: column;
    }
    
    .actions-row.row-odd .banner-large,
    .actions-row.row-even .banner-large,
    .actions-row.row-odd .action-small-group,
    .actions-row.row-even .action-small-group {
        flex: none;
        max-width: 100%;
        order: unset;
    }
    
    /* Mobile banner heights - fixed px values */
    .action-banner {
        min-height: 200px;
        position: relative;
        overflow: hidden;
    }
    
    .banner-large {
        min-height: 240px;
    }
    
    .banner-small {
        min-height: 180px;
    }
    
    .banner-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .action-small-group {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    
    /* Mobile banner content spacing */
    .banner-content {
        padding: 24px;
    }
    
    .banner-title {
        font-size: 18px;
    }
    
    .banner-text {
        font-size: 14px;
    }
}

/* Extra small mobile screens */
@media (max-width: 480px) {
    .actions-grid {
        padding: 0 12px;
    }
    
    .actions-row {
        gap: 12px;
        margin-bottom: 20px;
    }
    
    .action-small-group {
        gap: 12px;
    }
    
    .action-banner {
        min-height: 160px;
    }
    
    .banner-large {
        min-height: 200px;
    }
    
    .banner-small {
        min-height: 140px;
    }
    
    .banner-content {
        padding: 20px;
    }
    
    .banner-title {
        font-size: 16px;
    }
    
    .banner-text {
        font-size: 13px;
    }
}

/* Animation Effects */
@keyframes bannerSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.action-banner {
    animation: bannerSlideIn 0.6s ease-out;
}

.actions-row:nth-child(1) .action-banner { animation-delay: 0.1s; }
.actions-row:nth-child(2) .action-banner { animation-delay: 0.2s; }
.actions-row:nth-child(3) .action-banner { animation-delay: 0.3s; }
.actions-row:nth-child(4) .action-banner { animation-delay: 0.4s; }