/* ==========================================================================
   SOUTHERN HOME · Design Calendar skin for The Events Calendar
   Loads only on event views (see inc/events-calendar.php).

   IMPORTANT: set Events → Settings → Display → "Default stylesheet" to
   SKELETON STYLES. TEC's "Tribe"/"Full" stylesheets impose their own type
   scale and will fight almost everything below.

   Tokens are read from the Astra global palette where possible so this file
   stays in step with the rest of the 2026 refresh, with the hex values as
   fallbacks for anywhere the CSS vars aren't in scope.
   ========================================================================== */

:root,
.tribe-events,
.tribe-events-view {
  /*
   * Brand values are hardcoded, NOT read from Astra's palette.
   *
   * An earlier version mapped these onto var(--ast-global-color-N). That coupling
   * broke silently on the live site: the palette slots are not in the order assumed,
   * so --sh-pink resolved to #FAF8F3 (Paper) and the pink accents rendered as
   * near-invisible cream on white. The var() fallback never fired, because the
   * variable was defined — just to a different colour.
   *
   * Slot order is an implementation detail of the Customizer and can be reordered by
   * anyone editing the palette. These seven values are brand constants, so they live
   * here. If the brand colours ever change, change them in both places deliberately.
   */
  --sh-blue: #1E2A8C;
  --sh-blue-deep: #141D66;
  --sh-pink: #C72869;
  --sh-ink: #1C1C1E;
  --sh-gray: #6E6E73;
  --sh-paper: #FAF8F3;
  --sh-rule: #E7E2D6;

  /*
   * The site's real licensed families, not Google substitutes.
   *
   * Southern Home serves futura-pt, big-caslon-fb and benton-modern-display through
   * Adobe Fonts — the nav is already futura-pt. The comp specified Jost and Libre Caslon
   * because those are the free stand-ins used to mock it up; shipping them meant the
   * calendar was set in near-misses of the brand faces while the rest of the site used
   * the real ones. Google fallbacks are kept behind them in case a kit fails to load.
   */
  --sh-caslon: 'big-caslon-fb', 'Big Caslon', 'Libre Caslon Display', Georgia, serif;
  --sh-caslon-text: 'benton-modern-display', 'Libre Caslon Text', Georgia, serif;
  --sh-futura: 'futura-pt', 'Futura PT', 'Jost', 'Futura', 'Century Gothic', sans-serif;

  --sh-max: 1240px;
}

/* --------------------------------------------------------------------------
   Containment model

   TEC renders components/before.php and after.php INSIDE its l-container, so
   if that container keeps a max-width the full-bleed bands (page header,
   filter bar, submit band) get boxed into 1240px and the paper backgrounds
   stop short of the viewport edge.

   So: the container goes full width, and the max-width moves down onto the
   individual pieces that need it. Anything added to these views later must
   bring its own max-width — inheriting one is no longer an option.
   -------------------------------------------------------------------------- */

.tribe-events .tribe-common-l-container,
.tribe-events .tribe-events-l-container {
  max-width: none;
  width: 100%;
}

/*
 * TEC adds breakpoint classes at runtime and styles the container as
 * `.tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container` — (0,3,0),
 * which beats a two-class rule. It sets 42px side gutters plus ~96px top and ~160px
 * bottom padding, which showed up as a white slab between the masthead and the paper
 * band. Matching (0,3,1) with the body element so this is not a specificity coin-toss.
 */
body .tribe-events.tribe-common .tribe-common-l-container,
body .tribe-events.tribe-common .tribe-events-l-container {
  padding: 0;
}

.tribe-events .tribe-events-calendar-list {
  list-style: none;
  max-width: var(--sh-max);
  margin: 0 auto;
  padding: 0 36px;
}

/* Pagination sits in the container too, so it needs the same treatment. */
.tribe-events .tribe-events-c-nav {
  max-width: var(--sh-max);
  margin: 0 auto;
  padding: 0 36px 8px;
}

/*
 * The comp's calendar sits on white, with the paper-coloured bands (page header,
 * submit band) laid over it. Set white once on the container rather than on each
 * block — separate white blocks leave gutters of theme background showing between
 * them. Found by rendering against a theme with a coloured body.
 */
.tribe-events .tribe-events-l-container {
  background: #fff;
}

/*
 * Suppress the stock chrome our own design replaces.
 *
 * Found by rendering the real plugin rather than a mockup: TEC ships its own view
 * selector and its own subscribe dropdown, which sit alongside the List/Month toggle
 * and the "Subscribe to Calendar" button in our page header. Left alone the page
 * offers each control twice.
 *
 * Pagination (.tribe-events-c-nav) is deliberately NOT hidden — it is the only way
 * to reach page two. It gets styled further down instead.
 */
/*
 * Scoped to .tribe-events-view — the CALENDAR views only.
 *
 * These were previously scoped to .tribe-events, which TEC also puts on an inner wrapper
 * on single event pages. That silently hid the subscribe dropdown there too, removing
 * the only proper "Add to Calendar" on the site (Google / iCalendar / Outlook 365 /
 * Outlook Live). .tribe-events-view exists on the calendar views and not on single
 * events, so the suppression now lands where it was meant to.
 */
.tribe-events-view .tribe-events-header__events-bar,
.tribe-events-view .tribe-events-c-events-bar,
.tribe-events-view .tribe-events-c-view-selector,
.tribe-events-view .tribe-events-c-search,
.tribe-events-view .tribe-events-c-subscribe-dropdown,
.tribe-events-view .tribe-events-c-ical {
  display: none !important;
}

/*
 * The top bar is hidden on LIST only. On list it is a redundant datepicker; on MONTH it
 * is the prev / next / This Month navigation and the only way to change month. Hiding it
 * everywhere left the month view with no navigation at all.
 */
.tribe-events-view--list .tribe-events-c-top-bar {
  display: none !important;
}

/* -------------------------------------------------------------------------- Shared bits -------------------------------------------------------------------------- */ .tribe-events .sh-btn {
  display: inline-block;
  font-family: var(--sh-futura);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: 16px;
  padding: 14px 32px;
  border: 1px solid transparent;
  transition: .25s;
  cursor: pointer;
  text-decoration: none;
}

.tribe-events .sh-btn--blue { background: var(--sh-blue); color: #fff; }
.tribe-events .sh-btn--blue:hover,
.tribe-events .sh-btn--blue:focus-visible { background: var(--sh-blue-deep); color: #fff; }

.tribe-events .sh-btn--outline { border-color: var(--sh-ink); color: var(--sh-ink); }
.tribe-events .sh-btn--outline:hover,
.tribe-events .sh-btn--outline:focus-visible { background: var(--sh-ink); color: #fff; }

/* -------------------------------------------------------------------------- Page header -------------------------------------------------------------------------- */ /*
 * Full-bleed bands.
 *
 * Astra wraps content in .ast-container (max-width 1240px) and TEC adds its own
 * container padding, so the paper bands stop short of the viewport edge. The comp runs
 * them edge to edge.
 *
 * Negative margins ONLY — do not also set width. An earlier version set
 * `width: 100vw` alongside both negative margins, which over-constrains the box: for a
 * block box margin-left + width + margin-right must equal the containing block, so the
 * browser dropped margin-right and the page overflowed to the right by exactly the
 * container's own offset (69px on staging). Leaving width auto lets it resolve to
 * container + both negative margins = exactly 100vw, with no overflow.
 *
 * The classic-scrollbar guard for this lives on BODY, above — deliberately not on
 * .tribe-events, which would clip these bands back inside the wrapper.
 */
/*
 * The guard goes on BODY, not on .tribe-events.
 *
 * Putting overflow-x:clip on .tribe-events clipped the full-bleed bands back to that
 * wrapper's box — the guard ate the thing it was guarding. Caught on staging: the bands
 * measured x=0 w=100vw but painted only inside the 1200px wrapper. Body is already the
 * full viewport width, so it clips nothing here and still catches the classic-scrollbar
 * overflow on Windows.
 *
 * Must be `clip`, not `hidden` — `hidden` creates a scroll container and breaks
 * position:sticky on the filter bar. Verified on staging: sticky still holds at 102px.
 */
body.tribe-events-page-template,
body.single-tribe_events {
  overflow-x: clip;
}

.tribe-events .sh-cal-head,
.tribe-events .sh-filter-bar,
.tribe-events .sh-submit-band {
  width: auto;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.tribe-events .sh-cal-head {
  background: var(--sh-paper);
  border-bottom: 1px solid var(--sh-rule);
  text-align: center;
  padding: 72px 36px 56px;
}

.tribe-events .sh-cal-head__eyebrow {
  display: block;
  font-family: var(--sh-futura);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--sh-gray);
  margin-bottom: 16px;
}

.tribe-events .sh-cal-head__title {
  font-family: var(--sh-futura);
  font-weight: 300;
  font-size: clamp(34px, 4.4vw, 52px);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 18px;
}

.tribe-events .sh-cal-head__title em { font-style: italic; color: var(--sh-pink); }

.tribe-events .sh-cal-head__standfirst {
  font-family: var(--sh-futura);
  font-weight: 300;
  font-size: 16.5px;
  color: #3a3a3c;
  max-width: 58ch;
  margin: 0 auto 28px;
}

.tribe-events .sh-cal-head .sh-btn { margin: 0 6px 8px; }

/* --------------------------------------------------------------------------
   Filter bar
   Sticky at 70px to sit directly under the new masthead. If the masthead
   height ever changes,
this number and the header's must move together. -------------------------------------------------------------------------- */ .tribe-events .sh-filter-bar {
  border-bottom: 1px solid var(--sh-rule);
  background: #fff;
  position: sticky;
  top: 70px;
  z-index: 30;
}

/* Clear the WP admin bar for logged-in editors. */ .admin-bar .tribe-events .sh-filter-bar { top: 102px; }

/*
 * The pills sat 20px to the left of everything below them.
 *
 * This bar is a full-bleed band, so its inner box is measured against the
 * VIEWPORT, while the list rows and the month grid are measured against Astra's
 * 1240px container minus that container's own 20px padding. Subtracting the same
 * 40px here — as a width so it holds below 1240 too, and as a max-width so it
 * caps with the container above it — puts the pills on the same left edge as the
 * first event row. Measured live: both at x=102 in a 1331px viewport.
 */
.tribe-events .sh-filter-bar__inner {
  width: calc(100% - 40px);
  max-width: calc(var(--sh-max) - 40px);
  margin: 0 auto;
  padding: 16px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.tribe-events .sh-pills { display: flex; gap: 10px; flex-wrap: wrap; }

.tribe-events .sh-pill {
  font-family: var(--sh-futura);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 9px 18px;
  border: 1px solid var(--sh-rule);
  color: var(--sh-gray);
  transition: .2s;
  text-decoration: none;
  white-space: nowrap;
}

.tribe-events .sh-pill:hover,
.tribe-events .sh-pill:focus-visible { border-color: var(--sh-blue); color: var(--sh-blue); }
.tribe-events .sh-pill.is-on { background: var(--sh-blue); border-color: var(--sh-blue); color: #fff; }

.tribe-events .sh-views { display: flex; border: 1px solid var(--sh-rule); }

.tribe-events .sh-view {
  font-family: var(--sh-futura);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 9px 18px;
  color: var(--sh-gray);
  text-decoration: none;
}

.tribe-events .sh-view.is-on { background: var(--sh-ink); color: #fff; }

/* -------------------------------------------------------------------------- Featured hero card -------------------------------------------------------------------------- */ .tribe-events .sh-featured {
  max-width: var(--sh-max);
  margin: 0 auto;
  padding: 56px 36px 8px;
}

.tribe-events .sh-feat-card {
  display: grid;
  grid-template-columns: 7fr 5fr;
  border: 1px solid var(--sh-ink);
  background: #fff;
  position: relative;
}

.tribe-events .sh-feat-card__media { overflow: hidden; }

.tribe-events .sh-feat-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}

.tribe-events .sh-feat-card__media--empty {
  background: linear-gradient(155deg, #EFE2D8 0%, #D6B69F 55%, #A47F66 100%);
  aspect-ratio: 16 / 10;
}

.tribe-events .sh-feat-card__body {
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.tribe-events .sh-feat-card__flag {
  position: absolute;
  top: 0;
  left: 48px;
  transform: translateY(-50%);
  background: var(--sh-blue);
  color: #fff;
  font-family: var(--sh-futura);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  padding: 8px 16px;
}

.tribe-events .sh-feat-card__spon {
  font-family: var(--sh-futura);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--sh-gray);
  margin-bottom: 14px;
}

.tribe-events .sh-feat-card__kicker {
  font-family: var(--sh-futura);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--sh-pink);
  display: block;
  margin-bottom: 10px;
}

.tribe-events .sh-feat-card__title {
  font-family: var(--sh-caslon);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  margin: 0 0 10px;
}

.tribe-events .sh-feat-card__link { color: inherit; text-decoration: none; }

/* Stretched link: the whole card is clickable,
markup stays valid. */ .tribe-events .sh-feat-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tribe-events .sh-feat-card__where {
  font-family: var(--sh-futura);
  font-weight: 300;
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sh-gray);
  margin-bottom: 14px;
}

.tribe-events .sh-feat-card__excerpt,
.tribe-events .sh-feat-card__excerpt p {
  font-family: var(--sh-futura);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: #3a3a3c;
  max-width: 48ch;
}

.tribe-events .sh-feat-card__excerpt { margin: 0 0 30px; }
.tribe-events .sh-feat-card__excerpt p { margin: 0 0 .8em; }
.tribe-events .sh-feat-card__excerpt p:last-child { margin-bottom: 0; }

.tribe-events .sh-feat-card__cta { align-self: flex-start; padding: 12px 28px; }

/* -------------------------------------------------------------------------- Month separator -------------------------------------------------------------------------- */ .tribe-events .sh-month {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 64px 0 12px;
  padding: 0;
}

.tribe-events .sh-month:first-child { margin-top: 40px; }

.tribe-events .sh-month__label { margin: 0; }

.tribe-events .sh-month__text {
  font-family: var(--sh-caslon);
  font-weight: 400;
  font-size: 30px;
  white-space: nowrap;
  color: var(--sh-ink);
  letter-spacing: 0;
  text-transform: none;
}

.tribe-events .sh-month__rule { height: 1px; background: var(--sh-rule); flex: 1; }

/* -------------------------------------------------------------------------- Event row Comp grid: 92px date · 260px image · 1fr body · auto actions -------------------------------------------------------------------------- */ .tribe-events .sh-event-row {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.tribe-events .sh-event {
  display: grid;
  grid-template-columns: 92px 260px 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 34px 0;
  border-bottom: 1px solid var(--sh-rule);
  position: relative;
}

/*
 * Events with no featured image emit no image element at all,
so the row has three * children instead of four. Without this the body would land in the 260px image * track and get squashed. Set by list/event.php. */ .tribe-events .sh-event--no-image { grid-template-columns: 92px 1fr auto; }

/* Date block */ .tribe-events .sh-date-block { text-align: center; }
.tribe-events .sh-date-block__time { display: block; }

.tribe-events .sh-date-block__day {
  display: block;
  font-family: var(--sh-caslon);
  font-size: 44px;
  line-height: 1;
  color: var(--sh-blue);
}

.tribe-events .sh-date-block__mon {
  display: block;
  font-family: var(--sh-futura);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--sh-pink);
  margin-top: 6px;
}

.tribe-events .sh-date-block__thru {
  display: block;
  font-family: var(--sh-futura);
  font-weight: 300;
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--sh-gray);
  margin-top: 4px;
}

/*
 * TEC's grid classes size the row's children, and they win on specificity.
 *
 * The image wrapper, the date tag and the details block all carry `tribe-common-g-col`,
 * and TEC styles them at (0,3,0) via its runtime breakpoint classes — e.g.
 * `.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-featured-image-wrapper
 *  { width: calc(var(--tec-grid-width-1-of-8) * 3) }`, which resolved to 97.5px.
 *
 * The grid tracks were correct all along (92 / 260 / 1fr / auto); the children simply
 * refused to fill them, so the image rendered at 98x65 inside a 260px column. Force
 * each child to fill its own track at (0,3,1).
 */
body .tribe-events .sh-event .tribe-events-calendar-list__event-featured-image-wrapper,
body .tribe-events .sh-event .sh-date-block,
body .tribe-events .sh-event .sh-event__body {
  width: 100%;
  max-width: none;
  flex: none;
  padding: 0;
  margin: 0;
}

/* Image */

.sh-event .tribe-events-calendar-list__event-featured-image-wrapper {
  margin: 0;
  overflow: hidden;
  background: #d8d1c2;
}

/*
 * height:auto,
not 100%. With aspect-ratio also set,
height:100% wins inside a
 * stretched grid item and the image grows to whatever the tallest cell is —
 * which blew the image up to ~280px on a 420px viewport.
 */
.sh-event .tribe-events-calendar-list__event-featured-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

/* Body */ .tribe-events .sh-event__body { min-width: 0; }

.tribe-events .sh-event__kicker {
  display: block;
  font-family: var(--sh-futura);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--sh-pink);
  margin-bottom: 8px;
}

.tribe-events .sh-event__title {
  font-family: var(--sh-caslon);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.22;
  margin: 0 0 8px;
}

.tribe-events .sh-event__title-link { color: inherit; text-decoration: none; }

/* Stretched link over the whole row. */ .tribe-events .sh-event__title-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tribe-events .sh-event:hover .sh-event__title { color: var(--sh-blue); }

.tribe-events .sh-event__where {
  font-family: var(--sh-futura);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sh-gray);
  margin-bottom: 10px;
  font-style: normal;
}

.tribe-events .sh-event__excerpt,
.tribe-events .sh-event__excerpt p {
  font-family: var(--sh-futura);
  font-weight: 300;
  font-size: 14.5px;
  color: #3a3a3c;
  max-width: 60ch;
  margin: 0;
}

/* Actions — sit above the stretched link so they stay independently clickable. */ .tribe-events .sh-event__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  position: relative;
  z-index: 2;
}

.tribe-events .sh-event__details-link {
  font-family: var(--sh-futura);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sh-blue);
  border-bottom: 1px solid var(--sh-blue);
  padding-bottom: 3px;
  white-space: nowrap;
}

.tribe-events .sh-event:hover .sh-event__details-link { color: var(--sh-pink); border-color: var(--sh-pink); }



/* -------------------------------------------------------------------------- Between-month advertisement -------------------------------------------------------------------------- */ .tribe-events .sh-list-ad { list-style: none; padding: 56px 0 8px; }

.tribe-events .sh-ad-slot { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.tribe-events .sh-ad-slot__tag {
  font-family: var(--sh-futura);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--sh-gray);
}

.tribe-events .sh-ad-slot__box {
  background: var(--sh-paper);
  border: 1px solid var(--sh-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
}

.tribe-events .sh-ad-slot__box--728 { width: 728px; max-width: 100%; }

/* -------------------------------------------------------------------------- Submit band -------------------------------------------------------------------------- */ .tribe-events .sh-submit-band {
  /* margin-top only. A `margin: 88px 0 0` shorthand here reset margin-left/right and
     silently cancelled this band's full-bleed, while the other two bands kept theirs. */
  margin-top: 88px;
  margin-bottom: 0;
  background: #FFFFFF;
  border-top: 1px solid var(--sh-rule);
}

.tribe-events .sh-submit-band__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 84px 36px;
}

.tribe-events .sh-submit-band__title {
  font-family: var(--sh-futura);
  font-weight: 300;
  font-size: 32px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.tribe-events .sh-submit-band__title em { font-style: italic; color: var(--sh-pink); }

.tribe-events .sh-submit-band__lede {
  font-family: var(--sh-futura);
  font-weight: 300;
  font-size: 19px;
  color: #3a3a3c;
  margin: 0 0 14px;
}

.tribe-events .sh-submit-band__fine {
  font-family: var(--sh-futura);
  font-weight: 300;
  font-size: 15px;
  color: var(--sh-gray);
  max-width: 56ch;
  margin: 0 auto 30px;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.tribe-events .tribe-events-c-nav a,
.tribe-events .tribe-events-c-nav button,
.tribe-events .tribe-events-c-nav__list-item a,
.tribe-events .tribe-events-c-nav__list-item button,
.tribe-events .tribe-events-c-nav__list-item span {
  font-family: var(--sh-futura);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sh-blue);
  /* Themes style <a class="...__next"> and <button> as chunky buttons. Strip it. */
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  min-height: 0;
}

.tribe-events .tribe-events-c-nav a:hover,
.tribe-events .tribe-events-c-nav button:hover,
.tribe-events .tribe-events-c-nav__list-item a:hover,
.tribe-events .tribe-events-c-nav__list-item button:hover { color: var(--sh-pink); background: none; }

.tribe-events .tribe-events-c-nav__list-item--disabled span { color: var(--sh-gray); }

/* --------------------------------------------------------------------------
   MONTH VIEW

   TEC renders month as a <table>: thead.__header > th.__header-column,
   tbody.__body > tr.__week > td.__day, and inside each day either
   .__day-cell--mobile (a <button>) or .__day-cell--desktop.

   Three things about this grid caught me out and are worth knowing before
   editing it — all verified live against TEC 6.17.1:

   1. It is table MARKUP but not table LAYOUT. Each tr.__week is
      `display: grid` with seven equal tracks and an explicit
      `grid-template-rows`, so the row height comes from the grid, NOT from any
      height you set on td.__day. Setting one there does nothing; overriding the
      grid row makes rows ragged, because the value TEC computes is a clamp that
      is already holding the tallest cell in check.
   2. `border-collapse` is on, so PADDING on the table is ignored. Margin is the
      only way to inset it — hence width + margin below rather than padding.
   3. TEC sizes and spaces this at (0,3,0) through its runtime breakpoint classes
      (`.tribe-common--breakpoint-medium.tribe-events ...`), which outranks a
      two-class rule. Where that matters the selector carries a `body` prefix.
   -------------------------------------------------------------------------- */

/*
 * Line the grid up with the list rows and the category pills.
 *
 * Astra's column is 1240 wide with 20px padding, so TEC's l-container is 1200.
 * The list <ul> adds 36px of its own padding, putting row content 36px inside
 * that. The table has to match, or the month view sits 36px wider than the list
 * and the page visibly jumps when you toggle between them. Measured live: both
 * now start at the same x and are the same width.
 */
body .tribe-events-view--month .tribe-events-calendar-month {
  width: calc(100% - 72px);
  margin-left: 36px !important;
  margin-right: 36px !important;
  margin-top: 8px;
  margin-bottom: 56px;
  border-collapse: collapse;
}

/* ---- Weekday header row ---- */

.tribe-events-view--month th.tribe-events-calendar-month__header-column {
  padding: 0 0 12px;
  border: 0;
  text-align: left;
  position: relative;
}

/*
 * TEC prints a single letter — M T W T F S S — which is fine for a utility
 * calendar and thin for an editorial one. The full day name is already in the
 * markup twice: once as the visible letter and once in a .screen-reader-text
 * span, plus a three-letter `abbr` attribute on the <th> itself.
 *
 * Un-hiding the screen-reader span was the obvious move and it fails: Astra
 * clips .screen-reader-text with rules this cannot outrank, so the header row
 * came out completely blank. Reading the <th>'s own `abbr` through attr()
 * cannot fail that way — the value is on the element the pseudo belongs to.
 *
 * visibility:hidden rather than display:none on the letter so the column keeps
 * its box, and the screen-reader span still reads "Monday" to assistive tech.
 */
.tribe-events-view--month .tribe-events-calendar-month__header-column-title span[aria-hidden="true"] {
  visibility: hidden;
}

.tribe-events-view--month th.tribe-events-calendar-month__header-column::after {
  content: attr(abbr);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--sh-futura);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sh-gray);
  line-height: 1;
  white-space: nowrap;
}

.tribe-events-view--month .tribe-events-calendar-month__header-column-title {
  font-family: var(--sh-futura);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sh-gray);
  line-height: 1;
}

/* ---- Day cells ---- */

/* No height here on purpose — see note 1 at the top of this section. */
.tribe-events-view--month .tribe-events-calendar-month__day {
  border: 1px solid var(--sh-rule);
  background: #fff;
  vertical-align: top;
  padding: 0;
}

/*
 * Leading and trailing days from the neighbouring months. Paper fill and a muted
 * numeral so the current month reads as the subject and the spill-over does not.
 */
.tribe-events-view--month .tribe-events-calendar-month__day--other-month {
  background: var(--sh-paper);
}

.tribe-events-view--month .tribe-events-calendar-month__day--other-month .tribe-events-calendar-month__day-date-daynum {
  color: var(--sh-gray);
}

.tribe-events-view--month .tribe-events-calendar-month__day-cell {
  padding: 10px 10px 12px;
  background: none;
  border: 0;
  box-sizing: border-box;
}

.tribe-events-view--month .tribe-events-calendar-month__day-date {
  margin: 0 0 8px;
  font-family: var(--sh-caslon);
}

.tribe-events-view--month .tribe-events-calendar-month__day-date-daynum,
.tribe-events-view--month .tribe-events-calendar-month__day-date-daynum a {
  font-family: var(--sh-caslon);
  font-weight: 400;
  font-size: 19px;
  line-height: 1;
  color: var(--sh-ink);
  text-decoration: none;
  border: 0;
}

.tribe-events-view--month .tribe-events-calendar-month__day-date-daynum a:hover { color: var(--sh-blue); }

/*
 * Today: a short pink rule under the numeral rather than a filled chip. A chip
 * competes with the blue multi-day bars for attention inside the same cell.
 */
.tribe-events-view--month .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum,
.tribe-events-view--month .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum a {
  color: var(--sh-blue);
  position: relative;
  display: inline-block;
}

.tribe-events-view--month .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 16px;
  height: 2px;
  background: var(--sh-pink);
}

/* ---- Events inside a day ---- */

.tribe-events-view--month .tribe-events-calendar-month__events { margin: 0; }

.tribe-events-view--month .tribe-events-calendar-month__calendar-event {
  margin: 0 0 7px;
  padding: 0;
  border: 0;
}

.tribe-events-view--month .tribe-events-calendar-month__calendar-event-datetime,
.tribe-events-view--month .tribe-events-calendar-month__calendar-event-datetime time {
  font-family: var(--sh-futura);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sh-gray);
  line-height: 1.2;
}

.tribe-events-view--month .tribe-events-calendar-month__calendar-event-title,
.tribe-events-view--month .tribe-events-calendar-month__calendar-event-title-link {
  font-family: var(--sh-caslon);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--sh-ink);
  text-decoration: none;
  border: 0;
  margin: 1px 0 0;
  /* Titles here are editorial and long. Two lines then ellipsis; a third line
     pushes past the grid's fixed row height and spills into the week below. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tribe-events-view--month .tribe-events-calendar-month__calendar-event-title-link:hover { color: var(--sh-blue); }

/* Multi-day events render as a bar across the week, not as a titled block.
   Do NOT add overflow:hidden to the day cell to contain anything — these bars
   are drawn wider than their cell on purpose and clipping erases them. */
.tribe-events-view--month .tribe-events-calendar-month__multiday-event-bar {
  background: var(--sh-blue);
  border-radius: 0;
  border: 0;
}

.tribe-events-view--month .tribe-events-calendar-month__multiday-event-bar-inner {
  background: none;
  padding: 5px 8px;
}

.tribe-events-view--month .tribe-events-calendar-month__multiday-event-bar-title {
  font-family: var(--sh-futura);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tribe-events-view--month .tribe-events-calendar-month__multiday-event--past .tribe-events-calendar-month__multiday-event-bar { opacity: .45; }

.tribe-events-view--month .tribe-events-calendar-month__more-events-link {
  font-family: var(--sh-futura);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sh-blue);
  text-decoration: none;
  border: 0;
}

.tribe-events-view--month .tribe-events-calendar-month__more-events-link:hover { color: var(--sh-pink); }

/* Tooltip on hover — TEC's own component, restyled rather than replaced. */
.tribe-events-view--month .tribe-events-calendar-month__calendar-event-tooltip-datetime {
  font-family: var(--sh-futura);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sh-gray);
}

.tribe-events-view--month .tribe-events-calendar-month__calendar-event-tooltip-title,
.tribe-events-view--month .tribe-events-calendar-month__calendar-event-tooltip-title-link {
  font-family: var(--sh-caslon);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: var(--sh-ink);
  text-decoration: none;
  border: 0;
}

.tribe-events-view--month .tribe-events-calendar-month__calendar-event-tooltip-description {
  font-family: var(--sh-caslon-text);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sh-gray);
}

/* ---- Month navigation ---- */

/*
 * The top bar is the ONLY month navigation TEC renders: prev / next carets, a
 * "This Month" button and the month datepicker. .tribe-events-c-nav is empty on
 * month view. An earlier revision hid .tribe-events-c-top-bar across every view
 * to kill the redundant datepicker on list — which left month view with no way
 * to change month at all. The suppression is now list-only (see the top of this
 * file) and the bar is styled here.
 */
.tribe-events-view--month .tribe-events-c-top-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  width: calc(100% - 72px);
  margin: 0 36px 4px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--sh-rule);
  min-height: 0;
}

/* Source order is nav, today, datepicker, actions. order:-1 puts the month name
   first, where the eye goes, and margin-left:auto on the nav gathers the
   controls at the right. */
.tribe-events-view--month .tribe-events-c-top-bar__datepicker {
  order: -1;
  flex: 0 0 auto;
  margin: 0;
}

.tribe-events-view--month .tribe-events-c-top-bar__nav { margin-left: auto; }

/*
 * __actions is empty on month view and already carries tribe-common-a11y-hidden,
 * but TEC also gives it `margin-left: auto` at (0,3,0). Two auto margins split
 * the free space between them, so the nav stopped in the middle of the bar
 * instead of at the right edge. Zero it and take the empty box out of the flow.
 */
body .tribe-events-view--month .tribe-events-c-top-bar__actions {
  margin-left: 0 !important;
  display: none;
}

.tribe-events-view--month .tribe-events-c-top-bar__datepicker-button {
  font-family: var(--sh-caslon);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sh-ink);
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0;
  min-height: 0;
}

.tribe-events-view--month .tribe-events-c-top-bar__datepicker-button:hover { color: var(--sh-blue); }

.tribe-events-view--month .tribe-events-c-top-bar__datepicker-button-icon-svg { margin-left: 8px; }
.tribe-events-view--month .tribe-events-c-top-bar__datepicker-button-icon-svg .tribe-common-c-svgicon__svg-fill { fill: var(--sh-blue); }

.tribe-events-view--month .tribe-events-c-top-bar__nav-list { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }

.tribe-events-view--month .tribe-events-c-top-bar__nav-link,
.tribe-events-view--month .tribe-events-c-top-bar__today-button {
  font-family: var(--sh-futura);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sh-blue);
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0;
  padding: 6px 4px;
  text-decoration: none;
}

.tribe-events-view--month .tribe-events-c-top-bar__today-button { padding: 6px 0 6px 12px; }

.tribe-events-view--month .tribe-events-c-top-bar__nav-link:hover,
.tribe-events-view--month .tribe-events-c-top-bar__today-button:hover { color: var(--sh-pink); background: none !important; }

.tribe-events-view--month .tribe-events-c-top-bar__nav-link .tribe-common-c-svgicon__svg-fill { fill: var(--sh-blue); }
.tribe-events-view--month .tribe-events-c-top-bar__nav-link:hover .tribe-common-c-svgicon__svg-fill { fill: var(--sh-pink); }

/* The mobile month input shares the datepicker container with the desktop label.
   TEC hides it by breakpoint; be explicit, because when both showed the button
   read "8/2026 August 2026". */
.tribe-events-view--month .tribe-events-c-top-bar__datepicker-mobile { display: none; }

/* ---- "Nothing this month" notice ---- */

/*
 * TEC's empty-view notice, restyled rather than hidden.
 *
 * It is suppressed on LIST (where the hero is already carrying the page and the notice
 * reads as a bug sitting under a real event) but kept on MONTH, because there it is the
 * only thing explaining an empty grid and the only link to the next month that has
 * events in it. Left unstyled it arrived as default-theme body text with a stock grey
 * icon in the middle of the brand type.
 *
 * The :not(--day) matters. TEC emits this same component up to 35 more times per month
 * page — one per day cell, carrying tribe-events-header__messages--day — to feed the
 * mobile tap-a-day panel. Without the exclusion every empty day got a 28px Paper box
 * inside it on mobile. Only the page-level notice is styled here.
 */
.tribe-events-view--month .tribe-events-header__messages:not(.tribe-events-header__messages--day) {
  width: calc(100% - 72px);
  margin: 0 36px 48px;
  padding: 28px 32px;
  background: var(--sh-paper);
  border: 0;
  box-sizing: border-box;
  /* TEC centres this. Everything else on the page hangs off the same left edge. */
  text-align: left;
}

.tribe-events-view--month .tribe-events-header__messages:not(.tribe-events-header__messages--day) .tribe-events-c-messages__message {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  text-align: left;
  gap: 0;
  font-family: var(--sh-caslon-text);
  font-size: 16px;
  line-height: 1.6;
  color: var(--sh-ink);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}

/* The stock "not found" glyph is a grey crossed-out calendar — a warning icon for a
   month that simply has nothing booked. The sentence says it better on its own. */
.tribe-events-view--month .tribe-events-header__messages:not(.tribe-events-header__messages--day) .tribe-events-c-messages__message-icon-svg {
  display: none;
}

.tribe-events-view--month .tribe-events-header__messages:not(.tribe-events-header__messages--day) .tribe-events-c-messages__message-list-item-link,
.tribe-events-view--month .tribe-events-header__messages:not(.tribe-events-header__messages--day) a {
  font-family: inherit;
  color: var(--sh-blue);
  text-decoration: none;
  border-bottom: 1px solid var(--sh-rule);
}

.tribe-events-view--month .tribe-events-header__messages:not(.tribe-events-header__messages--day) .tribe-events-c-messages__message-list-item-link:hover,
.tribe-events-view--month .tribe-events-header__messages:not(.tribe-events-header__messages--day) a:hover {
  color: var(--sh-pink);
  border-bottom-color: var(--sh-pink);
}

@media (max-width: 980px) {
  .tribe-events-view--month .tribe-events-header__messages:not(.tribe-events-header__messages--day) {
    width: calc(100% - 48px);
    margin-left: 24px;
    margin-right: 24px;
    padding: 22px 24px;
  }
}

/* ---- Month responsive ---- */

@media (max-width: 980px) {
  body .tribe-events-view--month .tribe-events-calendar-month {
    width: calc(100% - 48px);
    margin-left: 24px !important;
    margin-right: 24px !important;
  }

  .tribe-events-view--month .tribe-events-c-top-bar { width: calc(100% - 48px); margin-left: 24px; margin-right: 24px; }

  .tribe-events-view--month .tribe-events-calendar-month__day-date-daynum { font-size: 16px; }
}

/*
 * Below TEC's own mobile breakpoint the grid becomes a tap-a-day interface: the
 * cell collapses to the __day-cell--mobile button, only the numeral and an
 * event-count dot are visible, and the events move to an expandable panel under
 * the grid. Most of the cell styling above stops applying, so this block only
 * keeps the type and the dot on brand rather than re-laying anything out.
 */
@media (max-width: 767px) {
  .tribe-events-view--month .tribe-events-calendar-month__day-cell--mobile { padding: 8px 4px; }
  .tribe-events-view--month .tribe-events-calendar-month__day-date-daynum { font-size: 15px; }
  .tribe-events-view--month .tribe-events-c-top-bar__datepicker-button { font-size: 21px; }
  .tribe-events-view--month .tribe-events-c-top-bar { flex-wrap: wrap; gap: 10px; }
  .tribe-events-view--month .tribe-events-calendar-month__mobile-events-icon--event { background: var(--sh-blue); }
  .tribe-events-view--month .tribe-events-calendar-month__mobile-day-heading { font-family: var(--sh-caslon); font-weight: 400; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .tribe-events .sh-event { grid-template-columns: 92px 200px 1fr; }
  .tribe-events .sh-event--no-image { grid-template-columns: 92px 1fr; }
  .tribe-events .sh-event__actions {
    grid-column: 2 / -1;
    flex-direction: row;
    justify-content: flex-start;
    gap: 24px;
    align-items: center;
  }
}

@media (max-width: 980px) {
  .tribe-events .sh-feat-card { grid-template-columns: 1fr; }
  .tribe-events .sh-feat-card__body { padding: 40px 28px 32px; }
  .tribe-events .sh-feat-card__flag { left: 28px; }

  .tribe-events .sh-event {
    grid-template-columns: 70px 1fr;
    gap: 20px 24px;
    align-items: start;
  }

  .sh-event .tribe-events-calendar-list__event-featured-image-wrapper {
    grid-column: 1 / -1;
    order: -1;
  }

  .sh-event .tribe-events-calendar-list__event-featured-image { aspect-ratio: 16 / 9; }

  .tribe-events .sh-event__actions { grid-column: 1 / -1; }

  .tribe-events .sh-date-block__day { font-size: 34px; }

  .tribe-events .sh-filter-bar { position: static; }

  .tribe-events .sh-cal-head { padding: 52px 24px 40px; }

  .tribe-events .tribe-events-calendar-list,
.tribe-events .tribe-events-c-nav,
.tribe-events .sh-filter-bar__inner,
.tribe-events .sh-featured { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 600px) {
  .tribe-events .sh-month { margin-top: 44px; gap: 16px; }
  .tribe-events .sh-month__text { font-size: 24px; }
  .tribe-events .sh-event__title { font-size: 20px; }
  .tribe-events .sh-cal-head .sh-btn { display: block; margin: 0 auto 10px; max-width: 280px; }
}

/* --------------------------------------------------------------------------
   Reduced motion / focus
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tribe-events .sh-btn,
.tribe-events .sh-pill { transition: none; }
}

.tribe-events .sh-event__title-link:focus-visible,
.tribe-events .sh-feat-card__link:focus-visible { outline: 2px solid var(--sh-pink); outline-offset: 4px; }


/* ==========================================================================
   SINGLE EVENT PAGE
   CSS-only pass: type, colour, spacing. No template overrides — single events
   use TEC's LEGACY template system (Tribe__Templates::getTemplateHierarchy),
   which never consults `tribe_template_path_list`, so this plugin's template
   folder does not reach them. CSS does.

   Selectors are prefixed `.single-tribe_events` to match the specificity TEC's
   own tribe-events-single-full.css uses — e.g.
   `.single-tribe_events .tribe-events-single .tribe-events-event-meta`
   at (0,3,0), which beat a plain (0,2,0) rule and silently dropped the panel
   background. Note that stylesheet loads on single events regardless of the
   Skeleton Styles setting; that setting only governs the calendar views.
   ========================================================================== */

/* Astra's .ast-container is display:flex, and TEC's section is a flex item that
   shrinks to its content — the column came out 569px inside a 1240px container.
   Let it grow to its own 1048px max and centre. */
.single-tribe_events #tribe-events-pg-template { flex: 1 1 auto; width: 100%; margin-left: auto; margin-right: auto; }

/*
 * ONE continuous surface — this is the "awkward line".
 *
 * TEC renders the back link, title and date line OUTSIDE Astra's article wrapper, and
 * Astra paints that wrapper white on a Paper page. So the page began on Paper and a
 * white box started partway down, at the featured image, leaving a hard Paper→white
 * edge straight across the column. It is not a border — which is why it survived every
 * border, outline, shadow and pseudo-element scan — and it moved with the content,
 * which is why it looked like a different bug each time.
 *
 * The same split also left the title sitting 40px to the left of the body content,
 * since only the inner wrapper carried Astra's padding.
 *
 * Moving the surface and the padding up to .tribe-events-single makes the whole event
 * page one white block with everything on a single left edge.
 */
.single-tribe_events .tribe-events-single {
  max-width: none;
  background: #fff;
  padding: 40px;
  box-sizing: border-box;
}

.single-tribe_events .ast-article-single {
  background: #fff;
  padding: 0;
}

.single-tribe_events .tribe-events-single .tribe-events-back { margin: 0 0 28px; }
.single-tribe_events .tribe-events-single .tribe-events-back a { font-family: var(--sh-futura); font-weight: 500; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--sh-blue); text-decoration: none; border-bottom: 1px solid transparent; }
.single-tribe_events .tribe-events-single .tribe-events-back a:hover { color: var(--sh-pink); border-bottom-color: var(--sh-pink); }

.single-tribe_events .tribe-events-single .tribe-events-single-event-title { font-family: var(--sh-caslon) !important; font-weight: 400; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; letter-spacing: 0; text-transform: none; color: var(--sh-ink); margin: 0 0 14px; max-width: 22ch; }

.single-tribe_events .tribe-events-single .tribe-events-schedule { background: none; border: 0; padding: 0; margin: 0 0 34px; }
.single-tribe_events .tribe-events-single .tribe-events-schedule h2,
.single-tribe_events .tribe-events-single .tribe-events-schedule span { font-family: var(--sh-futura); font-weight: 300; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--sh-gray); }

.single-tribe_events .tribe-events-single .tribe-events-single-event-description { font-family: var(--sh-caslon-text); font-size: 17px; line-height: 1.7; color: var(--sh-ink); max-width: 68ch; }
.single-tribe_events .tribe-events-single .tribe-events-single-event-description p { margin: 0 0 1.15em; font-family: inherit; font-size: inherit; line-height: inherit; }
.single-tribe_events .tribe-events-single .tribe-events-single-event-description h2,
.single-tribe_events .tribe-events-single .tribe-events-single-event-description h3 { font-family: var(--sh-caslon); font-weight: 400; line-height: 1.2; margin: 1.6em 0 .5em; }
.single-tribe_events .tribe-events-single .tribe-events-single-event-description a { color: var(--sh-blue); text-decoration: none; border-bottom: 1px solid var(--sh-rule); }
.single-tribe_events .tribe-events-single .tribe-events-single-event-description a:hover { color: var(--sh-pink); border-bottom-color: var(--sh-pink); }
.single-tribe_events .tribe-events-single .tribe-events-single-event-description img { height: auto; max-width: 100%; }

/* Details / Organizer panel. TEC 6.17 uses ul.tribe-events-meta-list with
   label/value spans — NOT a dl/dt/dd, which an earlier draft assumed. */
/*
 * Details / Organizer — deliberately NOT a boxed panel.
 *
 * It was a Paper panel with a 1px rule, which on Astra sits on a white article block
 * inside a Paper page. The fill was so close to both that the box never read as a box —
 * only its top border registered, as a stray horizontal rule hanging above "DETAILS".
 * No fill and no border means nothing to misread; the pink section labels and the
 * whitespace do the separating.
 *
 * width:100% + border-box is still load-bearing: TEC's single skeleton sets
 * `.tribe-events-event-meta { display:flex }` and only grants `width:100%` to
 * `.primary`, which this block does not carry — without it it collapses to 384px in a
 * 1008px column and the two groups stack.
 */
.single-tribe_events .tribe-events-single .tribe-events-event-meta { background: none; border: 0; margin: 40px 0 0; padding: 0; font-family: var(--sh-futura); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px 48px; width: 100%; max-width: none; float: none; box-sizing: border-box; }
.single-tribe_events .tribe-events-single .tribe-events-meta-group { width: auto; float: none; padding: 0; margin: 0; box-sizing: border-box; }
.single-tribe_events .tribe-events-single .tribe-events-single-section-title { font-family: var(--sh-futura) !important; font-weight: 500; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--sh-pink); margin: 0 0 16px; }
.single-tribe_events .tribe-events-single .tribe-events-meta-list { list-style: none; margin: 0; padding: 0; }
.single-tribe_events .tribe-events-single .tribe-events-meta-item { display: block; margin: 0 0 14px; padding: 0; }
.single-tribe_events .tribe-events-single .tribe-events-meta-label { display: block; font-family: var(--sh-futura); font-weight: 500; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--sh-gray); margin: 0 0 3px; }
.single-tribe_events .tribe-events-single .tribe-events-meta-value { display: block; font-family: var(--sh-caslon-text); font-size: 15.5px; line-height: 1.45; color: var(--sh-ink); margin: 0; }
.single-tribe_events .tribe-events-single .tribe-events-meta-value a { color: var(--sh-blue); text-decoration: none; border-bottom: 1px solid var(--sh-rule); word-break: break-word; }
.single-tribe_events .tribe-events-single .tribe-events-meta-value a:hover { color: var(--sh-pink); border-bottom-color: var(--sh-pink); }
.single-tribe_events .tribe-events-single abbr,
.single-tribe_events .tribe-events-single .tribe-events-abbr { text-decoration: none; border: 0; }

.single-tribe_events .tribe-events-single .tribe-events-c-subscribe-dropdown__button { border: 1px solid var(--sh-ink) !important; background: none !important; border-radius: 0 !important; }
/*
 * The label inside the subscribe control is a real <button>, so it inherits Astra's
 * global button styling — which is brand Blue now that the palette is set. Combined with
 * an Ink label that gave black text on a blue fill, unreadable. The bordered wrapper
 * around it already supplies the outline, so this button just needs to be transparent.
 */
.single-tribe_events .tribe-events-single .tribe-events-c-subscribe-dropdown__button-text,
.single-tribe_events .tribe-events-single .tribe-events-c-subscribe-dropdown__button-text:hover,
.single-tribe_events .tribe-events-single .tribe-events-c-subscribe-dropdown__button-text:focus {
  font-family: var(--sh-futura);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sh-ink) !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0;
}

.single-tribe_events .tribe-events-single .tribe-events-c-subscribe-dropdown__button:hover .tribe-events-c-subscribe-dropdown__button-text { color: var(--sh-blue) !important; }
.single-tribe_events .tribe-events-single .tribe-events-c-subscribe-dropdown__list-item-link { font-family: var(--sh-futura); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--sh-blue); }

.single-tribe_events .tribe-events-single .tribe-events-sub-nav a { font-family: var(--sh-futura); font-weight: 400; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--sh-blue); text-decoration: none; }
.single-tribe_events .tribe-events-single .tribe-events-sub-nav a:hover { color: var(--sh-pink); }

@media (max-width: 782px) {
  .single-tribe_events .tribe-events-single .tribe-events-event-meta { gap: 26px; }
}

/* --------------------------------------------------------------------------
   Featured image hero (single event)

   TEC's single-event.php already outputs the featured image at line 109 via
   tribe_event_featured_image( $id, 'full', false ) — a bare <img class="wp-post-image">
   with no wrapper, sitting between the date line and the description. So this needs
   no template work, only CSS. If no image renders, the event simply has none set.

   Sponsored placements: advertising will want this to carry a sold event, so it is
   sized as a proper hero rather than an inline illustration.
   -------------------------------------------------------------------------- */
.single-tribe_events .tribe-events-single img.wp-post-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0 0 36px;
  background: var(--sh-rule);
}

/* Portrait and square source images would be brutally cropped at 16/9, so on
   narrow viewports let the image find its own height instead. */
@media (max-width: 600px) {
  .single-tribe_events .tribe-events-single img.wp-post-image { aspect-ratio: 4 / 3; margin-bottom: 26px; }
}

/* Sponsored flag. Emitted by PHP on the tribe_events_single_event_before_the_content
   hook (see inc/events-calendar.php) rather than via CSS `content`, so the string is
   translatable and real text for screen readers. TEC exposes no hook above the title,
   so it sits under the featured image, above the description — which reads correctly
   as a disclosure line anyway. */
.single-tribe_events .tribe-events-single .sh-sponsored-flag {
  font-family: var(--sh-futura);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--sh-gray);
  margin: 0 0 18px;
}

/*
 * TEC wraps the prev/next links in #tribe-events-footer with `1px solid #E4E4E4` at the
 * full 1008px column width — a grey that is in nobody's palette and a rule wider than
 * anything else on the page. Bring it into the brand and match the content measure.
 */
.single-tribe_events #tribe-events-footer {
  border-top: 1px solid var(--sh-rule);
  padding-top: 28px;
  margin-top: 8px;
}