/**
 * WTW HivePress Customizations — custom.css
 *
 * All site-specific CSS tweaks for HivePress live here, grouped in
 * clearly labeled sections. Add new customizations as a new section
 * below rather than editing the theme's stylesheet.
 */

/* =========================================================================
   1. Stack "Place", "Start Date", "End Date" (and other primary attributes)
      into separate lines instead of side by side.

      HivePress lays out attributes in a Bootstrap-style row/column grid
      (.hp-row > .hp-col-lg-4 / .hp-col-lg-6 / etc). We switch that row to
      a column layout and force each attribute's grid column to take the
      full width, on both the listing cards (view-block) and the single
      listing page (view-page).
   ========================================================================= */

.hp-listing__attributes--primary {
	flex-direction: column;
}

.hp-listing__attributes--primary > [class*="hp-col-"] {
	flex: 0 0 100% !important;
	max-width: 100% !important;
}

.hp-listing__attributes--primary .hp-listing__attribute {
	display: flex;
	align-items: center;
	width: 100%;
	margin-bottom: 6px;
}

.hp-listing__attributes--primary .hp-listing__attribute:last-child {
	margin-bottom: 0;
}

/* =========================================================================
   2. Add right-hand spacing after the "End Date" attribute value.

      Note: this targets the attribute by its slug (enddate). If your
      attribute's machine name is different (e.g. "end_date"), inspect
      the element in your browser and update the class name below to
      match — it will read ".hp-listing__attribute--<your-slug>".
   ========================================================================= */

.hp-listing__attribute--enddate {
	margin-right: 1rem;
}

/* If you'd like the SAME stacked layout for the "secondary" attributes
   area too, uncomment the block below. */

/*
.hp-listing__attributes--secondary {
	flex-direction: column;
}

.hp-listing__attributes--secondary > [class*="hp-col-"] {
	flex: 0 0 100% !important;
	max-width: 100% !important;
}
*/