/* ============================================================
   Global Sheds — pricing block layout options.
   Three ways to make the tiers compact. Everything resolves from
   avast.css tokens; no new colour, no new scale.

   The problem being solved: the tier grid is 673px tall, 288 of
   which is a photograph, and the price sits 446px down each card.
   People come to this block for the number and reach it last.
   ============================================================ */

/* The footnote sits under the rows it qualifies, inside the swap grid rather than below
   it, so it stays in the rows' column and does not run under the photograph. The 92ch cap
   stays for the layouts on the options page that do set it full width; in the swap it is
   the column that governs. */
.pr-note{margin-top:34px;font-size:.875rem;line-height:1.65;color:var(--steel);
  max-width:92ch}
/* All three placed by hand. Grid auto-placement is sparse: it never backtracks, so with
   the note sitting between the rows and the panel in source order, the cursor moved to
   row 2 for the note and the panel could no longer fill the cell beside the rows. It
   landed under the photograph's own column, 462px down. Source order is the right reading
   order here, the qualification following the thing it qualifies, so the placement is
   what changes rather than the markup. */
.pr-swap>.pr-rows{grid-column:1;grid-row:1}
.pr-swap>.pr-note{grid-column:1;grid-row:2;margin-top:0}
.pr-swap>.pr-panel,.pr-swap>.pr-stage{grid-column:2;grid-row:1}
@media (max-width:991px){
  .pr-swap>.pr-rows,.pr-swap>.pr-note,.pr-swap>.pr-panel,.pr-swap>.pr-stage{
    grid-column:auto;grid-row:auto}
}

.pr-tier{font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);margin-bottom:14px}
.pr-price{font-family:var(--display);font-weight:700;
  font-size:clamp(1.25rem,1.9vw,1.625rem);line-height:1.1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.pr-size{font-size:.875rem;color:var(--steel)}
.pr-name{font-family:var(--display);font-weight:700;font-size:1.25rem;line-height:1.25}
.pr-spec{font-size:.9375rem;line-height:1.6;color:var(--steel)}

/* ---------- A. a price list, no photographs ---------- */
.pr-table{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgba(14,29,56,.14)}
.pr-table>div{padding:34px 44px 8px 44px;border-left:1px solid rgba(14,29,56,.14);min-width:0}
.pr-table>div:first-child{border-left:0;padding-left:0}
.pr-table .pr-price{margin-bottom:7px}
.pr-table .pr-size{margin-bottom:22px}
.pr-table .pr-name{margin-bottom:12px}
@media (max-width:767px){
  .pr-table{grid-template-columns:1fr}
  .pr-table>div{border-left:0;border-top:1px solid rgba(14,29,56,.14);padding:26px 0 8px}
  .pr-table>div:first-child{border-top:0;padding-top:26px}
}

/* ---------- B. three rows, read like a list ---------- */
.pr-rows{border-top:1px solid rgba(14,29,56,.14)}
.pr-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,auto);
  gap:48px;align-items:start;padding:30px 0 32px;
  border-bottom:1px solid rgba(14,29,56,.14)}
.pr-row .pr-tier{margin-bottom:10px}
.pr-row .pr-name{max-width:22ch}
.pr-row .pr-figs{text-align:right;min-width:0}
.pr-row .pr-price{margin-bottom:6px;white-space:nowrap}
@media (max-width:991px){
  .pr-row{grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:20px 36px}
  .pr-row .pr-spec{grid-column:1/-1}
}
@media (max-width:600px){
  .pr-row{grid-template-columns:1fr;gap:14px}
  .pr-row .pr-figs{text-align:left}
}

/* ---------- C. the cards kept, cut down ---------- */
.pr-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pr-card{display:flex;flex-direction:column;background:#fff;box-shadow:var(--lift);
  height:100%;min-width:0}
/* 21:9 rather than 16:11, which takes the image from 288px to 118 */
.pr-card-media{aspect-ratio:21/9;overflow:hidden;background:var(--concrete)}
.pr-card-media img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.pr-card-body{padding:26px 30px 30px;flex:1 1 auto}
.pr-card .pr-price{margin-bottom:6px}
.pr-card .pr-size{margin-bottom:18px}
.pr-card .pr-name{margin-bottom:12px}
@media (max-width:991px){
  .pr-cards{grid-template-columns:1fr;gap:16px}
  .pr-card-media{aspect-ratio:21/7}
}
@media (max-width:767px){.pr-card-body{padding:22px 24px 26px}}

/* ---------- B with an image panel. The photography is decorative here: every
   word stays in the rows, so nothing is locked behind a pointer the visitor
   may not have. Below 992 the panel goes and the rows are plain option B. ---------- */
/* 60px between the columns, 34 between the rows: the second row is the footnote under the
   tiers, and a footnote sitting the same distance away as the photograph beside it reads as
   a separate thing rather than as a note on the rows above. */
.pr-swap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:34px 60px;align-items:start}
.pr-swap .pr-row{grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:20px 36px}
.pr-swap .pr-spec{grid-column:1/-1;max-width:54ch}
/* With the panel up, the spec belongs under the photograph it describes: the row is
   then tier, name and figures, which is what the eye came for, and the detail sits
   with the picture. The row's own copy is only hidden once pricing.js has claimed the
   block, so with the script off every word is still in the row. */
@media (min-width:992px){
  .pr-swap[data-swap-js] .pr-spec{display:none}
}
.pr-stage{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--concrete);
  box-shadow:var(--lift)}
.pr-stage-spec{margin-top:7px;font-size:.9375rem;line-height:1.6;color:var(--steel)}
.pr-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s var(--ease)}
.pr-stage img.is-on{opacity:1}
/* The caption came out of the image. Over a photograph it needed a 90% ink bar behind it
   to hold a ratio at all, and that bar covered the bottom of every shot. On the page it
   is ink on the section's own ground and reads at 15:1 with nothing covered. */
.pr-stage-cap{margin-top:18px;font-size:1rem;font-weight:600;line-height:1.35;
  color:var(--ink)}
.pr-stage-cap:empty{display:none}
/* Marking the live row rather than dimming the others: opacity scales the rendered
   contrast of everything inside, and .5 took the other two rows' copy to about 2.1:1
   for as long as a visitor hovered. Every row carries the inset padding, so the bar
   appearing shifts nothing. */
.pr-swap .pr-row{padding-left:38px;padding-right:38px;
  transition:background-color .25s var(--ease),box-shadow .25s var(--ease)}
.pr-swap .pr-row.is-live{background:rgba(41,59,101,.045);box-shadow:inset 3px 0 0 var(--red)}
@media (max-width:991px){
  .pr-swap{grid-template-columns:1fr;gap:0}
  .pr-panel,.pr-swap>.pr-stage{display:none}
  .pr-swap .pr-row{grid-template-columns:minmax(0,1fr) minmax(0,auto)}
  .pr-swap .pr-row{padding-left:0;padding-right:0}
  .pr-swap .pr-row.is-live{background:none;box-shadow:none}
}
/* The plain .pr-row already went to one column at 600, but .pr-swap .pr-row is a heavier
   selector and the rule above kept overriding it, so on a phone the name column was
   whatever was left after the price: 111px at 390 and 41px at 320, where "Single garage and
   small storage" set five lines a word at a time. The swap needs its own rule at the same
   breakpoint. */
@media (max-width:600px){
  .pr-swap .pr-row{grid-template-columns:minmax(0,1fr);gap:12px}
  .pr-swap .pr-figs{text-align:left}
}