/**
 * Comprehensive Event Image Display Fix
 * Fixes image display in all event view modes and locations
 */

/* ============================================
   1. SINGLE EVENT PAGE (Full/Default View)
   ============================================ */

.node--type-event .field--name-field-event-image {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 30px 0 !important;
  display: block !important;
  position: relative !important;
}

.node--type-event .field--name-field-event-image img {
  width: 100% !important;
  max-width: 800px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================
   2. EVENTS LISTING (Teaser View)
   ============================================ */

.view-events .node--type-event.node--view-mode-teaser .field--name-field-event-image,
.view-events .node--type-event.node--view-mode-teaser .teaser__image {
  position: static !important;
  width: 100% !important;
  height: 250px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  background: linear-gradient(135deg, #EDF6EE 0%, #D4F3D7 100%);
  border-radius: 12px 12px 0 0 !important;
}

.view-events .node--type-event.node--view-mode-teaser .field--name-field-event-image a,
.view-events .node--type-event.node--view-mode-teaser .teaser__image a {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.view-events .node--type-event.node--view-mode-teaser .field--name-field-event-image img,
.view-events .node--type-event.node--view-mode-teaser .teaser__image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  display: block !important;
  position: static !important;
  margin: 0 !important;
  transition: transform 0.3s ease !important;
}

.view-events .node--type-event.node--view-mode-teaser:hover .field--name-field-event-image img,
.view-events .node--type-event.node--view-mode-teaser:hover .teaser__image img {
  transform: scale(1.05) !important;
}

/* ============================================
   3. OVERRIDE OLIVERO THEME TEASER STYLES
   ============================================ */

/* Remove Olivero's circular avatar styling */
.node--type-event .teaser__image img {
  border-radius: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  max-width: none !important;
}

/* Fix Olivero's positioning */
.node--type-event .teaser__image {
  position: static !important;
  inset-block-start: auto !important;
  inset-inline-start: auto !important;
  margin: 0 !important;
}

/* ============================================
   4. NODE AUTHOR IMAGE (Hide for Events)
   ============================================ */

.node--type-event .node__author-image {
  display: none !important;
}

/* ============================================
   5. ENSURE VISIBILITY
   ============================================ */

.node--type-event .field--name-field-event-image,
.node--type-event .teaser__image {
  visibility: visible !important;
  opacity: 1 !important;
  clip: auto !important;
  clip-path: none !important;
}

.node--type-event img[src*="events/images"],
.node--type-event img[src*="Event_photo"],
.node--type-event img[src*="Arabic-Calligraphy"] {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

/* ============================================
   6. RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  .node--type-event .field--name-field-event-image img {
    max-width: 100% !important;
  }

  .view-events .node--type-event.node--view-mode-teaser .field--name-field-event-image,
  .view-events .node--type-event.node--view-mode-teaser .teaser__image {
    height: 200px !important;
  }
}

/* ============================================
   7. FIX FOR EMBEDDED WEBFORMS
   ============================================ */

.webform-submission-form .node--type-event .field--name-field-event-image {
  margin-bottom: 30px !important;
}

/* ============================================
   8. CLEAR ANY TRANSFORMS/FILTERS
   ============================================ */

.node--type-event .field--name-field-event-image img,
.node--type-event .teaser__image img {
  filter: none !important;
  transform-origin: center !important;
}

/* ============================================
   9. Z-INDEX FIXES
   ============================================ */

.node--type-event .field--name-field-event-image,
.node--type-event .teaser__image {
  z-index: 1 !important;
  isolation: isolate !important;
}

/* ============================================
   10. NUCLEAR OPTION - FORCE DISPLAY
   ============================================ */

/* Target any image inside event nodes */
.node--type-event img[src*="/sites/default/files/"],
.node--type-event img[src*="/events/images/"],
article[class*="node--type-event"] img,
.view-events img {
  visibility: visible !important;
  display: block !important;
  opacity: 1 !important;
}

/* Ensure field wrappers don't hide content */
.node--type-event .field--type-image,
.node--type-event .field__item {
  visibility: visible !important;
  display: block !important;
  opacity: 1 !important;
  overflow: visible !important;
}

/* Remove any max-height restrictions */
.node--type-event .field--name-field-event-image,
.node--type-event .field--type-image {
  max-height: none !important;
  min-height: auto !important;
}

/* Fix for specific Olivero classes */
.node--type-event article img,
.node--type-event .node__content img {
  max-width: 100% !important;
  height: auto !important;
}