/*
 * The [wingo_mock_exams] list on the website (class-mock-exams.php): one card per exam open for
 * registration, in the home page's own style (wingo.com.tw, 2026-09): square white cards with a
 * soft shadow and centred text like the book cards, the site's teal (#41B7C2) for dates and the
 * divider, its orange (#FD9049) for the call to action like their READ MORE, system fonts, #333
 * text. Scoped under .wingo-mock-* so the theme's styles are left alone.
 */
.wingo-mock-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px;
  max-width: 1080px; margin: 0 auto; padding: 0 16px; box-sizing: border-box;
}
.wingo-mock-list.single { grid-template-columns: minmax(0, 420px); justify-content: center; }
.wingo-mock-note {
  max-width: 1080px; margin: 0 auto 24px; padding: 12px 16px; box-sizing: border-box;
  background: #EAF7F8; color: #2F6F75; font-size: 15px; line-height: 1.7; text-align: center;
}
.wingo-mock-note a { color: #2A8E98; font-weight: 600; text-decoration: underline; }
/* No exam open: the home page's 模擬考 section (the Elementor container with CSS ID mock-exam)
   disappears, heading and divider included. Browsers without :has() show the heading only. */
#mock-exam:has(.wingo-mock-none) { display: none !important; }

.wingo-mock-exam {
  display: flex; flex-direction: column; background: #FFFFFF; color: #333333;
  box-shadow: 0 0 10px rgba(0, 0, 0, .25); text-align: center;
}
.wingo-mock-exam .wingo-mock-head { padding: 28px 24px 16px; }
.wingo-mock-exam .wingo-mock-badge {
  display: inline-block; padding: 2px 12px; border: 1px solid #41B7C2; color: #41B7C2;
  font-size: 13px; font-weight: 600; letter-spacing: .1em;
}
.wingo-mock-exam h3 { margin: 12px 0 0; font-size: 20px; font-weight: 500; line-height: 1.5; color: #333333; }
.wingo-mock-exam .wingo-mock-when { margin-top: 6px; font-size: 15px; font-weight: 600; color: #41B7C2; }
.wingo-mock-exam .wingo-mock-desc { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: #666666; }

.wingo-mock-exam .wingo-mock-subjects {
  list-style: none; margin: 0 24px; padding: 8px 0; border-top: 1px solid #EEEEEE; border-bottom: 1px solid #EEEEEE;
}
.wingo-mock-exam .wingo-mock-day { padding: 8px 0 2px; font-size: 13px; font-weight: 600; color: #41B7C2; }
.wingo-mock-exam .wingo-mock-subject {
  display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; color: #555555; text-align: left;
}
.wingo-mock-exam .wingo-mock-time { flex: none; color: #888888; font-variant-numeric: tabular-nums; }

.wingo-mock-exam .wingo-mock-buy { margin-top: auto; padding: 16px 24px 24px; }
.wingo-mock-exam .wingo-mock-deadline { font-size: 13px; color: #888888; }
.wingo-mock-exam .wingo-mock-deadline b { font-weight: 600; color: #555555; font-variant-numeric: tabular-nums; }
.wingo-mock-exam .wingo-mock-price { display: block; margin: 8px 0 14px; font-size: 22px; font-weight: 600; color: #333333; }
.wingo-mock-exam .wingo-mock-register,
.wingo-mock-exam .wingo-mock-register:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 160px;
  height: 44px; padding: 0 28px; background: #FD9049; color: #FFFFFF; font-size: 15px; font-weight: 600;
  letter-spacing: .05em; text-decoration: none; line-height: 1; transition: background .15s;
}
.wingo-mock-exam .wingo-mock-register:hover,
.wingo-mock-exam .wingo-mock-register:focus { background: #F07B30; color: #FFFFFF; }

@media (max-width: 480px) {
  .wingo-mock-list { grid-template-columns: 1fr; }
  .wingo-mock-exam .wingo-mock-head { padding: 22px 18px 14px; }
  .wingo-mock-exam .wingo-mock-subjects { margin: 0 18px; }
  .wingo-mock-exam .wingo-mock-buy { padding: 14px 18px 20px; }
  .wingo-mock-exam .wingo-mock-register { width: 100%; }
}