/* Mad Cow Comedy theme — supplemental rules.
   Everything the original static mockup already styled lives in
   style.css / css/shows.css / css/show-details.css / css/workshops.css
   / css/content-page.css, all copied verbatim. This file only adds the
   handful of things those files don't cover: the show-type badge and
   host/lineup performer strip the Confirmed Show Events plugin's spec
   requires on every event card, and a couple of small template needs
   (star ratings, workshop card date badge parity with events). */

.card-type-badge {
	display: inline-block;
	font-size: .75em;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #757575;
	margin: 0 0 .5em;
}

.card-performers {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	margin: .75em 0;
}

.card-performer {
	display: inline-flex;
	align-items: center;
	gap: .375em;
	font-size: .8125em;
	font-weight: 600;
	background: rgba(255, 255, 255, .6);
	border-radius: 2em;
	padding: .125em .625em .125em .125em;
}

.card-performer-photo,
.card-performer-photo--placeholder {
	width: 1.75em;
	height: 1.75em;
	border-radius: 50%;
	object-fit: cover;
	background: #ddd;
	flex-shrink: 0;
	display: block;
}

.card-performer--host {
	background: rgba(255, 211, 0, .55);
}

/* Workshop archive re-uses the shows-grid filter layout classes from
   shows.css for its optional list wrapper; no new rules needed beyond
   what workshops.css already defines. */

/* Simple, unobtrusive image-field preview inside admin meta boxes. */
.mcc-image-field__preview img {
	border: 1px solid #ddd;
	border-radius: 4px;
	display: block;
}

/* The vendored show-details.css sets a fixed height on .detail-card at
   the >=1359px breakpoint (min-width:84.9376em), sized for the original
   mockup's fixed two-performer content. Every other breakpoint already
   has a later auto-height override in show-details.css itself; this is
   the one range that doesn't, so variable-length performer content
   (however many acts are actually booked) overflows past the card onto
   the sections below at wide desktop widths. Loaded after
   show-details.css (see MCC_Theme_Setup::enqueue_front_end_assets()),
   so this reliably wins the cascade. */
@media (min-width: 84.9376em) {
	.detail-card {
		height: auto;
		min-height: 0;
	}
}

/* Event card background is driven by show type rather than the
   original mockup's alternating yellow/pink pattern. The base
   .event-card rule in style.css uses the yellow gradient as its
   default; that gradient is moved to a dedicated .event-yellow class
   here, and the plain default becomes a flat cream fill for any show
   type that isn't explicitly "ics" (pink) or "solos-at-the-shed"
   (yellow) -- see template-parts/event-card.php.

   IMPORTANT: .event-pink/.event-yellow must be written as compound
   selectors (.event-card.event-pink, not .event-pink alone). A plain
   `.event-card { background: ... }` rule here has the SAME specificity
   as style.css's plain `.event-pink { background: ... }` rule, and
   since custom.css always loads last, the plain .event-card rule here
   would win the cascade and silently override pink's background back
   to the default on any card that has both classes -- exactly the bug
   this fixes. The compound selector's higher specificity guarantees
   the color variant wins regardless of load order. */
.event-card {
	background: var(--cream);
}

.event-card.event-yellow {
	background: linear-gradient(#ffd300, var(--cream) 61%);
}

.event-card.event-pink {
	background: linear-gradient(var(--pink), var(--cream) 61%);
}

/* Optional description paragraph on the /events/ archive card only
   (not part of the original design, which had no card body copy) --
   clamped to exactly 4 lines so every card in a row stays the same
   height regardless of how long each show's description happens to be.
   See css/shows.css for the corresponding taller .shows-grid card
   height this description needs room for.

   Spacing note: .card-body is display:flex (column), so margins
   between its children never collapse the way normal block margins
   would -- an element's margin-bottom and the next element's
   margin-top both apply in full and simply add together. shows.css
   gives the h2 a 0.5em bottom margin and .meta a 0.25em top+bottom
   margin, which is why h2->description (0.5+0.5=1em originally) and
   description->meta (0.25em) and meta->meta (0.25+0.25=0.5em) ended up
   visibly uneven. Setting every one of these to margin-bottom only (no
   top margin) at the same value makes every gap exactly that value. */
.shows-grid .card-body h2 {
	margin: 0 0 .75em;
}

.shows-grid .card-description {
	display: -webkit-box;
	margin: 0 0 .75em;
	font-size: .9375em;
	line-height: 1.4;
	color: #333;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.shows-grid .meta {
	margin: 0 0 .75em;
}

.shows-grid .event-card .meta:last-of-type {
	margin-bottom: .75em;
}

/* The original design has a whole .about-show section (its own margin
   plus a padded box) between the ticket and .performers -- the theme
   folds that section's copy into .detail-lede instead of rendering it
   separately, which also removed the spacing it used to provide.
   Restoring that breathing room here (+4rem at every breakpoint,
   matching show-details.css's own breakpoints) rather than reviving
   the unused section itself. */
.performers {
	margin-top: 8rem;
}
@media (min-width: 84.9376em) {
	.performers {
		margin-top: 8.5rem;
	}
}
@media (min-width: 68.8125em) and (max-width: 84.9375em) {
	.performers {
		margin-top: 8rem;
	}
}
@media (min-width: 37.5em) and (max-width: 68.75em) {
	.performers {
		margin-top: 10rem;
	}
}

/* .performer's min-height at the >=84.9376em breakpoint is fixed at
   41.5rem in show-details.css, sized for the original mockup's two
   specific performers' known bio/credits length. Every other
   breakpoint already lets each performer size to its own content; this
   is the one range that doesn't (same underlying pattern as the
   .detail-card fix above), so shorter performers get a large empty gap
   below them and longer ones can't grow past it. */
@media (min-width: 84.9376em) {
	.performer {
		min-height: 0;
	}
}

/* Reinforce the detail page's newsletter centering. show-details.css's
   own .detail-newsletter .newsletter-grid{display:block;text-align:center}
   rule has higher specificity than style.css's plain .newsletter-grid
   grid layout and should already win, but the heading/copy and the
   subscribe form were observed rendering left-aligned/uncentered in
   practice -- restated explicitly here (custom.css always loads last)
   so centering is guaranteed regardless of the exact cause. */
.detail-newsletter .newsletter-grid {
	display: block;
	text-align: center;
}

.detail-newsletter .newsletter-grid > div {
	margin-inline: auto;
}

.detail-newsletter .subscribe-form {
	margin-inline: auto;
}

/* Standalone content pages (Comedy Coaching, Event Production, etc.)
   size their hero photo via a grid column capped at 31.25em (500px),
   but CSS Grid items default to min-width:auto, which lets a large
   enough image's own intrinsic size force the grid track wider than
   that cap -- a classic "image breaks out of its grid cell" issue. A
   hard max-width/max-height on the image itself, plus min-width:0 on
   the grid item to remove the intrinsic-size floor, keeps any
   uploaded photo constrained to the design's expected 500x500 area
   regardless of its native dimensions.

   Scoped to >=37.5em because that's exactly where content-page.css
   keeps .content-hero-grid a CSS Grid (the only layout this
   grid-track-overflow issue can happen in) -- below that it switches
   to a stacked flex column, where max-height:500px was instead
   fighting the image's aspect-ratio:1/1 and forcing it tall/cropped
   on narrow viewports for no reason (nothing to constrain there). */
@media (min-width: 37.5em) {
	.content-visual {
		min-width: 0;
	}

	.content-visual img {
		max-width: 500px;
		max-height: 500px;
	}
}

/* "Invisible" 4px border on event cards (homepage rail + /events/
   archive grid), revealed on hover with a show-type-specific color.
   Uses #fff rather than `transparent`: background-clip defaults to
   border-box, so a transparent border lets the card's own gradient
   background (bright yellow at the top, fading to cream) bleed through
   underneath it -- visible as unwanted color at the card's top/bottom
   edges even when not hovering. #fff matches the page background
   behind every card context (homepage and /events/ archive both sit on
   the default white body background), so it reads as truly invisible.
   Only "ics" and "solos-at-the-shed" have a defined hover color per
   spec; other show types get no hover border change. box-sizing:
   border-box (set globally in style.css) means adding this border
   doesn't change the card's outer footprint. */
.event-card {
	border: 4px solid #fff;
	transition: border-color .2s ease;
}

.event-card.event-pink:hover {
	border-color: #FF46A2;
}

.event-card.event-yellow:hover {
	border-color: #FFD300;
}

/* Long filter option labels (e.g. "International Comedy Showcase")
   overflowing their fixed-width dropdown. Two-part fix:
   1. The closed trigger button truncates its selected-label text with
      an ellipsis rather than letting it wrap/overflow and break the
      filter row's layout. `min-width: 0` on the inner span is needed
      because .custom-select-trigger is a flex container -- flex
      children default to min-width:auto, which would otherwise let the
      label's own intrinsic text width force the button wider than its
      allotted 100%, the same underlying issue as the content-page
      image/grid fix elsewhere in this file.
   2. The open dropdown menu is allowed to grow wider than the trigger
      (up to a sensible cap) to comfortably fit long options on one
      line; if a label is still too long even at that width, it wraps
      onto a second line within its own row instead of overflowing. */
.custom-select-trigger {
	overflow: hidden;
}

.custom-select-trigger span {
	overflow: hidden;
	min-width: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.custom-select-menu {
	width: max-content;
	min-width: 100%;
	max-width: min(90vw, 26em);
}

.custom-select-option {
	white-space: normal;
	word-wrap: break-word;
}

/* "Reach Out for More Information" section: a centered heading +
   button at the bottom of standalone Pages (see
   inc/class-reach-out.php, template-parts/reach-out.php) -- the same
   role the homepage's Ticket Alerts newsletter section fills, on pages
   that don't have an email signup form.

   Deliberately a small, independent set of rules rather than reusing
   .newsletter directly: .newsletter carries a long history of
   breakpoint-specific fixed heights and absolute positioning tuned for
   its two-column form layout (see the events-archive newsletter
   clipping fix earlier in this theme's history) that a single
   auto-height heading+button doesn't need and would risk inheriting.
   Padding and heading type size/line-height below match .newsletter's
   own values at each breakpoint (measured from the live homepage),
   just applied with auto height and symmetric top/bottom padding since
   there's no form to offset against. */
.reach-out {
	padding: 7.5em 0;
	background: #fff;
}

.reach-out-inner {
	text-align: center;
}

.reach-out h2 {
	margin: 0 0 1.5em;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 3em;
	line-height: 1.166667;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.reach-out h2 strong {
	font-weight: 800;
}

@media (max-width: 68.75em) {
	.reach-out {
		padding: 4em 0;
	}

	.reach-out h2 {
		font-size: 2.25em;
		line-height: 1.222222;
	}
}

@media (max-width: 37.4375em) {
	.reach-out {
		padding: 5em 0;
	}

	.reach-out h2 {
		margin-bottom: 1.25em;
		font-size: 2em;
		line-height: 1.125;
	}
}