/* --- the Celtic cross ------------------------------------------------------------
   A numbered grid on a phone, five across on a tablet, and the real layout
   on a wide screen: the cross on the left with the second card laid across
   the first, and the staff on the right reading from the bottom up. The grid
   is twelve short rows so that three rows of the cross and four cards of the
   staff come out the same height. Cards keep the site's flip; nothing fades.
   ------------------------------------------------------------------------- */

.cc { display: grid; gap: 1.75rem; justify-items: center; }
.cc__hint { text-align: center; max-width: 52ch; }

.cc__table {
  --cc-w: 7rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
  width: 100%;
  max-width: 20rem;
  padding-top: 0.5rem;
}

.cc__seat {
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  align-content: start;
  color: var(--paper);
  text-decoration: none;
}
.cc__seat .card { width: min(100%, var(--cc-w)); }
.cc__seat:focus-visible { outline-offset: 6px; }

.cc__label {
  font-size: var(--step--1);
  line-height: 1.25;
  color: var(--paper-mute);
  text-align: center;
  transition: color 140ms linear;
}
.cc__seat:hover .cc__label,
.cc__seat:focus-visible .cc__label { color: var(--paper); }
.cc__n {
  font-family: var(--font-display);
  font-size: 1.2em;
  color: var(--paper-dim);
  font-variant-numeric: tabular-nums;
}
.cc__also { display: none; }

/* ten faces are smaller than three, so the name and margins come down a step */
.cc .card__name { font-size: 0.8rem; }
.cc .card__front { padding: 0.55rem 0.35rem 0.45rem; }

@media (min-width: 30rem) {
  .cc__table {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 44rem;
  }
}

@media (min-width: 60rem) {
  .cc__table {
    --cc-w: clamp(5.5rem, 6.2vw, 6.5rem);
    --cc-h: calc(var(--cc-w) * 1.5);
    --cc-step: calc((var(--cc-h) + 1rem) / 3);
    width: auto;
    max-width: none;
    grid-template-columns: repeat(3, calc(var(--cc-w) * 1.75)) 1.5rem var(--cc-w) 11rem;
    grid-template-rows: repeat(12, var(--cc-step));
    gap: 0 0.75rem;
    justify-content: center;
  }
  .cc__seat .card { width: var(--cc-w); }

  .cc__seat--5 { grid-column: 2; grid-row: 1 / span 4; }
  .cc__seat--4 { grid-column: 1; grid-row: 5 / span 4; }
  .cc__seat--1 { grid-column: 2; grid-row: 5 / span 4; }
  .cc__seat--6 { grid-column: 3; grid-row: 5 / span 4; }
  .cc__seat--3 { grid-column: 2; grid-row: 9 / span 4; }

  /* The crossing card sits exactly over the first and turns a quarter. Its
     own box stays out of the way of the first card's visible ends. */
  .cc__seat--2 {
    grid-column: 2;
    grid-row: 5 / span 4;
    align-self: start;
    justify-self: center;
    width: var(--cc-w);
    z-index: 1;
    pointer-events: none;
  }
  .cc__seat--2 .card { transform: rotate(90deg); pointer-events: auto; }
  .cc__seat--2 .cc__label { display: none; }
  .cc__seat--1 .cc__also { display: block; margin-top: -0.3rem; }

  .cc__seat--7,
  .cc__seat--8,
  .cc__seat--9,
  .cc__seat--10 {
    grid-column: 5 / span 2;
    grid-template-columns: var(--cc-w) minmax(0, 1fr);
    align-items: center;
    align-self: start;
    justify-items: start;
    column-gap: 0.85rem;
  }
  .cc__seat--7 .cc__label,
  .cc__seat--8 .cc__label,
  .cc__seat--9 .cc__label,
  .cc__seat--10 .cc__label { text-align: left; }

  .cc__seat--10 { grid-row: 1 / span 3; }
  .cc__seat--9 { grid-row: 4 / span 3; }
  .cc__seat--8 { grid-row: 7 / span 3; }
  .cc__seat--7 { grid-row: 10 / span 3; }
}

@media (prefers-reduced-motion: reduce) {
  .cc__label { transition: none; }
}