/* Location column now stacks date over place, so override the inline-flex/nowrap
   single-line rule in main.css. Scoped here rather than editing main.css, which is
   the shared theme file that drifts against Design Manager. */
.evt-row__where {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   gap: 0;
   white-space: normal;
   min-width: 0;
   /* Match .evt-row__host exactly — same size and colour already, but main.css gives
      this column font-weight 500, which is what made it read heavier than the host. */
   font-size: var(--text-sm);
   font-weight: 400;
}

.evt-row__when,
.evt-row__venue,
.evt-row__place {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
}

/* The calendar, building and pin glyphs are all different widths. Give each the same
   fixed box and centre the glyph inside it, so the three text lines start at one x and
   the icons sit on a single axis. align-items:center (above) keeps each icon centred
   against its own line rather than hanging from the top. */
.evt-row__when i,
.evt-row__venue i,
.evt-row__place i {
   flex: 0 0 1rem;
   width: 1rem;
   text-align: center;
   font-size: 0.9rem;
   line-height: 1;
   color: var(--blue);
}

/* Never wrap — but never truncate either. The column is sized to its content (see the
   max-content track below), so the text decides the column width rather than the column
   clipping the text. */
.evt-row__txt {
   white-space: nowrap;
}

/* NOTE: the .evt-list--nocta and mobile grid rules live further down, next to the
   single .evt-row track definition, so the column widths are all stated in one place.
   An earlier pair of rules here duplicated them at the old 4.5rem/16rem widths and a
   mobile override re-enabled wrapping on the date — both removed. */

/* Column tracks — SUBGRID.
   Every .evt-row used to be its own grid, so a max-content track sized to that row's
   content alone and no two rows lined up. Subgrid fixes this properly: .evt-list owns the
   four tracks, each row spans all of them and adopts the parent's tracks, so every row's
   items contribute to the SAME tracks and the columns are identical down the list.
   Unlike a <table> this keeps each row a real element — it can still be an <a> with its
   own hover background and border, which a <tr> cannot. */
.evt-list {
   display: grid;
   grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
   column-gap: 1.75rem;
}

.evt-list--nocta {
   grid-template-columns: max-content minmax(0, 1fr) max-content;
}

.evt-row {
   display: grid;
   grid-column: 1 / -1;
   grid-template-columns: subgrid;
   align-items: center;
}

/* Every row carries identical horizontal padding, so the uniform offset it introduces
   shifts all rows equally and the columns still align. */

@media (max-width: 640px) {
   .evt-list,
   .evt-list--nocta {
      display: block;
   }
   .evt-row {
      grid-column: auto;
      grid-template-columns: auto 1fr;
      align-items: start;
   }
}

/* Breathing room between the month and day lines, matching the card badge. */
.evt-row__date {
   gap: 0.5rem;
}

/* main.css sets --text-xs at 0.18em tracking, which suited "SEP" but is heavy for a
   full "SEPTEMBER" — it crowded the day beneath it. Smaller face and tighter tracking
   restore the size gap between the month and the day. */
.evt-row__date-month {
   font-size: 0.62rem;
   letter-spacing: 0.08em;
   white-space: nowrap;
}

/* A two-number day needs a smaller face than a single one. */
.evt-row__date--range .evt-row__date-day {
   font-size: 1.3rem;
   white-space: nowrap;
}

/* main.css widens .evt-row's horizontal padding from 0.5rem to 1rem on :hover. That
   narrows the content box mid-hover, enough to wrap a long title onto a second line and
   make the row jump. Reserve the hover padding at rest so hovering changes only the
   background and the row never reflows. */
.evt-row,
.evt-row:hover {
   padding-left: 1rem;
   padding-right: 1rem;
}

/* Fallback for engines without subgrid (pre-Safari 16 / Chrome 117): rows go back to
   sizing independently, which is the behaviour that shipped before — ragged, but intact. */
@supports not (grid-template-columns: subgrid) {
   .evt-list,
   .evt-list--nocta {
      display: block;
   }
   .evt-row {
      grid-column: auto;
      grid-template-columns: 5.5rem minmax(0, 1fr) max-content 6.5rem;
   }
   .evt-list--nocta .evt-row {
      grid-template-columns: 5.5rem minmax(0, 1fr) max-content;
   }
}

/* Hover nudge. The original effect came from main.css growing the row's horizontal
   padding, which reflowed the content and could wrap a title mid-hover. Translating the
   row's children reproduces the movement without touching layout: transforms are painted,
   not laid out, so nothing re-wraps. The row box and its divider border stay put, so only
   the content slides. */
.evt-row > * {
   transition: transform 0.25s ease;
}

.evt-row:hover > * {
   transform: translateX(6px);
}

@media (prefers-reduced-motion: reduce) {
   .evt-row > * {
      transition: none;
   }
   .evt-row:hover > * {
      transform: none;
   }
}

/* Rich-text section intro description.
   hubspot-overrides.css caps `.section-desc p` at 33rem, and rich text renders its copy
   as <p> children — so a width on the container alone has no visible effect. Both the box
   and its paragraphs are driven from the --desc-maxw custom property set inline.
   Percentage, not pixels, so it tracks the fluid type scale and the container.
   Desktop only (min-width: 768px), matching the "Heading max width" convention in
   main.css; mobile stays full width. */
@media (min-width: 768px) {
   .section-desc[style*="--desc-maxw"],
   .section-desc[style*="--desc-maxw"] p {
      max-width: var(--desc-maxw);
      margin-left: auto;
      margin-right: auto;
   }
}

@media (max-width: 767px) {
   .section-desc[style*="--desc-maxw"],
   .section-desc[style*="--desc-maxw"] p {
      max-width: 100%;
   }
}

.section-desc[style*="--desc-maxw"] p:last-child {
   margin-bottom: 0;
}