/* Event page.
   Taken from page 157's page CSS, which is where these rules were measured
   against the Corporate Cornhole League frame while that event was a one-off
   builder page. Enqueued only on a tg_event single, so 157 keeps its own copy
   and nothing shifts under it.

   The registration-form rules are deliberately NOT here: the form is specific
   to Cornhole, it does not submit anywhere yet (STATE #1), and 157 still
   carries both the markup and the CSS for it.

   Tokens + components live in thegreen.css. */
.tg-event{background:var(--olive);}

/* Left Column is a 28px stack — the spotlight and event pages' value, where
   the eatery page uses 30. */
.wpb-content-wrapper .tg-backlink{margin-bottom:28px;}
/* `.wpb-content-wrapper .tg-eyebrow{margin:0}` in the plugin sheet is a
   two-class rule, so a one-class .tg-event-meta loses to it and the eyebrow
   sits hard against the title. */
.wpb-content-wrapper .tg-event-meta{margin:0 0 28px;}
/* The file draws the date/frequency line as a 512x34 box — two 17px lines —
   where this renders one line with bullet separators. Reserving the box the
   file draws, rather than re-breaking the client's copy, puts every element
   below it back on the frame's y. */
.wpb-content-wrapper .tg-event-meta{min-height:34px;}
.wpb-content-wrapper .tg-lead-title{margin:0 0 28px;}
.tg-lead-body{margin:0 0 28px;}
.tg-lead-body p{font-size:16px;line-height:1.5;margin:0 0 24px;}
.tg-lead-body p:last-child{margin-bottom:0;}
/* The editor content can carry a subheading; the frame sets those as bold
   body text rather than at the heading scale. */
.tg-lead-body h2,.tg-lead-body h3,.tg-lead-body h4{
  font-size:16px;font-weight:700;line-height:1.5;margin:0 0 24px;}

/* The sub-groups (Details, Upcoming Dates) are 18px bold headings, each 28
   below the previous block — the column's own stack gap. The gap BETWEEN a
   subhead and its content differs per group in the file (8 under Details,
   12 under Upcoming Dates), so they carry a modifier class each. */
.wpb-content-wrapper .tg-event-subhead{font-size:18px;font-weight:700;line-height:1.2;
  margin:28px 0 24px;}
.wpb-content-wrapper .tg-subhead-details{margin-bottom:8px;}
.wpb-content-wrapper .tg-subhead-dates{margin-bottom:12px;}
/* Details is 16px at lh100% (a 19px line); the Upcoming Dates list beside it
   is explicitly lh1.5. Same element, two metrics, both straight off the
   spec. */
.tg-event-list{margin:0;}
.tg-event-list p{font-size:16px;line-height:19px;margin:0;}
.tg-event-list-dates p{line-height:24px;}

/* Details renders as a real <ul>, which the frame draws with bullets.
   The li keeps the p's 19px metric so the block still measures the frame's
   height for the same number of lines. The indent is padding on the list
   rather than a margin, so the bullet sits in the gutter and wrapped lines
   align under the first character instead of under the marker. */
.tg-event-list ul{margin:0;padding:0 0 0 20px;list-style:disc outside;}
.tg-event-list li{font-size:16px;line-height:19px;margin:0;}
/* An item long enough to wrap would otherwise run straight into the next
   one — six tight lines read as one paragraph with bullets sprinkled in. Only
   applied between items, so a list of short items keeps the frame's height. */
.tg-event-list li + li{margin-top:6px;}
.tg-event-list li::marker{color:inherit;}
.wpb-content-wrapper .tg-event-cta{margin:28px 0 0;}
/* The Image Column is 832 tall against a much longer copy column, so it stops
   short rather than stretching — same as the file. */
.tg-event-media img{aspect-ratio:640/832;}

/* Gallery — Image Grid is 606 / 260 / 270 with gap=16 over a 348px band. */
.tg-eventgallery{background:var(--surface-sage-soft);}
.tg-photogrid{display:flex;gap:16px;padding:88px var(--gutter);}
.tg-photogrid::before,.tg-photogrid::after{display:none;}
.tg-photogrid > .wpb_column{float:none;width:auto;}
.tg-photogrid > .tg-photo-l{flex:606 1 0;}
.tg-photogrid > .tg-photo-p{flex:260 1 0;}
.tg-photogrid > .tg-photo-s{flex:270 1 0;}
/* `.vc_single_image-wrapper` is an inline-block and shrink-wraps to the
   image's intrinsic size, so a portrait image would otherwise keep its own
   width inside a flex track sized for something else. */
.tg-photogrid .wpb_single_image,
.tg-photogrid .vc_figure,
.tg-photogrid .vc_single_image-wrapper{display:block;width:100%;}
.wpb-content-wrapper .tg-photogrid img{width:100%;height:348px;object-fit:cover;}

@media (max-width:900px){
  .tg-event-media img{aspect-ratio:16/10;}
  .tg-photogrid{flex-wrap:wrap;padding:56px var(--gutter);}
  .tg-photogrid > .wpb_column{flex:1 1 100%;}
  .wpb-content-wrapper .tg-photogrid img{height:240px;}
}