/* ============================================================
   Global Sheds — "The designs that come up most", three layouts.

   The block today is a 3-up grid of 599px cards inside a 1132px section. Each card gives
   a 16:11 photograph most of its height and then a paragraph, and three of them is both
   the whole range and a lot of page.

   Every option below is a horizontal rail carrying six designs rather than a grid carrying
   three, so the block gets shorter while showing twice as much. They all reuse the
   [data-rail] behaviour already in avast.js: arrows, keyboard, scroll snapping, and the
   arrows hiding themselves when everything already fits.

   Colours resolve from avast.css. Ratios used, computed:
     ink on white      16.9:1     steel on white   5.78:1
     ink on concrete   15.15:1    red on white     5.89:1
     white on ink      16.9:1     ice on ink       9.01:1
   ============================================================ */

/* Surface-scoped, because this block lives on the dark section of the homepage and on
   white here. Each value resolves from the surface it is on rather than being fixed:

                        on white            on ink
     .dg-name  inherit  ink    16.9:1       white  16.9:1
     .dg-spec  --dim    steel   5.78:1      75% white  9.79:1
     .dg-size  --brow   red     5.89:1      ice    9.01:1   */
.dg-name{font-family:var(--display);font-weight:700;font-size:1.0625rem;line-height:1.3;
  color:inherit}
.dg-spec{margin-top:5px;font-size:.875rem;line-height:1.5;color:var(--dim)}
.dg-size{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--brow);
  margin-bottom:7px}

/* the rail itself, shared. 4:3 keeps the photograph honest without the 16:11 card's height */
.dg-rail{display:grid;grid-auto-flow:column;gap:18px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
.dg-rail::-webkit-scrollbar{display:none}
.dg-rail>*{scroll-snap-align:start;min-width:0}
.dg-card{display:block;color:inherit}
.dg-card figure{margin:0}
.dg-shot{aspect-ratio:4/3;overflow:hidden;background:var(--concrete);margin-bottom:14px}
.on-dark .dg-shot{background:var(--slab)}
.dg-shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.dg-card:hover .dg-shot img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.dg-rail{scroll-behavior:auto}
  .dg-card:hover .dg-shot img{transform:none}}

/* ---------- A. copy left, the rail running off the right edge ----------
   The rail is set to show two cards and part of a third, and it bleeds past the shell so
   the cut card reads as "there is more" rather than as a card that did not fit. */
.dga{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);gap:64px;
  align-items:center}
.dga-copy .h-sec{margin-bottom:14px}
.dga-copy .lede{max-width:34ch}
.dga-foot{display:flex;align-items:center;gap:16px;margin-top:30px;flex-wrap:wrap}
.dga .dg-rail{grid-auto-columns:calc(42% - 9px)}
/* The gap from the shell's right edge to the viewport's is (shellWidth - 100vw) / 2, and
   the shell is whichever is smaller of --shell and the 90vw its 5% padding leaves. The
   first cut used --shell flat, which is only the real width above about 1953px: at 1440 it
   computed a positive 88px margin and pulled the rail 88px *in* from the shell instead. */
@media (min-width:1200px){
  .dga{overflow:visible}
  .dga .dg-rail{margin-right:calc((min(var(--shell), 90vw) - 100vw) / 2)}
}
@media (max-width:1199px){.dga .dg-rail{grid-auto-columns:calc(52% - 9px)}}
@media (max-width:991px){
  .dga{grid-template-columns:minmax(0,1fr);gap:34px}
  .dga-copy .lede{max-width:56ch}
  .dga .dg-rail{grid-auto-columns:calc(46% - 9px)}
}
@media (max-width:639px){.dga .dg-rail{grid-auto-columns:calc(78% - 9px)}}

/* ---------- B. copy left, a list rather than a carousel ----------
   No motion and nothing behind a control: six designs as rows, each a thumbnail, a size
   and a line. Shortest of the three and the only one that works with a keyboard alone
   without any scrolling at all. */
.dgb{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);gap:64px;align-items:start}
.dgb-copy .h-sec{margin-bottom:14px}
.dgb-copy .lede{max-width:34ch}
.dgb-copy .btn{margin-top:26px}
.dgb-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 34px}
.dgb-list a{display:flex;align-items:center;gap:16px;padding:15px 0;min-width:0;
  border-top:1px solid var(--hairline);transition:padding-left .25s var(--ease)}
.dgb-list a:hover{padding-left:8px}
.dgb-list li{list-style:none;min-width:0}
.dgb-thumb{flex:0 0 auto;width:84px;aspect-ratio:4/3;overflow:hidden;background:var(--concrete)}
.on-dark .dgb-thumb{background:var(--slab)}
.on-dark .dgb-list a{border-top-color:rgba(255,255,255,.16)}
.dgb-thumb img{width:100%;height:100%;object-fit:cover}
.dgb-list .dg-size{margin-bottom:3px}
.dgb-list .dg-spec{margin-top:2px}
@media (max-width:991px){
  .dgb{grid-template-columns:minmax(0,1fr);gap:32px}
  .dgb-copy .lede{max-width:56ch}
}
@media (max-width:639px){.dgb-list{grid-template-columns:minmax(0,1fr);gap:0}}

/* ---------- C. one band. The copy is the first panel in the rail ----------
   The most compact of the three: there is no second column, because the heading travels
   in the rail with everything else and scrolls away as you move through the designs. */
/* minmax(0,300px) lets every track shrink to fit the container, so seven panels compressed
   into 1296px and the rail never overflowed: it reported scrollWidth equal to clientWidth
   and the arrows hid themselves. A carousel needs tracks that refuse to shrink. */
.dgc{display:grid;grid-auto-flow:column;gap:22px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  grid-auto-columns:300px;scrollbar-width:none;padding-bottom:4px}
.dgc::-webkit-scrollbar{display:none}
.dgc>*{scroll-snap-align:start;min-width:0}
.dgc-copy{grid-column:span 1;display:flex;flex-direction:column;justify-content:center;
  padding-right:22px;border-right:1px solid var(--hairline)}
.dgc-copy .h-sec{font-size:clamp(1.75rem,2.6vw,2.25rem);margin-bottom:12px}
.dgc-copy .lede{font-size:1rem;max-width:30ch}
.dgc-copy .btn{margin-top:22px;align-self:flex-start}
@media (prefers-reduced-motion:reduce){.dgc{scroll-behavior:auto}}
@media (max-width:639px){.dgc{grid-auto-columns:78vw}
  .dgc-copy{border-right:0;padding-right:0}}

/* the rail arrows on a dark ground: the stylesheet's .rail-btn is built for the concrete
   reviews rail, so it is white on white here */
.on-dark .rail-btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.on-dark .rail-btn:hover:not(:disabled){background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}

/* the placeholder note, deleted the day real product names arrive */
.dg-placeholder{margin-top:18px;font-size:.8125rem;line-height:1.5;color:var(--dim);max-width:34ch}