/*
 * 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.
 */
.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);
}