/* =========================
   EVENT TOP ROW: PHOTO + LOCATION
========================= */
.group-top {
  display: flex;
  gap: 10px;             /* spacing between columns */
  margin-bottom: 15px;
  align-items: stretch;   /* equal height for both columns */
}

/* Photo column */
.group-top .event-photo-node {
  flex: 1;               /* equal width */
  max-height: 290px;     /* optional max height */
  display: flex;
  flex-direction: column;
}

.group-top .event-photo-node img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* fill container while keeping aspect ratio */
  border-radius: 5px;
  border: 3px solid #dd821d;
}

/* Location column */
.group-top .event-address-node {
  flex: 1;               /* equal width */
  padding: 10px;
  background-color: #f1e8dd;
  border-radius: 5px;
  border: 3px solid #dd821d;
  font-size: 18px;
  font-weight: bold;
  color: #000;
  box-sizing: border-box;
  max-height: 320px;     /* match photo max-height */
  overflow: hidden;      /* prevent overflow if text is too long */
}

/* Location label: larger font + colon */
.event-address-node-label {
    font-size: 20px;
    font-weight: bold;
}

.event-address-node-label::after {
    content: ":";
    margin-left: 2px;
}

/* =========================
   Responsive adjustments
========================= */
@media (max-width: 767px) {
  .group-top {
    flex-direction: column; /* stack on mobile */
  }

  .group-top .event-photo-node,
  .group-top .event-address-node {
    flex: 1 1 100%;
    max-height: none;     /* allow height to expand naturally */
  }

  .group-top .event-photo-node img {
    height: auto;         /* maintain aspect ratio */
  }
}

/* =========================
   EVENT DESCRIPTION
========================= */
.event-description-node {
  width: 100%;
  border-radius: 5px;
  background-color: #f9f6f3;
  padding: 15px;
  border: 2px #dd821d solid;
  box-sizing: border-box;
  margin-bottom: 15px;
}

/* =========================
   CONTACT ROW: NAME, PHONE, EMAIL
========================= */
.group-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;           /* full width */
  margin: 0 auto 15px;   /* remove side margins, keep bottom spacing */
  background: none;      /* remove any background color */
  border: none;          /* remove borders */
  box-sizing: border-box;
}

.group-contact .event-name-node,
.group-contact .event-phone-node,
.group-contact .event-email-node {
  flex: 1 1 100%;        /* full width on mobile */
  padding: 10px;
  background-color: #f1e8dd; /* keep light background for each field */
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  box-sizing: border-box;
}

.group-contact .event-email-node a,
.group-contact .event-phone-node a {
  color: #dd821d;
  text-decoration: underline;
}

/* Desktop layout: side by side */
@media (min-width: 768px) {
  .group-top .event-photo-node,
  .group-top .event-address-node {
    flex: 1 1 calc(50% - 10px); /* 2 columns: photo + address */
  }

  .group-contact .event-name-node,
  .group-contact .event-phone-node,
  .group-contact .event-email-node {
    flex: 1 1 calc(33.333% - 10px); /* 3 columns side by side */
  }
}

/* =========================
   EVENT TAGS
========================= */
.event-tags-node {
  border-radius: 5px;
  background-color: #f1e8dd;
  padding: 10px;
  width: 100%;
  margin-bottom: 15px;
  box-sizing: border-box;
}

.event-tags-node a {
  font-size: 0.6em;
  color: #fff;
  background-color: #dd821d;
  border-radius: 5px;
  padding: 5px;
  margin-left: 5px;
  display: inline-block;
  text-decoration: none;
}

/* =========================
   EVENT LINKS INLINE
========================= */
.event-links-node {
  width: 100%;
  border-radius: 5px;
  background-color: #dd821d;
  padding: 10px;
  color: #fff;
  margin-bottom: 15px;
  box-sizing: border-box;
  display: flex;          /* flex layout */
  flex-wrap: wrap;        /* wrap if too many links */
  gap: 10px;              /* spacing between links */
  align-items: center;    /* vertically center links */
}

.event-links-node a {
  color: #fff;
  text-decoration: underline;
  display: inline-block;
  margin: 0;
}

/* Add colon after Link(s) label */
.event-links-node-label::after {
    content: ":";
    margin-left: 2px;    /* small space after label */
}

/* =========================
   DATE BLOCK
========================= */
.event-date-node,
.event-date-node-repeat {
  line-height: 1.2;
  border-radius: 5px;
  background-color: #dd821d;
  padding: 10px;
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 15px;
}