/* Renata sample packs page */
/* Layered on site.css and pages.css */


/* 01  Bay */

.pk-bay      {grid-column:2/span 10}
.pk-kit      {grid-column:2/span 10}
.pk-lic      {grid-column:2/span 7}

.pk-bay__head{
  display:flex; align-items:center; gap:var(--s4);
  color:var(--ink-2);
}
.pk-bay__head .designation{margin:0;white-space:nowrap}
.pk-bay__rule{flex:1 1 auto;height:1px;background:var(--rule)}

.pk-bay__title{
  margin-block-start:var(--s5);
  font-size:clamp(1.75rem,1.25rem + 2.1vw,2.75rem);
  font-weight:560; line-height:1.04; letter-spacing:-.024em;
}
.pk-bay__blurb{
  margin-block-start:var(--s4);
  color:var(--ink-2);
  max-width:var(--measure);
}


/* 02  Pack grid */

.pk-grid{
  margin-block-start:var(--s7);
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(276px,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}

/* Blank cell closes the table */
.pk-grid::after{content:"";background:var(--plate);box-shadow:var(--edge-up)}

.pk{display:flex;position:relative}

/* The lamp */
.pk::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:2px;
  background:var(--signal); transform:scaleY(0); transform-origin:50% 0;
  transition:transform var(--dur-seat) var(--ease-seat);
  pointer-events:none; z-index:1;
}
.pk:hover::before,
.pk:focus-within::before{transform:scaleY(1)}

.pk__link{
  display:grid;
  grid-template-rows:auto 1fr;
  width:100%;
  background:var(--plate);
  box-shadow:var(--edge-up);
  color:inherit;
  text-decoration:none;
  transition:background var(--dur-state) linear;
}

/* The cover is the pack's own artwork, full bleed to the cell edge */
.pk__cover{
  display:block; width:100%; height:auto; aspect-ratio:1;
  background:var(--plate-lo);
  border-bottom:1px solid var(--rule);
}

.pk__body{
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  gap:var(--s3);
  padding:var(--s4) var(--s5) var(--s4);
}
.pk:hover .pk__link,
.pk:focus-within .pk__link{background:var(--plate-hi)}
.pk__link:focus-visible{outline:2px solid var(--signal);outline-offset:-4px}

.pk__top{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s3); color:var(--ink-2);
}
.pk__chip{text-transform:uppercase;letter-spacing:.14em}
.pk__n{font-size:.6875rem;letter-spacing:.1em}

.pk__title{
  font-size:1.0625rem; font-weight:560; line-height:1.2; letter-spacing:-.012em;
  color:var(--ink);
}

.pk__desc{
  font-size:.9375rem; line-height:1.5; color:var(--ink-2); text-wrap:pretty;
}

.pk__foot{
  margin-block-start:var(--s3);
  padding-block-start:var(--s3);
  border-top:1px solid var(--rule);
  display:flex; align-items:center; gap:var(--s3);
}
.pk__price{
  font-family:var(--font-mono); font-size:.875rem; color:var(--ink);
}
.pk__fill{
  flex:1 1 auto; height:1px; background:var(--rule); opacity:.6;
}
.pk__buy{
  text-transform:uppercase; letter-spacing:.12em; color:var(--ink-2);
  transition:color var(--dur-state) linear;
}
.pk__glyph{color:var(--ink-2);flex:none;transition:transform var(--dur-state) var(--ease-seat),color var(--dur-state) linear}
.pk:hover .pk__buy,
.pk:focus-within .pk__buy,
.pk:hover .pk__glyph,
.pk:focus-within .pk__glyph{color:var(--ink)}
.pk:hover .pk__glyph{transform:translateX(3px)}


/* 03  What is in every pack */

.pk-kit{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  column-gap:var(--col-gap);
  row-gap:var(--s5);
  align-items:start;
}
.pk-kit .pr-head{grid-column:1;grid-row:1}
.pk-kit__copy   {grid-column:1;grid-row:2}
.pk-kit__copy2  {grid-column:1;grid-row:3}
.pk-kit__note   {grid-column:1;grid-row:4}
.pk-kit__bank   {grid-column:2;grid-row:1/span 4;align-self:start}
.pk-kit__copy + .pk-kit__copy2{margin-top:0}

.pk-kit__bank{
  margin:0;
  border-top:1px solid var(--rule);
  box-shadow:var(--edge-hair-hi);
}
.pk-kit__row{
  display:flex; align-items:baseline; gap:var(--s3);
  padding-block:var(--s3);
  border-bottom:1px solid var(--rule);
}
.pk-kit__row dt{
  font-family:var(--font-mono); font-size:.75rem;
  text-transform:uppercase; letter-spacing:.12em; color:var(--ink-2);
}
.pk-kit__row dd{
  margin:0; font-family:var(--font-mono); font-size:.875rem; color:var(--ink);
}
.pk-kit__fill{flex:1 1 auto;height:1px;background:var(--rule);opacity:.55}
.pk-kit__row--total dt,
.pk-kit__row--total dd{color:var(--ink)}
.pk-kit__row--total{border-bottom:2px solid var(--ink)}


/* 04  Licence */

.pk-lic__row{margin-block-start:var(--s6)}


/* 05  Narrow */

@media (max-width:1079.98px){
  .pk-bay,.pk-kit{grid-column:1/-1}
  .pk-lic{grid-column:1/-1}
  .pk-kit{grid-template-columns:minmax(0,1fr)}
  .pk-kit .pr-head{grid-column:1;grid-row:1}
  .pk-kit__copy   {grid-column:1;grid-row:2}
  .pk-kit__copy2  {grid-column:1;grid-row:3}
  .pk-kit__bank   {grid-column:1;grid-row:4}
  .pk-kit__note   {grid-column:1;grid-row:5}
}

@media (max-width:767.98px){
  /* Designations stack */
  .pk-bay__head{flex-wrap:wrap;row-gap:var(--s1);padding-block-end:var(--s3);
    border-bottom:1px solid var(--rule)}
  .pk-bay__head .designation{white-space:normal;flex:0 0 100%}
  .pk-bay__rule{display:none}
}

@media (max-width:559.98px){
  .pk-grid{grid-template-columns:minmax(0,1fr)}
  .pk-grid::after{display:none}
  .pk__body{padding:var(--s4)}
}


/* 06  Reduced motion */

@media (prefers-reduced-motion:reduce){
  .pk::before,.pk__link,.pk__glyph,.pk__buy{transition:none}
  .pk:hover .pk__glyph{transform:none}
}


/* 07  Forced colours */

@media (forced-colors:active){
  .pk-grid,.pk__link{border:1px solid CanvasText}
  .pk::before{background:Highlight}
}