/*
 * Layouts block markup cannot express.
 * Everything else — colour, type, spacing — lives in theme.json.
 */

/* ---- section moods ---------------------------------------------------- */
/* Add the class "house-down" to a Group block for the oxblood treatment. */
.house-down{background:var(--wp--preset--color--plush);color:var(--wp--preset--color--chalk)}
.house-down a{color:var(--wp--preset--color--gilt)}
.house-down .bloc-kicker::before{background:var(--wp--preset--color--gilt)}

/* ---- kicker: a short rule instead of an all-caps eyebrow label -------- */
.bloc-kicker{display:flex;align-items:center;gap:12px;font-size:var(--wp--preset--font-size--small)}
.bloc-kicker::before{content:"";width:34px;height:2px;flex:none;background:var(--wp--preset--color--crimson)}

/* ---- hero ------------------------------------------------------------- */
/* Oxblood underneath, so the hero still reads before any photograph exists. */
.bloc-hero{position:relative;isolation:isolate;overflow:hidden;
  background:var(--wp--preset--color--plush);color:var(--wp--preset--color--chalk)}
.bloc-hero__media{position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;display:block}
/* The scrim, and it has to be built twice.
   A Cover block brings its own background element, which core sets to
   opacity:0 when dimRatio is 0 and stacks above the photograph — so it needs
   its opacity back but must keep core's stacking, or it ends up behind the
   image and does nothing. The generated hero is a plain section and gets a
   pseudo-element instead. Never both, or the gradient doubles. */
.bloc-hero.wp-block-cover .wp-block-cover__background,
.bloc-hero.wp-block-cover .wp-block-cover__background.has-background-dim-0{
  opacity:1;
  background:
    linear-gradient(90deg,rgba(43,18,24,.88) 0 22%,rgba(43,18,24,.5) 55%,rgba(43,18,24,.22)),
    linear-gradient(180deg,rgba(43,18,24,.15) 0 40%,rgba(43,18,24,.45));
}
.bloc-hero:not(.wp-block-cover)::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(43,18,24,.88) 0 22%,rgba(43,18,24,.5) 55%,rgba(43,18,24,.22)),
    linear-gradient(180deg,rgba(43,18,24,.15) 0 40%,rgba(43,18,24,.45));
}
/* Both heroes sit on the same wide measure as the logo and the body, so the
   page reads down one left edge. */
.bloc-hero.wp-block-cover .wp-block-cover__inner-container{position:relative;z-index:1;
  max-width:var(--wp--style--global--wide-size);margin-inline:auto;width:100%}
/* Same left edge as the logo and the body, so the page has one spine. */
.bloc-hero__inner{position:relative;max-width:var(--wp--style--global--wide-size);
  margin-inline:auto;padding:var(--wp--preset--spacing--70) var(--wp--preset--spacing--30)}
.bloc-hero .bloc-kicker{color:var(--wp--preset--color--dust)}
/* The hero is a house-down mood even without the class, so the kicker rule
   goes gilt like every other dark section. */
.bloc-hero .bloc-kicker::before{background:var(--wp--preset--color--gilt)}
.bloc-hero__title{max-width:15ch;font-family:var(--wp--preset--font-family--display);
  font-weight:500;line-height:1.05;letter-spacing:-0.015em;
  font-size:var(--wp--preset--font-size--4-x-large);margin:var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--10)}
.bloc-hero__dates{font-stretch:82%;font-weight:500;color:var(--wp--preset--color--gilt);
  font-size:var(--wp--preset--font-size--large);margin:0}
.bloc-hero__venue{color:var(--wp--preset--color--dust);margin:4px 0 0}
.bloc-hero__actions{margin-top:var(--wp--preset--spacing--40)}

/* ---- archive ledger --------------------------------------------------- */
.bloc-decade{display:grid;grid-template-columns:150px minmax(0,1fr);gap:64px;
  padding-block:32px;border-top:1px solid var(--wp--preset--color--plush-line)}
.bloc-decade__year{font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--2-x-large);color:var(--wp--preset--color--gilt);line-height:1;margin:0}
.bloc-ledger{list-style:none;margin:0;padding:0}
.bloc-ledger li a{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:16px;
  align-items:baseline;padding:9px 0;text-decoration:none;
  border-bottom:1px solid rgba(78,42,49,.55)}
.bloc-ledger li:last-child a{border-bottom:none}
.bloc-ledger li a:hover{background:rgba(192,154,82,.09)}
.bloc-ledger__y{font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--dust);
  font-variant-numeric:lining-nums}
.bloc-ledger__title{font-size:var(--wp--preset--font-size--large);font-weight:500;
  color:var(--wp--preset--color--chalk)}
.bloc-ledger__venue{font-size:var(--wp--preset--font-size--x-small);color:var(--wp--preset--color--dust);
  font-stretch:85%;text-align:right}
.bloc-ledger li a:hover .bloc-ledger__title{color:var(--wp--preset--color--gilt)}

/* ---- news list: date left, headline centre, link right ---------------- */
/* The grid sits on the row, not on a wrapping anchor, so a core Query Loop
   can produce this shape with no custom markup. */
.bloc-news{list-style:none;margin:0;padding:0;border-top:1px solid var(--wp--preset--color--paper-line)}
.bloc-news li{border-bottom:1px solid var(--wp--preset--color--paper-line);
  display:grid;grid-template-columns:130px minmax(0,1fr) 150px;gap:24px;
  align-items:baseline;padding:24px 0;margin:0}
.bloc-news .wp-block-post-date,
.bloc-news__date{font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--slate);font-stretch:85%}
.bloc-news .wp-block-post-title,
.bloc-news__title{font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--x-large);font-weight:500;line-height:1.15;margin:0}
.bloc-news .wp-block-post-title a{text-decoration:none}
.bloc-news .wp-block-read-more{font-size:var(--wp--preset--font-size--small);text-decoration:none;justify-self:end}
.bloc-news li:hover .wp-block-post-title a,
.bloc-news a:hover .bloc-news__title{color:var(--wp--preset--color--crimson)}

/* ---- facts list: a core Table block, ruled rather than boxed ---------- */
.bloc-facts table{width:100%;border-collapse:collapse;border:0}
.bloc-facts td,.bloc-facts th{padding:12px 0;border:0;
  border-bottom:1px solid var(--wp--preset--color--paper-line);vertical-align:baseline;text-align:left}
.bloc-facts tr td:first-child{font-weight:600;width:38%}
.bloc-facts tr td:last-child{color:var(--wp--preset--color--slate)}
.house-down .bloc-facts td{border-bottom-color:var(--wp--preset--color--plush-line)}
.house-down .bloc-facts tr td:last-child{color:var(--wp--preset--color--dust)}

/* ---- cast: a plain list that falls into columns ----------------------- */
.bloc-cast{columns:2;column-gap:var(--wp--preset--spacing--50);list-style:none;margin:0;padding:0}
.bloc-cast li{break-inside:avoid;padding:9px 0;margin:0;
  border-bottom:1px solid var(--wp--preset--color--paper-line)}

/* ---- production panel ------------------------------------------------- */
/* One shape, two skins. A show still to come gets house lights down and
   sticks to the viewport; one that closed in 1951 gets a quiet ruled panel,
   because "Booking" over a blank price is worse than no panel at all. */
.bloc-panel__title{font-family:var(--wp--preset--font-family--display);font-weight:500;
  font-size:var(--wp--preset--font-size--x-large);line-height:1.1;margin:0 0 12px}
.bloc-panel__rows{margin:0}
.bloc-panel__row{display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:9px 0;font-size:var(--wp--preset--font-size--small)}
.bloc-panel__row dd{margin:0;text-align:right}

.bloc-panel--booking{background:var(--wp--preset--color--plush-deep);
  border:1px solid var(--wp--preset--color--plush-line);padding:24px;position:sticky;top:88px;
  color:var(--wp--preset--color--chalk)}
.bloc-panel--booking .bloc-panel__row{border-top:1px solid var(--wp--preset--color--plush-line)}
.bloc-panel--booking .bloc-panel__row dt{color:var(--wp--preset--color--dust)}
.bloc-panel--booking .wp-block-buttons{margin-top:var(--wp--preset--spacing--30)}

.bloc-panel--past{border-top:2px solid var(--wp--preset--color--ink);padding-top:16px}
.bloc-panel--past .bloc-panel__row{border-bottom:1px solid var(--wp--preset--color--paper-line)}
.bloc-panel--past .bloc-panel__row:last-child{border-bottom:0}
.bloc-panel--past .bloc-panel__row dt{color:var(--wp--preset--color--slate)}

/* ---- programme -------------------------------------------------------- */
.bloc-programme{margin-top:var(--wp--preset--spacing--30);
  padding-top:var(--wp--preset--spacing--20);border-top:1px solid var(--wp--preset--color--paper-line)}
.bloc-panel--booking .bloc-programme{border-top-color:var(--wp--preset--color--plush-line)}
.bloc-programme__title{font-family:var(--wp--preset--font-family--display);font-weight:500;
  font-size:var(--wp--preset--font-size--large);margin:0 0 12px}
.bloc-programme img{display:block;width:100%;height:auto;border:1px solid var(--wp--preset--color--paper-line)}
.bloc-panel--booking .bloc-programme img{border-color:var(--wp--preset--color--plush-line)}
.bloc-programme__link{margin:12px 0 0;font-size:var(--wp--preset--font-size--small)}

/* ---- creatives -------------------------------------------------------- */
.bloc-creatives{margin-top:var(--wp--preset--spacing--60)}
.bloc-creatives h2{margin:0 0 12px}
.bloc-creatives .bloc-panel__row{border-top:1px solid var(--wp--preset--color--paper-line)}
.bloc-creatives .bloc-panel__row dt{color:var(--wp--preset--color--slate)}
.bloc-creatives .bloc-panel__row dd{font-weight:500}

/* ---- production gallery ------------------------------------------------ */
/* Justified rows: each figure is laid out at its own aspect ratio and grows
   to fill the row, so nothing is cropped to a common shape and no column is
   left half empty. The ratio comes through as --ar from PHP. */
/* The section already carries the root padding; adding more here pushed the
   photographs out of step with the columns above them. */
.bloc-gallery{max-width:var(--wp--style--global--wide-size);margin-inline:auto}
.bloc-gallery__title{font-family:var(--wp--preset--font-family--display);font-weight:500;
  font-size:var(--wp--preset--font-size--2-x-large);line-height:1.1;letter-spacing:-.015em;
  margin:0 0 var(--wp--preset--spacing--40)}
.bloc-gallery__grid{display:flex;flex-wrap:wrap;gap:var(--wp--preset--spacing--10)}
.bloc-gallery__grid figure{margin:0;height:300px;
  flex:var(--ar,1.5) 1 calc(var(--ar,1.5) * 300px);min-width:200px}
.bloc-gallery__grid img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px}
@media (max-width:900px){ .bloc-gallery__grid figure{height:220px} }
@media (max-width:600px){ .bloc-gallery__grid figure{height:180px;min-width:140px} }

/* ---- forms ------------------------------------------------------------- */
/* Fluent Forms markup, dressed to match. Scoped to .bloc-form so it is inert
   anywhere a form is not, and so the plugin's own styling elsewhere is left
   alone. Ruled and square rather than rounded, like the rest of the theme. */
/* Fluent Forms drives its own colours from these, so setting them is cleaner
   than out-specifying every rule it ships. */
.bloc-form{--fluentform-primary:var(--wp--preset--color--gilt);
  --fluentform-secondary:var(--wp--preset--color--slate);
  --fluentform-danger:var(--wp--preset--color--crimson);
  --fluentform-border-color:var(--wp--preset--color--paper-line);
  --fluentform-border-radius:2px}
/* The constrained layout centres anything narrower than the column, with
   !important, so the form has to say otherwise to line up with the prose. */
.bloc-form .fluentform{max-width:34rem;
  margin-inline-start:0 !important;margin-inline-end:auto !important}
.bloc-form .ff-el-group{margin:0 0 var(--wp--preset--spacing--30)}
.bloc-form .ff-el-input--label label{display:block;margin:0 0 6px;font-weight:600;
  font-size:var(--wp--preset--font-size--small);color:var(--wp--preset--color--slate)}
.bloc-form .ff-el-input--label.ff-el-is-required label::after{color:var(--wp--preset--color--crimson)}
.bloc-form .ff-el-form-control{width:100%;box-sizing:border-box;
  font-family:var(--wp--preset--font-family--sans);font-size:var(--wp--preset--font-size--medium);
  line-height:1.5;color:var(--wp--preset--color--ink);
  background:var(--wp--preset--color--chalk);
  border:1px solid var(--wp--preset--color--paper-line);border-radius:2px;
  padding:12px 14px;box-shadow:none;transition:border-color .12s ease}
.bloc-form textarea.ff-el-form-control{min-height:11rem;resize:vertical}
.bloc-form .ff-el-form-control:hover{border-color:var(--wp--preset--color--dust)}
.bloc-form .ff-el-form-control:focus{border-color:var(--wp--preset--color--gilt);
  outline:3px solid rgba(192,154,82,.32);outline-offset:0}
.bloc-form .ff-el-form-control::placeholder{color:var(--wp--preset--color--dust)}
.bloc-form .ff-el-help-message{font-size:var(--wp--preset--font-size--x-small);
  color:var(--wp--preset--color--slate);margin-top:6px}
.bloc-form .error,.bloc-form .text-danger{color:var(--wp--preset--color--crimson);
  font-size:var(--wp--preset--font-size--small)}
/* The submit button borrows the theme's button treatment rather than the
   plugin's, so there is one button in the design and not two. */
.bloc-form form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style){
  background:var(--wp--preset--color--gilt);color:var(--wp--preset--color--plush);
  border:1.5px solid var(--wp--preset--color--gilt);border-radius:2px;
  font-family:var(--wp--preset--font-family--sans);font-size:var(--wp--preset--font-size--small);
  font-weight:600;padding:13px 26px;cursor:pointer;box-shadow:none;transition:background-color .12s ease}
.bloc-form form.frm-fluent-form .ff-btn-submit:not(.ff_btn_no_style):hover{background:#D2AC62;border-color:#D2AC62;color:var(--wp--preset--color--plush)}
.bloc-form .ff-message-success{border:1px solid var(--wp--preset--color--paper-line);
  border-left:3px solid var(--wp--preset--color--gilt);background:var(--wp--preset--color--paper-deep);
  padding:var(--wp--preset--spacing--30);border-radius:2px}
/* On oxblood, should a form ever sit there. */
.house-down .bloc-form .ff-el-input--label label{color:var(--wp--preset--color--dust)}
.house-down .bloc-form .ff-el-form-control{background:var(--wp--preset--color--plush-deep);
  color:var(--wp--preset--color--chalk);border-color:var(--wp--preset--color--plush-line)}

/* ---- Google Form embed ------------------------------------------------ */
/* Forms are Google Forms in an iframe, not a form plugin. */
.bloc-form iframe{width:100%;min-height:1100px;border:0;display:block;
  background:var(--wp--preset--color--chalk)}

/* ---- logo -------------------------------------------------------------- */
/* The SVG is fill="currentColor", so it takes the colour of whatever it sits
   in: gilt inside house-down, ink on paper. No second file for dark mode. */
.bloc-logo{line-height:0}
.bloc-logo__link{display:inline-block;color:inherit;text-decoration:none}
.bloc-logo svg{display:block;width:184px;height:auto}
.bloc-logo__fallback{font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--large);font-weight:600;letter-spacing:.1em;line-height:1.2}
.wp-block-group > footer .bloc-logo svg,
footer .bloc-logo svg{width:210px}
@media (max-width:600px){ .bloc-logo svg{width:150px} }

/* ---- section stacking ------------------------------------------------- */
/* Sections carry their own padding. Without this the block gap lets the paper
   ground show through as a stripe between the header, each band and the
   footer, which reads as a rendering fault rather than as space. */
.wp-site-blocks > *{margin-block-start:0}
.bloc-sections > *{margin-block-start:0}

/* ---- quality floor ---------------------------------------------------- */
:focus-visible{outline:3px solid var(--wp--preset--color--gilt);outline-offset:3px}
/* .bloc-prose deliberately sets no width. Both attempts to give it one made
   things worse: overriding the centring put paragraphs against the section
   edge, and max-width:100% beat the constrained layout's own content-size and
   let them run the full width of the page. The container is the measure. */

@media (max-width:900px){
  .bloc-decade{grid-template-columns:1fr;gap:16px}
  .bloc-news li{grid-template-columns:1fr;gap:8px}
  .bloc-news .wp-block-read-more{justify-self:start}
  .bloc-ledger li a{grid-template-columns:64px minmax(0,1fr)}
  .bloc-ledger__venue{display:none}
  .bloc-cast{columns:1}
  .bloc-booking{position:static}
  .bloc-hero__inner{padding-block:var(--wp--preset--spacing--60)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}