/*
 * Elementor Stacked Cards CSS
 * Main stylesheet for the stacked cards widget
 */

/* Container Styles */
.stacked-cards-wrapper {
    width: 100%;
    position: relative;
}

.stacked-cards-container {
    display: flex;
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);*/
}

/* Card Styles */
.stacked-card {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    transition: flex var(--transition-duration, 0.3s) var(--transition-easing, cubic-bezier(0.25, 0.8, 0.25, 1));
    cursor: pointer;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: flex-end;
}

/* Remove gradient background for Template with Image cards */
.stacked-card.has-overlay-image {
    background: transparent;
}

/* Additional class for cards with overlay text */
.stacked-card.has-overlay-text {
    background: transparent;
}


/* Card Background Image */
.stacked-card-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Card Content - Now supports Elementor containers */
.stacked-card-content {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Default card content styling */
.stacked-card-content.elementor-container {
    padding: 0;
    margin: 0;
}

/* For cards with custom content - styling now controlled by Elementor Content Overlay controls */
.stacked-card-content:not(.has-custom-content) {
    padding: 30px;
    color: white;
    transform: translateY(20px);
    transition: all var(--transition-duration, 0.3s) var(--transition-easing, cubic-bezier(0.25, 0.8, 0.25, 1));
    justify-content: flex-end;
    /* Background and opacity now controlled by Elementor controls */
}

/* Ensure Elementor widgets inside cards are properly displayed */
.stacked-card-content .elementor-widget-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.stacked-card-content .elementor-element {
    position: relative;
    z-index: 1;
}

.stacked-card-title {
    margin: 0 0 15px 0;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.stacked-card-description {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.5;
    color: inherit;
    opacity: 0.7;
    max-height: 0;
    overflow: hidden;
    transition: all var(--transition-duration, 0.3s) var(--transition-easing, cubic-bezier(0.25, 0.8, 0.25, 1));
}

/* Card Link */
.stacked-card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.stacked-card-link:hover {
    text-decoration: none;
    color: inherit;
}

/* Hover Effects */
.stacked-card:hover {
    flex: 9;
}

.stacked-card:hover .stacked-card-content:not(.has-custom-content) {
    transform: translateY(0);
    opacity: 1;
}

.stacked-card:hover .stacked-card-content.elementor-container {
    opacity: 1;
    transform: scale(1);
}

.stacked-card:hover .stacked-card-title {
    opacity: 1;
}

.stacked-card:hover .stacked-card-description {
    opacity: 0.9;
    max-height: 200px;
    /*margin-top: 10px;*/
}

/* When one card is hovered, minimize others - values automatically calculated */
.stacked-cards-container:hover .stacked-card:not(:hover) {
    /* flex value will be set by JavaScript based on expanded width */
}

.stacked-cards-container:hover .stacked-card:not(:hover) .stacked-card-content:not(.has-custom-content) {
    /* opacity and transform controlled by inactive_content_opacity and inactive_content_translatey controls */
}

.stacked-cards-container:hover .stacked-card:not(:hover) .stacked-card-title {
    /* opacity controlled by inactive_title_opacity control */
}

.stacked-cards-container:hover .stacked-card:not(:hover) .stacked-card-description {
    /* max-height and opacity controlled by inactive_description_opacity and inactive_description_height controls */
    max-height: 0; /* Default fallback - can be overridden by controls */
}

/* For container-based cards, apply minimal transform */
.stacked-cards-container:hover .stacked-card:not(:hover) .stacked-card-content.elementor-container {
    /* opacity and transform controlled by inactive_content_opacity and inactive_content_scale controls */
}

/* Responsive Design */
@media (max-width: 768px) {
    .stacked-cards-container {
        flex-direction: column;
        height: auto;
        min-height: 400px;
    }
    
    .stacked-card {
        min-height: 120px;
        align-items: center;
    }
    
    
    .stacked-card-content {
        padding: 20px;
        transform: translateY(0);
        opacity: 1;
        /* Background now controlled by Elementor Content Overlay controls */
    }
    
    .stacked-card-description {
        max-height: none;
        opacity: 0.8;
    }
    
    .stacked-card:hover {
        flex: 3;
    }
    
    .stacked-cards-container:hover .stacked-card:not(:hover) {
        /* flex value will be set by JavaScript based on expanded width */
    }
    
    .stacked-cards-container:hover .stacked-card:not(:hover) .stacked-card-content {
        /* opacity controlled by mobile_inactive_opacity responsive control */
        /* transform: translateY(0) - can be overridden by desktop controls */
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .stacked-card-content {
        padding: 15px;
    }
    
    .stacked-card-title {
        font-size: 1.2em;
        margin-bottom: 10px;
    }
    
    .stacked-card-description {
        font-size: 0.9em;
    }
}

/* Custom Transition Duration and Easing Support */
.stacked-cards-container[data-transition-duration] .stacked-card {
    transition-duration: var(--transition-duration, 300ms);
    transition-timing-function: var(--transition-easing, cubic-bezier(0.25, 0.8, 0.25, 1));
}

.stacked-cards-container[data-transition-duration] .stacked-card-content {
    transition-duration: var(--transition-duration, 300ms);
    transition-timing-function: var(--transition-easing, cubic-bezier(0.25, 0.8, 0.25, 1));
}

.stacked-cards-container[data-transition-duration] .stacked-card-description {
    transition-duration: var(--transition-duration, 300ms);
    transition-timing-function: var(--transition-easing, cubic-bezier(0.25, 0.8, 0.25, 1));
}

/* Accessibility */
.stacked-card:focus-visible {
    outline: 3px solid #4A90E2;
    outline-offset: 2px;
}

/* RTL Support */

/* Elementor Editor Specific Styles */
.elementor-editor-active .stacked-card {
    pointer-events: auto;
    cursor: pointer;
}

.elementor-editor-active .stacked-card-link {
    pointer-events: none;
}

/* Enable editing within cards in the editor */
.elementor-editor-active .stacked-card-content {
    pointer-events: auto;
}

/* Placeholder Styles for Editor */
.stacked-card-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    padding: 30px;
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.stacked-card-placeholder:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 1);
}

.stacked-card-placeholder-icon {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.6;
}

.stacked-card-placeholder-text {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.stacked-card-placeholder-help {
    font-size: 14px;
    opacity: 0.7;
    font-style: italic;
}

/* Hide placeholder when card has content */
.stacked-card.has-content .stacked-card-placeholder {
    display: none;
}

/* Custom content styling */
.stacked-card-custom-content {
    color: inherit;
}

.stacked-card-custom-content h1,
.stacked-card-custom-content h2,
.stacked-card-custom-content h3,
.stacked-card-custom-content h4,
.stacked-card-custom-content h5,
.stacked-card-custom-content h6 {
    color: inherit;
    margin-top: 0;
    margin-bottom: 15px;
}

.stacked-card-custom-content p {
    color: inherit;
    margin-bottom: 15px;
    line-height: 1.6;
}

.stacked-card-custom-content p:last-child {
    margin-bottom: 0;
}

.stacked-card-custom-content ul,
.stacked-card-custom-content ol {
    margin-bottom: 15px;
    padding-left: 20px;
}

.stacked-card-custom-content li {
    margin-bottom: 5px;
    color: inherit;
}

.stacked-card-custom-content a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}

.stacked-card-custom-content a:hover {
    color: white;
    text-decoration: none;
}

/* Elementor template content */
.stacked-card-content .elementor {
    color: inherit;
}

.stacked-card-content .elementor-widget-wrap {
    min-height: auto;
}

/* Ensure proper spacing for template content */
.stacked-card-content .elementor-element {
    margin-bottom: 0;
}

.stacked-card-content .elementor-widget {
    margin-bottom: 10px;
}

.stacked-card-content .elementor-widget:last-child {
    margin-bottom: 0;
}

/* Template error and placeholder states */
.stacked-card-template-error,
.stacked-card-placeholder-content {
    padding: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
}

.stacked-card-template-error {
    background: rgba(255, 0, 0, 0.1);
    border: 1px dashed rgba(255, 0, 0, 0.3);
    border-radius: 4px;
}

.stacked-card-placeholder-content {
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* No content state */
.stacked-cards-no-content {
    padding: 40px;
    text-align: center;
    background: #f8f9fa;
    border: 2px dashed #ddd;
    border-radius: 8px;
    color: #666;
}

.stacked-cards-no-content p {
    margin: 0;
    font-size: 16px;
}

/* Template with Image Card Styles - Side by Side Layout */
.stacked-card.has-overlay-image {
    position: relative;
    overflow: hidden;
}

/* Split layout container */
.stacked-card-split-layout {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    transition: all var(--transition-duration, 0.3s) var(--transition-easing, cubic-bezier(0.25, 0.8, 0.25, 1));
}

/* Image section - Full width by default, splits on hover */
.stacked-card-image-section {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-duration, 0.3s) var(--transition-easing, cubic-bezier(0.25, 0.8, 0.25, 1));
    z-index: 1;
}

/* When expanded, image takes specified width */
.stacked-card.has-overlay-image:hover .stacked-card-image-section,
.stacked-card.has-overlay-image.is-expanded .stacked-card-image-section {
    flex: none;
}

/* Dynamic width for images when expanded - use flex-basis for better control */
.has-overlay-image:hover .stacked-card-image-section,
.has-overlay-image.is-expanded .stacked-card-image-section {
    flex: 0 0 var(--image-width, 50%);
    width: var(--image-width, 50%);
    max-width: var(--image-width, 50%);
}

.stacked-card-side-image {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.stacked-card-side-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-duration, 0.3s) var(--transition-easing, cubic-bezier(0.25, 0.8, 0.25, 1));
}

.stacked-card-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.1);
    border: 2px dashed rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.5);
}

.stacked-card-image-placeholder p {
    margin: 0;
    font-style: italic;
}

/* Content section - Hidden by default, appears beside image on hover */
.stacked-card-content-section {
    position: relative;
    display: flex;
    align-items: center;
    color: white;
    overflow: hidden;
    width: 0;
    opacity: 0;
    transition: all var(--transition-duration, 0.3s) var(--transition-easing, cubic-bezier(0.25, 0.8, 0.25, 1));
    z-index: 2;
    /* Background now controlled by Elementor Content Overlay controls */
}

.stacked-card-content-section .stacked-card-template-content {
    width: 100%;
    transform: translateY(20px);
    opacity: 0;
    /* Duration, easing, and delay now controlled by Elementor Template Content Animation controls */
    transition: all var(--transition-duration, 0.3s) var(--transition-easing, cubic-bezier(0.25, 0.8, 0.25, 1));
    transition-delay: 0s; /* No delay when hiding */
}

/* When card is expanded, show template content beside the image */
.stacked-card.has-overlay-image:hover .stacked-card-content-section,
.stacked-card.has-overlay-image.is-expanded .stacked-card-content-section {
    opacity: 1;
    flex: 1;
    /* Background already set by previous rule */
}

.stacked-card.has-overlay-image:hover .stacked-card-content-section .stacked-card-template-content,
.stacked-card.has-overlay-image.is-expanded .stacked-card-content-section .stacked-card-template-content {
    transform: translateY(0);
    opacity: 1;
    /* Transition delay now controlled by Elementor Template Fade Delay control */
}

/* Image effects on hover */
.stacked-card.has-overlay-image:hover .stacked-card-side-image img,
.stacked-card.has-overlay-image.is-expanded .stacked-card-side-image img {
    transform: scale(1.05);
}

/* When other cards are hovered, dim this card's image - controlled by Elementor */
.stacked-cards-container:hover .stacked-card.has-overlay-image:not(:hover) .stacked-card-side-image img {
    /* opacity controlled by inactive_image_opacity control */
}

/* Template content styling */
.stacked-card-template-content .elementor-widget {
    color: inherit;
    margin-bottom: 15px;
}

.stacked-card-template-content .elementor-widget:last-child {
    margin-bottom: 0;
}

.stacked-card-template-content .elementor-widget-wrap {
    min-height: auto;
}

.stacked-card-template-content h1,
.stacked-card-template-content h2,
.stacked-card-template-content h3,
.stacked-card-template-content h4,
.stacked-card-template-content h5,
.stacked-card-template-content h6 {
    color: inherit;
    margin-top: 0;
}

.stacked-card-template-content p {
    color: inherit;
    line-height: 1.6;
}

/* Image positioning affects content overlay positioning */
.stacked-card-image-left .stacked-card-content-section {
    text-align: left;
    justify-content: flex-start;
}

.stacked-card-image-right .stacked-card-content-section {
    text-align: right;
    justify-content: flex-end;
}


/* Mobile adjustments for template with image */
@media (max-width: 768px) {
    .stacked-card-content-section {
        padding: 15px;
    }
    
    /* On mobile, make content slightly more visible by default */
    .stacked-card-content-section {
        opacity: 0.3;
        visibility: visible;
        /* Background now controlled by Elementor Content Overlay controls */
    }
    
    .stacked-card.has-overlay-image:hover .stacked-card-content-section {
        opacity: 1;
    }
    
    .stacked-card-content-section .stacked-card-template-content {
        transform: translateY(30px);
        opacity: 0;
        transition-delay: 0s; /* No delay when hiding on mobile */
    }
    
    .stacked-card.has-overlay-image:hover .stacked-card-content-section .stacked-card-template-content {
        transform: translateY(0);
        opacity: 1;
        /* Mobile uses same Elementor Template Content Animation controls */
    }
}

/* Loading State */
.stacked-cards-container.loading {
    opacity: 0.7;
}

.stacked-cards-container.loading .stacked-card {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* Text Overlay Styles for Template with Image with Text */
.stacked-card-text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Default fallback background - will be overridden by Elementor controls */
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.7) 100%
    );
    opacity: 1;
    transition: all var(--transition-duration, 0.3s) var(--transition-easing, cubic-bezier(0.25, 0.8, 0.25, 1));
    z-index: 2;
}

/* Hide text overlay when card is expanded */
.stacked-card.has-overlay-text:hover .stacked-card-text-overlay,
.stacked-card.has-overlay-text.is-expanded .stacked-card-text-overlay {
    opacity: 0;
    visibility: hidden;
}

/* Overlay behavior on inactive cards - controlled by user setting */

/* Dim behavior: Reduce opacity on inactive cards */
.stacked-cards-container.overlay-behavior-dim:hover .stacked-card.has-overlay-text:not(:hover) .stacked-card-text-overlay {
    opacity: 0.3;
}

/* Hide behavior: Completely hide overlay on inactive cards */
.stacked-cards-container.overlay-behavior-hide:hover .stacked-card.has-overlay-text:not(:hover) .stacked-card-text-overlay {
    opacity: 0;
    visibility: hidden;
}

/* Normal behavior: Keep overlay normal on inactive cards - no additional styles needed */
/* .overlay-behavior-normal doesn't need specific rules as it's the default behavior */

/* Default Card States */

/* Default All Inactive State - all cards appear dimmed by default */
.stacked-cards-container.default-all-inactive .stacked-card {
    /* Default inactive styling controlled by Elementor controls */
    transition: all var(--transition-duration, 0.3s) var(--transition-easing, cubic-bezier(0.25, 0.8, 0.25, 1));
}

/* When cards are activated (hovered/clicked), they return to normal */
.stacked-cards-container.default-all-inactive .stacked-card:hover,
.stacked-cards-container.default-all-inactive .stacked-card.is-active {
    flex: 9;
}

.stacked-cards-container.default-all-inactive .stacked-card:hover .stacked-card-content:not(.has-custom-content),
.stacked-cards-container.default-all-inactive .stacked-card.is-active .stacked-card-content:not(.has-custom-content) {
    opacity: 1;
    transform: translateY(0);
}

.stacked-cards-container.default-all-inactive .stacked-card:hover .stacked-card-content.elementor-container,
.stacked-cards-container.default-all-inactive .stacked-card.is-active .stacked-card-content.elementor-container {
    opacity: 1;
    transform: scale(1);
}

.stacked-cards-container.default-all-inactive .stacked-card:hover .stacked-card-title,
.stacked-cards-container.default-all-inactive .stacked-card.is-active .stacked-card-title {
    opacity: 1;
}

.stacked-cards-container.default-all-inactive .stacked-card:hover .stacked-card-description,
.stacked-cards-container.default-all-inactive .stacked-card.is-active .stacked-card-description {
    opacity: 0.9;
    max-height: 200px;
    margin-top: 10px;
}

.stacked-cards-container.default-all-inactive .stacked-card:hover .stacked-card-side-image img,
.stacked-cards-container.default-all-inactive .stacked-card.is-active .stacked-card-side-image img {
    opacity: 1;
    transform: scale(1.05);
}

/* First Active State - first card starts expanded */
.stacked-cards-container.default-first-active .stacked-card:first-child {
    flex: 9;
}

.stacked-cards-container.default-first-active .stacked-card:first-child .stacked-card-content:not(.has-custom-content) {
    opacity: 1;
    transform: translateY(0);
}

.stacked-cards-container.default-first-active .stacked-card:first-child .stacked-card-content.elementor-container {
    opacity: 1;
    transform: scale(1);
}

.stacked-cards-container.default-first-active .stacked-card:first-child .stacked-card-title {
    opacity: 1;
}

.stacked-cards-container.default-first-active .stacked-card:first-child .stacked-card-description {
    opacity: 0.9;
    max-height: 200px;
    margin-top: 10px;
}

/* Other cards in first-active mode are dimmed by default */
.stacked-cards-container.default-first-active .stacked-card:not(:first-child) {
    /* Uses the inactive card controls for styling */
}

/* Interaction Modes */

/* Click interaction mode - disable hover effects, enable click */
.stacked-cards-container.interaction-click .stacked-card:hover {
    /* Disable hover expansion for click mode */
    flex: initial;
}

.stacked-cards-container.interaction-click .stacked-card:hover .stacked-card-content:not(.has-custom-content) {
    /* Disable hover effects for click mode */
    transform: initial;
    opacity: initial;
}

/* Active state for click interactions */
.stacked-cards-container.interaction-click .stacked-card.is-active,
.stacked-cards-container.interaction-both .stacked-card.is-active {
    flex: 9;
}

.stacked-cards-container.interaction-click .stacked-card.is-active .stacked-card-content:not(.has-custom-content),
.stacked-cards-container.interaction-both .stacked-card.is-active .stacked-card-content:not(.has-custom-content) {
    transform: translateY(0);
    opacity: 1;
}

.stacked-cards-container.interaction-click .stacked-card.is-active .stacked-card-content.elementor-container,
.stacked-cards-container.interaction-both .stacked-card.is-active .stacked-card-content.elementor-container {
    opacity: 1;
    transform: scale(1);
}

.stacked-cards-container.interaction-click .stacked-card.is-active .stacked-card-title,
.stacked-cards-container.interaction-both .stacked-card.is-active .stacked-card-title {
    opacity: 1;
}

.stacked-cards-container.interaction-click .stacked-card.is-active .stacked-card-description,
.stacked-cards-container.interaction-both .stacked-card.is-active .stacked-card-description {
    opacity: 0.9;
    max-height: 200px;
    margin-top: 10px;
}

/* Text overlay content */
.stacked-card-overlay-content {
    /* Default fallback styles - will be overridden by Elementor controls */
    text-align: center;
    color: white;
    padding: 20px;
    max-width: 90%;
    transform: translateY(0);
    transition: transform var(--transition-duration, 0.3s) var(--transition-easing, cubic-bezier(0.25, 0.8, 0.25, 1));
}

.stacked-card-overlay-content h1,
.stacked-card-overlay-content h2,
.stacked-card-overlay-content h3,
.stacked-card-overlay-content h4,
.stacked-card-overlay-content h5,
.stacked-card-overlay-content h6 {
    margin-top: 0;
    margin-bottom: 10px;
    /* Default fallback styles - will be overridden by Elementor controls */
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.stacked-card-overlay-content p {
    line-height: 1.5;
    margin-bottom: 10px;
    /* Default fallback styles - will be overridden by Elementor controls */
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.stacked-card-overlay-content p:last-child {
    margin-bottom: 0;
}

/* Text overlay on placeholder */
.stacked-card-text-overlay-placeholder {
    background: rgba(200, 200, 200, 0.8);
    color: #333;
}

.stacked-card-text-overlay-placeholder .stacked-card-overlay-content {
    color: #333;
}

.stacked-card-text-overlay-placeholder .stacked-card-overlay-content h1,
.stacked-card-text-overlay-placeholder .stacked-card-overlay-content h2,
.stacked-card-text-overlay-placeholder .stacked-card-overlay-content h3,
.stacked-card-text-overlay-placeholder .stacked-card-overlay-content h4,
.stacked-card-text-overlay-placeholder .stacked-card-overlay-content h5,
.stacked-card-text-overlay-placeholder .stacked-card-overlay-content h6 {
    color: #333;
    text-shadow: none;
}

.stacked-card-text-overlay-placeholder .stacked-card-overlay-content p {
    color: #555;
    text-shadow: none;
}

/* Image with text section specific styles */
.stacked-card-image-with-text-section .stacked-card-side-image {
    position: relative;
}

/* Mobile adjustments for text overlay */
@media (max-width: 768px) {
    .stacked-card-overlay-content {
        padding: 15px;
        font-size: 0.9em;
    }
    
    .stacked-card-overlay-content h1,
    .stacked-card-overlay-content h2,
    .stacked-card-overlay-content h3,
    .stacked-card-overlay-content h4,
    .stacked-card-overlay-content h5,
    .stacked-card-overlay-content h6 {
        font-size: 1.1em;
        margin-bottom: 8px;
    }
}

@media (max-width: 480px) {
    .stacked-card-overlay-content {
        padding: 10px;
        font-size: 0.8em;
    }
    
    .stacked-card-overlay-content h1,
    .stacked-card-overlay-content h2,
    .stacked-card-overlay-content h3,
    .stacked-card-overlay-content h4,
    .stacked-card-overlay-content h5,
    .stacked-card-overlay-content h6 {
        font-size: 1em;
        margin-bottom: 5px;
    }
}