/* Metal Craft Engineering: the card carousel (.carousel.carousel--cards). Link it after style.css; carousel.js drives it.
   The markup contract is in tools/COMPONENTS.md. The cards are the site's own project cards (.pitem: 12 px cut plate, 5:4
   photo frame on #050506, client and sector labels, title, caption), set in one row that scrolls sideways and snaps
   card by card. It shows three cards at a time, four from 1600 px, five from 1800 px, two at 960 px and below, and
   one at 640 px and below at 86% width, so the next card shows at the edge. Without scripts, and in print, the row
   wraps into the same grid as .pgrid. The rules repeat the .carousel class so that they beat the About carousel's
   rules in style.css whatever order the files load in. */
/* The controls come first in the page (Tab reaches them before the cards) and are drawn under the row. */
.carousel.carousel--cards{--per:3;max-width:none;margin-inline:0;display:flex;flex-direction:column}
.carousel--cards>.car-ctrl{order:1}
.carousel--cards .car-track{position:relative;gap:var(--gap);border:0;background:none;overscroll-behavior-x:contain}
.carousel--cards .car-slide{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));display:flex;min-width:0;scroll-snap-align:start}
/* A filtered-out card takes its slide with it (the filter sets hidden on the card). */
.carousel--cards .car-slide[hidden],.carousel--cards .car-slide:has(>[hidden]){display:none}
.carousel--cards .car-slide>.pitem{flex:1;min-width:0}
/* Undo the About carousel's photo sizing; the card's own 5:4 frame sets the size. */
.carousel.carousel--cards .car-slide img{height:100%;object-fit:cover}
/* A mouse can drag the row (carousel.js). Touch and trackpads scroll it natively. */
@media (hover:hover) and (pointer:fine){.carousel--cards .car-track{cursor:grab}}
.carousel--cards .car-track.is-drag{scroll-snap-type:none;cursor:grabbing;user-select:none}
.carousel--cards .car-track.is-drag a{cursor:grabbing}
.carousel.carousel--cards .car-ctrl{flex-direction:row;align-items:center;justify-content:flex-end}
/* A section that ends in a carousel (or a carousel and its one link) closes with the section head's own spacing
   (style.css .sec-head), not a full section padding, so no empty band opens under the row. */
html.js .sec:has(>.wrap>.carousel--cards:last-child,>.wrap>.carousel--cards+.map-link:last-child){padding-bottom:clamp(40px,5vw,72px)}
/* Wrapping from the last card to the first: the row dips out and back in, 100 ms each way, around an instant jump. */
.carousel--cards .car-track{transition:opacity .1s linear}
.carousel--cards .car-track.is-dip{opacity:0}
/* The glide (carousel.js): the snap is off while the row drifts, and back on the moment a hand is on it. */
/* slop-ok: marquee owner-requested slow glide, pauses on touch/hover, off under reduced motion */
.carousel--cards .car-track.is-glide{scroll-snap-type:none}
/* Its embers: a canvas over the row (the track is the carousel's first box), sized to it by its width and height
   attributes, never in the way of a click; drawn only in the photo band, so never over a card's text. */
.carousel--cards>.car-sparks{position:absolute;left:0;top:0;width:100%;height:auto;pointer-events:none}
@media (prefers-reduced-motion:reduce){.carousel--cards .car-track{transition:none}.car-sparks{display:none}}
@media (forced-colors:active){.car-sparks{display:none}}
@media (min-width:1600px){.carousel.carousel--cards{--per:4}}
@media (min-width:1800px){.carousel.carousel--cards{--per:5}}
@media (max-width:960px){.carousel.carousel--cards{--per:2}}
@media (max-width:640px){.carousel--cards .car-slide{flex-basis:86%}}
/* No scripts: the cards wrap into the project grid and the controls, which need the script, are not shown. */
html:not(.js) .carousel--cards .car-track{flex-wrap:wrap;overflow:visible;scroll-snap-type:none;cursor:auto}
html:not(.js) .carousel--cards .car-ctrl{display:none}
@media (max-width:640px){html:not(.js) .carousel--cards .car-slide{flex-basis:100%}}
/* No scripts, the About photo carousel (app.js drives it): its caption line, counter and previous and next plates are frozen at the
   first photograph and do nothing, so they are not shown, and each photograph's own caption (visually hidden with the script)
   is shown under it. The row still scrolls sideways by touch, trackpad and the arrow keys on its focusable track. */
html:not(.js) .carousel:not(.carousel--cards) .car-ctrl{display:none}
/* ...and its photographs wrap into a grid, every one in view (Q14: only the first showed, the rest behind a sideways
   scroll with no cue). */
html:not(.js) .carousel:not(.carousel--cards){max-width:none}
html:not(.js) .carousel:not(.carousel--cards) .car-track{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr));gap:var(--gap);overflow:visible;scroll-snap-type:none;border:0;background:none}
html:not(.js) .carousel:not(.carousel--cards) .car-slide img{height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--media-bg)}
html:not(.js) .carousel:not(.carousel--cards) .car-slide>figcaption{position:static!important;width:auto;height:auto;margin:0;padding:.75rem 1rem 1rem;overflow:visible;clip:auto;white-space:normal;font-size:.95rem;color:var(--txt-2)}
@media print{
  .carousel--cards .car-track{flex-wrap:wrap;overflow:visible;scroll-snap-type:none}
  .carousel--cards .car-ctrl,.car-sparks{display:none}
}