/**
 * Unified Media Styles for Blocksy Seniori
 * 
 * This CSS provides consistent styling for all media elements (images and videos)
 * throughout the WordPress site, ensuring proper framing and responsive behavior.
 */

/* ===================================================================
   UNIVERSAL MEDIA CONTAINER
   A consistent container for all types of media with proper framing
   =================================================================== */
.seniori-media-frame {
    position: relative;
    width: 100%;
    max-width: 550px; /* Set a max-width to constrain the media size */
    margin-left: auto; /* Center the frame within its container */
    margin-right: auto; /* Center the frame within its container */
    margin-bottom: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    line-height: 0; /* Prevents extra space under the image */
    transition: all 0.3s ease;
}

.seniori-media-frame:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

/* Standard media content - applies to both images and videos */
.seniori-media-content {
    width: 100%;
    height: auto; /* Respect the media's natural aspect ratio */
    display: block;
    border-radius: 12px; /* Apply rounded corners directly to the media */
    overflow: hidden; /* Clip the corners of the media content itself */
    transition: transform 0.3s ease;
}

/* ===================================================================
   MEDIA STYLE VARIANTS
   Different styling options for different contexts
   =================================================================== */

/* Elevated style with stronger shadow */
.seniori-media-frame.style-elevated {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
}

/* Bordered style with thin border */
.seniori-media-frame.style-bordered {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Minimal style with subtle shadow */
.seniori-media-frame.style-minimal {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Rounded style for softer appearance */
.seniori-media-frame.style-rounded {
    border-radius: 24px;
}

.seniori-media-frame.style-rounded .seniori-media-content {
    border-radius: 24px;
}

/* No-frame style for seamless integration */
.seniori-media-frame.style-none {
    box-shadow: none;
    border-radius: 0;
}

.seniori-media-frame.style-none .seniori-media-content {
    border-radius: 0;
}

/* ===================================================================
   VIDEO SPECIFIC STYLES
   Additional styles for video elements
   =================================================================== */
.seniori-media-frame.is-video,
.has-play-button {
    cursor: pointer;
}

/* Play button overlay for videos before playing */
.seniori-media-frame.is-video:not(.playing)::before,
.has-play-button:not(.playing)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: var(--theme-accent-color-dark, rgba(249, 115, 22, 0.9));
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
}

.seniori-media-frame.is-video:not(.playing)::after,
.has-play-button:not(.playing)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateX(2px);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid white;
    z-index: 3;
    pointer-events: none;
}

/* ===================================================================
   CAPTION STYLES
   Styling for image/video captions
   =================================================================== */
.media-caption {
    padding: 0.75rem;
    background-color: white;
    color: var(--color-text, #4b5563);
    font-size: 0.875rem;
    line-height: 1.4;
    text-align: center;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* ===================================================================
   COMPATIBILITY WITH EXISTING CLASSES
   These ensure backward compatibility with current theme
   =================================================================== */

/* Apply media-frame styles to existing hero image containers */
.hero-image-wrapper {
    position: relative;
    border-radius: 12px !important;
    overflow: hidden;
    background-color: var(--color-muted, #f9fafb);
    line-height: 0;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    /* No default aspect ratio - will be applied by horizontal/vertical/square class */
    max-height: 600px;
}

.hero-image-wrapper:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    border-radius: 12px !important;
}

/* Apply media-frame styles to service images */
.service-image-container-standard,
.service-image-container-hero,
.service-image-wrapper {
    position: relative;
    border-radius: 12px !important;
    overflow: hidden;
    /* No default aspect ratio - will be applied by horizontal/vertical/square class */
    max-height: 500px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    background-color: var(--color-muted, #f9fafb);
    line-height: 0;
    transition: all 0.3s ease;
}

/* Vertical service images with 4:5 aspect ratio */
.service-image-container-standard.vertical,
.service-image-container-hero.vertical,
.service-image-wrapper.vertical {
    aspect-ratio: 4 / 5; /* Vertical aspect ratio */
    max-height: 500px;
}

.service-image-container-standard:hover,
.service-image-container-hero:hover,
.service-image-wrapper:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.service-image-standard,
.service-image-hero,
.service-image,
.service-image-container-standard video,
.service-image-container-hero video,
.service-image-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    border-radius: 12px !important;
}

/* Apply media-frame styles to about video container */
.video-container,
.about-video {
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    aspect-ratio: 16 / 9;
    max-height: 400px;
    transition: all 0.3s ease;
}

.video-container:hover,
.about-video:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.video-container iframe,
.about-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ===================================================================
   RESPONSIVE BEHAVIOR
   Adjustments for different screen sizes
   =================================================================== */

@media (max-width: 1024px) {
    .horizontal {
        max-height: 450px;
    }
    
    .vertical {
        max-height: 450px;
    }
    
    .square {
        max-height: 400px;
    }
    
    /* Legacy support */
    .seniori-media-frame.size-hero {
        max-height: 500px;
    }
    
    .hero-image-wrapper {
        max-height: 500px;
    }
}

@media (max-width: 768px) {
    .horizontal {
        max-height: 350px;
    }
    
    .vertical {
        max-height: 400px;
    }
    
    .square {
        max-height: 350px;
    }
    
    /* Legacy support */
    .seniori-media-frame.size-hero {
        max-height: 400px;
    }
    
    .seniori-media-frame.size-standard {
        max-height: 300px;
    }
    
    .seniori-media-frame.size-portrait {
        max-height: 400px;
    }
    
    .hero-image-wrapper {
        max-height: 400px;
    }
    
    .service-image-container-standard,
    .service-image-container-hero,
    .service-image-wrapper {
        max-height: 300px;
    }
    
    .video-container,
    .about-video {
        max-height: 300px;
    }
}

@media (max-width: 480px) {
    .horizontal {
        max-height: 250px;
    }
    
    .vertical {
        max-height: 320px;
    }
    
    .square {
        max-height: 250px;
    }
    
    /* Legacy support */
    .seniori-media-frame.size-hero {
        max-height: 300px;
    }
    
    .seniori-media-frame.size-standard {
        max-height: 220px;
    }
    
    .seniori-media-frame.size-portrait {
        max-height: 320px;
    }
    
    .hero-image-wrapper {
        max-height: 300px;
    }
    
    .service-image-container-standard,
    .service-image-container-hero,
    .service-image-wrapper {
        max-height: 220px;
    }
    
    .video-container,
    .about-video {
        max-height: 220px;
    }
}

/* WordPress Core Classes Compatibility */
.wp-block-image img,
.wp-block-media-text__media img,
.wp-block-media-text__media video,
.wp-caption img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Add frame to WordPress images by default */
.wp-block-image:not(.no-frame) img {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Support for figure elements with captions */
figure.wp-block-image:not(.no-frame) {
    margin-bottom: 2rem;
}

figure.wp-block-image figcaption {
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: #4b5563;
}

/* WordPress Gallery Support */
.wp-block-gallery .blocks-gallery-item img {
    border-radius: 12px;
}

/* ===================================================================
   UNIFIED VIDEO STYLING
   Makes videos look exactly like images with the same frame styling
   =================================================================== */

/* Base styling for WordPress video blocks - adding frame styling */
.wp-block-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  background-color: var(--color-muted, #f9fafb);
  line-height: 0;
  transition: all 0.3s ease;
}

.wp-block-video:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

/* Apply the aspect ratio classes to video blocks */
.wp-block-video.vertical {
  aspect-ratio: 3 / 4 !important;
  max-height: 500px;
}

.wp-block-video.horizontal {
  aspect-ratio: 16 / 9 !important;
  max-height: 500px;
}

.wp-block-video.square {
  aspect-ratio: 1 / 1 !important;
  max-height: 400px;
}

/* Target the actual video element inside the block */
.wp-block-video video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 8px;
}

/* Add play button to WordPress video blocks only before playing */
.wp-block-video.show-play-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-color: var(--theme-accent-color-dark, rgba(249, 115, 22, 0.9));
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}

.wp-block-video.show-play-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateX(2px);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid white;
  z-index: 3;
  pointer-events: none;
}

/* Add styles for videos in non-WordPress block contexts */
video.seniori-media-content {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 8px;
}

/* Make sure hero section videos get proper styling */
.hero-section video,
.hero-image-wrapper video {
  border-radius: 8px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Apply aspect ratios to video containers */
.vertical video {
  width: 100%;
  height: 100%;
}

/* Responsive behavior for videos */
@media (max-width: 768px) {
  .wp-block-video {
    max-width: 100%;
  }
  
  .wp-block-video::before {
    width: 50px;
    height: 50px;
  }
  
  .wp-block-video::after {
    border-top-width: 8px;
    border-bottom-width: 8px;
    border-left-width: 14px;
  }
}