/* Basic page setup */
:root{
  --event-gap: 16px;
  --event-card-bg: #ffffff;
  --event-muted: #666;
  --event-accent: var(--brown);
  --event-shadow: 0 6px 18px rgba(18,18,18,0.06);
  --event-radius: 10px;
}


/* Header & toggles */
.events-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:20px;
}

.events-header form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}


.events-title {
  font-size:20px;
  font-weight:600;
}

.events-controls {
  display:flex;
  gap:8px;
  align-items:center;
}

a.events-btn , button.events-btn {
  padding:8px 12px;
  background: var(--green);
  cursor:pointer;
  font-weight:400;
  border-radius: 0px;
  display:inline-flex;
  justify-content: center;
  align-items:center;
  text-decoration:none;
  text-transform: uppercase;
  color:white;
  text-align: center;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 8px, white 0px), radial-gradient(circle at top right, transparent 0, transparent 8px, white 0px), radial-gradient(circle at bottom left, transparent 0, transparent 8px, white 0px), radial-gradient(circle at bottom right, transparent 0, transparent 8px, white 0px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 8px, white 0px), radial-gradient(circle at top right, transparent 0, transparent 8px, black 0px), radial-gradient(circle at bottom left, transparent 0, transparent 8px, black 0px), radial-gradient(circle at bottom right, transparent 0, transparent 8px, black 0px);
    mask-position: top left, top right, bottom left, bottom right;
}

.events-btn[aria-pressed="true"]{
  background:var(--event-accent);
  color:white;

  border-color:transparent;
}

/* List view container */
.events-list {
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Grid view container */
.events-grid {
  display:none; /* shown by JS when in grid mode */
  gap:16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Shared item styles */
.events-item {
  background:var(--event-card-bg);
  border-radius:var(--event-radius);
  border: 1px solid rgb(240,240,240);
  overflow:hidden;
  display:flex;
  align-items:stretch;
}



/* Date block: day above month, centered */
.events-date {
  width:90px;
  min-width:90px;
  background: var(--green);
  display:flex;
  flex-direction:column;
  color: white;
  align-items:center;
  justify-content:center;
  text-align:center;
  flex-shrink:0;
}

.events-day {
  font-size: 28px;
  font-weight:700;
  line-height:1;
}

.events-month {
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:0.06em;
}

/* Image style */
.events-image {
  width:300px;
  height:100%;
  max-height: 140px;
  object-fit:cover;
  object-position:center;
  flex-shrink:0;
}

/* Content area for list items */
.events-content {
  display:flex;
  flex-direction:column;
  padding: 1em;
  min-width:0;
  flex:1;
}

.events-title-text {
  font-size:18px;
  font-weight:700;
  margin:0;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.events-meta {
  font-size:13px;
  color:var(--event-muted);
}

/* Special Events */
.events-item.events-item-specialevent {
  background: var(--cream);

  .events-date {
    background: var(--cream);
    color: black;
  }
}

/* Individual meta element styles */
.events-title {
  color: #111;
  font-size: 22px;
  text-transform: initial;
}

.events-title a {
  color: inherit;
  text-decoration: none;
}

.events-title a:hover {
  color: var(--event-accent);
}

.events-timetable {
  color: var(--event-accent);
  text-decoration: none;
  font-weight: 500;
}

.events-timetable:hover {
  text-decoration: underline;
}

.events-time {
  font-weight: 600;
  color: var(--event-muted);
}

.events-date-text {
  font-weight: 500;
  color: #111;
}

.events-meta-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5em;
  align-items: center;
  margin-top: 8px;
}

.events-actions {
  display:flex;
  flex-direction:column;
  gap:0.5em;
}

/* ===== Grid-specific styles ===== */
.events-grid .events-item {
  flex-direction:column;
  align-items:stretch;
  padding:0;
  
}

.events-grid .events-image {
  width:100%;
  height:140px;
  border-radius:0;
}

.events-grid .events-date {
    padding: 7px;
    width: 100%;
    margin-bottom: 7px;
  align-self:flex-start;
}

.events-grid .events-content {
  padding: 1em;
}

/* Layout switch: when list mode is active, show list container and hide grid container (and vice versa) */
.events-mode-list .events-list { display:flex; }
.events-mode-list .events-grid { display:none; grid-auto-rows:auto; }

.events-mode-grid .events-list { display:none; }
.events-mode-grid .events-grid { display:grid; }

.events-header .event-header-item:first-of-type {
  display: flex;
  gap: 0.5em;
}

.events-item.events-item-specialevent {
  background: white;
}



.events-grid .events-meta {
    min-height: 56px;
}

@media (max-width: 960px) {

  .events-header .event-header-item:first-of-type {
    display: none;
  } 


  .events-item {
    display: block;

  }
  .events-meta-actions {
    display: block;
  }
  
  .events-date {
    width: 100%;
    height: 90px;
  }

  .events-content { 
    padding: 0.5em 1em;
  }
  .events-image {
    width: 100%;
    height: 300px;
    max-height: 300px;
  }

  .events-meta {
    padding: 7px 7px;
  }
}




/* aesthetic helper */
.events-empty {
  text-align:center;
  color:var(--event-muted);
  padding:40px;
}

/* Date selector specific styles */
.events-controls input[type="date"] {
  display: inline-block !important;
  opacity: 1 !important;
  width: auto;
  min-width: 150px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06);
}


/** Timetable ***/

.pricing-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 3.2%;
  text-align: center;

}

.pricing-card {
  border-radius: 5px;
  border: 1px solid var(--pricing-card-bg);
}


.pricing-card-header {
  background: var(--pricing-card-bg);
  
  padding: 0.75em;

  h3 {
    font-size: 1.25em;
    color: var(--pricing-card-color);
    letter-spacing: 0.2px;
    margin: 0px;
  }
  
  p {    
    margin: 0px;
    color:  var(--pricing-card-color);
  }
}



.pricing-card-content {
  .pricing-card-table-item{

    border-bottom: 1px solid rgba(0,0,0,0.15 );
    margin: 7px 15px;

    p {
      margin: 0px;
      padding: 7px 0px 15px 0px;
    }
  }
}


.pricing-card-content .pricing-card-table-item:last-child {
  border-bottom: none !important;
}



.pricing-card-green {
  --pricing-card-bg: var(--green);
  --pricing-card-color: #e9ffdb;
}

.pricing-card-indianred {
  --pricing-card-bg: var(--indianred);
  --pricing-card-color: white;
}

.pricing-card-yellow {
  --pricing-card-bg: #ff9600;
  --pricing-card-color: white;

}




.event-custom-button {
    background: var(--green);
    border-radius: 0px;
    padding: 1em 1.5em;
    margin: 7px 0px;
    -webkit-mask-image: radial-gradient(circle at top left, transparent 0, transparent 8px, white 0px), radial-gradient(circle at top right, transparent 0, transparent 8px, white 0px), radial-gradient(circle at bottom left, transparent 0, transparent 8px, white 0px), radial-gradient(circle at bottom right, transparent 0, transparent 8px, white 0px);
    -webkit-mask-position: top left, top right, bottom left, bottom right;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 51% 51%;
    mask-image: radial-gradient(circle at top left, transparent 0, transparent 8px, white 0px), radial-gradient(circle at top right, transparent 0, transparent 8px, black 0px), radial-gradient(circle at bottom left, transparent 0, transparent 8px, black 0px), radial-gradient(circle at bottom right, transparent 0, transparent 8px, black 0px);
    mask-position: top left, top right, bottom left, bottom right;
    mask-repeat: no-repeat;
    mask-size: 51% 51%;
}


.event-custom-button.event-custom-button-brown {
    background: var(--brown);   
}