/* ==========================================================================
   THEATRUM ANIMI — THEATRE CAN campaign sections
   Ported from mockup/assets/css/campaign.css and the campaign block of
   mockup/assets/css/tokens.css. The mockup scoped everything to its
   <main class="campaign-theatre-can">; here the tokens and rules sit on the
   campaign section roots (the class ctc-section on each section pattern's
   outer group), so a campaign section keeps its look on any page and no other
   section is touched. functions.php loads this file only on requests that
   render such a section (or a response-plate quote), and always in the
   editor. Not here: the photo band and the starburst photo (their blocks'
   own style.css) and the response form internals (ta/response-form).

   The accents, the starburst and the kicker lines are a provisional campaign
   exception awaiting designer and customer approval (mockup/README.md). The
   accents never go into theme.json, so they stay out of every colour picker.
   ========================================================================== */

/* --- tokens -------------------------------------------------------------------
   Accents are decorative only: they never carry meaning and never sit behind
   text. Measured against the surfaces they are drawn on (graphics only, no
   text requirement applies):
     coral    #ff5757  5.50:1 on deep (hero, under the scrim)
     lavender #a39ccf  2.39:1 on crepito (intro, beside the photo)
     yellow   #fabd5c  6.99:1 on rasa (take-part card)
     pink     #ef94ca  5.46:1 on rasa (take-part card)
     lime     #b0d236  6.78:1 on rasa (take-part card)

   Campaign body and UI text targets 7:1 (AAA) everywhere, so the four core
   values that miss 7:1 on some surface are adjusted inside campaign sections
   only. Every ratio is computed from the token values (WCAG 2 relative
   luminance), not estimated:
     ink-secondary          #524c4c  7.86 crepito · 7.08 sunken · 8.41 white
                                     7.13 info surface · 7.10 error surface
                                     7.24 warning surface · 7.20 success surface
     ink-inverse-secondary  #d6d1cb  7.74 rasa · 11.27 deep
     warning                #684610  7.31 warning surface · 7.93 crepito
     success                #234e38  8.10 success surface · 8.84 crepito
   Unchanged and already AAA here: crepito on rasa 10.97, on deep 15.98;
   rasa on sunken 9.89, on white 11.75; error on error surface 7.04; info on
   info surface 7.38.

   Text over photographs sits on --campaign-scrim, 80% deep. Over a pure
   white pixel that composites to #4b4949: crepito on it is 8.35:1 (and
   #d6d1cb only 5.89:1, so the photo band sets its secondary ink to crepito);
   over coral it composites to #4b2727, 12.12:1. Focus rings stay dual-tone
   (crepito and rasa, 10.97:1 either way); control boundaries are crepito on
   rasa 10.97:1.

   The two shared sections the campaign page reuses (What's on, #whats-on, and
   the support services, #support) take the same AAA values when they follow
   a campaign section, as they did inside the mockup's campaign <main>. */
.ctc-section,
.ctc-section ~ :is(#whats-on, #support) {
  --campaign-coral: #ff5757;
  --campaign-lavender: #a39ccf;
  --campaign-yellow: #fabd5c;
  --campaign-pink: #ef94ca;
  --campaign-lime: #b0d236;
  --campaign-scrim: rgb(30 27 27 / 80%);

  --color-ink-secondary: #524c4c;
  --color-ink-inverse-secondary: #d6d1cb;
  --color-warning: #684610;
  --color-success: #234e38;
}

/* The starburst as a mask, for the response plates (core blocks cannot hold
   the inline svg the blocks print). Same five bars, ten rays. */
:root {
  --ctc-burst: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-103 -103 206 206'%3E%3Crect x='-20.75' y='-100' width='41.5' height='200'/%3E%3Crect x='-20.75' y='-100' width='41.5' height='200' transform='rotate(36)'/%3E%3Crect x='-20.75' y='-100' width='41.5' height='200' transform='rotate(72)'/%3E%3Crect x='-20.75' y='-100' width='41.5' height='200' transform='rotate(108)'/%3E%3Crect x='-20.75' y='-100' width='41.5' height='200' transform='rotate(144)'/%3E%3C/svg%3E");
}

/* At 200% text in a narrow window a single display word can be wider than
   the viewport. It may then break inside the word rather than push the page
   sideways; at every normal size nothing changes. */
.ctc-section :is(h1, h2, h3) { overflow-wrap: anywhere; }

/* a kicker folded into its heading keeps the kicker's look */
.ctc-section h2 > .eyebrow { display: block; }

/* --- intro split ------------------------------------------------------------ */

.ctc-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-2xl) var(--grid-gutter);
  align-items: center;
}
.ctc-split__text { grid-column: 1 / span 6; }
.ctc-split__media { grid-column: 8 / span 5; }
@media (max-width: 63.99em) {
  .ctc-split { grid-template-columns: minmax(0, 1fr); }
  .ctc-split__text, .ctc-split__media { grid-column: 1 / -1; }
  .ctc-split__media { max-width: 34rem; }
}
.ctc-intro p { font-size: var(--type-lead); line-height: 1.5; }

/* --- the response band head --------------------------------------------------
   The form itself is ta/response-form's. */

.ctc-voice__head { max-width: 52rem; margin-inline: auto; text-align: center; }
.ctc-voice__head :is(.lead, .is-style-lead) { margin-inline: auto; color: var(--color-ink-inverse); }

/* --- forms inside campaign sections ------------------------------------------
   The newsletter form over the Stay connected photo and any form in a dark
   campaign band. */
:is(.ctc-section.is-inverse, .ctc-section .is-inverse) .field__hint { color: var(--color-ink-inverse-secondary); }
/* On a dark surface the checked box takes the light fill, so its state is
   never a dark mark on a dark band. */
:is(.ctc-section.is-inverse, .ctc-section .is-inverse) .choice input { accent-color: var(--color-crepito); }
/* Inline errors carry their own light surface, so they stay 7:1 on the dark
   band and over the photo alike: error on error surface, 7.04:1. */
.ctc-section .field__error {
  width: fit-content;
  max-width: 100%;
  padding: var(--space-3xs) var(--space-xs);
  background: var(--color-error-surface);
  border: var(--border-hairline) solid var(--color-error);
  color: var(--color-error);
  font-size: var(--type-meta);
}
.ctc-section .field__error svg { fill: currentcolor; }
.ctc-section .error-summary { max-width: 46rem; }

/* --- responses ----------------------------------------------------------------
   Quote text is HTML on a rasa plate laid over the burst. A short line sits
   inside the burst's body; a long one grows the plate and the rays show
   around it, so crepito on rasa (10.97:1) holds at any length. Published
   responses are core/post-template items holding the card-response group
   (.ctc-response); the samples shown while none is published are core/quote
   blocks in the "Response plate" style. Both share the plate rules. */

.ctc-responses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xl) var(--space-xl);
  margin-top: var(--space-3xl);
  padding: 0;
  list-style: none;
}
/* Tablet: two across, the odd one centred below, so a 200-character quote
   still has room; phone: one centred column. */
@media (min-width: 48em) and (max-width: 63.99em) {
  .ctc-responses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctc-responses > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - var(--space-xl) / 2);
  }
}
@media (max-width: 47.99em) {
  .ctc-responses { grid-template-columns: minmax(0, 20rem); justify-content: center; }
}
.ctc-responses > * { margin: 0; }

/* The plate: a burst-shaped rasa mask behind, the text column centred over
   it at min(100%, max(58%, 9em)); 9em only wins when text is zoomed, so a
   word never splits inside the plate. */
.ctc-response,
blockquote.wp-block-quote.is-style-response-plate {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink-inverse);
}
.ctc-response::before,
blockquote.wp-block-quote.is-style-response-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-rasa);
  -webkit-mask: var(--ctc-burst) center / contain no-repeat;
          mask: var(--ctc-burst) center / contain no-repeat;
}
.ctc-response > *,
blockquote.wp-block-quote.is-style-response-plate > * {
  width: min(100%, max(58%, 9em));
  margin: 0;
  padding-inline: var(--space-2xs);
  background: var(--color-rasa);
}
.ctc-response > :first-child,
blockquote.wp-block-quote.is-style-response-plate > :first-child { padding-top: var(--space-2xs); }
.ctc-response > :last-child,
blockquote.wp-block-quote.is-style-response-plate > :last-child { padding-bottom: var(--space-2xs); }
.ctc-response__text,
blockquote.wp-block-quote.is-style-response-plate p {
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  font-style: normal;
  line-height: 1.4;
  overflow-wrap: break-word;
}
.ctc-response__caption,
blockquote.wp-block-quote.is-style-response-plate cite {
  display: block;
  padding-top: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--type-meta);
  font-style: normal;
  color: var(--color-ink-inverse);
}
/* An anonymous response has no caption: name and country are both empty. */
.ctc-response__caption { display: flex; flex-wrap: wrap; gap: 0 0.35em; }
.ctc-response__caption > p { margin: 0; }
.ctc-response__caption > p:empty { display: none; }
.ctc-response__caption > p:not(:empty) ~ p:not(:empty)::before { content: "· "; }
.ctc-response__caption:not(:has(> p:not(:empty))) { display: none; }
.ctc-notice { max-width: 46rem; }

/* --- take part and share your experience ----------------------------------- */

.ctc-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xl) var(--space-xl);
  margin-top: var(--space-2xl);
}
@media (max-width: 63.99em) { .ctc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.99em) { .ctc-cards { grid-template-columns: minmax(0, 1fr); } }
.ctc-card p { font-size: var(--type-body); }

/* The mockup holds Take part and Share your experience in one dark band;
   here they are two section patterns, so a share band that follows the
   take-part band closes up to it with the mockup's 4xl gap. */
.ctc-take-part:has(+ .ctc-share-band) { padding-bottom: 0; }
.ctc-take-part + .ctc-share-band { padding-top: var(--space-4xl); }
.ctc-share__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg) var(--grid-gutter);
  padding-top: var(--space-3xl);
  border-top: var(--border-hairline) solid var(--color-ink-inverse);
}
@media (max-width: 63.99em) { .ctc-share__inner { grid-template-columns: minmax(0, 1fr); } }
.ctc-share__text { font-size: var(--type-lead); line-height: 1.5; max-width: var(--measure); }

/* --- what's on --------------------------------------------------------------- */

.ctc-section ~ #whats-on .event .tag { justify-self: start; }