/* ========================================
   EWTN Video Player Styles
   ======================================== */

/* ========================================
   1. VARIABLES & CONSTANTS
   ======================================== */

/* Colors */
:root {
  --ewtn-primary: #dc3545;
  --ewtn-primary-hover: #c82333;
  --ewtn-text: #333;
  --ewtn-text-muted: #666;
  --ewtn-bg-light: #f8f9fa;
  --ewtn-bg-white: #fff;
  --ewtn-border: #e0e0e0;
  --ewtn-border-light: #e9ecef;
  --ewtn-border-divider: #ddd;
  --ewtn-black: #000;
  --ewtn-white: #fff;
}

/* Shadows */
:root {
  --ewtn-shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
  --ewtn-shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.1);
  --ewtn-shadow-heavy: 0 4px 12px rgba(0, 0, 0, 0.15);
  --ewtn-shadow-dark: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ========================================
   2. LAYOUT CONTAINERS
   ======================================== */

/* Main front page row layout */
.ewtn-front-page-row {
  display: flex;
  gap: 20px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  padding-bottom: 20px; /* Reduced space below */
  align-items: stretch;
}

/* Video sections */
.ewtn-video-section,
.ewtn-upcoming-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 400px; /* Ensure minimum equal height */
  position: relative;
}

/* ========================================
   3. HEADERS & TITLES
   ======================================== */

/* Section titles */
.ewtn-section-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--ewtn-text);
  margin: 0;
}

.ewtn-section-title:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background-color: var(--ewtn-primary);
}

/* Section headers */
.ewtn-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Show all button */
.ewtn-show-all-btn {
  color: var(--ewtn-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.ewtn-show-all-btn:hover {
  color: var(--ewtn-primary-hover);
  text-decoration: none;
}

/* Position titles above panels */
.ewtn-video-section .ewtn-section-title {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  height: auto;
  line-height: normal;
  margin: 0 0 25px 0; /* Increased space below title */
  padding: 0 0 0 10px; /* Added left padding */
  z-index: auto;
  background: transparent;
}

.ewtn-upcoming-section .ewtn-section-header {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  height: auto;
  line-height: normal;
  margin: 0 0 25px 0; /* Increased space below title */
  padding: 0 0 0 10px; /* Added left padding */
  z-index: auto;
  background: transparent;
  display: flex;
  align-items: center;
}

/* ========================================
   4. VIDEO PLAYERS
   ======================================== */

/* Main video wrapper */
.ewtn-video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  background-color: var(--ewtn-black);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--ewtn-shadow-heavy);
}

.ewtn-video-wrapper iframe,
.ewtn-video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Video.js player specific styles */
.ewtn-video-wrapper .video-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ewtn-video-wrapper .vjs-big-play-button {
  font-size: 3em;
  line-height: 1.5em;
  height: 1.5em;
  width: 2.5em;
  border-radius: 0.3em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Small video player */
.ewtn-small-video-wrapper {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  background-color: var(--ewtn-black);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--ewtn-shadow-medium);
  border: 1px solid var(--ewtn-border);
}

.ewtn-small-video-wrapper iframe,
.ewtn-small-video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Video.js player in small wrapper */
.ewtn-small-video-wrapper .video-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* No video placeholder */
.ewtn-no-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--ewtn-text-muted);
  font-size: 16px;
  text-align: center;
}

/* ========================================
   5. UPCOMING STREAMS PANEL
   ======================================== */

/* Panel container */
.ewtn-upcoming-panel {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  height: 0;
  padding-bottom: 56.25%; /* Same 16:9 aspect ratio as video */
  background-color: var(--ewtn-bg-light);
  border-radius: 8px;
  box-shadow: var(--ewtn-shadow-medium);
  border: 1px solid var(--ewtn-border);
  overflow: hidden;
}

/* Content area */
.ewtn-upcoming-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px; /* Reduced gap between items */
}

/* ========================================
   6. UPCOMING STREAM ITEMS
   ======================================== */

/* Individual stream item */
.ewtn-upcoming-item {
  display: flex;
  align-items: flex-start;
  padding: 20px; /* Increased padding */
  background-color: var(--ewtn-bg-white);
  border-radius: 6px;
  box-shadow: var(--ewtn-shadow-light);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid var(--ewtn-border-light);
  flex: 0 0 auto; /* Don't expand to fill space - allows multiple items */
  min-height: 150px; /* Increased height */
  overflow: hidden;
  text-decoration: none; /* Remove default link underline */
  color: inherit; /* Inherit text color from parent */
}

.ewtn-upcoming-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--ewtn-shadow-heavy);
  text-decoration: none; /* Ensure no underline on hover */
  color: inherit; /* Maintain text color on hover */
}

/* Thumbnail */
.ewtn-upcoming-thumbnail {
  flex-shrink: 0;
  width: 200px; /* Increased width */
  height: 150px; /* Increased height */
  margin-right: 15px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--ewtn-shadow-light);
}

.ewtn-upcoming-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Details section */
.ewtn-upcoming-details {
  flex: 1;
  min-width: 0; /* Allow text to wrap */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Time */
.ewtn-upcoming-time {
  font-weight: bold;
  font-size: 20px; /* Increased font size */
  color: var(--ewtn-text);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ewtn-border-divider);
  line-height: 1.2;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Title */
.ewtn-upcoming-title {
  font-weight: normal;
  font-size: 16px;
  color: var(--ewtn-text);
  margin-bottom: 4px;
  line-height: 1.3;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Channel */
.ewtn-upcoming-channel {
  font-size: 14px;
  color: var(--ewtn-text-muted);
  font-style: normal;
  line-height: 1.2;
  margin-bottom: 0;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ========================================
   7. LIVE NOTIFICATION
   ======================================== */

#live-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: var(--ewtn-primary);
  color: var(--ewtn-white);
  padding: 12px 20px;
  border-radius: 6px;
  box-shadow: var(--ewtn-shadow-dark);
  cursor: pointer;
  z-index: 9999;
  font-weight: 500;
  transition: all 0.3s ease;
}

#live-notification:hover {
  background-color: var(--ewtn-primary-hover);
  transform: translateY(-2px);
}

/* ========================================
   8. BEAVER BUILDER OVERRIDES
   ======================================== */

/* Force both shortcode containers to take 50% width */
.fl-col-group-nested .fl-col,
.fl-col-group.fl-col-group-nested .fl-col,
.fl-node-content .fl-col-group-nested .fl-col,
.fl-col-group.fl-node-um7n89g1tlsd .fl-col {
  width: 50% !important;
  max-width: 50% !important;
  flex: 0 0 50% !important;
  box-sizing: border-box !important;
  padding: 0 10px !important;
}

.fl-col-group-nested,
.fl-col-group.fl-col-group-nested,
.fl-node-content .fl-col-group-nested {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 -10px !important;
  width: 100% !important;
}

/* Ensure shortcode containers fill their parent columns */
.ewtn-small-video-wrapper,
.ewtn-upcoming-panel {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Target specific Beaver Builder modules */
.fl-module-html.fl-node-blmz09kapf51,
.fl-module-html.fl-node-plr4hw1godsj {
  width: 100% !important;
  max-width: 100% !important;
}

/* Target specific column nodes */
.fl-node-knqza6p9os3b,
.fl-node-fur950vx4hqn {
  width: 50% !important;
  max-width: 50% !important;
  flex: 0 0 50% !important;
}

/* ========================================
   9. RESPONSIVE DESIGN
   ======================================== */

/* Mobile - 900px and below */
@media (max-width: 900px) {
  /* Main layout container */
  .ewtn-front-page-row {
    flex-direction: column;
    gap: 20px;
    padding-bottom: 20px; /* Reduced space below */
  }
  
  /* Video and upcoming sections - full width on mobile */
  .ewtn-video-section,
  .ewtn-upcoming-section {
    width: 100% !important;
    max-width: 100% !important;
    height: auto; /* Let content determine height */
    min-height: auto !important; /* Remove fixed min-height on mobile */
    flex: none;
  }

  /* Reorder elements on mobile: video first, upcoming streams second */
  .ewtn-video-section {
    order: 1;
  }
  
  .ewtn-upcoming-section {
    order: 2;
  }
  
  /* Section titles and headers */
  .ewtn-section-title {
    font-size: 18px;
  }
  
  .ewtn-show-all-btn {
    font-size: 14px;
  }

  /* Beaver Builder responsive overrides */
  .fl-col-group-nested .fl-col,
  .fl-col-group.fl-col-group-nested .fl-col,
  .fl-node-content .fl-col-group-nested .fl-col,
  .fl-node-knqza6p9os3b,
  .fl-node-fur950vx4hqn {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
  }
  
  .fl-col-group-nested,
  .fl-col-group.fl-col-group-nested,
  .fl-node-content .fl-col-group-nested {
    margin: 0 !important;
    display: block !important;
  }

  /* Section titles - position above panels with proper spacing */
  .ewtn-video-section .ewtn-section-title {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    height: auto;
    line-height: normal;
    margin: 20px 0 15px 0; /* Top margin for breathing room */
    padding: 0 20px; /* Left padding to align with content */
    background: transparent;
    z-index: auto;
  }

  .ewtn-upcoming-section .ewtn-section-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    height: auto;
    line-height: normal;
    margin: 20px 0 15px 0; /* Top margin for breathing room */
    padding: 0 20px; /* Left padding to align with content */
    background: transparent;
    z-index: auto;
    display: flex;
    align-items: center;
  }

  /* Video player - use aspect ratio but with max height */
  .ewtn-small-video-wrapper {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    max-height: 250px; /* Limit maximum height */
    margin: 0 20px 0 20px; /* Add side margins to align with titles */
    overflow: hidden; /* Ensure no content spills out */
  }

  /* Upcoming streams panel - fixed height approach */
  .ewtn-upcoming-panel {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    height: auto;
    padding-bottom: 0;
    padding: 20px;
    margin: 0 20px; /* Add side margins to align with titles */
    min-height: auto; /* Ensure no minimum height on mobile */
  }

  /* Upcoming content - normal flow */
  .ewtn-upcoming-content {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 0;
    display: block;
    gap: 15px;
  }
  
  /* Upcoming stream items */
  .ewtn-upcoming-item {
    display: flex;
    align-items: flex-start;
    padding: 15px;
    margin-bottom: 15px;
    min-height: auto;
    width: 100%;
  }
  
  .ewtn-upcoming-thumbnail {
    width: 120px;
    height: 90px;
    margin-right: 15px;
    flex-shrink: 0;
  }
  
  .ewtn-upcoming-time {
    font-size: 16px;
  }
  
  .ewtn-upcoming-title {
    font-size: 14px;
  }
  
  .ewtn-upcoming-channel {
    font-size: 12px;
  }

  /* Live notification */
  #live-notification {
    top: 10px;
    right: 10px;
    left: 10px;
    text-align: center;
    padding: 10px 15px;
    font-size: 14px;
  }
}

/* Mobile - 480px and below */
@media (max-width: 480px) {
  .ewtn-front-page-row {
    gap: 15px;
    padding-bottom: 15px; /* Reduced space below */
  }

  .ewtn-video-section,
  .ewtn-upcoming-section {
    height: auto;
    min-height: auto !important; /* Remove fixed min-height on tiny screens too */
  }

  .ewtn-small-video-wrapper {
    border-radius: 6px;
    max-height: 200px; /* Smaller max height on tiny screens */
  }
  
  .ewtn-upcoming-panel {
    padding: 15px;
    border-radius: 6px;
    min-height: auto; /* Ensure no minimum height on tiny screens */
  }
  
  .ewtn-upcoming-item {
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 4px;
    min-height: auto;
  }
  
  .ewtn-upcoming-thumbnail {
    width: 100px;
    height: 75px;
    margin-right: 12px;
  }
  
  .ewtn-upcoming-time {
    font-size: 15px;
  }
  
  .ewtn-upcoming-title {
    font-size: 13px;
    line-height: 1.2;
  }
  
  .ewtn-upcoming-channel {
    font-size: 11px;
  }

  .ewtn-section-title {
    font-size: 16px;
    margin-bottom: 12px;
  }

  /* Ensure titles are positioned correctly on tiny screens too */
  .ewtn-video-section .ewtn-section-title {
    position: relative;
    margin: 15px 0 12px 0;
    padding: 0 15px; /* Slightly less padding on tiny screens */
  }

  .ewtn-upcoming-section .ewtn-section-header {
    position: relative;
    margin: 15px 0 12px 0;
    padding: 0 15px; /* Slightly less padding on tiny screens */
  }

  /* Adjust panel margins for tiny screens */
  .ewtn-small-video-wrapper {
    margin: 0 15px 0 15px;
  }

  .ewtn-upcoming-panel {
    margin: 0 15px;
  }
}

/* Small Desktop - 901px to 1100px */
@media (min-width: 901px) and (max-width: 1100px) {
  .ewtn-small-video-wrapper {
    max-width: 100%;
  }
  
  /* Much smaller thumbnails to ensure 2 streams fit */
  .ewtn-upcoming-thumbnail {
    width: 60px;
    height: 45px;
    margin-right: 8px;
  }

  /* Compact upcoming stream items */
  .ewtn-upcoming-item {
    padding: 8px;
    min-height: 60px;
  }

  /* Smaller font sizes for compact layout */
  .ewtn-upcoming-time {
    font-size: 12px;
  }
  
  .ewtn-upcoming-title {
    font-size: 11px;
  }
  
  .ewtn-upcoming-channel {
    font-size: 10px;
  }

  /* Add bottom padding for desktop */
  .ewtn-front-page-row {
    padding-bottom: 20px;
  }
}

/* Medium Desktop - 1101px to 1300px */
@media (min-width: 1101px) and (max-width: 1300px) {
  .ewtn-small-video-wrapper {
    max-width: 100%;
  }
  
  /* Much smaller thumbnails to ensure 2 streams fit */
  .ewtn-upcoming-thumbnail {
    width: 70px;
    height: 53px;
    margin-right: 8px;
  }

  /* Compact upcoming stream items */
  .ewtn-upcoming-item {
    padding: 8px;
    min-height: 70px;
  }

  /* Smaller font sizes for compact layout */
  .ewtn-upcoming-time {
    font-size: 13px;
  }
  
  .ewtn-upcoming-title {
    font-size: 12px;
  }
  
  .ewtn-upcoming-channel {
    font-size: 10px;
  }

  /* Add bottom padding for desktop */
  .ewtn-front-page-row {
    padding-bottom: 25px;
  }
}

/* Large Desktop - 1301px to 1439px */
@media (min-width: 1301px) and (max-width: 1439px) {
  .ewtn-small-video-wrapper {
    max-width: 100%;
  }
  
  /* Much smaller thumbnails to ensure 2 streams fit */
  .ewtn-upcoming-thumbnail {
    width: 80px;
    height: 60px;
    margin-right: 10px;
  }

  /* Compact upcoming stream items */
  .ewtn-upcoming-item {
    padding: 10px;
    min-height: 80px;
  }

  /* Smaller font sizes for compact layout */
  .ewtn-upcoming-time {
    font-size: 14px;
  }
  
  .ewtn-upcoming-title {
    font-size: 13px;
  }
  
  .ewtn-upcoming-channel {
    font-size: 11px;
  }

  /* Add bottom padding for desktop */
  .ewtn-front-page-row {
    padding-bottom: 30px;
  }
}

/* Large Desktop - 1440px to 1449px */
@media (min-width: 1440px) and (max-width: 1449px) {
  .ewtn-small-video-wrapper {
    max-width: 100%;
  }
  
  .ewtn-upcoming-item {
    padding: 15px;
  }
  
  .ewtn-upcoming-thumbnail {
    width: 200px;
    height: 150px;
    margin-right: 15px;
  }
  
  .ewtn-upcoming-time {
    font-size: 18px;
  }
  
  .ewtn-upcoming-title {
    font-size: 16px;
  }
  
  .ewtn-upcoming-channel {
    font-size: 14px;
  }

  /* Add bottom padding for desktop */
  .ewtn-front-page-row {
    padding-bottom: 40px;
  }
}

/* Large Desktop - 1450px to 1700px */
@media (min-width: 1450px) and (max-width: 1700px) {
  .ewtn-small-video-wrapper {
    max-width: 100%;
  }
  
  .ewtn-upcoming-item {
    padding: 15px;
  }
  
  .ewtn-upcoming-thumbnail {
    width: 177px; /* Smaller thumbnail for this range */
    height: 120px;
    margin-right: 15px;
  }
  
  .ewtn-upcoming-time {
    font-size: 18px;
  }
  
  .ewtn-upcoming-title {
    font-size: 16px;
  }
  
  .ewtn-upcoming-channel {
    font-size: 14px;
  }

  /* Add bottom padding for desktop */
  .ewtn-front-page-row {
    padding-bottom: 40px;
  }
}

/* Extra Large Desktop - 1701px and above */
@media (min-width: 1701px) {
  .ewtn-small-video-wrapper {
    max-width: 100%;
  }
  
  .ewtn-upcoming-item {
    padding: 15px;
  }
  
  .ewtn-upcoming-thumbnail {
    width: 200px; /* Back to larger thumbnail */
    height: 150px;
    margin-right: 15px;
  }
  
  .ewtn-upcoming-time {
    font-size: 18px;
  }
  
  .ewtn-upcoming-title {
    font-size: 16px;
  }
  
  .ewtn-upcoming-channel {
    font-size: 14px;
  }

  /* Add bottom padding for desktop */
  .ewtn-front-page-row {
    padding-bottom: 40px;
  }
}