/*
 * Ported from the legacy /css/program.css:
 *   UL.program    { font-size:20px; clear:both; margin:50px auto; padding:0;
 *                   width:90%; max-width:800px; list-style-type:none; }
 *   UL.program LI { padding:12px 0 15px 0; text-align:left; clear:both; }
 *   UL.program LI EM { float:right; }
 *
 * Tokens: --cn-concert-measure and --cn-accent, with fallbacks. The child theme
 * maps --cn-accent to Sonaar's --sr-global-color1; any other theme sets its own.
 */

/*
 * Header, programme and bios share one measure so the page reads as a single
 * column, matched to the concert cards on /concerts/. The poster floats right
 * of the header only, as the legacy page did at 202px -- not the parent
 * theme's 50/50 split, which left half the page empty on the 35 concerts that
 * have no poster.
 *
 * Only these two carry the 90% gutter. The programme and the bios render
 * inside .cn-event__body -- ContentAppender puts them there through
 * the_content -- so a second 90% would compound into an 810px column inside a
 * 900px one. They take their width from the body and cap it in case some
 * other theme calls the_content() outside a wrapper of ours.
 */
.cn-event-header { clear: both; overflow: hidden; margin: 0 auto 2rem;
                   width: 90%; max-width: var(--cn-concert-measure, 900px); }
.cn-event__body { margin: 0 auto; width: 90%; max-width: var(--cn-concert-measure, 900px); }

.cn-event-header__poster { float: right; width: 320px; max-width: 40%;
                           margin: 4px 0 20px 25px; }
.cn-event-header__poster img { width: 100%; height: auto; display: block; }

.cn-event-header__title { margin-bottom: 0.6em; }
.cn-event-header__artists { font-size: 1.15em; line-height: 1.7;
                            margin-bottom: 1.2em; }
.cn-event-header__role { opacity: 0.75; }
.cn-event-header__when { margin-bottom: 0.6em; }
.cn-event-header__venue { line-height: 1.6; }
/* Purchase Tickets wears the site button: EventHeader emits `cn-button` and
   the theme owns the plate -- see "The site button" in sonaar-child/style.css
   for the design and why the class is not called `.button`. Only the space
   above it is this page's business, so only that is here. A theme that
   defines no `.cn-button` gets a plain link. */
.cn-event-header__tickets { margin: 1.4em 0 0; }

/* A rule between the sections, matching the Elementor divider widget the rest
   of the site uses: 1px solid, 62% of the column, centred, 50px of air each
   side -- the top margin collapses into the section's own, which matches it. It belongs to the section *below* it, so a concert with no programme
   gets one line before its bios rather than two lines and a gap. */
.cn-program::before,
.cn-bios::before { content: ""; display: block; width: 62%; margin: 50px auto;
                   border-top: 1px solid var(--cn-divider-color, #54595F); }

/* The two section headings are h1s, as the legacy page's were. The section
   around each one carries the space above it; 20px here keeps the list, or the
   first bio, off the bottom of it. */
.cn-program__heading,
.cn-bios__heading { margin: 0 0 20px; }

.cn-program { clear: both; margin: 50px auto; max-width: var(--cn-concert-measure, 900px); }
.cn-program__list { font-size: 20px; margin: 0; padding: 0; list-style-type: none; }
.cn-program__item { padding: 1.5em 0; text-align: left; clear: both; }
.cn-program__composer { float: right; padding-left: 1.5em; }
.cn-program__year { font-style: normal; opacity: 0.75; }
.cn-program__dates { font-style: normal; opacity: 0.75; white-space: nowrap; }
.cn-program__work { }
/* Sonaar styles all blockquotes display:inline-block, which would put the
   soloists on the same line as the work title. */
.cn-program__soloists { display: block; margin: 0.4em 0 0 40px; padding: 0;
                        border: 0; font-size: 0.85em; quotes: none; }
.cn-program__soloists:before, .cn-program__soloists:after { content: none; }

/* About the Artists — legacy floats a 225px photo right of the bio. */
.cn-bios { clear: both; margin: 50px auto; max-width: var(--cn-concert-measure, 900px); }
.cn-bio { clear: both; margin-bottom: 2.5rem; overflow: hidden; }
.cn-bio__name { margin-bottom: 0.75rem; color: var(--cn-bio-name-color, inherit); }
.cn-bio__photo { float: right; width: 225px; max-width: 40%;
                 margin: 5px 0 15px 20px; }
.cn-bio__photo img { width: 100%; height: auto; display: block; }
.cn-bio__text p { margin-bottom: 1em; }

/* Legacy page is fixed-width; stack rather than float on small screens. */
@media (max-width: 600px) {
  .cn-program__list { font-size: 17px; }
  .cn-program__composer { float: none; display: block; padding-left: 0; }
  .cn-program__work { display: block; }
  .cn-program__soloists { margin-left: 20px; }
  .cn-bio__photo { float: none; width: 60%; max-width: 240px; margin: 0 0 15px 0; }
  .cn-event-header, .cn-event__body { width: 100%; }
  .cn-event-header__poster {
    float: none; width: 60%; max-width: 240px; margin: 0 0 20px 0;
  }
}