/* Responsive styles for events (moved from events.php) */
/* Layout */
#top-heading h2 { width: auto !important; }
.events-list { display:block; margin:0; padding:0; }
.myBox {
  display:flex;
  gap:16px;
  align-items:flex-start;
  background-color: rgba(0,0,0,0.6); /* fallback */
  background: linear-gradient(135deg, rgba(100,100,100,0.9) 0%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.9) 100%);
  padding:12px;
  margin:12px 0;
  border-radius:6px;
  color:#333;
}
.myBox .thumb { flex: 0 0 125px; }
.myBox img { width:100%; height:auto; display:block; border:0; object-fit:cover; border-radius:4px; }
.myBox .content { flex:1 1 auto; min-width:0; width:100%; }

/* Ensure description never overflows its container */
.myBox .desc {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: block;
  font-size: 0.98rem;
  line-height: 1.45;
  color: #bcc3ca; /* darker, higher contrast copy */
  background: rgba(255,255,255,0.2);
  padding: 10px;
  border-radius: 6px;
  margin-top: 8px;
  margin-bottom: 0; /* remove extra blank space under description */
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* style for the latecomer message (used instead of raw <br> spacing) */
.latecomer {
  margin-top: 8px;
  margin-bottom: 0;
  font-weight: 700;
  color: #333;
  padding: 6px 0 0 0;
}

/* Header area: date + title to the right of the thumbnail */
.myBox .header {
  display: flex;
  gap: 12px;
  align-items: flex-start;   /* align header items to the top so date sits at the top of the thumb */
  /* width: 100%; */
  box-sizing: border-box;
  margin: 0;                 /* remove any default top/bottom spacing */
  padding: 0;
}

/* date column - keep compact (wider on non-mobile so date shows in full) */
.myBox .date {
  min-width: 180px;       /* base space for the date */
  flex: 0 0 auto;         /* size to its content rather than a fixed 180px */
  color: #eeeeee;
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0;
  padding: 0;
  white-space: nowrap;    /* keep date on one line */
  overflow: visible;      /* show the full date — do not truncate with ellipsis */
  text-overflow: clip;
  padding-right: 4px;
}

/* title sits next to date and can wrap */
.myBox .title {
  color: #8EC0D4;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.1;
  flex: 1 1 auto;
  min-width: 0; /* allow truncation/wrapping inside flex */
}

/* Small screens: keep thumbnail on the right and let content wrap around it */
@media (max-width: 720px) {
  .myBox {
    display: block;            /* normal flow so text wraps around floated thumb */
    align-items: stretch;
    text-align: left;
    padding: 12px;
    position: relative;
  }

  /* float thumbnail to the right so text wraps on the left (never stacked) */
  .myBox .thumb {
    float: right;
    width: 72px;
    margin: 0 0 8px 12px;     /* left margin so text doesn't butt up */
    flex: 0 0 auto;
  }
  .myBox .thumb img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
  }

  /* keep header items in a horizontal flow, allow wrapping but do not force stacking */
  .myBox .header {
    display: inline-flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
  }

  /* content in normal flow so text wraps around the floated thumbnail */
  .myBox .content {
    display: block;
    width: auto;
  }

  /* description should flow and fill available width next to the thumbnail */
  .myBox .desc {
    display: block;
    margin-top: 4px;
    padding: 12px;
    width: auto;
    font-size: 1.05rem;
  }

  /* keep button left-justified below the floated image (clears the float when necessary) */
  .myBox .button-box {
    clear: right;              /* ensures button sits below floated thumb if needed */
    margin-top: 12px;
    margin-bottom: 0;
    align-self: flex-start;
  }

  .myBox .button {
    padding: 14px 20px;
    font-size: 1rem;
  }

  /* adjust date/title sizing for mobile while preserving single-line date where possible */
  .myBox .date {
    min-width: 0;
    flex: 0 0 auto;
    font-size: 1.0rem;
  }
  .myBox .title {
    font-size: 1.35rem;
  }
}

/* Keep the same readable panel on small screens */
@media (max-width: 720px) {
  .myBox .desc {
    font-size: 1.4rem; /* ~20% larger for better readability on mobile */
    line-height: 1.45;
  }
}

.myBox .content { 
  flex:1 1 auto; 
  min-width:0; 
  width:100%; 
  display: flex;           /* allow vertical layout inside content */
  flex-direction: column;  /* place button at bottom using margin-top:auto */
}

/* Make the reservation button sit at the bottom-left of the event box */
.myBox .button-box {
  margin-top: 12px;     /* space above button */
  margin-bottom: 0;
  align-self: flex-start; /* left-justifier inside the content column */
  width: auto;
}

/* Increase padding around the button for easier tapping */
.myBox .button {
  padding: 12px 18px;   /* larger hit area */
  font-size: 1rem;
  display: inline-block;
  border-radius: 6px;
}

/* Ensure same behaviour on small screens */
@media (max-width: 720px) {
  .myBox #button-box {
    margin-top: 12px;
    align-self: flex-start; /* keep left-justified on mobile */
  }
  .myBox .button {
    padding: 14px 20px;
    font-size: 1rem;
  }
}

/* On small screens stack header items */
@media (max-width: 720px) {
  .myBox .header {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }
  .myBox .date {
    min-width: 0;
    flex: 0 0 auto;
    font-size: 1.0rem;
  }
  .myBox .title {
    font-size: 1.35rem;
  }
}

/* Intro paragraph (make ~2x larger for emphasis and readability) */
.intro {
  font-size: 1.2rem;          /* ~2x typical body text */
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #222;
}

/* Slightly scale down on very small screens if needed */
@media (max-width: 420px) {
  .intro { font-size: 1.4rem; }
}

/* hide event image on mobile */
@media (max-width: 720px) {
  .myBox .thumb {
    display: none !important;
    width: 0;
    margin: 0;
    float: none;
  }

  /* ensure content fills available space when thumb is hidden */
  .myBox .content {
    display: block;
    width: 100%;
  }
}