/* Shared styles for the centre & content pages (owner: centre agent).
   Only new `.cx-*` classes live here; shared `.ta-*` components are not restyled. */

/* ---------- anchors land below the sticky masthead ---------- */
.cx-anchor, [id^="cx-"], .cx-prog, #hoc-thu{ scroll-margin-top:calc(var(--cx-head, 128px) + 14px); }

/* ---------- placeholder chip: facts the owner still has to confirm ---------- */
.cx-tbc{
  display:inline-flex; align-items:center; gap:4px; vertical-align:middle; margin-left:6px; padding:1px 8px 1px 6px;
  border-radius:var(--ta-r-pill); border:1px dashed #D4A24C; background:#FFF8E6; color:#7A4E08;
  font-family:var(--ta-font-ui); font-size:11px; font-weight:800; font-style:normal; letter-spacing:0; line-height:1.6; white-space:nowrap; text-transform:none;
}
.cx-tbc .ta-ico{ width:12px; height:12px; flex:0 0 auto; }
.ta-pagehead .cx-tbc, .ta-band .cx-tbc, .cx-dark .cx-tbc{ background:rgba(255,248,230,.14); border-color:rgba(253,230,138,.7); color:#FDE68A; }

/* ---------- section bands ---------- */
.cx-white{ background:#fff; border-block:1px solid var(--ta-line); padding:40px 0; margin-top:var(--ta-sec-gap); }
.cx-white + .ta-container > .ta-sec:first-child{ margin-top:40px; }
@media (min-width:960px){ .cx-white{ padding:56px 0; } }
.cx-center{ text-align:center; }
.cx-center .ta-sec__head{ justify-content:center; text-align:center; }
.cx-center .ta-sec__lead{ margin-inline:auto; }
.cx-script{ font-family:var(--ta-font-script); font-weight:400; color:var(--ta-maroon-500); line-height:1.1; }
.cx-lead{ font-size:15px; line-height:1.7; color:var(--ta-text-2); }
.cx-opt{ font-weight:600; color:var(--ta-muted); }

/* ---------- check list ---------- */
.cx-checks{ list-style:none; display:grid; gap:9px; margin:0; padding:0; }
.cx-checks li{ position:relative; padding-left:28px; font-size:14.5px; line-height:1.5; color:var(--ta-text-2); }
.cx-checks li::before{ content:""; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; background:var(--ta-green-50); border:1px solid #BBF7D0; }
.cx-checks li::after{ content:""; position:absolute; left:4px; top:5px; width:12px; height:12px; background:var(--ta-green); -webkit-mask:var(--ta-ic-check) center/12px no-repeat; mask:var(--ta-ic-check) center/12px no-repeat; }
.cx-checks b{ color:var(--ta-text); }

/* ---------- numbered gold steps ---------- */
.cx-steps{ list-style:none; display:grid; gap:14px; margin:0; padding:0; counter-reset:cxstep; }
.cx-steps > li{ position:relative; display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; align-items:start; counter-increment:cxstep; }
.cx-steps > li::before{
  content:counter(cxstep, decimal-leading-zero); display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  font-family:var(--ta-font-display); font-weight:900; font-size:17px; color:#4A2A00; background:var(--ta-g-gold); box-shadow:var(--ta-sh-gold), inset 0 1px 0 rgba(255,255,255,.6);
}
.cx-steps > li:not(:last-child)::after{ content:""; position:absolute; left:21px; top:48px; bottom:-12px; width:2px; background:linear-gradient(#E9C97F, rgba(233,201,127,.2)); }
.cx-steps__t{ font-weight:800; font-size:15px; color:var(--ta-text); line-height:1.35; padding-top:2px; }
.cx-steps__d{ margin-top:3px; font-size:13.5px; line-height:1.55; color:var(--ta-text-2); }

/* ---------- forms: trial / contact ---------- */
.cx-form__hint{ display:flex; align-items:flex-start; justify-content:center; gap:6px; font-size:12px; color:var(--ta-muted); text-align:center; }
.cx-form__hint .ta-ico{ width:14px; height:14px; margin-top:1px; color:var(--ta-green); flex:0 0 auto; }
.cx-form .ta-btn .ta-ico{ width:17px; height:17px; }
.cx-form--compact{ gap:10px; }
.cx-form .ta-field{ align-content:start; } /* the registrant hint makes one field taller: do not stretch its neighbour */
.cx-form [data-cx-childname][hidden] + .ta-field{ grid-column:1 / -1; } /* adult program: no child name, info field takes the row */
.cx-form--compact .ta-input,.cx-form--compact .ta-select{ min-height:44px; }

/* ---------- success state ---------- */
.cx-success{ display:grid; justify-items:center; gap:10px; padding:26px 16px; text-align:center; border-radius:var(--ta-r-xl); background:radial-gradient(120% 90% at 50% 0%, #F0FDF4 0%, #fff 70%); border:1px solid #CDEFD8; outline:0; }
.cx-success__seal{ width:64px; height:64px; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(180deg,#22C55E,#15803D); box-shadow:0 0 0 8px rgba(34,197,94,.14), 0 10px 22px rgba(21,128,61,.3); animation:cxPop .5s var(--ta-ease-out) both; }
.cx-success__seal .ta-ico{ width:32px; height:32px; }
@keyframes cxPop{ from{ transform:scale(.4); opacity:0; } to{ transform:none; opacity:1; } }
.cx-success__title{ font-family:var(--ta-font-title); font-weight:700; font-size:22px; color:#166534; }
.cx-success__text{ max-width:46ch; font-size:14.5px; line-height:1.6; color:var(--ta-text-2); }
.cx-success__text a{ color:var(--ta-buy); font-weight:900; }
.cx-success__ev{ display:flex; gap:8px; align-items:flex-start; padding:10px 14px; border-radius:var(--ta-r-lg); background:#fff; border:1px dashed #D9CBB9; font-size:13.5px; text-align:left; }
.cx-success__ev .ta-ico{ width:18px; height:18px; margin-top:2px; color:var(--ta-red); flex:0 0 auto; }
.cx-success__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:4px; }
.cx-success__actions .ta-ico{ width:16px; height:16px; }

/* ---------- registration modal ---------- */
.cx-reg{ display:grid; gap:16px; }
@media (min-width:860px){ .cx-reg--event{ grid-template-columns:300px minmax(0,1fr); align-items:start; gap:22px; } }
.cx-evsum{ border-radius:var(--ta-r-xl); overflow:hidden; background:#FFFBF4; border:1px solid #F0E2CC; }
.cx-evsum__media{ aspect-ratio:16/9; overflow:hidden; }
.cx-evsum__media img{ width:100%; height:100%; object-fit:cover; }
.cx-evsum__body{ display:grid; gap:8px; padding:12px 14px 14px; }
.cx-evsum__top{ display:flex; align-items:center; gap:10px; }
.cx-evsum__media + .cx-evsum__body .cx-evsum__date{ margin-top:-34px; border:3px solid #fff; }
.cx-evsum__date{ display:grid; justify-items:center; width:56px; padding:6px 2px; border-radius:12px; background:var(--ta-g-gold); color:#4A2A00; box-shadow:var(--ta-sh-gold); line-height:1.05; flex:0 0 auto; }
.cx-evsum__date b{ font-family:var(--ta-font-display); font-size:24px; font-weight:900; }
.cx-evsum__date span{ font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.cx-evsum__badges{ display:flex; flex-wrap:wrap; gap:6px; }
.cx-evsum__title{ font-family:var(--ta-font-title); font-weight:700; font-size:17px; line-height:1.3; color:var(--ta-maroon-500); }
.cx-evsum__meta{ list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:12.5px; color:var(--ta-text-2); }
.cx-evsum__meta li{ display:flex; gap:7px; align-items:flex-start; }
.cx-evsum__meta .ta-ico{ width:14px; height:14px; margin-top:2px; color:var(--ta-red); flex:0 0 auto; }
.cx-evsum__sum{ font-size:13px; line-height:1.55; color:var(--ta-muted); }
@media (max-width:859px){ .cx-reg--event .cx-evsum__media{ display:none; } .cx-reg--event .cx-evsum__date{ margin-top:0 !important; } .cx-reg--event .cx-evsum__sum{ display:none; } }

/* ---------- maroon CTA panel ---------- */
.cx-cta{
  position:relative; overflow:hidden; isolation:isolate; display:grid; gap:18px; align-items:center; padding:24px 18px; border-radius:var(--ta-r-2xl); color:#fff;
  background:var(--ta-tx-seigaiha), radial-gradient(120% 160% at 0% 0%, #A3151C 0%, #741318 48%, #4E0B0F 100%); background-size:36px 18px, auto;
  box-shadow:0 18px 40px rgba(60,10,14,.22); border:1px solid rgba(255,255,255,.12);
}
.cx-cta::before{ content:""; position:absolute; z-index:-1; right:-50px; bottom:-60px; width:220px; height:220px; opacity:.18; background:var(--ta-ic-blossom-gold) center/contain no-repeat; }
.cx-cta::after{ content:""; position:absolute; z-index:-1; left:-30px; top:-20px; width:200px; height:120px; opacity:.4; background:var(--ta-ic-flourish) center/contain no-repeat; }
.cx-cta__kicker{ font-size:11.5px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:#FDE68A; }
.cx-cta__title{ margin-top:4px; font-family:var(--ta-font-title); font-weight:700; font-size:clamp(22px, 1rem + 1.2vw, 30px); line-height:1.2; text-wrap:balance; }
.cx-cta__script{ display:block; font-family:var(--ta-font-script); font-size:clamp(26px, 1rem + 1.6vw, 38px); color:#FFD27A; line-height:1.1; margin-top:2px; }
.cx-cta__text{ margin-top:8px; font-size:14.5px; line-height:1.6; color:rgba(255,246,225,.92); max-width:56ch; }
.cx-cta__actions{ display:flex; flex-wrap:wrap; gap:10px; }
.cx-cta__actions .ta-btn{ flex:1 1 200px; }
.cx-cta__actions .ta-ico{ width:17px; height:17px; }
@media (min-width:960px){
  .cx-cta{ grid-template-columns:minmax(0,1fr) auto; padding:34px 40px; gap:32px; }
  .cx-cta__actions{ flex-direction:column; min-width:260px; }
  .cx-cta__actions .ta-btn{ flex:0 0 auto; }
}

/* ---------- filter chip row (horizontal scroll on phones) ---------- */
.cx-chips{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 2px 6px; margin:0 -2px; -webkit-mask:linear-gradient(90deg,#000 92%,transparent); mask:linear-gradient(90deg,#000 92%,transparent); }
.cx-chips::-webkit-scrollbar{ display:none; }
.cx-chips .ta-chip{ flex:0 0 auto; padding:8px 14px; font-size:13px; }
.cx-chips .ta-chip small{ font-size:11px; font-weight:800; opacity:.75; }
@media (min-width:960px){ .cx-chips{ flex-wrap:wrap; overflow:visible; -webkit-mask:none; mask:none; } }

/* ---------- aside cards ---------- */
.cx-card{ background:#fff; border:1px solid #EFEAE4; border-radius:var(--ta-r-xl); box-shadow:var(--ta-sh-card); padding:16px; }
.cx-card__title{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--ta-maroon-600); margin-bottom:12px; }
.cx-card__title::before{ content:""; width:4px; height:16px; border-radius:2px; background:var(--ta-red); }

/* ---------- info tiles (contact / location) ---------- */
.cx-tiles{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:600px){ .cx-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .cx-tiles{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } }
.cx-tile{ position:relative; display:grid; grid-template-columns:48px minmax(0,1fr); gap:12px; align-items:start; padding:16px; background:#fff; border:1px solid #EFEAE4; border-radius:var(--ta-r-xl); box-shadow:var(--ta-sh-card); transition:transform .2s var(--ta-ease), box-shadow .2s; }
.cx-tile:hover{ transform:translateY(-3px); box-shadow:var(--ta-sh-card-h); }
.cx-tile__ico{ width:48px; height:48px; display:grid; place-items:center; border-radius:14px; color:#fff; background:linear-gradient(180deg,#E8262C,#A3151C); box-shadow:0 8px 16px rgba(163,21,28,.25); }
.cx-tile__ico .ta-ico{ width:22px; height:22px; }
.cx-tile__lbl{ font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--ta-muted); }
.cx-tile__val{ margin-top:2px; font-size:15px; font-weight:800; line-height:1.4; color:var(--ta-text); overflow-wrap:anywhere; }
.cx-tile__act{ display:inline-flex; align-items:center; gap:5px; margin-top:6px; font-size:12.5px; font-weight:800; color:var(--ta-maroon-500); }
.cx-tile__act .ta-ico{ width:13px; height:13px; }
.cx-tile__act:hover{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- 2-column page layout (main + aside) ---------- */
.cx-layout{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; }
@media (min-width:1024px){ .cx-layout{ grid-template-columns:minmax(0,1fr) 320px; gap:28px; } .cx-layout--left{ grid-template-columns:270px minmax(0,1fr); } .cx-sticky{ position:sticky; top:calc(var(--cx-head, 128px) + 16px); } }
.cx-aside{ display:grid; gap:16px; align-content:start; }

/* ---------- photo collage (polaroids) ---------- */
.cx-polas{ position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; align-items:center; }
.cx-polas .ta-photo:nth-child(1){ transform:rotate(-4deg); }
.cx-polas .ta-photo:nth-child(2){ transform:translateY(-10px) rotate(2.5deg); z-index:1; }
.cx-polas .ta-photo:nth-child(3){ transform:rotate(4deg); }
.cx-polas .ta-photo figcaption{ font-size:13px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){ .cx-success__seal{ animation:none; } .cx-tile:hover{ transform:none; } }