.reading-renderer {
  --reading-card-width: min(9rem, 22vw);
  color: inherit;
}

.reading-layout {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 1.5rem auto 0;
  padding: 0;
}

.reading-layout--single-card {
  grid-template-columns: minmax(0, 1fr);
  max-width: 18rem;
}

.reading-layout--three-card-linear {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reading-layout--seven-card-horseshoe {
  grid-template-columns: repeat(4, minmax(5.5rem, 1fr));
  grid-template-rows: repeat(3, minmax(8rem, auto));
}

.reading-layout--seven-card-horseshoe [data-layout-slot="past"] { grid-area: 3 / 1; }
.reading-layout--seven-card-horseshoe [data-layout-slot="present"] { grid-area: 2 / 1; }
.reading-layout--seven-card-horseshoe [data-layout-slot="hidden-influence"] { grid-area: 1 / 2; }
.reading-layout--seven-card-horseshoe [data-layout-slot="challenge"] { grid-area: 1 / 3; }
.reading-layout--seven-card-horseshoe [data-layout-slot="external-influence"] { grid-area: 1 / 4; }
.reading-layout--seven-card-horseshoe [data-layout-slot="guidance"] { grid-area: 2 / 4; }
.reading-layout--seven-card-horseshoe [data-layout-slot="outcome"] { grid-area: 3 / 4; }

.reading-layout--higher-self-compass {
  grid-template-columns: repeat(3, minmax(5.5rem, 1fr));
  grid-template-rows: repeat(3, minmax(8rem, auto));
}

.reading-layout--higher-self-compass [data-layout-slot="present-self"] { grid-area: 3 / 2; }
.reading-layout--higher-self-compass [data-layout-slot="shadow"] { grid-area: 2 / 1; }
.reading-layout--higher-self-compass [data-layout-slot="higher-guidance"] { grid-area: 1 / 2; }
.reading-layout--higher-self-compass [data-layout-slot="integration"] { grid-area: 2 / 2; }
.reading-layout--higher-self-compass [data-layout-slot="aligned-path"] { grid-area: 2 / 3; }

.reading-layout--celtic-cross {
  grid-template-columns: repeat(6, minmax(5.5rem, 1fr));
  grid-template-rows: repeat(4, minmax(8rem, auto));
}

.reading-layout--celtic-cross [data-layout-slot="present"] { grid-area: 2 / 3; }
.reading-layout--celtic-cross [data-layout-slot="challenge"] {
  grid-area: 2 / 3;
  position: relative;
  transform: rotate(90deg);
  z-index: 2;
}
.reading-layout--celtic-cross [data-layout-slot="foundation"] { grid-area: 3 / 3; }
.reading-layout--celtic-cross [data-layout-slot="past"] { grid-area: 2 / 2; }
.reading-layout--celtic-cross [data-layout-slot="possibility"] { grid-area: 1 / 3; }
.reading-layout--celtic-cross [data-layout-slot="near-future"] { grid-area: 2 / 4; }
.reading-layout--celtic-cross [data-layout-slot="self"] { grid-area: 4 / 6; }
.reading-layout--celtic-cross [data-layout-slot="environment"] { grid-area: 3 / 6; }
.reading-layout--celtic-cross [data-layout-slot="hopes-fears"] { grid-area: 2 / 6; }
.reading-layout--celtic-cross [data-layout-slot="outcome"] { grid-area: 1 / 6; }

.reading-layout--spiral {
  aspect-ratio: 1;
  min-height: 42rem;
  position: relative;
}

.reading-layout--spiral .reading-position {
  left: var(--reading-x);
  position: absolute;
  top: var(--reading-y);
  transform: translate(-50%, -50%);
  width: var(--reading-card-width);
}

.reading-position {
  min-width: 0;
  order: var(--reading-order);
  text-align: center;
}

.reading-position__image {
  display: block;
  height: auto;
  margin-inline: auto;
  max-width: 100%;
}

.reading-position__label,
.reading-position__card-name,
.reading-position__orientation {
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .reading-layout--celtic-cross {
    grid-template-columns: repeat(4, minmax(5rem, 1fr));
  }

  .reading-layout--celtic-cross [data-layout-slot="self"],
  .reading-layout--celtic-cross [data-layout-slot="environment"],
  .reading-layout--celtic-cross [data-layout-slot="hopes-fears"],
  .reading-layout--celtic-cross [data-layout-slot="outcome"] {
    grid-column: 4;
  }
}

@media (max-width: 640px) {
  .reading-layout--single-card,
  .reading-layout--three-card-linear,
  .reading-layout--seven-card-horseshoe,
  .reading-layout--higher-self-compass,
  .reading-layout--celtic-cross,
  .reading-layout--spiral {
    aspect-ratio: auto;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    min-height: 0;
  }

  .reading-layout--seven-card-horseshoe .reading-position,
  .reading-layout--higher-self-compass .reading-position,
  .reading-layout--celtic-cross .reading-position,
  .reading-layout--spiral .reading-position {
    grid-area: auto;
    left: auto;
    position: static;
    top: auto;
    transform: none;
    width: auto;
  }
}