/*
  Wider narrow selector cards
  Applies the same tablet/narrow-window treatment to:
  - indextwo.html component video selector
  - indextwo.html component photo category selector
  - videos.html native video selector
  - photos.html native category selector

  Narrow phones and short landscape phones keep the compact multi-column
  image-only selector pattern.
*/

@media (min-width:520px) and (max-width:1200px){
  :root{
    --selector-card-bg:linear-gradient(180deg, #ffffff, #f7fbff);
    --selector-card-active-bg:#eaf4fc;
    --selector-card-border:rgba(29, 59, 88, .18);
    --selector-card-blue:#1ea7ff;
    --selector-card-text:#10283e;
    --selector-card-muted:#5e7083;
    --selector-card-rail-width:500px;
    --selector-card-width:456px;
    --selector-card-height:164px;
    --selector-card-radius:22px;
    --selector-card-pad-block:19px;
    --selector-card-pad-inline:20px;
    --selector-card-gap:18px;
    --selector-card-thumb-width:214px;
    --selector-card-title-size:24px;
    --selector-card-meta-size:22px;
  }

  .videos2FeatureFrame .thundervideplayer2-list-wrap,
  .photosGalleryFrame .thunderphotogallery-category-wrap,
  .videos2Rail,
  .photoCategoryRail{
    width:min(100%, var(--selector-card-rail-width)) !important;
    margin-inline:auto !important;
  }

  .videos2FeatureFrame .thundervideplayer2-list,
  .photosGalleryFrame .thunderphotogallery-category-list,
  .videos2List,
  .photoCategoryList{
    display:grid !important;
    gap:14px !important;
    grid-auto-flow:row !important;
    grid-template-columns:minmax(0, 1fr) !important;
    justify-items:center !important;
    padding:0 !important;
    width:100% !important;
  }

  .videos2FeatureFrame .thundervideplayer2-item,
  .photosGalleryFrame .thunderphotogallery-category-item,
  .videos2Item,
  .photoCategoryItem{
    align-items:center !important;
    background:var(--selector-card-bg) !important;
    border:1px solid var(--selector-card-border) !important;
    border-bottom:1px solid var(--selector-card-border) !important;
    border-radius:var(--selector-card-radius) !important;
    color:var(--selector-card-text) !important;
    display:grid !important;
    gap:var(--selector-card-gap) !important;
    grid-template-columns:var(--selector-card-thumb-width) minmax(0, 1fr) !important;
    grid-template-rows:auto !important;
    height:var(--selector-card-height) !important;
    min-height:var(--selector-card-height) !important;
    padding:var(--selector-card-pad-block) var(--selector-card-pad-inline) !important;
    text-align:left !important;
    width:min(100%, 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:rgba(30, 167, 255, .78) !important;
    box-shadow:inset 0 0 0 1px rgba(30, 167, 255, .28) !important;
  }

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

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

  .videos2FeatureFrame .thundervideplayer2-item-title,
  .photosGalleryFrame .thunderphotogallery-category-label,
  .videos2ItemText,
  .photoCategoryItemText{
    color:var(--selector-card-text) !important;
    display:block !important;
    font-size:var(--selector-card-title-size) !important;
    font-weight:900 !important;
    line-height:1.06 !important;
    max-height:none !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
    overflow-wrap:normal !important;
    text-align:left !important;
    text-overflow:clip !important;
    white-space:normal !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:block !important;
    font-size:var(--selector-card-meta-size) !important;
    font-weight:800 !important;
    line-height:1.12 !important;
    margin-top:18px !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;
  }

  .videos2FeatureFrame .thundervideplayer2-item.is-active .thundervideplayer2-thumb,
  .photosGalleryFrame .thunderphotogallery-category-item.is-active img,
  .videos2Item.is-active .videos2Thumb,
  .photoCategoryItem.is-active .photoCategoryThumb{
    outline:0 !important;
    box-shadow:none !important;
  }
}

@media (max-height:480px) and (orientation:landscape){
  .videos2FeatureFrame .thundervideplayer2-list-wrap,
  .photosGalleryFrame .thunderphotogallery-category-wrap,
  .videos2Rail,
  .photoCategoryRail{
    width:100% !important;
    max-width:none !important;
  }

  .videos2FeatureFrame .thundervideplayer2-list-scroll,
  .photosGalleryFrame .thunderphotogallery-category-scroll,
  .videos2ListFrame,
  .photoCategoryListFrame{
    max-height:none !important;
    overflow:visible !important;
    padding:0 !important;
    scrollbar-gutter:auto !important;
  }

  .videos2FeatureFrame .thundervideplayer2-list,
  .photosGalleryFrame .thunderphotogallery-category-list,
  .videos2List,
  .photoCategoryList{
    display:grid !important;
    gap:8px !important;
    grid-auto-flow:row !important;
    grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)) !important;
    justify-items:stretch !important;
    padding:0 !important;
    width:100% !important;
  }

  .videos2FeatureFrame .thundervideplayer2-item,
  .photosGalleryFrame .thunderphotogallery-category-item,
  .videos2Item,
  .photoCategoryItem{
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    width:100% !important;
  }

  .videos2FeatureFrame .thundervideplayer2-thumb,
  .photosGalleryFrame .thunderphotogallery-category-item img,
  .videos2Thumb,
  .photoCategoryThumb{
    aspect-ratio:16 / 9 !important;
    border-radius:0 !important;
    height:auto !important;
    object-fit:cover !important;
    width:100% !important;
  }

  .videos2FeatureFrame .thundervideplayer2-thumb,
  .videos2Thumb{
    border:1px solid #fff !important;
  }

  .photosGalleryFrame .thunderphotogallery-category-item img,
  .photoCategoryThumb{
    border:0 !important;
  }

  .videos2FeatureFrame .thundervideplayer2-item-copy,
  .photosGalleryFrame .thunderphotogallery-category-item > span,
  .videos2ItemText,
  .photoCategoryItemText,
  .photosGalleryFrame .thunderphotogallery-category-count{
    display:none !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:0 0 0 2px rgba(81, 183, 255, .72) !important;
  }

  .videos2FeatureFrame .thundervideplayer2-item.is-active,
  .photosGalleryFrame .thunderphotogallery-category-item.is-active,
  .videos2Item.is-active,
  .photoCategoryItem.is-active{
    background:transparent !important;
    box-shadow:none !important;
  }
}

@media (min-width:1201px){
  :root{
    --selector-sidebar-card-thumb:87px;
    --selector-sidebar-card-gap:10px;
    --selector-sidebar-card-pad:10px;
    --selector-sidebar-card-title-size:14px;
    --selector-sidebar-card-title-line:1.18;
    --selector-sidebar-card-count-size:12px;
  }

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

  .videos2FeatureFrame .thundervideplayer2-list-scroll,
  .photosGalleryFrame .thunderphotogallery-category-scroll{
    padding:0 4px 0 0 !important;
    scrollbar-gutter:stable both-edges !important;
  }

  .videos2FeatureFrame .thundervideplayer2-list,
  .photosGalleryFrame .thunderphotogallery-category-list,
  .videos2List,
  .photoCategoryList{
    display:grid !important;
    gap:12px !important;
    grid-template-columns:minmax(0, 1fr) !important;
    width:100% !important;
  }

  .videos2FeatureFrame .thundervideplayer2-item,
  .photosGalleryFrame .thunderphotogallery-category-item,
  .videos2Item,
  .photoCategoryItem{
    align-items:center !important;
    display:grid !important;
    gap:var(--selector-sidebar-card-gap) !important;
    grid-template-columns:minmax(var(--selector-sidebar-card-thumb), 38%) minmax(0, 1fr) !important;
    min-height:88px !important;
    padding:var(--selector-sidebar-card-pad) !important;
    text-align:left !important;
    width:100% !important;
  }

  .photosGalleryFrame .thunderphotogallery-category-item{
    background:linear-gradient(180deg, #ffffff, #f7fbff) !important;
    border:1px solid rgba(17, 125, 194, .18) !important;
    border-radius:18px !important;
    color:#243446 !important;
    overflow:visible !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;
  }

  .photosGalleryFrame .thunderphotogallery-category-item.is-active{
    background:linear-gradient(180deg, #eaf4fc, #f3f8fd) !important;
    border-color:rgba(17, 125, 194, .46) !important;
    box-shadow:inset 0 0 0 1px rgba(17, 125, 194, .14) !important;
  }

  .videos2FeatureFrame .thundervideplayer2-thumb,
  .photosGalleryFrame .thunderphotogallery-category-item img,
  .videos2Thumb,
  .photoCategoryThumb{
    aspect-ratio:16 / 9 !important;
    border-radius:9px !important;
    display:block !important;
    object-fit:cover !important;
    outline:0 !important;
    box-shadow:none !important;
    width:100% !important;
  }

  .videos2FeatureFrame .thundervideplayer2-item-copy,
  .photosGalleryFrame .thunderphotogallery-category-item > span,
  .videos2ItemText,
  .photoCategoryItemText{
    min-width:0 !important;
    width:100% !important;
  }

  .videos2FeatureFrame .thundervideplayer2-item-title,
  .photosGalleryFrame .thunderphotogallery-category-label,
  .videos2ItemText,
  .photoCategoryItemText{
    color:#10263c !important;
    display:block !important;
    font-size:var(--selector-sidebar-card-title-size) !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
    line-height:var(--selector-sidebar-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:left !important;
    word-break:normal !important;
    width:100% !important;
  }

  .photosGalleryFrame .thunderphotogallery-category-count{
    color:#607082 !important;
    display:block !important;
    font-size:var(--selector-sidebar-card-count-size) !important;
    font-weight:700 !important;
    line-height:1.1 !important;
    margin-top:3px !important;
    max-width:100% !important;
    overflow:hidden !important;
    width:100% !important;
  }
}