/* =====================================================================
   PACKAGES SLIDING ROW (2 Nov 2026). Only index.html loads this file.
   js/main.js part 3 adds the class .pkrow to the box that holds the 4
   cards. That box becomes one row you can slide sideways. This file:
   1. puts the heading on one row and the 4 cards in a wide row under it
   2. makes each card a white card (photo on top, words under it)
   3. no sticky column any more: the section stays still while you scroll
   ===================================================================== */

/* 1. one column: heading row, package names, cards, note.
   .side gets "display:contents", so its children join the #show grid and
   the note can sit under the cards. */
#show{display:grid;grid-template-columns:1fr auto;gap:14px 30px;align-items:end}
#show .side{display:contents}
#show .side .chap{grid-column:1;grid-row:1;margin:0}
#show .side h2{grid-column:1;grid-row:2;font-size:clamp(30px,3.6vw,52px)}
#show .ocount{grid-column:2;grid-row:2;margin:0}
#show .ocount i{width:120px}
/* the names list becomes a row of tabs you can click */
#show .index{grid-column:1 / -1;grid-row:3;display:flex;flex-wrap:wrap;gap:8px;border:0;margin-top:6px}
#show .index li{border:1px solid rgba(60,40,20,.16);border-radius:99px;padding:8px 16px;font-size:14px;gap:10px;
  background:rgba(255,255,255,.45);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
#show .index li:hover{border-color:var(--orange-ink)}
#show .index li.on{padding-left:16px;background:#fff;color:var(--ink);border-color:var(--orange-ink)}
#show .index li:focus-visible{outline:2px solid var(--orange-ink);outline-offset:2px}
#show .pnote{grid-column:1 / -1;grid-row:5;margin:0}

/* 2. the sliding row and the cards (flat, all at full brightness) */

@media (max-width:760px){
  #show{grid-template-columns:1fr}
  #show .ocount{grid-column:1;grid-row:5;justify-self:center}
  #show .pnote{grid-row:6}
  
  /* names: one row you can slide sideways, instead of 4 lines */
  #show .index{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding:2px 20px}
  #show .index::-webkit-scrollbar{display:none}
  #show .index li{flex:0 0 auto;font-size:13px;padding:7px 13px}
}

/* 4. background: the marble photo is switched off. A calm light colour
   (our #F4F0EA) with a very soft warm glow behind the cards instead. */
#packages.glassroom{background:radial-gradient(ellipse 70% 55% at 50% 72%,rgba(255,138,51,.10),transparent 70%),#F4F0EA}
#packages .gr-photo{display:none}

/* 5. the 4 name buttons are removed; the PRICE is the big, clear thing on each card */