/**
 * UNA Calendar View Custom Styles
 * 
 * Custom styling for The Events Calendar views
 * Location: assets/css/calendar-view.css
 * 
 * @package UNA_Digest_Generator
 * @version 2.0.0
 */

.una-calendar-header {
  position: relative;
  width: 100%;
  height: 400px; /* Adjust as needed */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px 20px 0 0;
  display: flex;
  align-items: flex-end; /* Position content at bottom where gradient is darkest */
  padding: 2em !important;
}

.una-calendar-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  z-index: 1;
}

.una-calendar-header h2 {
  position: relative;
  z-index: 2;
  color: white;
  margin: 0;
  padding: 1em;
  font-size: 2.5rem;
  font-weight: 600 !important;
}

@media (max-width: 768px) {
    .una-calendar-header h2 {
        font-size: 1.5em;
    }

    .una-calendar-header {
        max-height: 20vh;
    }

    .una-calendar-header::before {
         background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    }
}