/* The public gig page, /gigs/{id}. Hand written because the prebuilt
   Tailwind file from the Rails app only has the classes Rails used.

   The light zine layout. Phone first: the poster taped on, the name, the
   ticket (gig details only), the buy button under it, the line-up as a
   flyer would print it, then the back page lists. From 768px the poster
   sits left and the name, ticket, button and line-up right, with the back
   page full width below.

   Each gig gets a ticket design (gp-ticket-stub, -cloak or -side), a tape
   style (gp-tape-corners or -top) and two angles (--gp-tilt, --gp-stamp)
   from zineStyleFor in internal/public/zine.go. */

.gp {
  margin: 1.5rem 0 3rem;
  text-transform: uppercase;
  font-weight: 900;
  color: #000;
}

.gp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.gp-top {
  display: grid;
  gap: 1.25rem;
}

/* The poster, taped on and leaning a little. */

.gp-poster-wrap {
  padding: 0.9rem 1.5rem 0.5rem;
  /* The tilted poster and its tape can poke past the column edge. */
  overflow-x: clip;
}
.gp-poster {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  transform: rotate(var(--gp-tilt, 0deg));
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 8px 18px rgb(0 0 0 / 0.18);
}
.gp-poster img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80vh;
}
.gp-tape {
  position: absolute;
  width: 5rem;
  height: 1.5rem;
  background: rgb(233 226 204 / 0.8);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.12);
}
.gp-tape-corners .gp-tape-a {
  top: -0.3rem;
  left: -1.6rem;
  transform: rotate(-38deg);
}
.gp-tape-corners .gp-tape-b {
  top: -0.3rem;
  right: -1.6rem;
  transform: rotate(38deg);
}
.gp-tape-top .gp-tape-a {
  top: -0.75rem;
  left: 50%;
  width: 7rem;
  transform: translateX(-50%) rotate(-3deg);
}
.gp-tape-top .gp-tape-b {
  display: none;
}

/* No poster: an editor's layout note where the poster will go. */
.gp-poster-none {
  display: grid;
  place-items: center;
  width: min(100%, 16rem);
  aspect-ratio: 1 / 1.414;
  margin: 0 auto;
  border: 2px dashed #525252;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), #a3a3a3 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), #a3a3a3 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}
.gp-poster-note {
  background: #fff;
  border: 1px solid #000;
  padding: 0.3rem 0.7rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-size: 1.1rem;
  transform: rotate(-4deg);
}

.gp-name {
  font-size: 2.5rem;
  line-height: 1.05;
  font-weight: 400;
  overflow-wrap: anywhere;
}

/* The ticket. .gp-ticket carries the ink filter, .gp-tk is the ticket's
   shape. Its outline is an inset shadow rather than a border so that the
   notch circles, clipped by overflow, can paint over it. */

.gp-ticket {
  margin-top: 1rem;
  container-type: inline-size;
}
.gp-tk {
  position: relative;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 3px #000;
}
.gp-tk-main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem 1.1rem;
}
.gp-tk-row {
  margin: 0;
}
.gp-tk-row + .gp-tk-row {
  margin-top: 0.6rem;
}
.gp-label {
  display: block;
  font-family: var(--font-anton);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  line-height: 1.2;
  color: #000;
}
.gp-value {
  display: block;
  font-size: 1.05rem;
  line-height: 1.3;
}
.gp-directions {
  display: inline-block;
  text-decoration: underline;
  white-space: nowrap;
  font-family: var(--font-anton);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  color: inherit;
}

/* The price, inked on as an oval stamp. */
.gp-stamp {
  justify-self: end;
  min-width: 5.5rem;
  max-width: 8rem;
  margin: 0;
  padding: 0.75rem 0.85rem;
  border: 3px solid #000;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3.5px #000;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.05;
  overflow-wrap: anywhere;
  transform: rotate(var(--gp-stamp, -6deg));
}

/* Stub: a tear line across the bottom, notched at both ends. The side
   design falls back to this when the ticket is narrow. */
.gp-tk-stub {
  position: relative;
  border-top: 2px dashed #000;
  padding: 0.4rem 1.1rem 0.5rem;
  font-family: var(--font-anton);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  line-height: 1.2;
  color: #000;
}
.gp-tk-stub::before,
.gp-tk-stub::after {
  content: "";
  position: absolute;
  top: -18px;
  width: 28px;
  height: 28px;
  border: 3px solid #000;
  border-radius: 50%;
  background: #fff;
}
.gp-tk-stub::before {
  left: -17px;
}
.gp-tk-stub::after {
  right: -17px;
}

/* Side stub: the tear line runs down near the right edge. */
@container (width >= 25rem) {
  .gp-ticket-side .gp-tk {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3rem;
  }
  .gp-ticket-side .gp-tk-stub {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 0;
    border-left: 2px dashed #000;
    padding: 0.75rem 0;
    writing-mode: vertical-rl;
  }
  .gp-ticket-side .gp-tk-stub::before,
  .gp-ticket-side .gp-tk-stub::after {
    left: -18px;
    right: auto;
  }
  .gp-ticket-side .gp-tk-stub::before {
    top: -17px;
  }
  .gp-ticket-side .gp-tk-stub::after {
    top: auto;
    bottom: -17px;
  }
}

/* Cloakroom: zigzag top and bottom, a punched hole and a number. The
   outline follows the zigzag, drawn by drop shadows on the masked shape. */
.gp-ticket-cloak .gp-ticket {
  filter: drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000) url(#blur-variation);
}
.gp-ticket-cloak .gp-tk {
  box-shadow: none;
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 16px 51% repeat-x;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 16px 51% repeat-x;
}
.gp-ticket-cloak .gp-tk-main {
  padding: 2.4rem 1.1rem 1.6rem;
}
.gp-tk-hole {
  position: absolute;
  top: 0.9rem;
  left: 50%;
  width: 0.9rem;
  height: 0.9rem;
  margin-left: -0.45rem;
  border: 2px solid #000;
  border-radius: 50%;
}
.gp-tk-no {
  position: absolute;
  top: 0.8rem;
  right: 1.1rem;
  font-family: var(--font-anton);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  line-height: 1.2;
  color: #000;
}

/* The buy button, under the ticket and outside it. */
.gp-buy {
  display: block;
  margin-top: 0.9rem;
  padding: 0.6rem 1rem;
  text-align: center;
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  background: #000;
  color: #fff;
  border: 3px solid #000;
}
.gp-buy:hover,
.gp-buy:focus-visible {
  background: #fff;
  color: #000;
}
.gp-past {
  margin-top: 0.9rem;
  padding: 0.6rem 0.75rem;
  border: 2px dashed #000;
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: none;
  font-size: 1.05rem;
}

/* The line-up, as a flyer prints it: centred, heavy, one act a line. */
.gp-lineup {
  margin-top: 2rem;
  text-align: center;
}
.gp-lineup-label {
  margin-bottom: 0.4rem;
  text-align: left;
  font-family: var(--font-anton);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  line-height: 1.2;
  color: #000;
}
.gp-acts {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.gp-acts li:first-child {
  font-size: 2.5rem;
}
.gp-acts li + li::before {
  content: "+" / "";
  display: block;
  margin: 0.25rem 0;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1;
}
/* Five acts or more: a festival bill. The headliner on its own line, the
   next three sharing medium lines, the rest sharing smaller lines, joined
   by a plus. Each name is an inline block so it never breaks across lines
   unless it alone is wider than the column. The plus sits inside the
   name's block, so a wrapped line starts with a plus and none ends with
   one. */
.gp-bill li {
  display: inline;
}
.gp-bill .gp-act {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.gp-bill li + li .gp-act::before {
  margin-right: 0.25em;
  font-family: var(--font-serif);
  font-size: 0.6em;
  vertical-align: 0.35em;
  content: "+" / "";
}
.gp-bill .gp-tier-1 {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 2.5rem;
}
.gp-bill .gp-tier-2 {
  font-size: 1.6rem;
  line-height: 1.2;
}
.gp-bill .gp-tier-3 {
  font-size: 1.3rem;
  line-height: 1.25;
}
.gp-bill .gp-tier-start .gp-act::before {
  content: none;
}
/* The flyer's own plus lines are off on a bill, but the third tier
   starts on a new line, pushed there by an empty block with a little air. */
.gp-bill li + li::before {
  content: none;
}
.gp-bill .gp-tier-3.gp-tier-start::before {
  content: "" / "";
  display: block;
  height: 0.4rem;
  margin: 0;
}
.gp-acts a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
}
.gp-tba {
  font-family: var(--font-anton);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.1;
}
.gp-socials {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: none;
  overflow-wrap: anywhere;
}

/* The back page: a double rule, then compact listings. */
.gp-back {
  display: grid;
  gap: 1.75rem 2rem;
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 3px solid #000;
  background: linear-gradient(#000, #000) 0 4px / 100% 1px no-repeat;
}
.gp-heading {
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.15;
  background: #000;
  color: #fff;
  padding: 0.2rem 0.5rem;
  margin-bottom: 0.5rem;
  display: inline-block;
}
/* The promoter's name in a heading links to their page. */
.gp-heading a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.06em;
}
.gp-more-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.gp-more-list li {
  border-bottom: 1px solid #000;
  break-inside: avoid;
}
.gp-more-row {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0.6rem;
  align-items: center;
  padding: 0.35rem 0;
}
.gp-more-row:hover .gp-more-name {
  text-decoration: underline;
}
.gp-thumb {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: cover;
  display: block;
}
.gp-thumb-none {
  border: 2px dashed #000;
}
.gp-more-text {
  display: block;
  min-width: 0;
}
.gp-more-name {
  display: block;
  font-size: 1rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.gp-more-date {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 0.95rem;
  text-transform: none;
  color: #404040;
}
/* The top line above the masthead, "<promoter> presents", sits in the
   layout but this file loads on the gig page only, the one page that
   links it. */
.gp-presents {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.gp-presents:hover,
.gp-presents:focus-visible {
  background: #000;
  color: #fff;
}
.gp-folio {
  margin: 0.75rem 0 0;
  text-align: right;
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: none;
  font-size: 0.85rem;
  color: #525252;
}

@media (width >= 768px) {
  .gp-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }
  .gp-poster-wrap {
    padding: 1rem 1.25rem 0.5rem;
  }
  .gp-poster-none {
    width: 100%;
  }
  .gp-name {
    font-size: 3rem;
  }
  .gp-back {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  }
  .gp-more-list {
    columns: 17rem;
    column-gap: 2rem;
  }
}