/* =====================
   PHOTO + DESCRIPTION
===================== */
.post-group-top {
  display: flex;
  align-items: flex-start;
  gap: 1em;
  margin-bottom:0.2em; /* slightly more space */
}

.community-post-node-photo {
  flex: 0 0 auto;       /* fixed photo size */
  margin-right: 10px;
  max-width: 200px;      /* limit photo size */
  border-radius: 5px;
  object-fit: cover;
}

.community-post-node-body {
  flex: 1 1 auto;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertically center text if short */
}

/* =====================
   CONTACT FIELDS (NAME, EMAIL, PHONE)
===================== */
.post-group-middle {
  display: flex;
  gap: 0.20em;
  align-items: stretch; /* equal height boxes */
  margin-bottom: 0.1em;
}

/* Contact boxes */
.community-post-node-name,
.community-post-node-email,
.community-post-node-phone {
  flex: 1 1 0;
  display: flex;
  justify-content:left;     
  background-color: #dd821d;
  border-radius: 6px;
  padding: 10px 14px;
  box-sizing: border-box;
  color: #fff;
  transition: background-color 0.3s;
  max-height: 40px; /* sets max height */
  margin-bottom:0.1em;
}

/* Label inline with value */
.community-post-node-name .community-post-labels,
.community-post-node-email .community-post-labels,
.community-post-node-phone .community-post-labels {
  font-weight: bold;
  flex: 0 0 100px; /* fixed width, does not shrink */
  margin-right: 10px;
  white-space: nowrap;
}

/* Value container */
.community-post-node-name,
.community-post-node-name a,
.community-post-node-email,
.community-post-node-email a,
.community-post-node-phone,
.community-post-node-phone a {
  flex: 1 1 auto;       /* takes remaining space */
  word-break: break-word;
  overflow-wrap: break-word;
  text-decoration: none;
  color: #fff;
  justify-content:left;
}

/* Hover effect */
.community-post-node-name:hover,
.community-post-node-email:hover,
.community-post-node-phone:hover {
  background-color: #c46e14;
}

/* Make links box full width */
.community-post-node-links {
  display: flex;           /* ensures block-level behavior */
  width: 100%;             /* full width */
  box-sizing: border-box;   /* include padding/border in width */
  padding: 10px 14px;       /* optional padding */
  margin-top: -10px;                /* remove extra margins */
  background-color: #dd821d; /* match contact boxes or your desired color */
  border-radius: 6px;       /* optional rounding */
  color: #fff;              /* text color */
  max-height: 50px;         /* sets max height */
  padding: 10px 14px;
}

/* Ensure links inside inherit styling */
.community-post-node-links a {
  color: #fff;
  text-decoration: none;
  margin-right: 1em;        /* spacing between multiple links */
}

.community-post-node-links a:hover {
  text-decoration: underline;
}

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

.community-post-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;
}

.community-post-tags-node .tag:hover {
  background-color: #c46e14; /* hover effect */
}

/* =====================
   RESPONSIVE
===================== */
@media (max-width: 700px) {
  .post-group-middle {
    flex-direction: column;
    gap: 0.5em;
  }

  .community-post-node-name,
  .community-post-node-email,
  .community-post-node-phone {
    width: 100%;
  }

  .community-post-node-name .community-post-labels,
  .community-post-node-email .community-post-labels,
  .community-post-node-phone .community-post-labels {
    flex: 0 0 auto; /* allow label to shrink on mobile */
    width: auto;
    margin-right: 5px;
  }
  .community-post-node-links {
    width: 100%;            /* fallback for mobile */
    padding: 8px 12px;
  }
  .community-post-tags-node {
    padding: 8px 12px;
    gap: 0.4em;
  }

  .community-post-tags-node .tag {
    font-size: 0.85em;
  }
}
/* =====================
   RESPONSIVE — STACKABLE ON MOBILE
===================== */
@media (max-width: 700px) {

  /* --- PHOTO + DESCRIPTION --- */
  .post-group-top {
    flex-direction: column;     /* stack image and description */
    align-items: center;        /* center photo horizontally */
    text-align: center;         /* center text under photo */
    gap: 0.8em;                 /* space between photo and text */
  }

  .community-post-node-photo {
    max-width: 80%;             /* make image smaller on mobile */
    width: 100%;
    margin-right: 0;
    margin-bottom: 0.5em;
  }

  .community-post-node-body {
    width: 100%;
    padding: 0 1em;             /* horizontal breathing room */
    text-align: left;           /* optional: revert to left text */
  }

  /* --- CONTACT BOXES --- */
  .post-group-middle {
    flex-direction: column;     /* stack contact boxes vertically */
    align-items: stretch;
    gap: 0.4em;
  }

  .community-post-node-name,
  .community-post-node-email,
  .community-post-node-phone {
    width: 100%;
    max-height: none;           /* allow flexible height */
    justify-content: flex-start;
    align-items: center;
  }

  .community-post-node-name .community-post-labels,
  .community-post-node-email .community-post-labels,
  .community-post-node-phone .community-post-labels {
    flex: 0 0 auto;             /* let label shrink naturally */
    width: auto;
    margin-right: 6px;
  }

  /* --- LINKS BOX --- */
  .community-post-node-links {
    width: 100%;
    max-height: none;
    text-align: center;
    justify-content: center;
    flex-wrap: wrap;            /* allow multiple links to wrap */
    padding: 8px 12px;
  }

  .community-post-node-links a {
    margin: 0.3em 0.5em;
  }

  /* --- TAGS --- */
  .community-post-tags-node {
    padding: 8px 12px;
    gap: 0.4em;
  }

  .community-post-tags-node a {
    font-size: 0.8em;
    margin: 3px;
  }
}