/* Contest hub + dedicated contest pages. Palette matches the site luxury
   restyle: deep emerald #0C3B2E, gold #C6A15B / #D8BC6A, Tiffany teal
   #7FD4C7, ivory #F7F3EA. */
.cma-contest-page, .cma-contest-hub { max-width: 980px; margin: 0 auto; padding: 40px 24px 60px; }
.cma-contest-page h1, .cma-contest-hub h1 { font-size: clamp(28px, 3.5vw, 40px); color: #0C3B2E; margin: 8px 0 12px; }
.cma-contest-page .cma-lede, .cma-contest-hub .cma-lede { font-size: 18px; line-height: 1.6; color: #33475b; }
.cma-contest-notice { background: #e4f0ec; border-left: 4px solid #087c72; padding: 14px 18px; border-radius: 8px; line-height: 1.65; }

/* Contest switcher: big tappable buttons, not a one-line text menu. */
.cma-contest-switch { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
.cma-contest-switch a { display: inline-block; background: #0C3B2E; color: #fff; font-weight: 700; font-size: 16px; padding: 12px 20px; border-radius: 10px; text-decoration: none; }
.cma-contest-switch a:hover { background: #125f56; }

/* Hub grid: one large card per contest. */
.cma-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 28px; }
.cma-hub-card { background: #fff; border: 1px solid #dce5ee; border-top: 6px solid #C6A15B; border-radius: 16px; padding: 24px; box-shadow: 0 6px 22px #173c4a10; }
.cma-hub-card h2 { font-size: 30px; color: #0C3B2E; margin: 0 0 4px; }
.cma-hub-count { font-size: 18px; font-weight: 700; color: #087c72; margin: 0 0 10px; }
.cma-hub-card p { line-height: 1.6; }
.cma-hub-areas { font-size: 14px; color: #526977; }
.cma-hub-btn { display: inline-block; margin-top: 12px; background: #0C3B2E; color: #fff; font-weight: 700; padding: 12px 20px; border-radius: 10px; text-decoration: none; }
.cma-hub-btn:hover { background: #125f56; }

/* Topic filter chips + expand/collapse tools. */
.cma-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 20px 0 8px; }
.cma-chip { border: 2px solid #0C3B2E; background: #fff; color: #0C3B2E; font-weight: 700; font-size: 15px; padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.cma-chip.is-active { background: #0C3B2E; color: #D8BC6A; }
.cma-filter-tools { margin-left: auto; display: flex; gap: 8px; }
.cma-filter-tools button { background: #e4f0ec; border: 1px solid #087c72; color: #125f56; font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 8px; cursor: pointer; }

/* Problem cards: the question is always visible, full size. */
.cma-prob-list { display: grid; gap: 20px; margin-top: 20px; }
.cma-prob-card { background: #fff; border: 1px solid #dce5ee; border-radius: 16px; padding: 24px 26px; box-shadow: 0 6px 22px #173c4a10; overflow-wrap: anywhere; }
.cma-prob-card header { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
.cma-prob-num { flex: none; background: #087c72; color: #fff; border-radius: 8px; padding: 3px 12px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.cma-prob-topic { font-weight: 700; font-size: 18px; color: #0C3B2E; }
.cma-prob-q { font-size: 17px; line-height: 1.7; }
.cma-prob-q p { margin: 8px 0; }
.cma-prob-card details { border-top: 1px solid #dce5ee; padding: 12px 0; }
.cma-prob-card details summary { cursor: pointer; font-weight: 700; color: #125f56; font-size: 16px; }
.cma-prob-card details p { line-height: 1.7; }

/* Homepage contest cards (inside the existing .cma-contest section). */
.cma-home-contest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin: 24px 0; }
.cma-home-contest-card { background: #fff; border: 1px solid #dce5ee; border-top: 6px solid #C6A15B; border-radius: 16px; padding: 22px; box-shadow: 0 6px 22px #173c4a10; }
.cma-home-contest-card h3 { font-size: 26px; color: #0C3B2E; margin: 0 0 4px; border: none; padding: 0; }
.cma-home-contest-count { font-weight: 700; color: #087c72; margin: 0 0 8px; }
.cma-home-contest-card p { line-height: 1.6; }
.cma-home-contest-btn { display: inline-block; margin-top: 10px; background: #0C3B2E; color: #fff; font-weight: 700; padding: 11px 18px; border-radius: 10px; text-decoration: none; }
.cma-home-contest-btn:hover { background: #125f56; }
