/* Flow Divi Modules — front-end layout the modules depend on. Design/colour
   come from Divi's own design tabs; this only supplies the structural alignment
   that plain text modules cannot do (aligned two columns + a filling leader). */

.flow_hours_table__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.flow_hours_row {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.4em 0;
}

.flow_hours_row__day {
  flex: 0 0 auto;
  white-space: nowrap;
}

.flow_hours_row__leader {
  flex: 1 1 auto;
  min-width: 1.5em;
  align-self: center;
  height: 0;
  border-bottom: 1px dotted currentColor;
  opacity: 0.4;
}

.flow_hours_table__list[data-leader="none"] .flow_hours_row__leader { border-bottom: 0; }
.flow_hours_table__list[data-leader="solid"] .flow_hours_row__leader { border-bottom-style: solid; }

.flow_hours_row__hours {
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: right;
}

.flow_hours_row--closed {
  opacity: 0.6;
}
.flow_hours_row--closed .flow_hours_row__hours {
  font-style: italic;
}

/* --- Menu list (name · leader · price + description) --- */
.flow_menu_list__items { display: grid; gap: 1.1em; }
.flow_menu_list__items[data-columns="2"] {
  grid-template-columns: 1fr 1fr;
  gap: 1.1em 2.2em;
}
.flow_menu_item__head { display: flex; align-items: baseline; gap: 0.5em; }
.flow_menu_item__name { flex: 0 0 auto; font-weight: 600; }
.flow_menu_item__leader { flex: 1 1 auto; min-width: 1.5em; align-self: center; height: 0; border-bottom: 1px dotted currentColor; opacity: 0.4; }
.flow_menu_list__items[data-leader="none"] .flow_menu_item__leader { border-bottom: 0; }
.flow_menu_list__items[data-leader="solid"] .flow_menu_item__leader { border-bottom-style: solid; }
.flow_menu_item__price { flex: 0 0 auto; white-space: nowrap; font-weight: 600; }
.flow_menu_item__price2 { margin-left: 0.4em; opacity: 0.7; }
.flow_menu_item__desc { opacity: 0.8; margin-top: 0.15em; }

/* --- Badge / ribbon overlay (placed inside a position:relative card) --- */
.flow_badge { position: absolute; z-index: 2; padding: 0.3em 0.8em; font-size: 0.8em; font-weight: 700; line-height: 1.2; background: #111; color: #fff; }
.flow_badge--pill { border-radius: 999px; }
.flow_badge--circle { border-radius: 999px; width: 3.4em; height: 3.4em; display: flex; align-items: center; justify-content: center; text-align: center; }
.flow_badge--top-left { top: 0.8em; left: 0.8em; }
.flow_badge--top-right { top: 0.8em; right: 0.8em; }
.flow_badge--bottom-left { bottom: 0.8em; left: 0.8em; }
.flow_badge--bottom-right { bottom: 0.8em; right: 0.8em; }
.flow_badge--ribbon, .flow_badge--corner-banner { top: 0.9em; right: -0.4em; box-shadow: 0 2px 4px rgba(0,0,0,.2); }

/* --- Comparison table (label + fixed value columns) --- */
/* Column count is data-driven: --flow-cmp-cols (2–8) is set inline on the head and
   on every row wrapper, so N-column tables (a weekly schedule, a 4-tier plan grid)
   render with matching, aligned tracks. Legacy tables default to 3. */
.flow_comparison_table { overflow-x: auto; }
.flow_comparison_table__head, .flow_comparison_row__grid { display: grid; grid-template-columns: 1.6fr repeat(var(--flow-cmp-cols, 3), 1fr); align-items: center; gap: 0.5em; }
.flow_comparison_table__head { font-weight: 700; padding-bottom: 0.6em; border-bottom: 2px solid currentColor; }
.flow_comparison_table__col, .flow_comparison_row__cell { text-align: center; }
.flow_comparison_row { padding: 0.55em 0; border-bottom: 1px solid rgba(0,0,0,.12); }
.flow_comparison_row__label { font-weight: 600; }
/* A wide table (many columns) would crush on a phone; give it a sensible min-width
   and let the table container scroll horizontally instead of squeezing to 1ch/col. */
@media (max-width: 767px) {
  .flow_comparison_table__head, .flow_comparison_row__grid { min-width: calc(6em + var(--flow-cmp-cols, 3) * 4.25em); }
}

/* Divi's .et_pb_module forces position:relative on module wrappers; the badge and
   shape divider are corner/edge overlays, so restore their absolute positioning at
   higher specificity now that they render as real Divi modules. */
.et_pb_module.flow_badge,
.et_pb_module.flow_divider { position: absolute; }

/* --- Shape divider (drop as first/last element of a position:relative section) --- */
.flow_divider { position: absolute; left: 0; width: 100%; line-height: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.flow_divider--bottom { bottom: 0; }
.flow_divider--top { top: 0; }
/* The shape (colour baked into its background SVG). Single shapes stretch one
   silhouette to full width; repeating shapes (wave/scallop/zigzag) tile at a fixed
   unit so the COUNT adapts to the width — many across a desktop, fewer (and a touch
   larger) on phones — at a consistent size instead of a few stretched ones. */
/* Height (--fdh) + repetition count (--fdr) are configurable per breakpoint. A
   repeating shape's tile = 100% / reps, so the pattern repeats EXACTLY `reps` times
   across the width; single shapes stretch (background-size 100%). Desktop/tablet/
   phone each carry their own default so it looks right out of the box. */
.flow_divider__shape { display: block; width: 100%; height: var(--fdh, 80px); background-repeat: no-repeat; background-size: 100% 100%; background-position: center bottom; }
.flow_divider--wave .flow_divider__shape,
.flow_divider--scallop .flow_divider__shape,
.flow_divider--zigzag .flow_divider__shape { background-repeat: repeat-x; background-size: calc(100% / var(--fdr, 22)) 100%; }
@media (max-width: 980px) {
  .flow_divider__shape { height: var(--fdh-t, 64px); }
  .flow_divider--wave .flow_divider__shape,
  .flow_divider--scallop .flow_divider__shape,
  .flow_divider--zigzag .flow_divider__shape { background-size: calc(100% / var(--fdr-t, 12)) 100%; }
}
@media (max-width: 767px) {
  .flow_divider__shape { height: var(--fdh-p, 48px); }
  .flow_divider--wave .flow_divider__shape,
  .flow_divider--scallop .flow_divider__shape,
  .flow_divider--zigzag .flow_divider__shape { background-size: calc(100% / var(--fdr-p, 6)) 100%; }
}

/* Feature List — a VERTICAL list of icon-beside-text rows. Icon left (default)
   or right of each row's text; row gap + icon↔text gap are CSS custom props set
   from the module's attrs so the two columns stay aligned down the list. */
.flow_feature_list__items {
  display: flex;
  flex-direction: column;
  gap: var(--flow-fl-row-gap, 16px);
}
.flow_feature_list_item__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--flow-fl-icon-gap, 14px);
}
.flow_feature_list__items[data-position="right"] .flow_feature_list_item__row {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.et-pb-icon.flow_feature_list_item__icon,
.flow_feature_list_item__icon {
  font-size: 20px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.flow_feature_list_item__text {
  flex: 1 1 auto;
}

/* Seam Badge — a circular icon/text badge that OVERLAPS the seam of the element
   above it (usually a card photo). It pulls UP by --flow-sb-overlap and centres
   itself, so the circle straddles the photo→text seam. size/overlap/colours are
   CSS custom props set inline on the module wrapper from the module's attrs. NOTE:
   the element directly above must have no bottom gap for the overlap to reach it
   (the authoring places it flush against the card image). */
.flow_seam_badge {
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.flow_seam_badge__circle {
  /* pull the circle UP over the element above (the card photo) so it straddles the
     seam; the size/overlap/colour/ring props are set inline on this element (PHP +
     VB alike) so the two renders match. */
  margin-top: calc(-1 * var(--flow-sb-overlap, 28px));
  box-sizing: border-box;
  width: var(--flow-sb-size, 56px);
  height: var(--flow-sb-size, 56px);
  border-radius: 50%;
  background: var(--flow-sb-bg, #2f5233);
  color: var(--flow-sb-fg, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--flow-sb-size, 56px) * 0.42);
  line-height: 1;
  border: var(--flow-sb-border-width, 0px) solid var(--flow-sb-border-color, #ffffff);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  pointer-events: auto;
}
.et-pb-icon.flow_seam_badge__icon,
.flow_seam_badge__icon {
  font-size: inherit;
  line-height: 1;
  width: auto;
  height: auto;
  display: inline-flex;
  color: inherit;
}
.flow_seam_badge__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.flow_seam_badge__text {
  font-size: calc(var(--flow-sb-size, 56px) * 0.26);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-align: center;
  padding: 0 4px;
}
/* Seam-badge CARD proportions: when a card column holds a seam-badge, lay the card
   out as a 2-row GRID (1fr 1fr) so the photo (top) and the body <group> (bottom) are
   ALWAYS equal height — both rows size to the taller content, so the image never
   dwarfs the body and the body never overflows. The badge is absolutely centred on
   the grid's midline (the seam). Uses :has() — older browsers fall back to the
   in-flow layout (image natural + negative-margin badge). */
.et_pb_column:has(> .flow_seam_badge) {
  display: grid;
  grid-template-rows: 1fr 1fr;
  position: relative;
  /* clip the photo's TOP corners to the card radius; its bottom corners meet the
     body at the seam (mid-card) and stay square. */
  overflow: hidden;
}
.et_pb_column:has(> .flow_seam_badge) > .et_pb_image {
  grid-row: 1;
  min-height: 0;
  overflow: hidden;
  /* the card's overflow rounds the top corners; the image's own radius would notch
     the seam, so drop it — bottom corners stay square. */
  border-radius: 0;
}
.et_pb_column:has(> .flow_seam_badge) > .et_pb_image .et_pb_image_wrap,
.et_pb_column:has(> .flow_seam_badge) > .et_pb_image img {
  height: 100%;
  width: 100%;
  display: block;
}
.et_pb_column:has(> .flow_seam_badge) > .et_pb_image img {
  object-fit: cover;
}
.et_pb_column:has(> .flow_seam_badge) > .et_pb_group {
  grid-row: 2;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* clear the badge's lower half (top), and keep the body text off the card edges
     with left/right inner padding. */
  padding: 46px 24px 0;
}
/* badge: absolutely centred on the card midline (the photo↔body seam) — its own
   negative-margin overlap is neutralised in this card context. */
.et_pb_column:has(> .flow_seam_badge) > .flow_seam_badge {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin: 0;
  z-index: 3;
}
.et_pb_column:has(> .flow_seam_badge) > .flow_seam_badge .flow_seam_badge__circle {
  margin-top: 0;
}

/* ============================================================================
   flow/upcoming-events — a LIVE events list (rendered from a WP_Query in
   UpcomingEvents.php). Loaded on the front end AND in the Visual Builder, so the
   VB edit preview matches the public render. Card/accent colours come in as the
   --flow-ev-* custom properties set inline by the render (author's picker), with
   the fallbacks below.
   ========================================================================== */
.flow_events {
  --flow-ev-accent: #2d6cdf;
  --flow-ev-card: #ffffff;
}
.flow_events__heading {
  margin: 0 0 28px;
}

/* grid of non-featured events */
.flow_events__grid {
  display: grid;
  gap: 24px;
}
.flow_events__grid--1 { grid-template-columns: 1fr; }
.flow_events__grid--2 { grid-template-columns: repeat(2, 1fr); }
.flow_events__grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) {
  .flow_events__grid--2,
  .flow_events__grid--3 { grid-template-columns: 1fr; }
}

/* a card */
.flow_events__card {
  display: flex;
  flex-direction: column;
  background: var(--flow-ev-card);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}
.flow_events__title {
  margin: 0 0 10px;
  font-size: 1.15em;
  line-height: 1.25;
}
.flow_events__title a { text-decoration: none; color: inherit; }
.flow_events__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 18px;
  font-size: 0.95em;
  opacity: 0.75;
}
.flow_events__date { font-weight: 600; opacity: 0.95; }
.flow_events__btn {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  padding: 10px 22px;
  border-radius: 8px;
  background: var(--flow-ev-accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: filter 0.15s ease;
}
.flow_events__btn:hover { filter: brightness(0.92); color: #fff; }
/* no-ticket events get a secondary outline button to their own page */
.flow_events__btn--ghost {
  background: transparent;
  color: var(--flow-ev-accent);
  box-shadow: inset 0 0 0 2px var(--flow-ev-accent);
  padding: 8px 20px;
}
.flow_events__btn--ghost:hover { filter: none; background: var(--flow-ev-accent); color: #fff; }

/* featured (soonest) event — full width, image beside the body on desktop */
.flow_events__card--featured {
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  margin-bottom: 24px;
  border: 2px solid var(--flow-ev-accent);
}
.flow_events__card--featured .flow_events__media {
  flex: 0 0 42%;
  min-height: 260px;
  display: block;
  background-size: cover;
  background-position: center;
}
.flow_events__card--featured .flow_events__body { padding: 32px; flex: 1 1 auto; display: flex; flex-direction: column; }
.flow_events__card--featured .flow_events__title { font-size: 1.7em; }
@media (max-width: 980px) {
  .flow_events__card--featured { flex-direction: column; }
  .flow_events__card--featured .flow_events__media { flex-basis: auto; min-height: 200px; }
  .flow_events__card--featured .flow_events__body { padding: 24px; }
}

/* recent past events — muted */
.flow_events__past-heading {
  margin: 40px 0 18px;
  font-size: 1.05em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
}
.flow_events__card--past { opacity: 0.68; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05); }

/* empty state */
.flow_events__empty {
  margin: 0;
  padding: 8px 0;
  font-style: italic;
  opacity: 0.7;
}