/* =====================
   VARIABLES / BASE COLORS
===================== */
:root {
  --primary-color: #dd821d;       /* branding orange */
  --text-color: #333;             /* default text */
  --text-color-inverse: #fff;     /* text on colored background */
  --gap-small: 0.3em;
  --gap-medium: 0.5em;
  --gap-large: 1em;
  --border-radius: 5px;
  --padding-small: 6px 10px;
  --min-width-field: 200px;
}

/* =====================
   COMMUNITY POST WRAPPER
===================== */
.community-post {
  border-bottom: none !important;
  margin-bottom: 0;
  padding-bottom: 1em;
}

/* =====================
   TITLE BLOCK
===================== */
.community-post-title {
  font-weight: bold;
  font-size: 1.3em;
  color: var(--text-color);
  padding-left: .5em;
  margin-left:0;
  text-align: left;
  background-color:#dd821d;
}

/* =====================
   POST GROUP TOP (PHOTO + DESCRIPTION)
===================== */
.post-group-top-wrapper {
	display:flex;
  flex-direction: column;
  margin-left:160px;
}

/* =====================
   PHOTO + DESCRIPTION
===================== */
.post-group-top {
  display: flex;
  align-items: flex-start;
  margin-bottom: -10px;
}

.post-group-top div {

}

.post-group-top img {
  border-radius: var(--border-radius);
  border: 5px solid var(--primary-color);
  flex: 0 0 auto;
  max-width: 200px;
}

.community-post-body {
  flex: 1 1 auto;
  color: var(--text-color);
  line-height: 1.5;
}

/* =====================
   POST DATE BLOCK
===================== */
.post-date {
	background-color:#dd821d;
	min-width:150px;
	min-height:252px;
}

.posted {
  font-weight: bold;
  font-size:1em;
}

.post-date-day {
	font-weight:bold;
	font-size:1.7em;
	color:#fff;
}
.post-date-text {
	font-size:1.2em;
	font-weight:normal;
	color:#fff;
}
.post-date-month {
	font-size:1em;
}
.post-date-year {
	font-size:1em;
}

/* =====================
   CONTACTS
===================== */
.post-group-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-medium);
}

.community-post-node-name,
.community-post-node-email,
.community-post-node-phone {
  flex: 1 1 30%;
  display: flex;
  justify-content: flex-start;
  gap: var(--gap-small);
  padding: var(--padding-small);
  background-color: var(--primary-color);
  border-radius: var(--border-radius);
  color: var(--text-color-inverse);
  min-width: var(--min-width-field);
  box-sizing: border-box;
}

/* Labels */
.community-post-labels {
  font-weight: bold;
  margin-right:0;
  padding-right:0;
}

.community-post-labels div {
	margin:0;
	padding:0;
}

.post-contacts {
	margin-left:0;
	padding-left:0;
	text-align:left;
}

/* Values + links */
.community-post-node-name .field-item,
.community-post-node-email .field-item,
.community-post-node-phone .field-item,
.community-post-node-email a,
.community-post-node-phone a {
  color: var(--text-color-inverse);
  text-decoration: underline;
  word-break: break-word;
}

.community-post-node-email a:hover,
.community-post-node-phone a:hover {
  text-decoration: none;
}

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

  .post-group-contacts {
    flex-direction: column;
  }

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

  .post-date {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2em;
  }
}

/* =====================
   FUTURE EDIT NOTES
=====================
1. Colors: change --primary-color and --text-color-inverse for branding.
2. Spacing: adjust --gap-* and --padding-small for tighter/looser layout.
3. Fonts: tweak font-size or font-weight in title, body, date, or labels.
4. Flex layout: adjust flex-basis on contact fields to control number of columns.
5. Photo: max-width can be increased or decreased for larger/smaller images.
6. Responsive: add extra breakpoints for tablets if needed.
*/
/* =====================
   RESPONSIVE — STACKABLE ON MOBILE
===================== */
@media (max-width: 768px) {

  /* --- Overall layout --- */
  .post-group-top-wrapper {
    margin-left: 0; /* remove side margin on small screens */
    flex-direction: column;
    align-items: center; /* centers the photo + text */
  }

  .post-group-top {
    flex-direction: column; /* stack image and text vertically */
    align-items: center;
    text-align: center; /* center text for mobile readability */
    gap: 1em; /* space between image and description */
  }

  .post-group-top img {
    max-width: 80%;
    height: auto;
    margin-bottom: 0.5em;
  }

  .community-post-body {
    width: 100%;
    padding: 0 1em;
  }

  /* --- Date block --- */
  .post-date {
    width: 100%;
    min-width: unset;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 1em;
  }

  /* --- Contact section --- */
  .post-group-contacts {
    flex-direction: column;
    align-items: stretch;
  }

  .community-post-node-name,
  .community-post-node-email,
  .community-post-node-phone {
    width: 100%;
    flex: 1 1 auto;
    text-align: center;
  }

  /* --- Typography tweaks for smaller screens --- */
  .community-post-title {
    font-size: 1.1em;
    text-align: center;
    padding: 0.5em;
  }

  .post-date-day {
    font-size: 1.4em;
  }

  .post-date-text,
  .post-date-month,
  .post-date-year {
    font-size: 1em;
  }
}