.exj-widget,
.exj-season {
  --exj-forest: var(--wp--preset--color--contrast-2, #0e4b3e);
  --exj-ink: var(--wp--preset--color--contrast, #2b231d);
  --exj-muted: var(--wp--preset--color--contrast-3, #755e4c);
  --exj-paper: var(--wp--preset--color--base-2, #f4ecdf);
  --exj-accent: var(--wp--preset--color--accent, #c24e23);
  --exj-heading: var(--wp--preset--font-family--heading, Georgia, serif);
  --exj-body: var(--wp--preset--font-family--body, Arial, sans-serif);
  color: var(--exj-ink);
  font-family: var(--exj-body);
}

.exj-widget *, .exj-widget *::before, .exj-widget *::after,
.exj-season *, .exj-season *::before, .exj-season *::after { box-sizing: border-box; }

.exj-live-card {
  width: 100%;
  padding: clamp(1.5rem, 4vw, 3.2rem);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 55px rgba(39, 31, 24, .10);
}

.exj-card-head { text-align: center; }

.exj-date {
  margin: 0;
  color: var(--exj-forest);
  font-family: var(--exj-heading);
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  font-weight: 500;
}

.exj-rule {
  display: block;
  width: 88px;
  height: 2px;
  margin: 1rem auto 1.45rem;
  background: linear-gradient(90deg, #d87859 0 50%, #6db0dd 50% 100%);
  border-radius: 999px;
}

.exj-status {
  margin: 0;
  color: var(--exj-muted);
  font-size: .95rem;
}

.exj-status span { color: var(--exj-forest); font-weight: 900; }

.exj-passes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  margin-top: 2.3rem;
  border-radius: 14px;
}

.exj-passes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.exj-pass {
  min-height: 225px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem .75rem;
  color: #fff;
  text-align: center;
}

.exj-pass--1 { background: #a6c297; }
.exj-pass--2 { background: #f3aa62; }
.exj-pass--3 { background: #46543e; }
.exj-pass--4 { background: #e8dcc3; color: #463d34; }

.exj-train {
  width: min(185px, 88%);
  height: 75px;
  margin-bottom: .55rem;
  object-fit: contain;
}

.exj-train-fallback {
  display: grid;
  width: 100%;
  height: 75px;
  place-items: center;
  margin-bottom: .55rem;
  font-size: 3rem;
}

.exj-time {
  color: inherit;
  font-family: var(--exj-heading);
  font-size: clamp(1.8rem, 3vw, 2.25rem);
  font-weight: 500;
  line-height: 1;
}

.exj-countdown {
  min-height: 1.25em;
  margin-top: .4rem;
  font-size: .75rem;
  font-weight: 700;
}

.exj-direction { margin-top: .15rem; font-size: .72rem; }

.exj-arrival {
  width: calc(100% - 1rem);
  margin-top: .85rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(255,255,255,.35);
  font-size: .72rem;
  line-height: 1.35;
}

.exj-pass--4 .exj-arrival { border-top-color: rgba(70,61,52,.22); }
.exj-arrival strong { display: block; margin-top: .12rem; font-size: 1rem; }
.exj-pass.is-passed { opacity: .70; filter: saturate(.55); }

.exj-live-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: end;
  margin-top: 2rem;
}

.exj-form { display: grid; gap: .55rem; }
.exj-form label { color: var(--exj-forest); font-size: .9rem; font-weight: 750; }
.exj-form-row { display: flex; gap: .65rem; }

.exj-form input[type="date"] {
  min-width: 220px;
  min-height: 47px;
  padding: .6rem .8rem;
  border: 1px solid rgba(117,94,76,.28);
  border-radius: 8px;
  background: #fff;
  color: var(--exj-ink);
  font: inherit;
}

.exj-form button,
.exj-share {
  min-height: 47px;
  padding: .7rem 1.05rem;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: .84rem;
  font-weight: 750;
}

.exj-form button { background: var(--exj-forest); color: #fff; }
.exj-share { background: var(--exj-paper); color: var(--exj-forest); }
.exj-share-wrap { display: grid; gap: .3rem; justify-items: end; }
.exj-share-feedback { min-height: 1em; color: var(--exj-muted); font-size: .72rem; }

.exj-warning {
  margin: 1.5rem 0 0;
  padding: .9rem 1rem;
  border-radius: 10px;
  background: var(--exj-paper);
  color: var(--exj-muted);
  text-align: center;
  font-size: .8rem;
  line-height: 1.5;
}

.exj-season {
  width: 100%;
  padding: clamp(1.8rem, 5vw, 4rem);
  border-radius: 24px;
  background: var(--exj-paper);
}

.exj-section-head {
  max-width: 760px;
  margin: 0 auto 1.6rem;
  text-align: center;
}

.exj-eyebrow {
  margin: 0 0 .75rem;
  color: var(--exj-accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.exj-section-head h2 {
  margin: 0;
  color: var(--exj-forest);
  font-family: var(--exj-heading);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 500;
  line-height: 1.05;
}

.exj-section-head > p:last-child {
  margin: .8rem auto 0;
  color: var(--exj-muted);
  line-height: 1.55;
}

.exj-season-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.exj-season-card {
  padding: 1.35rem;
  border-radius: 16px;
  background: #fff;
}

.exj-season-card h3 {
  margin: 0;
  color: var(--exj-forest);
  font-family: var(--exj-heading);
  font-size: 1.35rem;
  font-weight: 500;
}

.exj-season-dates {
  margin: .35rem 0 1rem;
  color: var(--exj-muted);
  font-size: .82rem;
}

.exj-timetable { display: grid; }

.exj-timetable-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding: .58rem .5rem;
  border-bottom: 1px solid rgba(117,94,76,.11);
  font-size: .82rem;
}

.exj-timetable-row:last-child { border-bottom: 0; }
.exj-timetable-row strong { color: var(--exj-forest); }

.exj-timetable-row--highlight {
  border-radius: 8px;
  background: #fff3e9;
}

.exj-source {
  margin: 1.15rem 0 0;
  color: var(--exj-muted);
  text-align: center;
  font-size: .76rem;
}

.exj-source a { color: var(--exj-forest); }

.exj-season-error {
  padding: 1rem;
  border-radius: 10px;
  background: #fff3e9;
}

@media (max-width: 900px) {
  .exj-passes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exj-live-actions { grid-template-columns: 1fr; }
  .exj-share-wrap { justify-items: start; }
}

@media (max-width: 700px) {
  .exj-live-card { padding: 1.35rem .8rem; border-radius: 18px; }
  .exj-passes, .exj-passes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exj-pass { min-height: 220px; padding-inline: .45rem; }
  .exj-train, .exj-train-fallback { height: 58px; }
  .exj-form-row { flex-direction: column; }
  .exj-form input[type="date"], .exj-form button, .exj-share { width: 100%; min-width: 0; }
  .exj-share-wrap { width: 100%; }
  .exj-season { padding: 1.35rem .8rem; border-radius: 18px; }
  .exj-season-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .exj-pass { min-height: 205px; }
  .exj-time { font-size: 1.65rem; }
  .exj-arrival, .exj-direction, .exj-countdown { font-size: .67rem; }
  .exj-timetable-row { font-size: .76rem; }
}
