/* Card rows grow into the available space, including with scripts disabled.
   The small companion script only chooses a wider artwork/text composition. */
.shelf,.world-grid,.game-grid,.activity-list,.guide-grid,.collection-grid,
.parent-grid,.pack-grid,.parent-categories,.related-line,.support-grid,
.parent-row,.pack-downloads{
  --balance-columns:3;
  --balance-gap:30px;
  --balance-basis:calc((100% - 2 * var(--balance-gap)) / 3);
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  column-gap:var(--balance-gap);
}
.shelf>*,.world-grid>*,.game-grid>*,.activity-list>*,.guide-grid>*,
.collection-grid>*,.parent-grid>*,.pack-grid>*,.parent-categories>*,
.related-line>*,.support-grid>*,.parent-row>*,.pack-downloads>*{
  flex:1 1 var(--balance-basis);
  min-width:0;
  max-width:100%;
}
.world-grid,.game-grid,.related-line,.support-grid,.parent-row,.pack-downloads{
  --balance-columns:2;
  --balance-basis:calc((100% - var(--balance-gap)) / 2);
}
.world-grid{--balance-gap:22px}
.game-grid{--balance-gap:30px}
.activity-list,.collection-grid,.support-grid{--balance-gap:25px}
.guide-grid,.parent-grid{--balance-gap:20px}
.pack-grid{--balance-gap:26px}
.related-line{--balance-gap:24px}
.parent-row{--balance-gap:60px}
.pack-downloads{--balance-gap:14px}
.parent-categories{
  --balance-columns:5;
  --balance-gap:12px;
  --balance-basis:calc((100% - 4 * var(--balance-gap)) / 5);
}

/* A full-row story keeps both artwork and introduction at useful sizes. */
.shelf>.story-card{
  display:flex;
  flex-direction:column;
  align-content:flex-start;
}
.shelf>.story-card>.story-image{flex:0 1 auto;min-width:0;max-width:100%}
.shelf>.story-card>div{flex:0 1 auto;min-width:0;max-width:100%}
.shelf>.story-card[data-balance-wide]{flex-direction:row}
.shelf>.story-card[data-balance-wide]>.story-image,.shelf>.story-card[data-balance-wide]>div{flex:1 1 0px}
.energy-page .shelf>.story-card>div{padding-top:3px}
.shelf>.story-card[data-balance-wide]>.story-image{
  border-bottom:0;
  border-right:1.5px solid var(--ink);
  border-radius:18px 0 0 18px;
  display:flex;
  align-items:center;
}
.shelf>.story-card[data-balance-wide]>.story-image img{
  height:100%;
  max-height:370px;
  object-fit:contain;
  border-radius:18px 0 0 18px;
}
.energy-page .shelf>.story-card[data-balance-wide]>div{
  padding:23px 28px;
  align-self:center;
}
.shelf>.story-card[data-balance-wide] h3{font-size:clamp(29px,2.8vw,39px)}

/* Games and printable packs also become a deliberate two-part feature. */
.energy-page .game-card[data-balance-wide],.pack-card[data-balance-wide]{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:stretch;
}
.energy-page .game-card[data-balance-wide]>a,.pack-card[data-balance-wide]>.pack-picture{
  display:flex;
  align-items:center;
  background:var(--paper);
  border-bottom:0;
  border-right:2px solid var(--ink);
  border-radius:21px 0 0 21px;
}
.energy-page .game-card[data-balance-wide] img,.pack-card[data-balance-wide]>.pack-picture img{
  aspect-ratio:4/3;
  max-height:410px;
  object-fit:contain;
  border:0;
  border-radius:21px 0 0 21px;
}
.energy-page .game-card[data-balance-wide]>div,.pack-card[data-balance-wide]>.pack-card-body{
  align-self:center;
  padding:28px;
}
.pack-card[data-balance-wide] h2{font-size:clamp(30px,3vw,41px)}
.pack-card[data-balance-wide] .pack-card-link{margin-top:22px}
.energy-page .activity-item[data-balance-wide]{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"art eyebrow" "art title" "art summary" "art action";
  column-gap:27px;
  align-content:center;
  padding:0 27px 0 0;
}
.activity-item[data-balance-wide]>.activity-picture{
  grid-area:art;
  display:flex;
  align-items:center;
  margin:0;
  border-bottom:0;
  border-right:1.5px solid var(--ink);
  border-radius:20px 0 0 20px;
  background:var(--paper);
}
.activity-item[data-balance-wide]>.activity-picture img{max-height:380px;object-fit:contain;border-radius:20px 0 0 20px}
.activity-item[data-balance-wide]>.eyebrow{grid-area:eyebrow;margin-top:25px}
.activity-item[data-balance-wide]>h2{grid-area:title}
.activity-item[data-balance-wide]>p:not(.eyebrow){grid-area:summary}
.activity-item[data-balance-wide]>.text-link{grid-area:action;justify-self:start;margin-bottom:25px}

.parent-card[data-balance-wide]{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  grid-template-areas:"art title" "art body" "art link";
  column-gap:27px;
  padding:0 27px 0 0;
  align-content:center;
}
.parent-card[data-balance-wide]>.parent-card-top{
  grid-area:art;
  margin:0;
  height:100%;
  min-height:240px;
  padding:25px 18px;
  border-bottom:0;
  border-right:2px solid var(--ink);
  border-radius:19px 0 0 19px;
  flex-direction:column;
  justify-content:center;
  gap:18px;
}
.parent-card[data-balance-wide] .parent-category-art{width:140px;height:105px}
.parent-card[data-balance-wide]>.parent-card-top .parent-card-note{max-width:none}
.parent-card[data-balance-wide]>h3{grid-area:title;margin-top:25px;font-size:34px}
.parent-card[data-balance-wide]>p{grid-area:body;max-width:64ch;margin-bottom:18px}
.parent-card[data-balance-wide]>.text-link{grid-area:link;margin-bottom:23px}
.guide-card[data-balance-wide]{justify-content:flex-start;gap:27px;padding:27px 35px}
.guide-card[data-balance-wide]>div{max-width:680px}
.guide-card[data-balance-wide] h3{font-size:34px}
.collection-card[data-balance-wide]{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:1fr auto 1fr;
  grid-template-areas:"art title" "art summary" "art action";
  align-content:center;
  padding-bottom:0;
}
.collection-card[data-balance-wide]>a:first-child{
  grid-area:art;
  display:flex;
  align-items:center;
  height:100%;
  border-bottom:0;
  border-right:1.5px solid var(--ink);
  border-radius:18px 0 0 18px;
}
.collection-card[data-balance-wide]>a:first-child img{max-height:370px;object-fit:contain}
.collection-card[data-balance-wide]>h2{grid-area:title;align-self:end;margin-top:27px;margin-bottom:16px;font-size:34px}
.collection-card[data-balance-wide]>p{grid-area:summary;margin-top:0;margin-bottom:0}
.collection-card[data-balance-wide]>.button{grid-area:action;align-self:start;justify-self:start;margin-top:20px;margin-bottom:27px}
.world-card[data-balance-wide]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.world-card[data-balance-wide] img{max-height:380px;object-fit:contain;background:var(--paper)}

/* An unfiltered static shelf also gets the single-card feature without JS.
   Filtered shelves use the observer's exact visible-row state instead. */
@media(min-width:1001px){
  .shelf:not(:has(>[hidden]))>.story-card:last-child:nth-child(3n+1){flex-direction:row}
  .shelf:not(:has(>[hidden]))>.story-card:last-child:nth-child(3n+1)>*{flex:1 1 0px}
}
@media(min-width:741px) and (max-width:1000px){
  .shelf:not(:has(>[hidden]))>.story-card:last-child:nth-child(odd){flex-direction:row}
  .shelf:not(:has(>[hidden]))>.story-card:last-child:nth-child(odd)>*{flex:1 1 0px}
}

@media(max-width:1100px){
  .guide-grid{--balance-columns:2;--balance-basis:calc((100% - var(--balance-gap)) / 2)}
}
@media(max-width:1000px){
  .shelf,.activity-list,.collection-grid,.parent-grid,.pack-grid{
    --balance-columns:2;
    --balance-basis:calc((100% - var(--balance-gap)) / 2);
  }
  .shelf{--balance-gap:24px}
  .parent-categories{--balance-columns:3;--balance-basis:calc((100% - 2 * var(--balance-gap)) / 3)}
}
@media(max-width:740px){
  .shelf,.world-grid,.game-grid,.activity-list,.guide-grid,.collection-grid,
  .related-line,.support-grid,.parent-row,.pack-downloads{
    --balance-columns:1;
    --balance-basis:100%;
  }
  .shelf>.story-card>.story-image,.shelf>.story-card>div{flex-basis:100%}
  .home-shelf>.story-card{display:grid}
  .energy-page .shelf>.story-card>div{padding-top:0}
}
@media(max-width:700px){.pack-grid{--balance-columns:1;--balance-basis:100%}}
@media(max-width:640px){
  .parent-grid{--balance-columns:1;--balance-basis:100%}
  .parent-categories{--balance-columns:2;--balance-basis:calc((100% - var(--balance-gap)) / 2)}
}
@media print{
  .shelf>*,.world-grid>*,.game-grid>*,.activity-list>*,.guide-grid>*,
  .collection-grid>*,.parent-grid>*,.pack-grid>*{break-inside:avoid}
}