/* GWT Hover Image Widget Styles */

.gwt-hover-image-container {
    position: relative;
    overflow: hidden;
    display: inline-block;
    cursor: pointer;
}

/* Link wrapper styling */
a .gwt-hover-image-container {
    text-decoration: none;
}

a:hover .gwt-hover-image-container,
a:focus .gwt-hover-image-container {
    text-decoration: none;
}

.gwt-hover-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
    display: block;
}

.gwt-main-image {
    position: relative;
    z-index: 1;
}

.gwt-hover-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
}

.gwt-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gwt-title {
    position: absolute;
    z-index: 4;
    font-weight: 600;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    opacity: 0;
    transition: all 0.3s ease;
}

.gwt-main-title {
    opacity: 1;
}

.gwt-hover-title {
    opacity: 0;
}

.gwt-button {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
}

.gwt-button.show-on-hover {
    opacity: 0;
}

/* Hover States */
.gwt-hover-image-container:hover .gwt-overlay {
    opacity: 1;
}

.gwt-hover-image-container:hover .gwt-main-title {
    opacity: 0;
}

.gwt-hover-image-container:hover .gwt-hover-title {
    opacity: 1;
}

.gwt-hover-image-container:hover .gwt-button.show-on-hover {
    opacity: 1;
}

/* Image Hover Transitions */

/* Fade Transition */
.hover-transition-fade:hover .gwt-hover-image {
    opacity: 1;
}

/* Slide Transitions */
.hover-transition-slide-left .gwt-hover-image {
    transform: translateX(100%);
}

.hover-transition-slide-left:hover .gwt-hover-image {
    opacity: 1;
    transform: translateX(0);
}

.hover-transition-slide-right .gwt-hover-image {
    transform: translateX(-100%);
}

.hover-transition-slide-right:hover .gwt-hover-image {
    opacity: 1;
    transform: translateX(0);
}

.hover-transition-slide-up .gwt-hover-image {
    transform: translateY(100%);
}

.hover-transition-slide-up:hover .gwt-hover-image {
    opacity: 1;
    transform: translateY(0);
}

.hover-transition-slide-down .gwt-hover-image {
    transform: translateY(-100%);
}

.hover-transition-slide-down:hover .gwt-hover-image {
    opacity: 1;
    transform: translateY(0);
}

/* Zoom Transitions */
.hover-transition-zoom-in .gwt-main-image {
    transform: scale(1);
}

.hover-transition-zoom-in:hover .gwt-main-image {
    transform: scale(1.1);
}

.hover-transition-zoom-in:hover .gwt-hover-image {
    opacity: 1;
    transform: scale(1.1);
}

.hover-transition-zoom-out .gwt-main-image {
    transform: scale(1.1);
}

.hover-transition-zoom-out:hover .gwt-main-image {
    transform: scale(1);
}

.hover-transition-zoom-out:hover .gwt-hover-image {
    opacity: 1;
    transform: scale(1);
}

/* Title Animations */

/* Slide Up Animation */
.animation-slide-up {
    transform: translate(-50%, -50%) translateY(20px);
}

.gwt-hover-image-container:hover .animation-slide-up {
    transform: translate(-50%, -50%) translateY(0);
}

/* Slide Down Animation */
.animation-slide-down {
    transform: translate(-50%, -50%) translateY(-20px);
}

.gwt-hover-image-container:hover .animation-slide-down {
    transform: translate(-50%, -50%) translateY(0);
}

/* Slide Left Animation */
.animation-slide-left {
    transform: translate(-50%, -50%) translateX(20px);
}

.gwt-hover-image-container:hover .animation-slide-left {
    transform: translate(-50%, -50%) translateX(0);
}

/* Slide Right Animation */
.animation-slide-right {
    transform: translate(-50%, -50%) translateX(-20px);
}

.gwt-hover-image-container:hover .animation-slide-right {
    transform: translate(-50%, -50%) translateX(0);
}

/* Fade In Animation */
.animation-fade-in {
    opacity: 0;
}

.gwt-hover-image-container:hover .animation-fade-in {
    opacity: 1;
}

/* Zoom In Animation */
.animation-zoom-in {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
}

.gwt-hover-image-container:hover .animation-zoom-in {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* Button Animations */

/* Button Slide Up */
.gwt-button.animation-slide-up {
    transform: translateX(-50%) translateY(20px);
}

.gwt-hover-image-container:hover .gwt-button.animation-slide-up {
    transform: translateX(-50%) translateY(0);
}

/* Button Slide Down */
.gwt-button.animation-slide-down {
    transform: translateX(-50%) translateY(-20px);
}

.gwt-hover-image-container:hover .gwt-button.animation-slide-down {
    transform: translateX(-50%) translateY(0);
}

/* Button Slide Left */
.gwt-button.animation-slide-left {
    transform: translateX(-50%) translateX(20px);
}

.gwt-hover-image-container:hover .gwt-button.animation-slide-left {
    transform: translateX(-50%) translateX(0);
}

/* Button Slide Right */
.gwt-button.animation-slide-right {
    transform: translateX(-50%) translateX(-20px);
}

.gwt-hover-image-container:hover .gwt-button.animation-slide-right {
    transform: translateX(-50%) translateX(0);
}

/* Button Fade In */
.gwt-button.animation-fade-in.show-on-hover {
    opacity: 0;
}

.gwt-hover-image-container:hover .gwt-button.animation-fade-in.show-on-hover {
    opacity: 1;
}

/* Button Zoom In */
.gwt-button.animation-zoom-in {
    transform: translateX(-50%) scale(0.8);
}

.gwt-hover-image-container:hover .gwt-button.animation-zoom-in {
    transform: translateX(-50%) scale(1);
}

.gwt-button.animation-zoom-in.show-on-hover {
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
}

.gwt-hover-image-container:hover .gwt-button.animation-zoom-in.show-on-hover {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .gwt-title {
        font-size: 14px;
        padding: 5px 10px;
    }
    
    .gwt-button {
        padding: 8px 16px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .gwt-title {
        font-size: 12px;
        padding: 3px 8px;
    }
    
    .gwt-button {
        padding: 6px 12px;
        font-size: 12px;
        bottom: 10px;
    }
}

/* Accessibility */
.gwt-hover-image-container:focus,
.gwt-hover-image-container:focus-within {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}

.gwt-button:focus {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .gwt-overlay {
        border: 1px solid;
    }
    
    .gwt-title {
        text-shadow: 1px 1px 0 #000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .gwt-hover-image-container img,
    .gwt-overlay,
    .gwt-title,
    .gwt-button {
        transition: none !important;
    }
}

/* Print styles */
@media print {
    .gwt-hover-image-container .gwt-hover-image,
    .gwt-overlay,
    .gwt-hover-title,
    .gwt-button {
        display: none;
    }
    
    .gwt-main-title {
        opacity: 1 !important;
        position: static !important;
        transform: none !important;
        color: #000 !important;
        background: none !important;
        text-shadow: none !important;
    }
}