/*
  Shared selector-card system
  Used by the video selectors and photo category selectors in:
  - indextwo.html / videos.html component selectors
  - indexone.html / standalone native selectors
  - photos.html category selectors

  Breakpoints below change variables and flow mode. The card structure stays
  shared so responsive fixes do not stack on top of one another.
*/

:root{
  --selector-card-bg:linear-gradient(180deg, #ffffff, #f7fbff);
  --selector-card-active-bg:#eaf4fc;
  --selector-card-border:rgba(29, 59, 88, .18);
  --selector-card-active-border:rgba(30, 167, 255, .78);
  --selector-card-active-shadow:inset 0 0 0 1px rgba(30, 167, 255, .28);
  --selector-card-text:#10283e;
  --selector-card-muted:#5e7083;
  --selector-card-gap:10px;
  --selector-card-list-gap:12px;
  --selector-card-radius:16px;
  --selector-card-pad-block:10px;
  --selector-card-pad-inline:10px;
  --selector-card-thumb-radius:9px;
  --selector-card-thumb-width:92px;
  --selector-card-title-size:14px;
  --selector-card-title-line:1.16;
  --selector-card-meta-size:12px;
  --selector-card-width:100%;
  --selector-card-min-height:88px;
  --selector-card-list-flow:row;
  --selector-card-list-columns:minmax(0, 1fr);
  --selector-card-list-auto-columns:auto;
  --selector-card-list-rows:auto;
  --selector-card-list-padding:0;
  --selector-card-list-overflow-x:visible;
  --selector-card-list-overflow-y:visible;
  --selector-card-display:grid;
  --selector-card-flex-direction:row;
  --selector-card-columns:minmax(var(--selector-card-thumb-width), 38%) minmax(0, 1fr);
  --selector-card-align:stretch;
  --selector-card-text-align:left;
  --selector-card-title-align:left;
  --selector-card-title-white-space:normal;
  --selector-card-title-overflow:clip;
  --selector-card-title-display:block;
  --selector-card-copy-display:block;
  --selector-card-bg-effective:var(--selector-card-bg);
  --selector-card-border-effective:1px solid var(--selector-card-border);
  --selector-card-thumb-border:0;
  --selector-card-active-thumb-shadow:none;
  --selector-card-count-display:none;
  --selector-card-scroll-overflow:visible;
  --selector-card-scroll-padding:0;
  --selector-card-scroll-gutter:auto;
}

.videos2FeatureFrame .thundervideplayer2-list-wrap,
.photosGalleryFrame .thunderphotogallery-category-wrap,
.videos2Rail,
.photoCategoryRail{
  margin-inline:auto !important;
  max-width:none !important;
  width:100% !important;
}

.videos2FeatureFrame .thundervideplayer2-list-scroll,
.photosGalleryFrame .thunderphotogallery-category-scroll,
.videos2ListFrame,
.photoCategoryListFrame{
  max-height:none !important;
  overflow:var(--selector-card-scroll-overflow) !important;
  padding:var(--selector-card-scroll-padding) !important;
  scrollbar-gutter:var(--selector-card-scroll-gutter) !important;
}

.videos2FeatureFrame .thundervideplayer2-list,
.photosGalleryFrame .thunderphotogallery-category-list,
.videos2List,
.photoCategoryList{
  display:grid !important;
  gap:var(--selector-card-list-gap) !important;
  grid-auto-columns:var(--selector-card-list-auto-columns) !important;
  grid-auto-flow:var(--selector-card-list-flow) !important;
  grid-template-columns:var(--selector-card-list-columns) !important;
  grid-template-rows:var(--selector-card-list-rows) !important;
  justify-items:stretch !important;
  overflow-x:var(--selector-card-list-overflow-x) !important;
  overflow-y:var(--selector-card-list-overflow-y) !important;
  padding:var(--selector-card-list-padding) !important;
  width:100% !important;
  -webkit-overflow-scrolling:touch !important;
  -ms-overflow-style:none !important;
  scrollbar-width:none !important;
}

.videos2FeatureFrame .thundervideplayer2-list::-webkit-scrollbar,
.photosGalleryFrame .thunderphotogallery-category-list::-webkit-scrollbar,
.videos2List::-webkit-scrollbar,
.photoCategoryList::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
}

.videos2FeatureFrame .thundervideplayer2-list::-webkit-scrollbar-thumb,
.photosGalleryFrame .thunderphotogallery-category-list::-webkit-scrollbar-thumb,
.videos2List::-webkit-scrollbar-thumb,
.photoCategoryList::-webkit-scrollbar-thumb{
  background:transparent !important;
}

.videos2FeatureFrame .thundervideplayer2-item,
.photosGalleryFrame .thunderphotogallery-category-item,
.videos2Item,
.photoCategoryItem{
  align-items:var(--selector-card-align) !important;
  background:var(--selector-card-bg-effective) !important;
  border:var(--selector-card-border-effective) !important;
  border-radius:var(--selector-card-radius) !important;
  box-shadow:none !important;
  color:var(--selector-card-text) !important;
  display:var(--selector-card-display) !important;
  flex-direction:var(--selector-card-flex-direction) !important;
  gap:var(--selector-card-gap) !important;
  grid-template-columns:var(--selector-card-columns) !important;
  grid-template-rows:auto !important;
  height:auto !important;
  min-height:var(--selector-card-min-height) !important;
  padding:var(--selector-card-pad-block) var(--selector-card-pad-inline) !important;
  text-align:var(--selector-card-text-align) !important;
  width:var(--selector-card-width) !important;
}

.videos2FeatureFrame .thundervideplayer2-item.is-active,
.photosGalleryFrame .thunderphotogallery-category-item.is-active,
.videos2Item.is-active,
.photoCategoryItem.is-active{
  background:var(--selector-card-active-bg) !important;
  border-color:var(--selector-card-active-border) !important;
  box-shadow:var(--selector-card-active-shadow) !important;
}

.videos2FeatureFrame .thundervideplayer2-thumb,
.photosGalleryFrame .thunderphotogallery-category-item img,
.videos2Thumb,
.photoCategoryThumb{
  align-self:center !important;
  aspect-ratio:16 / 9 !important;
  border:var(--selector-card-thumb-border) !important;
  border-radius:var(--selector-card-thumb-radius) !important;
  box-shadow:none !important;
  display:block !important;
  height:auto !important;
  max-width:100% !important;
  min-width:0 !important;
  object-fit:cover !important;
  outline:0 !important;
  width:100% !important;
}

.videos2FeatureFrame .thundervideplayer2-item.is-active .thundervideplayer2-thumb,
.photosGalleryFrame .thunderphotogallery-category-item.is-active img,
.videos2Item.is-active .videos2Thumb,
.photoCategoryItem.is-active .photoCategoryThumb{
  box-shadow:var(--selector-card-active-thumb-shadow) !important;
}

.videos2FeatureFrame .thundervideplayer2-item-copy,
.photosGalleryFrame .thunderphotogallery-category-item > span,
.videos2ItemText,
.photoCategoryItemText{
  display:var(--selector-card-copy-display) !important;
  min-width:0 !important;
  overflow:hidden !important;
  width:100% !important;
}

.videos2FeatureFrame .thundervideplayer2-item-title,
.photosGalleryFrame .thunderphotogallery-category-label,
.videos2ItemText,
.photoCategoryItemText{
  color:var(--selector-card-text) !important;
  display:var(--selector-card-title-display) !important;
  font-size:var(--selector-card-title-size) !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
  line-height:var(--selector-card-title-line) !important;
  max-height:none !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  overflow-wrap:normal !important;
  text-align:var(--selector-card-title-align) !important;
  text-overflow:var(--selector-card-title-overflow) !important;
  white-space:var(--selector-card-title-white-space) !important;
  word-break:normal !important;
  width:100% !important;
  -webkit-box-orient:initial !important;
  -webkit-line-clamp:initial !important;
}

.photosGalleryFrame .thunderphotogallery-category-count{
  color:var(--selector-card-muted) !important;
  display:var(--selector-card-count-display) !important;
  font-size:var(--selector-card-meta-size) !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  margin-top:3px !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-transform:none !important;
  width:100% !important;
}

.videos2ThumbWrap,
.photoCategoryThumbWrap{
  margin-inline:0 !important;
  max-width:none !important;
  width:100% !important;
}

.videos2ThumbPlay{
  display:none !important;
}

@media (min-width:1201px){
  :root{
    --selector-card-list-gap:12px;
    --selector-card-list-columns:minmax(0, 1fr);
    --selector-card-scroll-overflow:auto;
    --selector-card-scroll-padding:0 4px 0 0;
    --selector-card-scroll-gutter:stable both-edges;
    --selector-card-thumb-width:87px;
    --selector-card-gap:10px;
    --selector-card-pad-block:10px;
    --selector-card-pad-inline:10px;
    --selector-card-radius:18px;
    --selector-card-min-height:88px;
    --selector-card-title-size:14px;
    --selector-card-title-line:1.18;
    --selector-card-count-display:none;
  }

  .videos2FeatureFrame .thundervideplayer2-list-wrap,
  .photosGalleryFrame .thunderphotogallery-category-wrap,
  .videos2Rail,
  .photoCategoryRail{
    padding:22px 10px 14px !important;
  }

  .photosGalleryFrame .thunderphotogallery-category-item:hover,
  .photosGalleryFrame .thunderphotogallery-category-item:focus-visible{
    border-color:rgba(255, 119, 0, .42) !important;
    box-shadow:0 14px 26px rgba(9, 25, 43, .12) !important;
    transform:translateY(-1px) !important;
  }
}

@media (min-width:901px) and (max-width:1200px){
  :root{
    --selector-card-list-gap:10px;
    --selector-card-list-columns:repeat(auto-fit, minmax(min(100%, 204px), 204px));
    --selector-card-list-padding:0 4px;
    --selector-card-width:min(100%, 204px);
    --selector-card-thumb-width:92px;
    --selector-card-columns:var(--selector-card-thumb-width) minmax(0, 1fr);
    --selector-card-radius:16px;
    --selector-card-min-height:103px;
    --selector-card-title-size:14px;
    --selector-card-title-align:left;
    --selector-card-title-white-space:normal;
    --selector-card-title-overflow:clip;
    --selector-card-count-display:none;
  }

  .photosGalleryFrame .thunderphotogallery-category-item,
  .photoCategoryItem{
    --selector-card-bg-effective:transparent;
    --selector-card-border-effective:0;
    --selector-card-display:block;
    --selector-card-min-height:0;
    --selector-card-pad-block:0;
    --selector-card-pad-inline:0;
    --selector-card-radius:0;
    --selector-card-thumb-radius:0;
    --selector-card-title-align:center;
    --selector-card-text-align:center;
    --selector-card-title-size:14px;
    --selector-card-title-line:1.08;
    --selector-card-title-white-space:nowrap;
    --selector-card-title-overflow:ellipsis;
    --selector-card-text:rgba(255,255,255,.96);
  }

  .photosGalleryFrame .thunderphotogallery-category-item > span,
  .photoCategoryItemText{
    margin-top:6px !important;
  }
}

@media (min-width:641px) and (max-width:900px){
  :root{
    --selector-card-list-flow:row;
    --selector-card-list-auto-columns:auto;
    --selector-card-list-columns:repeat(auto-fit, minmax(118px, 1fr));
    --selector-card-list-rows:auto;
    --selector-card-list-gap:8px;
    --selector-card-list-padding:0;
    --selector-card-list-overflow-x:visible;
    --selector-card-list-overflow-y:visible;
    --selector-card-bg-effective:transparent;
    --selector-card-border-effective:0;
    --selector-card-display:block;
    --selector-card-flex-direction:row;
    --selector-card-columns:none;
    --selector-card-gap:0;
    --selector-card-min-height:0;
    --selector-card-pad-block:0;
    --selector-card-pad-inline:0;
    --selector-card-thumb-radius:0;
    --selector-card-thumb-border:1px solid rgba(255,255,255,.72);
    --selector-card-copy-display:none;
    --selector-card-title-display:none;
    --selector-card-count-display:none;
    --selector-card-active-bg:transparent;
    --selector-card-active-shadow:none;
    --selector-card-active-thumb-shadow:0 0 0 2px rgba(81, 183, 255, .72);
  }

  .videos2FeatureFrame .thundervideplayer2-layout{
    grid-template-columns:minmax(0, 1fr) !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
    width:100% !important;
  }

  .videos2FeatureFrame .thundervideplayer2-player,
  .videos2FeatureFrame .thundervideplayer2-list-wrap{
    max-width:100% !important;
    min-width:0 !important;
    width:100% !important;
  }

  .videos2FeatureFrame .thundervideplayer2-viewport{
    background-size:cover !important;
  }

  .videos2FeatureFrame .thundervideplayer2-stage video{
    object-fit:contain !important;
  }

  .photosGalleryFrame .thunderphotogallery-category-item,
  .photoCategoryItem{
    --selector-card-copy-display:block;
    --selector-card-title-display:block;
    --selector-card-title-align:center;
    --selector-card-text-align:center;
    --selector-card-title-size:13px;
    --selector-card-title-line:1.08;
    --selector-card-title-white-space:nowrap;
    --selector-card-title-overflow:ellipsis;
    --selector-card-text:rgba(255,255,255,.96);
    --selector-card-radius:0;
    --selector-card-thumb-radius:0;
  }

  .photosGalleryFrame .thunderphotogallery-category-item > span,
  .photoCategoryItemText{
    margin-top:5px !important;
  }
}

@media (max-width:640px){
  :root{
    --selector-card-list-flow:row;
    --selector-card-list-columns:repeat(auto-fit, minmax(84px, 1fr));
    --selector-card-list-gap:8px;
    --selector-card-list-padding:0;
    --selector-card-bg-effective:transparent;
    --selector-card-border-effective:0;
    --selector-card-radius:0;
    --selector-card-display:block;
    --selector-card-columns:none;
    --selector-card-min-height:0;
    --selector-card-pad-block:0;
    --selector-card-pad-inline:0;
    --selector-card-thumb-radius:0;
    --selector-card-thumb-border:1px solid #fff;
    --selector-card-copy-display:none;
    --selector-card-title-display:none;
    --selector-card-count-display:none;
    --selector-card-active-bg:transparent;
    --selector-card-active-shadow:none;
    --selector-card-active-thumb-shadow:0 0 0 2px rgba(81, 183, 255, .72);
  }

  .photosGalleryFrame .thunderphotogallery-category-item,
  .photoCategoryItem{
    --selector-card-copy-display:block;
    --selector-card-title-display:block;
    --selector-card-title-align:center;
    --selector-card-text-align:center;
    --selector-card-title-size:12px;
    --selector-card-title-line:1.08;
    --selector-card-title-white-space:nowrap;
    --selector-card-title-overflow:ellipsis;
    --selector-card-text:rgba(255,255,255,.96);
    --selector-card-radius:0;
    --selector-card-thumb-radius:0;
  }

  .photosGalleryFrame .thunderphotogallery-category-item > span,
  .photoCategoryItemText{
    margin-top:5px !important;
  }
}

@media (max-height:480px) and (orientation:landscape){
  :root{
    --selector-card-list-flow:row;
    --selector-card-list-auto-columns:auto;
    --selector-card-list-columns:repeat(auto-fit, minmax(118px, 1fr));
    --selector-card-list-rows:auto;
    --selector-card-list-gap:8px;
    --selector-card-list-padding:0;
    --selector-card-list-overflow-x:visible;
    --selector-card-list-overflow-y:visible;
    --selector-card-bg-effective:transparent;
    --selector-card-border-effective:0;
    --selector-card-radius:0;
    --selector-card-display:block;
    --selector-card-columns:none;
    --selector-card-min-height:0;
    --selector-card-pad-block:0;
    --selector-card-pad-inline:0;
    --selector-card-thumb-radius:0;
    --selector-card-thumb-border:1px solid #fff;
    --selector-card-copy-display:none;
    --selector-card-title-display:none;
    --selector-card-count-display:none;
    --selector-card-active-bg:transparent;
    --selector-card-active-shadow:none;
    --selector-card-active-thumb-shadow:0 0 0 2px rgba(81, 183, 255, .72);
  }

  .photosGalleryFrame .thunderphotogallery-category-item,
  .photoCategoryItem{
    --selector-card-copy-display:block;
    --selector-card-title-display:block;
    --selector-card-title-align:center;
    --selector-card-text-align:center;
    --selector-card-title-size:12px;
    --selector-card-title-line:1.08;
    --selector-card-title-white-space:nowrap;
    --selector-card-title-overflow:ellipsis;
    --selector-card-text:rgba(255,255,255,.96);
    --selector-card-radius:0;
    --selector-card-thumb-radius:0;
  }

  .photosGalleryFrame .thunderphotogallery-category-item > span,
  .photoCategoryItemText{
    margin-top:5px !important;
  }
}

@media (orientation:landscape) and (min-width:641px) and (max-width:980px) and (max-height:460px){
  .videos2FeatureFrame .thundervideplayer2-player{
    margin-inline:auto !important;
    max-width:min(100%, calc((100dvh - 76px) * 16 / 9)) !important;
    width:min(100%, calc((100dvh - 76px) * 16 / 9)) !important;
  }
}