/*
 * The hire catalogue's layouts, and only its layouts.
 *
 * Colour, type, spacing and the 2px corner all come from the tokens in
 * app/assets/tailwind/application.css, through var(). That is the same
 * division blocproductions/wordpress-theme keeps between bloc.css and
 * theme.json, and its own file says why: these are "layouts block markup
 * cannot express". A grid with a breakpoint on it, written once with the
 * reason beside it, beats the same grid spelled out in utility classes on
 * four templates and silently different on the fourth.
 *
 * Loaded by the hire layout alone — it is not in ApplicationHelper's
 * SHELL_STYLESHEETS, so it is neither precached by the service worker (the
 * catalogue is a page read in signal, not underground) nor served to
 * app/views/admin or the capture screen. That is what keeps those two plain
 * Tailwind, which is the condition the tokens file sets out.
 */

/* ---- the ledger ------------------------------------------------------- */
/*
 * Not a card grid. The theme forbids it in as many words — "no identical
 * rounded cards, no carousels", "a chronological ledger grouped by decade,
 * not a grid of poster tiles" — and the 2px radius is set where it is so that
 * a card looks like a mistake. The reason given for using one idiom on the
 * productions archive and the newsletter list applies a third time here:
 * "both are a long dated index of one kind of record and the site should not
 * learn two vocabularies for that." An inventory is a long index of one kind
 * of record too.
 *
 * So this is .bloc-decade and .bloc-ledger carried across: a grouping key in
 * a 150px margin column, then rows on a grid, separated by hairlines rather
 * than boxed. Where the archive's key is a decade, this one is the letter the
 * titles start with — alphabetical is an inventory's own order the way
 * chronological is an archive's.
 */
.hire-group {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--spacing-step-6);
  padding-block: var(--spacing-step-4);
  border-top: 1px solid var(--color-paper-line);
}

/*
 * The theme sets its decade key in gilt, on the oxblood ground the
 * productions archive runs on. This ledger is on paper, where gilt is not a
 * colour you can read: #C09A52 on #EFE7D8 is about 2:1, which fails even the
 * 3:1 that large text gets. Ink keeps the Bodoni, the size and the margin
 * column, and leaves crimson free for the hover — which is exactly how the
 * theme treats its two paper-ground lists.
 */
.hire-group__key {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2x-large);
  font-weight: 500;
  line-height: 1;
  color: var(--color-ink);
}

.hire-ledger {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A ledger short enough not to need the margin column still opens with the
   rule the group would have drawn, so a list of four and a list of four
   hundred start on the same line. */
.hire-ledger--plain {
  border-top: 1px solid var(--color-paper-line);
}

.hire-ledger > li + li {
  border-top: 1px solid var(--color-paper-line);
}

/*
 * The archive row is three columns on a baseline: a 78px year, the title, and
 * a condensed venue right-aligned. The photograph is the one place an
 * inventory genuinely differs, and it changes the proportions: a picture has
 * no baseline to sit on and it is taller than a line of type. So the picture
 * takes the margin column of the row and is aligned to the top, and the
 * title and the detail keep their own baseline inside .hire-ledger__body.
 * Rendered, it is still the theme's three columns; it is two grids rather
 * than one so that the narrow layout below can move the detail without the
 * picture following it.
 */
.hire-ledger a {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--spacing-step-2);
  align-items: start;
  padding-block: var(--spacing-step-1);
  color: inherit;
  text-decoration: none;
}

.hire-ledger__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-step-2);
  align-items: baseline;
}

.hire-ledger__title {
  font-size: var(--text-large);
  font-weight: 500;
  color: var(--color-ink);
}

.hire-ledger a:hover .hire-ledger__title,
.hire-ledger a:focus-visible .hire-ledger__title {
  color: var(--color-crimson);
}

.hire-ledger__detail {
  font-size: var(--text-x-small);
  font-stretch: 85%;
  text-align: right;
  color: var(--color-slate);
}

/* A photograph cropped to a common shape, because a ledger is a column of
   rows and a ragged left edge would undo the structure the hairlines make.
   paper-deep underneath so a picture still loading is a quiet rectangle
   rather than a hole. */
.hire-ledger__plate {
  display: block;
  width: 96px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-bloc);
  background: var(--color-paper-deep);
}

/* ---- shared with the rows above ---------------------------------------- */
/* The theme's hover tint, to the same ninth of gilt it uses on a ledger row,
   and reused by the category list so a list of six and a list of four hundred
   answer the pointer the same way. */
.hire-row:hover,
.hire-row:focus-visible {
  background: rgba(192, 154, 82, 0.09);
}

/* The only condensed type in BLOC's system is Archivo leaning on its wdth
   axis. It is here as a class rather than inline so that the one place it is
   written is the one place to fix if the variable font is ever swapped for a
   static one — which is how it broke on the WordPress side, silently. */
.hire-condensed {
  font-stretch: 85%;
}

/* ---- the item's photographs -------------------------------------------- */
/*
 * A lead photograph at the width of the column, then the rest in a fixed
 * three-up with 2px gutters, which is the theme's own choice for a small
 * number of pictures: its gallery notes say justified rows "suit a gallery of
 * thirty, where a ragged last row is invisible; with six they left orphans
 * and a portrait shot collapsed into a sliver." An item here has one to four.
 */
/* Every photograph is a link to its own full size, so that the page works
   with no JavaScript — see the item template. display: block because an
   inline anchor hands the picture the line box's descender space underneath
   it, which is the same few unaccountable pixels .hire-logo's line-height: 0
   answers for the mark. The ones in .hire-plates are grid items and would be
   blockified anyway; the lead is not. */
.hire-shot {
  display: block;
}

.hire-plate img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-bloc);
  background: var(--color-paper-deep);
}

.hire-plates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 2px;
}

.hire-plates img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-bloc);
  background: var(--color-paper-deep);
}

/* ---- facts, and the pager ---------------------------------------------- */
/* The theme's .bloc-panel--past: a ruled list of rows rather than a boxed
   panel, label left and value right on one baseline. */
.hire-facts {
  margin: 0;
  border-top: 2px solid var(--color-ink);
}

.hire-facts__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-step-2);
  padding-block: 9px;
  font-size: var(--text-small);
  border-bottom: 1px solid var(--color-paper-line);
}

.hire-facts__row:last-child {
  border-bottom: 0;
}

.hire-facts__row dt {
  color: var(--color-slate);
}

.hire-facts__row dd {
  margin: 0;
  text-align: right;
  font-weight: 500;
}

/* Two ruled columns, back on the left and on on the right, the shape the
   theme uses to move between productions: a position in a sequence rather
   than a pair of buttons. */
.hire-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-step-4);
  align-items: baseline;
  padding-top: var(--spacing-step-3);
  border-top: 1px solid var(--color-paper-line);
  font-size: var(--text-small);
}

.hire-pager__next {
  text-align: right;
}

.hire-pager__where {
  grid-column: 1 / -1;
  color: var(--color-slate);
  font-stretch: 85%;
  font-size: var(--text-x-small);
}

/* ---- 390px -------------------------------------------------------------- */
/*
 * The theme collapses the decade grid to one column at 900px and hides the
 * ledger's third column outright. The first half carries over; the second
 * cannot. "4" is the difference between one jacket and a chorus's worth and
 * it is the question a hirer asks first, so the detail moves under the title
 * rather than off the page — a line instead of a fact.
 */
@media (max-width: 900px) {
  .hire-group {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-step-2);
  }

  .hire-ledger a {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .hire-ledger__plate {
    width: 72px;
  }

  .hire-ledger__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .hire-ledger__detail {
    text-align: left;
  }

  .hire-plates {
    grid-template-columns: repeat(2, 1fr);
  }

  .hire-pager {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-step-2);
  }

  .hire-pager__next {
    text-align: left;
  }
}

/* ---- the enquiry form -------------------------------------------------- */
/*
 * One block of descendant rules rather than the same six utility classes
 * typed onto five inputs. Same argument the file opens with: written once
 * with the reason beside it beats spelled out five times and silently
 * different on the fourth.
 *
 * The theme has no form of its own to port — bloc.productions hands its
 * contact form to Fluent Forms and lets the plugin dress it — so this is the
 * tokens applied to the one shape the plugin never had to think about: a
 * field on programme-paper cream. Chalk ground against the paper so a field
 * reads as somewhere to type, a hairline in the same colour as every other
 * rule on the page, and the 2px corner.
 */
.hire-form {
  display: grid;
  gap: var(--spacing-step-2);
  max-width: 36rem;
}

.hire-form label {
  display: block;
  font-size: var(--text-x-small);
  font-stretch: 85%;
  letter-spacing: 0.02em;
  color: var(--color-slate);
}

.hire-form input[type="text"],
.hire-form input[type="email"],
.hire-form input[type="tel"],
.hire-form textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius-bloc);
  background: var(--color-chalk);
  color: var(--color-ink);
  /* Inherited rather than set, which also keeps it at 17px. Mobile Safari
     zooms the page when a field it is focusing is under 16px, and a layout
     that jumps as somebody starts typing their name is the sort of thing
     nobody reports and everybody abandons. */
  font: inherit;
}

.hire-form textarea {
  resize: vertical;
}

/*
 * Oxblood, like the band at the top of the page, going to crimson on hover —
 * the two moods the whole system has. Not a rounded pill: the 2px corner is
 * set where it is so that anything rounder looks like a mistake.
 */
.hire-form button {
  justify-self: start;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--radius-bloc);
  background: var(--color-plush);
  color: var(--color-chalk);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.hire-form button:hover {
  background: var(--color-crimson);
}

/*
 * The honeypot. Off the side of the page rather than display: none, because
 * what it is for is a script reading the markup and filling in every text
 * input it finds, and a field with no box is one some of them skip. aria-hidden
 * and tabindex="-1" in the markup keep it away from anybody using a screen
 * reader or a keyboard.
 */
.hire-form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* A rule in the margin rather than a tinted box, which is how the rest of
   these pages mark something out: the ledger, the facts list and the group
   key are all hairlines and type. */
.hire-form__errors {
  border-left: 2px solid var(--color-crimson);
  padding-left: var(--spacing-step-2);
  color: var(--color-ink);
}

/* No margin reset here, unlike the ledger's own rules: hire.css is loaded
   after Tailwind, so a `margin: 0` in this file would beat the mt-step-3 on
   the element and close the gap under the heading. */
.hire-received {
  border-left: 2px solid var(--color-gilt);
  padding-left: var(--spacing-step-2);
  max-width: 48ch;
  color: var(--color-ink);
}

/* ---- quality floor ----------------------------------------------------- */
/*
 * The theme's 3px ring, in crimson rather than the gilt of its global rule.
 * Gilt is its dark-ground colour: the global :focus-visible sits on oxblood
 * sections, and every paper-ground override in bloc.css — the archive plate,
 * the programme cover — switches to crimson for the same reason the grouping
 * key above does. A ring you cannot see against the page is not a ring.
 */
.hire-page :focus-visible {
  outline: 3px solid var(--color-crimson);
  outline-offset: 3px;
}

/* ---- the lockup ------------------------------------------------------- */
/*
 * The mark in the header band, at the theme's own widths — bloc.css sets
 * .bloc-logo svg to 184px, and 150px under 600px wide, which is the one
 * breakpoint it gives the logo. Carried across so the two headers are the
 * same size beside each other rather than nearly.
 *
 * line-height: 0 on the link for the reason the theme has it: an inline SVG
 * sits on the text baseline and takes the line box's descender space with
 * it, which shows up as a few unaccountable pixels under the mark.
 *
 * Nothing here sets a colour. The SVG is drawn in currentColor and the band
 * sets text-gilt on this link, which is what paints it — see
 * HireHelper#bloc_lockup.
 */
.hire-logo {
  display: inline-block;
  line-height: 0;
}

.hire-logo svg {
  display: block;
  width: 184px;
  height: auto;
}

@media (max-width: 600px) {
  .hire-logo svg {
    width: 150px;
  }
}

/* ---- the search box ----------------------------------------------------- */
/*
 * The enquiry form's field and button, on one line and without its grid.
 * Same tokens, deliberately: a search box and an enquiry field are both
 * "somewhere to type on programme-paper cream", and giving the catalogue a
 * second idea of what a field looks like is how a page stops reading as one
 * page.
 *
 * It wraps rather than scrolling: at 390px the button goes under the field,
 * which is two full-width targets instead of a squeezed pair.
 */
.hire-search {
  max-width: 36rem;
}

.hire-search label {
  display: block;
  font-size: var(--text-x-small);
  font-stretch: 85%;
  letter-spacing: 0.02em;
  color: var(--color-slate);
}

.hire-search__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-step-1);
  margin-top: 4px;
}

.hire-search input[type="search"] {
  /* 20rem rather than a width: with the button beside it that comes to more
     than the 342px a 390px page leaves inside its gutters, so the row wraps
     on a phone, and to less than the 36rem above, so it stays one line on a
     desktop. The system test measures both, because the number that decides
     it is the button's own width and that moves with the typeface. */
  flex: 1 1 20rem;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-paper-line);
  border-radius: var(--radius-bloc);
  background: var(--color-chalk);
  color: var(--color-ink);
  /* Inherited, which keeps it at 17px: mobile Safari zooms the page when it
     focuses a field under 16px, and the catalogue is read on a phone. */
  font: inherit;
  /* Safari draws a search field as a pill with an inset shadow. The 2px
     corner is set where it is so that anything rounder looks like a
     mistake. */
  -webkit-appearance: none;
  appearance: none;
}

.hire-search button {
  flex: 0 0 auto;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--radius-bloc);
  background: var(--color-plush);
  color: var(--color-chalk);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.hire-search button:hover {
  background: var(--color-crimson);
}

/* ---- the photograph viewer --------------------------------------------- */
/*
 * #55: somewhere to look at a photograph properly. The theme draws the same
 * thing for its programme reader in assets/css/bloc.css and this is that, in
 * kipple's tokens — oxblood ground, gilt on the controls, the 2px corner.
 *
 * Not a carousel, which the theme forbids. What that forbids is a band of
 * content rotating on a page; this is a viewer somebody opened on purpose and
 * steps through. Nothing here advances on its own and there are no dots along
 * the bottom, and if either ever appears it has become the thing the rule is
 * about.
 */

/*
 * inset: 0 rather than the theme's 100vw/100vh. Those count the scrollbar, so
 * an open dialog sits a few pixels wider than the viewport and the page it is
 * over gains a horizontal scroll — which is the one measurement
 * test/system/hire_catalogue_test.rb holds at 390px.
 *
 * Deliberately no `display` in this block: the UA stylesheet's display: none
 * on a closed <dialog> is what keeps it out of the page, and a display here
 * would put it back on every item page whether anybody opened it or not.
 */
.hire-viewer {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  color: var(--color-chalk);
}

/* --color-plush at 94%, written out because var() cannot be an rgba channel —
   the same way the ledger row's gilt hover tint above is. */
.hire-viewer::backdrop {
  background: rgba(43, 18, 24, 0.94);
}

.hire-viewer__frame {
  position: absolute;
  inset: 64px 96px 72px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hire-viewer__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-bloc);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

/* "3 of 7" and nothing else. Dust rather than chalk: it is a position in a
   set, not something to read before the photograph. */
.hire-viewer__count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  margin: 0;
  text-align: center;
  font-size: var(--text-small);
  font-stretch: 85%;
  color: var(--color-dust);
}

.hire-viewer__close,
.hire-viewer__nav {
  position: absolute;
  border: 1px solid transparent;
  border-radius: var(--radius-bloc);
  background: none;
  color: var(--color-chalk);
  font-family: var(--font-text);
  line-height: 1;
  cursor: pointer;
}

.hire-viewer__close {
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  font-size: 30px;
}

.hire-viewer__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 80px;
  font-size: 40px;
}

.hire-viewer__nav--prev {
  left: 16px;
}

.hire-viewer__nav--next {
  right: 16px;
}

.hire-viewer__close:hover,
.hire-viewer__nav:hover {
  color: var(--color-gilt);
  border-color: var(--color-plush-line);
  background: rgba(43, 18, 24, 0.6);
}

/*
 * Gilt, against the crimson ring the quality floor above sets. Crimson is the
 * paper-ground colour and this is the one oxblood ground on these pages — the
 * same switch the theme makes between its global gilt ring and its
 * paper-ground overrides. #8E2430 on #2B1218 is about 1.3:1; a ring you
 * cannot see is not a ring, and this is the surface a keyboard user has
 * nothing else to go on.
 */
.hire-viewer :focus-visible {
  outline: 3px solid var(--color-gilt);
  outline-offset: 2px;
}

/* The theme's own breakpoint for the viewer, which is not the 900px the
   ledger collapses at: what changes here is how much of a phone's screen the
   frame's margins eat, and 96px of it either side is most of the photograph. */
@media (max-width: 700px) {
  .hire-viewer__frame {
    inset: 56px 12px 76px;
  }

  .hire-viewer__nav {
    width: 44px;
    height: 64px;
    font-size: 32px;
  }

  .hire-viewer__nav--prev {
    left: 2px;
  }

  .hire-viewer__nav--next {
    right: 2px;
  }
}