/*
 * Live Training pages (design C from clients/twig/mockups/live-c.html): the hosts
 * lead, and every Save my seat button opens the joes-live-trainings popup.
 * Loaded on single-joes_training.php only, which puts body class "twig-live".
 * Builds on style.css (.hero, .wrap, .button, .section...).
 */

/* The page */
.twig-live .hero { padding: 9.5rem 0 6rem; }
.twig-live .hero-inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: 5rem; align-items: center; }
.twig-live .hosts { order: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.twig-live .hosts figure { margin: 0; }
.twig-live .hosts figure + figure { margin-top: 3.5rem; }
.twig-live .hosts img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.25rem; display: block; }
.twig-live .hosts figcaption { margin-top: 0.9rem; color: var(--text-2); font-size: 0.9375rem; line-height: 1.35; }
.twig-live .hosts figcaption b { display: block; color: var(--text); font-size: 1.125rem; }
.twig-live .hero-text { max-width: none; margin: 0; text-align: left; }
.twig-live .hero-text > .label { font-weight: 700; color: var(--blue); margin: 0 0 1.25rem; }
.twig-live .hero h1 { font-size: 4.25rem; line-height: 1.05; letter-spacing: -0.12rem; margin-bottom: 0; }
.twig-live .hero .sub { font-size: 1.25rem; color: var(--text-2); max-width: 32rem; margin-top: 1.5rem; }
.twig-live .hero-text > .time { font-size: 1rem; color: var(--text); font-weight: 600; max-width: 32rem; margin-top: 1.5rem; }
.twig-live .hero .buttons { margin: 2.25rem 0 0; }
.twig-live .hero .button > span { padding: 0.9rem 2rem; font-size: 1.0625rem; }
.twig-live .joes-training-countdown { display: flex; gap: 2rem; margin-top: 2.5rem; }
.twig-live .joes-training-countdown div { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); }
.twig-live .joes-training-countdown b { display: block; font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.04rem; color: var(--text); text-transform: none; }
.twig-live .in { margin-top: 2.25rem; max-width: 32rem; font-size: 1.125rem; }
.twig-live .band { background: #f5f5f4; }
.twig-live .learn { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 5rem; }
.twig-live .learn ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem; counter-reset: n; }
.twig-live .learn li { counter-increment: n; display: grid; grid-template-columns: 3.5rem 1fr; font-size: 1.375rem; font-weight: 600; line-height: 1.35; }
.twig-live .learn li::before { content: counter(n, decimal-leading-zero); font-size: 1rem; font-weight: 700; color: var(--blue); padding-top: 0.3rem; }
.twig-live .zones { display: flex; justify-content: center; gap: 3.5rem; flex-wrap: wrap; margin-top: 2.5rem; font-size: 1.125rem; }
.twig-live .zones b { display: block; font-size: 2rem; }
.twig-live .closing { padding-top: 0; }
.twig-live .closing .pair { display: flex; justify-content: center; gap: 0.75rem; margin-bottom: 2.5rem; }
.twig-live .closing .pair img { width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: 1rem; }
.twig-live .closing h2 { max-width: 44rem; margin: 0 auto 1.25rem; }
.twig-live .closing .buttons { margin-top: 2.5rem; }
.twig-live .joes-training-countdown > div { font-size: 0.75rem; }
.twig-live .more { margin-top: 2rem; }
.twig-live .live-note { max-width: 40rem; margin: 1.25rem auto 0; }
.twig-live .in p + p { margin-top: 0.75rem; }
.twig-live .joes-training-calendar { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; margin-top: 1.25rem; }
.twig-live .joes-training-calendar a { font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.twig-live button.button { border: 0; font: inherit; cursor: pointer; }

/* The popup (the plugin's dialog, in Twig's type and yellow) */
.joes-training-popup { --joes-training-accent: var(--yellow); --joes-training-popup-muted: var(--text-2); --joes-training-backdrop: #1b1b1bb3; color: var(--text); }
.joes-training-popup__title { font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.04rem; }
.joes-training-popup .joes-form { display: grid; gap: 0.75rem; }
.joes-training-popup .joes-form__field { margin: 0; }
.joes-training-popup .joes-form__field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.joes-training-popup .joes-form input:not([type="hidden"]) { width: 100%; padding: 0.9rem 1rem; border-radius: 0.75rem; border: 1px solid #0000001f; font: inherit; background: #fff; color: var(--text); }
.joes-training-popup .joes-form__actions { margin: 0.25rem 0 0; }
.joes-training-popup .joes-form button[type="submit"] { width: 100%; justify-content: center; }

@media (max-width: 767px) {
	.twig-live .hero { padding: 7rem 0 3.5rem; }
	/* Phone: headline and description first, then the hosts smaller and staggered, then the rest. */
	.twig-live .hero-inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; text-align: left; }
	.twig-live .hero-text { display: contents; }
	.twig-live .hero-text > * { order: 3; }
	.twig-live .hero-text > .label, .twig-live .hero-text > h1, .twig-live .hero-text > .sub { order: 1; }
	.twig-live .hosts { order: 2; justify-content: start; grid-template-columns: repeat(2, 8.5rem); gap: 1rem; margin-top: 2rem; }
	.twig-live .hosts figure + figure { margin-top: 1.75rem; }
	.twig-live .hosts img { aspect-ratio: 1; border-radius: 0.875rem; }
	.twig-live .hosts figcaption { font-size: 0.8125rem; margin-top: 0.6rem; }
	.twig-live .hosts figcaption b { font-size: 1rem; }
	.twig-live .hero h1 { font-size: 2.75rem; letter-spacing: -0.08rem; }
	.twig-live .hero .sub { font-size: 1.125rem; }
	.twig-live .hero .buttons .button { width: 100%; }
	.twig-live .hero .buttons .button > span { flex: 1; justify-content: center; }
	.twig-live .joes-training-countdown { gap: 1.5rem; }
	.twig-live .joes-training-countdown b { font-size: 1.875rem; }
	.twig-live .learn { grid-template-columns: 1fr; gap: 2rem; }
	.twig-live .learn li { font-size: 1.125rem; grid-template-columns: 2.75rem 1fr; }
	.twig-live .zones { gap: 1.5rem; justify-content: flex-start; }
	.twig-live .zones b { font-size: 1.5rem; }
	.twig-live .wrap.center { text-align: left; }
	.twig-live .closing .pair, .twig-live .closing .buttons { justify-content: flex-start; }
	.twig-live .closing h2 { font-size: 2.25rem; }
	.joes-training-popup { --joes-training-popup-padding: 2.5rem 1.5rem 1.5rem; }
	.joes-training-popup__title { font-size: 1.625rem; }
}