/* Hardware gallery and carousel, scoped to the homepage section and device directory. */
:is(#hardware-connectivity,#hardware-directory){padding:36px 0}
:is(#hardware-connectivity,#hardware-directory) .section-heading{margin-bottom:24px}
:is(#hardware-connectivity,#hardware-directory) .hardware-intro{margin-top:14px;max-width:760px}
:is(#hardware-connectivity,#hardware-directory) .hardware-heading-line{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
:is(#hardware-connectivity,#hardware-directory) .hardware-heading-line .eyebrow{margin:0}
:is(#hardware-connectivity,#hardware-directory) h2{margin:0}
:is(#hardware-connectivity,#hardware-directory) .directory-summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:20px;flex-wrap:wrap}
:is(#hardware-connectivity,#hardware-directory) .directory-summary p{margin:0;font-size:12px}
:is(#hardware-connectivity,#hardware-directory) .directory-summary strong{color:var(--ink)}
:is(#hardware-connectivity,#hardware-directory) .brand-index{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 30px;padding:18px 0;border-block:1px solid var(--line)}
:is(#hardware-connectivity,#hardware-directory) .brand-index a{font-size:11px;padding:6px 10px;border:1px solid var(--line);background:var(--panel);color:var(--muted);line-height:1.6}
:is(#hardware-connectivity,#hardware-directory) .brand-index a:hover,:is(#hardware-connectivity,#hardware-directory) .brand-index a:focus-visible{color:var(--orange2);border-color:var(--orange)}
:is(#hardware-connectivity,#hardware-directory) .brand-index a[href="#brand-feasa"]{color:var(--orange2);border-color:#87542b}
:is(#hardware-connectivity,#hardware-directory) .hardware-set{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:100%;margin:0;padding:0;list-style:none;align-items:start}
:is(#hardware-connectivity,#hardware-directory) .hardware-card{width:auto;min-width:0;display:flex;flex-direction:column;scroll-margin-top:24px}
:is(#hardware-connectivity,#hardware-directory) .hardware-card:target{border-color:var(--orange)}
:is(#hardware-connectivity,#hardware-directory) .hardware-card-copy{padding:19px 21px 17px;min-height:142px}
:is(#hardware-connectivity,#hardware-directory) .hardware-card h3{font-size:24px}
:is(#hardware-connectivity,#hardware-directory) .hardware-card-copy p{min-height:39px;font-size:12px;margin:6px 0 11px}
:is(#hardware-connectivity,#hardware-directory) .hardware-protocol{font-size:10px;min-height:28px;max-width:100%}
:is(#hardware-connectivity,#hardware-directory) .product-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:180px 140px;gap:10px;padding:0 14px;height:330px}
:is(#hardware-connectivity,#hardware-directory) .product-gallery.two-photos{grid-template-columns:1fr;grid-template-rows:160px 160px}
:is(#hardware-connectivity,#hardware-directory) .product-photo{margin:0;padding:0;display:flex;flex-direction:column;align-items:stretch;border:0;border-radius:0;background:#f4f6f9;color:#17283e;text-align:left;overflow:hidden;min-width:0;min-height:0}
:is(#hardware-connectivity,#hardware-directory) .product-photo.hero-photo{grid-column:1/-1}
:is(#hardware-connectivity,#hardware-directory) .photo-stage{--photo-height:84px;display:flex;align-items:center;justify-content:center;flex:1;min-height:0;padding:9px 12px;background:#f4f6f9;overflow:hidden}
:is(#hardware-connectivity,#hardware-directory) .hero-photo .photo-stage{--photo-height:124px;padding:9px 23px}
:is(#hardware-connectivity,#hardware-directory) .two-photos .photo-stage{--photo-height:108px;padding:9px 25px}
:is(#hardware-connectivity,#hardware-directory,#hardware-photo-dialog) .photo-crop{position:relative;display:block;overflow:hidden;aspect-ratio:var(--photo-ratio);width:min(100%,calc(var(--photo-height)*var(--photo-ratio)))}
:is(#hardware-connectivity,#hardware-directory) .photo-caption{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:8px 11px 9px;font-size:11px;font-weight:600;line-height:1.45;min-height:32px}
:is(#hardware-connectivity,#hardware-directory) .photo-caption .enlarge{font-weight:400;color:#607187;font-size:14px}
:is(#hardware-connectivity,#hardware-directory) .product-photo:hover .photo-caption{color:#925015}
:is(#hardware-connectivity,#hardware-directory) .product-photo:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
:is(#hardware-connectivity,#hardware-directory) .hardware-card-action{padding:16px 21px;margin:0;min-height:54px;border:0;background:none;width:100%;text-align:left}
:is(#hardware-connectivity,#hardware-directory) .hardware-card-action:hover{color:var(--orange2);text-decoration:underline}
:is(#hardware-connectivity,#hardware-directory) .connectivity-details{border-top:1px solid var(--line);padding:15px 20px;color:var(--muted);font-size:12px;line-height:1.8}
:is(#hardware-connectivity,#hardware-directory) .connectivity-details p{margin:0}
:is(#hardware-connectivity,#hardware-directory) .connectivity-details .photo-models{margin-top:10px;font-size:11px;color:var(--ink)}
:is(#hardware-connectivity,#hardware-directory) .hardware-foot{margin-top:30px;border-top:1px solid var(--line);padding-top:20px}
:is(#hardware-connectivity,#hardware-directory) .hardware-foot p:last-child{max-width:365px}
:is(#hardware-connectivity,#hardware-directory) .back-to-index{font-size:11px;color:var(--orange2);display:inline-block;margin-top:15px}
#hardware-photo-dialog.image-dialog{border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:0;max-width:min(680px,calc(100vw - 30px));width:680px;box-shadow:0 24px 100px #0009}
#hardware-photo-dialog.image-dialog::backdrop{background:#040d19cc}
#hardware-photo-dialog .image-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 21px}
#hardware-photo-dialog .image-dialog-title{font-size:20px;font-weight:600;line-height:1.3}
#hardware-photo-dialog .image-dialog-top p{font-size:12px;margin:5px 0 0}
#hardware-photo-dialog .image-dialog-close{background:none;color:var(--ink);border:1px solid var(--line);width:40px;height:40px;font-size:20px;flex-shrink:0}
#hardware-photo-dialog .image-dialog-stage{--photo-height:290px;background:#f4f6f9;display:flex;align-items:center;justify-content:center;width:100%;height:340px;padding:25px;overflow:hidden}
#hardware-photo-dialog .image-dialog-bottom{font-size:12px;color:var(--muted);padding:16px 21px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}
#hardware-photo-dialog .image-dialog-bottom a{color:var(--orange2)}
:is(#hardware-connectivity,#hardware-directory) .hardware-card[data-hardware-brand="keysight"] .photo-stage{background:#f4f6f9}
@media(max-width:1050px){:is(#hardware-connectivity,#hardware-directory) .hardware-set{grid-template-columns:repeat(2,minmax(0,1fr))}
:is(#hardware-connectivity,#hardware-directory) .section-heading{gap:16px;align-items:flex-start}
:is(#hardware-connectivity,#hardware-directory) .hardware-card h3{font-size:23px}
:is(#hardware-connectivity,#hardware-directory) .hardware-card-copy{padding:18px 18px}
:is(#hardware-connectivity,#hardware-directory) .product-gallery{padding:0 11px;gap:10px}
:is(#hardware-connectivity,#hardware-directory) .photo-caption{padding:8px 10px;font-size:11px}}
@media(max-width:650px){:is(#hardware-connectivity,#hardware-directory) .hardware-set{grid-template-columns:1fr;gap:22px}
:is(#hardware-connectivity,#hardware-directory){padding:27px 0}
:is(#hardware-connectivity,#hardware-directory) .hardware-card-copy{min-height:0;padding:20px}
:is(#hardware-connectivity,#hardware-directory) .hardware-card-copy p{min-height:0}
:is(#hardware-connectivity,#hardware-directory) .product-gallery{padding:0 14px}
:is(#hardware-connectivity,#hardware-directory) .hardware-card h3{font-size:24px}
:is(#hardware-connectivity,#hardware-directory) .brand-index{gap:7px;margin-bottom:23px}
:is(#hardware-connectivity,#hardware-directory) .brand-index a{padding:7px 9px}
:is(#hardware-connectivity,#hardware-directory) .directory-summary{align-items:flex-start;flex-direction:column;gap:7px}
:is(#hardware-connectivity,#hardware-directory) .hardware-foot{flex-direction:column;gap:15px}}
@media(prefers-reduced-motion:reduce){}
:is(#hardware-connectivity,#hardware-directory) .company-carousel{margin-top:24px}
:is(#hardware-connectivity,#hardware-directory) .company-carousel .hardware-set{
  --carousel-gap:24px;
  --cards-per-view:3;
  display:grid;
  grid-template-columns:none;
  grid-template-rows:auto;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2 * var(--carousel-gap))/3);
  gap:var(--carousel-gap);
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  padding:4px 0 7px;
  outline-offset:4px;
  align-items:start;
}
:is(#hardware-connectivity,#hardware-directory) .company-carousel .hardware-set::-webkit-scrollbar{display:none}
:is(#hardware-connectivity,#hardware-directory) .company-carousel .hardware-card{width:auto;min-width:0;scroll-snap-align:start;scroll-margin:0}
:is(#hardware-connectivity,#hardware-directory) .company-carousel .hardware-card-copy{min-height:158px}
:is(#hardware-connectivity,#hardware-directory) .company-carousel .hardware-card h3{font-size:23px}
:is(#hardware-connectivity,#hardware-directory) .brand-index{margin-bottom:0}
:is(#hardware-connectivity,#hardware-directory) .brand-index a[aria-current="true"]{color:var(--orange2);border-color:var(--orange)}
:is(#hardware-connectivity,#hardware-directory) .carousel-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:19px}
:is(#hardware-connectivity,#hardware-directory) .carousel-motion,:is(#hardware-connectivity,#hardware-directory) .carousel-navigation{display:flex;align-items:center;gap:13px}
:is(#hardware-connectivity,#hardware-directory) .carousel-controls button{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:transparent;color:var(--ink);border:1px solid var(--line);min-height:44px;padding:10px 14px;font:inherit;font-size:12px;cursor:pointer}
:is(#hardware-connectivity,#hardware-directory) .carousel-controls button:hover{border-color:var(--orange);color:var(--orange2)}
:is(#hardware-connectivity,#hardware-directory) .carousel-controls button:focus-visible,:is(#hardware-connectivity,#hardware-directory) .hardware-set:focus-visible{outline:2px solid var(--orange2)}
:is(#hardware-connectivity,#hardware-directory) .carousel-controls .carousel-previous,:is(#hardware-connectivity,#hardware-directory) .carousel-controls .carousel-next{min-width:44px;font-size:19px;padding:7px}
:is(#hardware-connectivity,#hardware-directory) .motion-icon{color:var(--orange2);font-size:14px;min-width:14px}
:is(#hardware-connectivity,#hardware-directory) .carousel-status{font-size:11px;color:var(--muted)}
:is(#hardware-connectivity,#hardware-directory) .carousel-position{font-size:12px;color:var(--orange2);font-variant-numeric:tabular-nums;min-width:75px;text-align:right;margin-right:3px}
:is(#hardware-connectivity,#hardware-directory) .carousel-announcement{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:900px){:is(#hardware-connectivity,#hardware-directory) .company-carousel .hardware-set{--cards-per-view:2;grid-auto-columns:calc((100% - var(--carousel-gap))/2)}
:is(#hardware-connectivity,#hardware-directory) .carousel-motion{align-items:flex-start;flex-direction:column;gap:6px}}
@media(max-width:650px){:is(#hardware-connectivity,#hardware-directory) .company-carousel .hardware-set{--cards-per-view:1;--carousel-gap:18px;grid-auto-columns:100%}
:is(#hardware-connectivity,#hardware-directory) .company-carousel .hardware-card-copy{min-height:148px}
:is(#hardware-connectivity,#hardware-directory) .carousel-controls{gap:12px;align-items:flex-start}
:is(#hardware-connectivity,#hardware-directory) .carousel-navigation{gap:7px}
:is(#hardware-connectivity,#hardware-directory) .carousel-position{min-width:42px;font-size:11px}
:is(#hardware-connectivity,#hardware-directory) .carousel-controls button{padding:9px 10px;font-size:11px}
:is(#hardware-connectivity,#hardware-directory) .carousel-controls .carousel-previous,:is(#hardware-connectivity,#hardware-directory) .carousel-controls .carousel-next{min-width:40px}}
#hardware-directory .hardware-card[hidden]{display:none!important}
#hardware-directory .device-discuss{margin-top:13px}
