/* Shot map: the table in the centre, the shots on its left down the left, the shots on its
   right down the right, each with the piece of the table under its name; and the full-size
   view that opens the map with its explanations. Shared by every guide that has a map. */
/* A crop of the real table sits under each shot's name, so the guide shows the thing
   it is talking about instead of asking the reader to find it. */
.shot-crop{display:block;width:100%;height:auto;border-radius:.6rem;
  border:1px solid var(--line,#2a3954);margin:.4rem 0 .9rem;background:#000}

/* Shot map: the table in the centre, the shots that live on its left down the left,
   the ones on its right down the right, each ordered by height on the table. The
   cards use the height beside the playfield instead of stacking in one narrow column
   beside a half-empty photo. */
.shot-map{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr) minmax(240px,300px);
  gap:28px;align-items:start;margin:1.6rem 0 2.4rem}
.shot-map__field{margin:0;grid-column:2;min-width:0;position:sticky;top:calc(var(--head-h,72px) + 16px)}
.shot-map__field a{display:block}
.shot-map__field img{display:block;width:100%;max-width:100%!important;height:auto;max-height:none!important;
  border-radius:1rem;border:1px solid var(--line,#2a3954);box-shadow:0 1.2rem 3rem #0009}
.shot-map__side{display:grid;gap:18px;align-content:start;min-width:0}
.shot-map__side--left{grid-column:1}
.shot-map__side--right{grid-column:3}
.shot-map__side article{background:linear-gradient(145deg,#15233a,#0d1728);border:1px solid var(--line,#2a3954);
  border-radius:1rem;padding:1rem 1.1rem}
.shot-map__side article h3{margin:0 0 .5rem;font-size:1.1rem;line-height:1.2}
.shot-map__side article p{margin:0;font-size:.95rem;line-height:1.5}
.shot-map__side .shot-crop{margin:.2rem 0 .7rem}
@media (max-width:1100px){
  .shot-map{grid-template-columns:1fr 1fr}
  .shot-map__field{grid-column:1/-1;grid-row:1;position:static}
  .shot-map__side--left{grid-column:1}
  .shot-map__side--right{grid-column:2}
}
@media (max-width:700px){
  .shot-map{grid-template-columns:1fr}
  .shot-map__side--left,.shot-map__side--right{grid-column:1}
}

/* Full-size view of the shot map: the table as tall as the screen with its explanations
   beside it, instead of a bare photograph in a new tab. */
.shot-map-lightbox{position:fixed;inset:0;z-index:1000;background:#05070cf2;overflow:auto;padding:28px 32px 40px}
.shot-map-lightbox .shot-map{max-width:1560px;margin:0 auto;
  grid-template-columns:minmax(260px,340px) minmax(0,1fr) minmax(260px,340px)}
.shot-map-lightbox .shot-map__field{position:static}
.shot-map-lightbox .shot-map__field img{max-height:calc(100vh - 68px)!important;width:auto;max-width:100%;margin:0 auto}
.shot-map-lightbox figcaption{display:none}
.shot-map-lightbox__close{position:fixed;top:14px;right:18px;z-index:1001;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line,#2a3954);background:#101b2e;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.shot-map__field a,.shot-map__field img{cursor:zoom-in}
@media (max-width:1100px){.shot-map-lightbox .shot-map{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.shot-map-lightbox .shot-map{grid-template-columns:1fr}}

/* A grid left with a single child after its figure moved into the map takes the full width. */
.desktop-lesson:has(> :only-child),.layout:has(> :only-child){grid-template-columns:minmax(0,1fr)!important}
.desktop-lesson > :only-child,.layout > :only-child{grid-column:1/-1!important}
.shot-map .shot-body p{margin:0 0 .5rem;font-size:.95rem;line-height:1.5}
.shot-map .shot-body p:last-child{margin-bottom:0}

/* Some guide-v3 pages make the <section> itself a two-column grid; the map must span all
   of it, not sit in the first column. */
.shot-map{grid-column:1/-1}

/* The real table is the primary teaching image. Give it the viewport instead of
   squeezing it between two full-width card columns. Scared Stiff keeps its own
   composition rules; the older Pirates map is a different structure. */
@media (min-width:1101px){
  body:not(.scared) main section .shot-map{
    width:min(1480px,calc(100vw - 48px));
    max-width:none;
    margin-left:50%;
    transform:translateX(-50%);
    grid-template-columns:minmax(210px,260px) minmax(500px,1fr) minmax(210px,260px);
    gap:24px;
  }
}