/* Home-page banner for the Children's Day drawing contest (CMPS_Contest::home_banner). */
.dcb { --navy: #1B2559; --yellow: #FFD233; --red: #E63946; --green: #2DB34A; --blue: #3D8BFF; --purple: #8E44EC;
  position: relative; max-width: 1180px; margin: 22px auto; border: 3px solid var(--navy); border-radius: 26px; overflow: hidden;
  background: linear-gradient(180deg, #8FD0FF 0%, #BFE6FF 62%, #FFF6D8 62%); box-shadow: 8px 8px 0 var(--navy);
  font-family: "Poppins", system-ui, sans-serif; color: var(--navy); }
.dcb * { box-sizing: border-box; }
.dcb::before { content: ""; position: absolute; left: 50%; top: 58%; width: 900px; height: 900px; transform: translate(-50%, 0); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 54%, rgba(155,93,229,.18) 54.5%, rgba(155,93,229,.18) 57%, rgba(61,139,255,.18) 57%, rgba(61,139,255,.18) 59.5%, rgba(45,179,74,.18) 59.5%, rgba(45,179,74,.18) 62%, rgba(255,210,51,.25) 62%, rgba(255,210,51,.25) 64.5%, rgba(230,57,70,.18) 64.5%, rgba(230,57,70,.18) 67%, transparent 67%); }

.dcb-strip { position: relative; z-index: 1; margin: 0; padding: 9px 14px; background: var(--red); color: #fff; text-align: center; font: 700 15px/1.35 "Baloo 2", "Poppins", sans-serif; letter-spacing: .2px; border-bottom: 3px solid var(--navy); }
.dcb-strip b { color: var(--yellow); }

.dcb-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; align-items: center; padding: 24px 30px 30px; }
.dcb-pill { display: inline-block; background: #fff; border: 3px solid var(--navy); border-radius: 999px; padding: 4px 14px; font: 800 14px/1.2 "Baloo 2", sans-serif; transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--navy); }
.dcb-kicker { margin: 12px 0 0; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .5px; color: #24407A; }
.dcb-h { margin: 8px 0 0; font: 800 clamp(34px, 5vw, 58px)/1.2 "Baloo 2", sans-serif; color: var(--navy); }
.dcb-h span { display: block; font-size: .72em; }
.dcb-h b { display: inline-block; color: #fff; -webkit-text-stroke: 2px var(--navy); text-shadow: 4px 4px 0 var(--navy); letter-spacing: 1px; }
.dcb-tag { display: inline-block; margin: 8px 0 0; background: #fff; border: 3px solid var(--navy); border-radius: 12px; padding: 4px 14px; color: var(--red); font: 800 20px/1.2 "Baloo 2", sans-serif; transform: rotate(-1.5deg); box-shadow: 4px 4px 0 var(--navy); }
.dcb-chips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dcb-chips li { margin: 0; background: #fff; border: 2px solid var(--navy); border-radius: 12px; padding: 5px 12px; font-weight: 700; font-size: 14px; }
.dcb-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; }
.dcb-cta { display: inline-block; background: var(--red); color: #fff !important; text-decoration: none !important; border: 3px solid var(--navy); border-radius: 16px; padding: 12px 22px; font: 800 20px/1.1 "Baloo 2", sans-serif; box-shadow: 5px 5px 0 var(--navy); transition: transform .15s, box-shadow .15s; }
.dcb-cta:hover, .dcb-cta:focus-visible { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--navy); }
.dcb-left { font-weight: 600; font-size: 14px; }
.dcb-left b { color: var(--red); }

/* calendar card */
.dcb-cal { position: relative; display: flex; flex-direction: column; align-items: center; text-decoration: none !important; color: var(--navy) !important;
  background: #fff; border: 3px solid var(--navy); border-radius: 18px; padding: 26px 18px 18px; box-shadow: 8px 8px 0 var(--navy); transform: rotate(2deg); transition: transform .2s; }
.dcb-cal:hover { transform: rotate(0) scale(1.02); }
.dcb-rings { position: absolute; top: -14px; left: 0; right: 0; display: flex; justify-content: center; gap: 60px; }
.dcb-rings i { width: 14px; height: 28px; border: 3px solid var(--navy); border-radius: 8px; background: #D9DEEA; }
.dcb-cal-head { font: 800 15px/1.2 "Baloo 2", sans-serif; text-transform: uppercase; letter-spacing: .6px; color: var(--red); text-align: center; }
.dcb-cal-year { font: 800 64px/1 "Baloo 2", sans-serif; letter-spacing: 2px; }
.dcb-cal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; width: 100%; max-width: 270px; margin: 8px 0 10px; }
.dcb-cal-grid i { display: flex; align-items: flex-end; justify-content: flex-start; height: 40px; padding: 3px 5px; border: 2px solid var(--navy); border-radius: 7px; font: 800 12px/1 "Baloo 2", sans-serif; font-style: normal; color: var(--navy);
  background-image: linear-gradient(160deg, transparent 55%, rgba(255,255,255,.55) 55%); }
.dcb-m0 { background-color: #FFB3BE; } .dcb-m1 { background-color: #FFE066; } .dcb-m2 { background-color: #A8E6A1; } .dcb-m3 { background-color: #B9D7FF; }
.dcb-cal-txt { font-weight: 700; font-size: 15px; text-align: center; }
.dcb-cal-txt b { color: var(--red); }
.dcb-stamp { position: absolute; right: -16px; bottom: 54px; padding: 6px 12px; border: 4px solid var(--green); border-radius: 10px; background: rgba(255,255,255,.92); color: var(--green);
  font: 800 22px/1 "Baloo 2", sans-serif; letter-spacing: 1px; transform: rotate(14deg); box-shadow: 0 0 0 3px #fff; animation: dcb-stamp 2.8s ease-in-out infinite; }
@keyframes dcb-stamp { 0%, 100% { transform: rotate(14deg) scale(1); } 50% { transform: rotate(14deg) scale(1.08); } }

@media (max-width: 820px) {
  .dcb { margin: 14px 10px; border-radius: 20px; box-shadow: 5px 5px 0 var(--navy); background: linear-gradient(180deg, #8FD0FF 0%, #BFE6FF 70%, #FFF6D8 70%); }
  .dcb-in { grid-template-columns: 1fr; padding: 18px 16px 26px; gap: 28px; }
  .dcb-text { text-align: center; }
  .dcb-chips, .dcb-cta-row { justify-content: center; }
  .dcb-cal { max-width: 330px; margin: 0 auto; width: 100%; }
  .dcb-stamp { right: -8px; font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .dcb-stamp { animation: none; } .dcb-cal, .dcb-cta { transition: none; } }