/* CASE OUTLET / Gadget Inspect hub. Scoped to GI archive, taxonomy, and single. */

body.post-type-archive-gi_recommendation,
body.single-gi_recommendation,
body.tax-gi_category{
  --theme-normal-container-max-width:1240px;
  font-family:"Prompt",Arial,sans-serif;
  color:#172033
}

.co-gi-hub{padding-bottom:56px}
.co-gi-intro{
  background:#f8f5ff;
  margin:0 0 28px;
  padding:28px 0 22px
}
.co-gi-kicker{
  margin:0 0 8px;
  color:#8057d9;
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase
}
.co-gi-title{
  margin:0 0 10px;
  font-size:clamp(26px,3vw,36px);
  font-weight:700;
  letter-spacing:-.6px;
  line-height:1.25;
  color:#172033
}
.co-gi-lede{
  margin:0 0 14px;
  color:#697386;
  font-size:15px;
  line-height:1.65
}
.co-gi-disclosure{
  margin:0;
  max-width:46rem;
  color:#697386;
  font-size:13px;
  line-height:1.6
}
.co-gi-disclosure--short{margin:20px 0 0}

.co-gi-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 28px;
  max-width:100%
}
.co-gi-chip{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:6px 12px;
  border:1px solid #e6e9f0;
  border-radius:999px;
  background:#fff;
  color:#172033;
  font-size:13px;
  font-weight:500;
  text-decoration:none;
  white-space:nowrap
}
.co-gi-chip:hover,.co-gi-chip:focus-visible,.co-gi-chip.is-active{
  border-color:#8057d9;
  color:#8057d9
}

.co-gi-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px
}
.co-gi-card{
  display:flex;
  flex-direction:column;
  margin:0;
  padding:0 0 16px;
  border:1px solid #e6e9f0;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
  min-width:0;
  max-width:100%
}
.co-gi-cover{
  position:relative;
  display:block;
  background:#f3f5f8;
  aspect-ratio:4/5
}
.co-gi-cover-img{
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
  display:block
}
.co-gi-play{
  position:absolute;
  left:50%;
  top:50%;
  width:52px;
  height:52px;
  margin:-26px 0 0 -26px;
  border-radius:50%;
  background:rgba(23,32,51,.78);
  pointer-events:none
}
.co-gi-play:after{
  content:"";
  position:absolute;
  left:21px;
  top:16px;
  border-style:solid;
  border-width:10px 0 10px 16px;
  border-color:transparent transparent transparent #fff
}
.co-gi-card-meta{
  margin:12px 16px 0;
  color:#697386;
  font-size:12px;
  font-weight:500
}
.co-gi-card-brand{color:#8057d9}
.co-gi-card-title{
  margin:6px 16px 0;
  font-size:18px;
  font-weight:700;
  line-height:1.35;
  color:#172033;
  overflow-wrap:anywhere
}
.co-gi-more{
  margin:8px 16px 0;
  font-size:13px
}
.co-gi-more a{color:#8057d9;text-decoration:none}
.co-gi-more a:hover,.co-gi-more a:focus-visible{text-decoration:underline}
.co-gi-card-excerpt{
  margin:8px 16px 0;
  color:#697386;
  font-size:14px;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.co-gi-card-note{
  margin:10px 16px 0;
  color:#697386;
  font-size:12px
}
.co-gi-article .co-gi-card-note{margin-left:0;margin-right:0}

.co-gi-ctas{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:12px 16px 0
}
.co-gi-article .co-gi-ctas{margin-left:0;margin-right:0;max-width:28rem}
.co-gi-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 14px;
  border-radius:10px;
  background:#172033;
  color:#fff;
  font-size:14px;
  font-weight:600;
  text-align:center;
  text-decoration:none
}
.co-gi-cta:hover,.co-gi-cta:focus-visible{background:#8057d9;color:#fff}
.co-gi-cta--facebook{background:#172033}

.co-gi-empty{margin:0 0 32px;color:#697386}
.co-gi-follow{
  margin:40px 0 0;
  padding:20px 0 0;
  border-top:1px solid #e6e9f0
}
.co-gi-follow-title{margin:0 0 10px;font-size:14px;font-weight:600}
.co-gi-follow-links{display:flex;flex-wrap:wrap;gap:10px}
.co-gi-follow-links a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:8px 14px;
  border:1px solid #e6e9f0;
  border-radius:999px;
  color:#172033;
  font-size:13px;
  font-weight:500;
  text-decoration:none
}
.co-gi-follow-links a:hover{border-color:#8057d9;color:#8057d9}

.co-gi-breadcrumb{margin:18px 0 12px;color:#697386;font-size:13px}
.co-gi-breadcrumb a{color:#8057d9;text-decoration:none}
.co-gi-detail-cover{
  margin:8px 0 20px;
  border-radius:16px;
  overflow:hidden;
  background:#f3f5f8;
  aspect-ratio:4/5;
  max-width:420px
}
.co-gi-body{margin:0 0 20px;font-size:15px;line-height:1.75;color:#172033}
.co-gi-body p:first-child{margin-top:0}
.co-gi-related{margin-top:48px;padding-top:28px;border-top:1px solid #e6e9f0}
.co-gi-related-title{margin:0 0 18px;font-size:22px}

@media(min-width:690px){
  .co-gi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .co-gi-ctas{flex-direction:column}
}
@media(min-width:1000px){
  .co-gi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .co-gi-grid--related{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:689.98px){
  .co-gi-grid{grid-template-columns:1fr}
  .co-gi-card-title{font-size:17px}
}
@media(max-width:430px){
  .co-gi-intro{padding:20px 0 16px}
  .co-gi-chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:2px 16px 10px 0;
    margin-right:-8px;
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent)
  }
  .co-gi-chips::-webkit-scrollbar{display:none}
  .co-gi-chip{flex:0 0 auto;min-height:40px;padding:8px 14px}
  .co-gi-cta{min-height:44px;font-size:13px}
}