/* ============================================================================
 * Upcoming Markets — vertical timeline (Luma-style), grouped by date.
 * Renders from template-parts/content-sections.php (upcoming_markets_table).
 *
 * Cohesive with the theme's own modern "calendar_list" component:
 *   palette  navy #113c61 · sky #25a7ce · sky-AA #1268a1 · amber #ffa41b
 *   ink #12303f · muted #5f7078 · hairline #e5e7eb · card-border #e8edf0 · tint #f3f6fa
 *   card     white, soft border + shadow, subtle lift on hover
 *
 * NOTE: theme root is `html{font-size:62.5%}` => 1rem = 10px. All sizes below
 * are authored on that 10px scale (that is what keeps the type proportionate).
 * ========================================================================== */

/* ---- Section head ---------------------------------------------------------- */
.ba-upm__head{ text-align:center; max-width:64rem; margin:0 auto 4.5rem; }
.ba-upm__eyebrow{
	display:inline-block; font-size:1.3rem; font-weight:700; line-height:1;
	letter-spacing:.14em; text-transform:uppercase; color:#1268a1;
	background:#dff4fe; padding:.6rem 1.4rem; border-radius:4rem; margin-bottom:1.6rem;
}
.ba-upm__title{ font-size:3.6rem; line-height:1.12; font-weight:700; color:#113c61; margin:0 0 1rem; }
.ba-upm__intro{ color:#5f7078; font-size:1.7rem; line-height:1.6; margin:0; }
.ba-upm__intro p{ margin:0; }

/* ---- Timeline shell -------------------------------------------------------- */
.ba-tl{ position:relative; max-width:72rem; margin:0 auto; padding-left:3rem; }
/* the faint dashed line running down the left */
.ba-tl::before{
	content:''; position:absolute; top:.4rem; bottom:1.2rem; left:.6rem;
	width:0; border-left:2px dashed #d5dee6;
}

.ba-tl__group{ position:relative; margin-bottom:3.4rem; }
.ba-tl__group:last-child{ margin-bottom:0; }

/* ---- Date group header (dot + date) --------------------------------------- */
.ba-tl__aside{ display:flex; align-items:center; flex-wrap:wrap; gap:.6rem 1.2rem; margin-bottom:1.4rem; }
/* dot sits on the line, punched out with a white ring */
.ba-tl__dot{
	position:absolute; left:-3rem; top:.3rem; width:1.4rem; height:1.4rem;
	border-radius:50%; background:#113c61;
	box-shadow:0 0 0 4px #fff, 0 0 0 5px #e5e7eb;
}
.ba-tl__group--today .ba-tl__dot{ background:#25a7ce; box-shadow:0 0 0 4px #fff, 0 0 0 5px #bfe6f2; }
.ba-tl__group--tomorrow .ba-tl__dot{ background:#ffa41b; box-shadow:0 0 0 4px #fff, 0 0 0 5px #ffe4b3; }

.ba-tl__date{ margin:0; padding:0; font-weight:400; line-height:1.1; display:inline-flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; }
.ba-tl__date-md{ font-size:1.9rem; font-weight:800; color:#12303f; letter-spacing:-.01em; }
.ba-tl__date-dow{ font-size:1.7rem; font-weight:500; color:#5f7078; } /* WCAG AA on white (was #8a99a3 @ 2.93:1) */

.ba-tl__badge{
	font-size:1.1rem; font-weight:700; line-height:1; text-transform:uppercase;
	letter-spacing:.08em; padding:.45rem .9rem; border-radius:4rem;
}
.ba-tl__badge--today{ background:#1268a1; color:#fff; }
.ba-tl__badge--tomorrow{ background:#ffa41b; color:#000; }

/* ---- Cards under a date ---------------------------------------------------- */
.ba-tl__cards{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.4rem; }
.ba-tl__cards li{ margin:0; padding:0; }
.ba-tl__cards li::before,
.ba-tl__cards li::after{ content:none !important; }

.ba-tl__card{
	display:flex; align-items:stretch; gap:1.6rem;
	background:#fff; border:1px solid #e8edf0; border-radius:14px;
	padding:1.6rem 1.8rem;
	box-shadow:0 1px 3px rgba(17,60,97,.05);
	transition:box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.ba-tl__card:hover{ box-shadow:0 10px 26px rgba(17,60,97,.12); transform:translateY(-2px); border-color:#d7e2ea; }

.ba-tl__card-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.ba-tl__time{ font-size:1.4rem; font-weight:600; color:#5f7078; margin:0 0 .4rem; letter-spacing:.01em; }
.ba-tl__title{ font-size:2rem; font-weight:700; color:#12303f; margin:0 0 .7rem; line-height:1.25; }
.ba-tl__loc{ display:flex; align-items:flex-start; gap:.6rem; color:#5f7078; font-size:1.5rem; line-height:1.4; margin:0; }
.ba-tl__ic{ width:1.6rem; height:1.6rem; flex:0 0 auto; margin-top:.2rem; color:#25a7ce; }

.ba-tl__foot{ display:flex; align-items:center; flex-wrap:wrap; gap:.8rem 1.4rem; margin-top:1.2rem; }
.ba-tl__tag{
	font-size:1.2rem; font-weight:700; line-height:1; text-transform:uppercase; letter-spacing:.06em;
	color:#1268a1; background:#eef6fb; border:1px solid #d7eaf5; padding:.4rem .9rem; border-radius:4rem;
}
.ba-tl__dir{ font-size:1.4rem; font-weight:700; color:#1268a1; text-decoration:none; white-space:nowrap; }
.ba-tl__dir:hover{ color:#113c61; text-decoration:underline; }

/* --- refinements: card padding, market-link title, per-card actions --- */
/* The theme zeroes <li> padding at higher specificity — restore it on the card
   so content (esp. the thumbnail) doesn't touch the card border. */
.ba-upm .ba-tl__cards li.ba-tl__card{ padding:1.6rem 1.8rem; }
.ba-tl__title-link{ color:inherit; text-decoration:none; }
.ba-tl__title-link:hover{ color:#1268a1; text-decoration:underline; }
.ba-tl__actions{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:.6rem 1.6rem; }
.ba-tl__act{ font-size:1.4rem; font-weight:700; color:#1268a1; text-decoration:none; white-space:nowrap; }
.ba-tl__act:hover{ color:#113c61; text-decoration:underline; }
.ba-upm__subscribe{ font-size:1.5rem; font-weight:700; color:#1268a1; text-decoration:none; }
.ba-upm__subscribe:hover{ color:#113c61; text-decoration:underline; }

/* --- contextual time-of-day pills: sunrise / midday / dusk (all WCAG AA) --- */
.ba-tl__tag--morning{   color:#8a5300; background:#fff2c9; border-color:#ffe19a; }  /* sunny */
.ba-tl__tag--afternoon{ color:#0f5c8f; background:#ddf0fb; border-color:#bbe0f4; }  /* bright day */
.ba-tl__tag--evening{   color:#3a337f; background:#e7e5fb; border-color:#d2cff4; }  /* dusk / night */

/* --- clickable card: the title link stretches over the whole card so clicking
       anywhere (except the action links) opens the market's page --- */
.ba-tl__card{ position:relative; }
.ba-tl__title-link::after{ content:''; position:absolute; inset:0; z-index:1; }
/* actions stay above the stretched link and remain independently clickable */
.ba-tl__foot{ position:relative; z-index:2; }
.ba-tl__actions{ position:relative; z-index:2; }

/* ---- Right thumbnail (image, or graceful initial-letter fallback) --------- */
.ba-tl__thumb{
	flex:0 0 auto; width:10.4rem; height:10.4rem; align-self:center;
	border-radius:12px; overflow:hidden;
	display:flex; align-items:center; justify-content:center;
}
.ba-tl__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ba-tl__initial{ font-size:4.2rem; font-weight:800; color:#113c61; line-height:1; }
.ba-tl__thumb--t0{ background:#e9eff5; }  /* navy tint */
.ba-tl__thumb--t1{ background:#e2f1f8; }  /* sky tint  */
.ba-tl__thumb--t2{ background:#fbf0da; }  /* amber tint */

/* ---- Empty state + CTA ----------------------------------------------------- */
.ba-upm__empty{
	text-align:center; color:#5f7078; background:#fff; border:1px dashed #cdd8e3;
	border-radius:14px; padding:3.6rem 2rem; font-size:1.7rem; max-width:60rem; margin:0 auto;
}
.ba-upm__cta{ margin-top:4rem; display:flex; align-items:center; justify-content:center; gap:1.2rem 2.2rem; flex-wrap:wrap; }
.ba-upm__btn{ margin:0; }   /* the anchor itself uses native .btn.btn-primary.btn-xl */

/* ---- Dark-background safety (client-set light_text) ----------------------- */
.ba-upm.light_text .ba-upm__title{ color:#fff; }
.ba-upm.light_text .ba-upm__intro{ color:rgba(255,255,255,.85); }
.ba-upm.light_text .ba-tl__date-md{ color:#fff; }
.ba-upm.light_text .ba-tl__date-dow{ color:rgba(255,255,255,.7); }
.ba-upm.light_text .ba-tl::before{ border-color:rgba(255,255,255,.28); }
.ba-upm.light_text .ba-tl__dot{ box-shadow:0 0 0 4px rgba(255,255,255,.14), 0 0 0 5px rgba(255,255,255,.30); }

/* ---- Focus visibility + reduced motion ----------------------------------- */
.ba-tl__dir:focus-visible,
.ba-upm__btn:focus-visible{ outline:2px solid #25a7ce; outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
	.ba-tl__card{ transition:none; }
	.ba-tl__card:hover{ transform:none; }
}

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width:600px){
	.ba-upm__head{ margin-bottom:3.2rem; }
	.ba-upm__title{ font-size:2.8rem; }
	.ba-tl{ padding-left:2.4rem; }
	.ba-tl__dot{ left:-2.4rem; width:1.2rem; height:1.2rem; }
	.ba-tl::before{ left:.5rem; }
	.ba-tl__card{ gap:1.2rem; padding:1.4rem; border-radius:12px; }
	.ba-tl__thumb{ width:7.2rem; height:7.2rem; border-radius:10px; }
	.ba-tl__initial{ font-size:3rem; }
	.ba-tl__title{ font-size:1.8rem; }
	.ba-tl__date-md{ font-size:1.8rem; }
}