/* "CineBus": a cinema ticket and a drawn bus map, in TMB red, night blue and paper. */
.cb {
  --cb-red: #c8102e;
  --cb-navy: #1b2a4a;
  --cb-paper: #faf3dd;  /* lighter cream for cards and the map */
  --cb-bg: #f7efd8;     /* old, soft yellow page */
  --cb-yellow: #f2a900;
  display: flex;
  flex-direction: column;
  gap: 44px;
  margin: calc(-30px - env(safe-area-inset-top, 0px)) -32px -32px;
  padding: 0 32px 40px;
  min-height: 100%;
  background: var(--cb-bg);
  color: var(--cb-navy);
}
.panel[data-layout="cinebus"] { background: #f7efd8; }
.panel[data-layout="cinebus"] .panel-close { border-color: var(--cb-red, #c8102e); color: #c8102e; }
.panel .cb p { color: var(--cb-navy); }

/* Ticket header with a perforated stub */
.cb-ticket { display: grid; grid-template-columns: minmax(0, 1fr) 110px; margin-top: 30px; border-radius: 14px; background: var(--cb-red); color: #fff; overflow: hidden; }
.cb-ticket-main { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px; }
.panel .cb .cb-admit { margin: 0; font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: #ffd9de; }
.panel .cb-title { margin: 0; font-family: var(--body); font-weight: 700; font-size: 2rem; line-height: 1.05; letter-spacing: -0.02em; color: #fff; text-wrap: balance; }
.panel .cb .cb-sub { font-size: 0.98rem; line-height: 1.45; color: #ffe9ec; }
.cb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cb-tags span { padding: 3px 10px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 999px; font-size: 0.78rem; }
.cb-stub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 8px;
  border-left: 2px dashed rgba(255, 255, 255, 0.6);
  background: #a50d25;
  font-family: var(--label);
  text-align: center;
}
.cb-stub span { font-size: 0.68rem; letter-spacing: 0.14em; }
.cb-stub b { font-size: 1.7rem; letter-spacing: 0.06em; color: var(--cb-yellow); }
.cb-stub span:last-child { margin-top: 10px; font-size: 0.62rem; letter-spacing: 0.04em; line-height: 1.3; opacity: 0.85; }

/* Sections */
.cb-sec { display: flex; flex-direction: column; gap: 16px; }
.cb-head { display: flex; align-items: center; gap: 12px; }
.cb-num { display: grid; place-items: center; width: 40px; height: 26px; border-radius: 4px; background: var(--cb-navy); color: #fff; font-family: var(--label); font-size: 0.78rem; font-weight: 600; }
.cb-head h3 { margin: 0; font-family: var(--body); font-weight: 700; font-size: 1.35rem; color: var(--cb-navy); }
.panel .cb-lead { font-size: 1.15rem; line-height: 1.45; font-weight: 600; }
.panel .cb-text { font-size: 1rem; line-height: 1.6; max-width: 62ch; }

/* The route map */
.cb-map { display: block; width: 100%; height: auto; border-radius: 12px; }
.cb-label text { font: 600 13px var(--body); fill: var(--cb-navy, #1b2a4a); }
.cb-bus { stroke-dasharray: 600; stroke-dashoffset: 600; animation: cb-draw 2.4s ease-out forwards; }
.cb-bus--2 { animation-delay: 1.8s; }
@keyframes cb-draw { to { stroke-dashoffset: 0; } }

/* Steps as bus stops on a red line */
.cb-steps { position: relative; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0 0 0 46px; list-style: none; }
.cb-steps::before { content: ""; position: absolute; left: 15px; top: 14px; bottom: 14px; width: 6px; border-radius: 3px; background: var(--cb-red); }
.cb-steps li { position: relative; }
.cb-step-n { position: absolute; left: -46px; top: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 4px solid var(--cb-red); font-weight: 700; color: var(--cb-red); }
.cb-steps strong { display: block; font-size: 1.05rem; }
.panel .cb-steps p { margin-top: 2px; font-size: 0.93rem; line-height: 1.5; }
.cb-steps em { display: inline-block; margin-top: 6px; padding: 2px 9px; border-radius: 999px; background: var(--cb-paper); font-style: normal; font-family: var(--label); font-size: 0.72rem; }

/* Result */
.cb-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.cb-facts > div { padding: 12px 14px; border-radius: 10px; background: var(--cb-paper); border-top: 4px solid var(--cb-red); }
.cb-facts > div:nth-child(2) { border-top-color: var(--cb-yellow); }
.cb-facts > div:nth-child(3) { border-top-color: var(--cb-navy); }
.cb-facts dt { font-weight: 700; font-size: 1.5rem; line-height: 1; }
.cb-facts dd { margin: 4px 0 0; font-size: 0.82rem; color: #4a5670; }
.panel .cb-link { align-self: flex-start; background: var(--cb-red); border-color: var(--cb-red); color: #fff; }

@media (max-width: 720px) { .cb { margin: -22px -20px -28px; padding: 0 20px 36px; } }
@media (max-width: 560px) {
  .cb-ticket { grid-template-columns: minmax(0, 1fr) 78px; margin-top: 24px; }
  .cb-ticket-main { padding: 18px; }
  .panel .cb-title { font-size: 1.6rem; }
  .cb-stub b { font-size: 1.2rem; }
  .cb-facts dt { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .cb-bus { animation: none; stroke-dashoffset: 0; } }

/* ---------- Refined, more professional finish ---------- */
.cb { gap: 52px; }
/* Ticket: flatter, quieter, sharper edges */
.cb-ticket { border-radius: 6px; box-shadow: 0 10px 28px rgba(80, 40, 10, 0.12); }
.cb-ticket-main { padding: 28px 30px; gap: 12px; }
.panel .cb-title { font-family: var(--display); font-weight: 400; font-size: 2.3rem; letter-spacing: -0.005em; }
.panel .cb .cb-sub { max-width: 44ch; }
.cb-tags { gap: 0; }
.cb-tags span { padding: 0; border: 0; border-radius: 0; font-family: var(--label); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: #ffd9de; }
.cb-tags span + span::before { content: "·"; margin: 0 10px; }
.cb-stub { background: #9e0c24; }
.cb-stub b { font-family: var(--display); font-weight: 400; color: #fff; letter-spacing: 0.08em; }

/* Section heads: small numbers, serif titles, a fine rule */
.cb-head { align-items: baseline; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(27, 42, 74, 0.18); }
.cb-num { width: auto; height: auto; padding: 0; border-radius: 0; background: none; color: var(--cb-red); font-size: 0.75rem; letter-spacing: 0.1em; }
.cb-head h3 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; }
.panel .cb .cb-lead { font-weight: 500; font-size: 1.1rem; line-height: 1.55; }

/* Map: framed like a figure */
.cb-map { border-radius: 2px; border: 1px solid rgba(27, 42, 74, 0.16); }

/* Steps: thinner line, smaller stops */
.cb-steps { padding-left: 40px; gap: 18px; }
.cb-steps::before { left: 13px; width: 2px; border-radius: 0; }
.cb-step-n { left: -40px; width: 28px; height: 28px; border-width: 2px; font-size: 0.8rem; }
.cb-steps em { border-radius: 0; background: none; padding: 0; color: #6b5a3a; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.68rem; }

/* Result figures: ruled row instead of coloured cards */
.cb-facts { gap: 0; border-top: 1px solid rgba(27, 42, 74, 0.25); border-bottom: 1px solid rgba(27, 42, 74, 0.25); }
.cb-facts > div, .cb-facts > div:nth-child(2), .cb-facts > div:nth-child(3) { border-radius: 0; border-top: 0; background: none; padding: 18px 16px; }
.cb-facts > div + div { border-left: 1px solid rgba(27, 42, 74, 0.18); }
.cb-facts dt { font-family: var(--display); font-weight: 400; font-size: 2rem; color: var(--cb-red); }
.panel .cb-link { border-radius: 2px; padding: 12px 20px; }


/* The problem: the bus from the banner on the left, the text on the right */
.cb-problem { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 32px; align-items: center; }
.cb-problem > div { display: flex; flex-direction: column; gap: 16px; }
.cb-bus-piece { width: 100%; max-width: 260px; justify-self: start;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.3)); }
@media (max-width: 760px) { .cb-problem { grid-template-columns: 1fr; gap: 24px; } .cb-bus-piece { max-width: 220px; } }