/*------------COLLECTIONS CSS---------------*/
:root{
  --izzit-navy:#143e69;
  --izzit-blue:#0A68B5;
  --izzit-yellow:#ffcc00;
  --text:#0f172a;
  --muted:#475569;
  --border: rgba(15,23,42,.10);
}

#main-content{max-width:1300px;margin:0 auto;}

.collections-page{
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(10,104,181,.12), transparent 60%),
    radial-gradient(700px 380px at 92% 0%, rgba(255,204,0,.10), transparent 55%),
    linear-gradient(180deg, rgba(244,247,251,1), rgba(255,255,255,1));
}
.collections-wrap{ max-width:1300px; margin:0 auto; padding:18px 14px 28px; }

/* =========================================================
   HERO
========================================================= */
.collections-hero{
  background: linear-gradient(135deg, #0f3b63 0%, #143e69 45%, #1d5d93 100%);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 6px 6px rgba(0,0,0,.10);
  color:#fff;
  position:relative;
  overflow:hidden;
  text-align:center;
  margin-bottom: 0;
}
.collections-hero::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 360px at 20% 0%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(700px 320px at 90% 10%, rgba(255,204,0,.10), transparent 58%);
  pointer-events:none;
  z-index:0;
}
.collections-hero h1{
  margin: 0 0 10px;
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -0.02em;
  position:relative; z-index:2;
  color:#fff;
}
.collections-hero p{
  margin: 0 auto;
  max-width: 940px;
  font-size: 18px;
  line-height: 1.6;
  opacity: .96;
  position:relative; z-index:2;
  color:#fff;
}
.collections-heroTag{ text-align:center; margin-top:14px; position:relative; z-index:2; }
.collections-heroTag span{
  display:inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.20);
  font-weight: 900;
  letter-spacing: .02em;
}
.collections-hero-accent{
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,204,0,.95), transparent);
  margin: 12px auto 14px;
  max-width: 980px;
}
@media (max-width: 767px){
  .collections-hero h1{ font-size: 30px; }
  .collections-hero p{ font-size: 16px; }
}

/* =========================================================
   HERO CARD WRAPPER (glass)
========================================================= */
.collections-hero-card{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 22px;
  padding: 14px 14px 10px;
  background: rgba(255,255,255,.62) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px rgba(2,6,23,.08), 0 3px 12px rgba(2,6,23,.05);
  margin-bottom: 14px;
}

/* =========================================================
   HERO INLINE PLAYER (featured)
========================================================= */
.hero-video-wrap{
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0px 0px 0px 3px #ffffff;
  transition: box-shadow 0.3s linear;
  background: #000;
}
.hero-video-wrap:hover{ box-shadow: 0px 0px 0px 3px #ffcc00; }
.hero-video-inner{ position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.hero-video-iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:none; }
.hero-video-poster{ position:absolute; inset:0; background-size: cover; background-position: center; cursor: pointer; }
.hero-video-poster::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.22)); }

.hero-close-btn, .hero-expand-btn{
  position:absolute; top: 12px; z-index:3;
  display:none;
  padding: 7px 12px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.14);
  font-weight: 800;
  cursor: pointer;
}
.hero-close-btn{ right: 12px; }
.hero-expand-btn{ left: 12px; }

.hero-video-wrap.is-playing .hero-video-iframe{display:block;}
.hero-video-wrap.is-playing .hero-video-poster{display:none;}
.hero-video-wrap.is-playing .hero-close-btn{display:inline-flex;}
.hero-video-wrap.is-playing, .hero-video-wrap.is-playing:hover{ box-shadow: 0px 0px 0px 3px #0A68B5; }

.hero-video-spacer{height:0;}
@media (min-width: 922px){
  .hero-video-wrap.is-sticky{
    position:fixed; right:18px; bottom:18px;
    width:360px; max-width:calc(100vw - 36px);
    z-index:9998;
    border-radius:18px; overflow:hidden;
    background: rgba(255,255,255,.94);
    border:0;
    box-shadow: rgba(50,50,93,.25) 0px 13px 27px -5px, rgba(0,0,0,.35) 0px 10px 18px -8px;
  }
  .hero-video-wrap.is-sticky::before{
    content:""; position:absolute; inset:-2px;
    border-radius:20px; pointer-events:none;
    background: linear-gradient(135deg, rgba(10,104,181,.18), rgba(255,204,0,.18));
    filter: blur(14px); opacity:.45; z-index:0;
  }
  .hero-video-wrap.is-sticky .hero-video-inner{ position:relative; z-index:1; }
  .hero-video-wrap.is-sticky.is-playing .hero-expand-btn{display:inline-flex;}
}
	
	/* Hide Now Playing strip until a video is active */
.video-main-wrapper .player-strip{
  display:none;
}

/* Show strip once a video is playing */
.video-main-wrapper.has-active-video .player-strip{
  display:flex;
}
	
.video-main-wrapper{
  display:none;
}
.video-main-wrapper.has-active-video{
  display:block;
}

/* =========================================================
   Filter bar (search + chips)
========================================================= */
.collections-filterbar{
  margin: 12px 0 16px;
  padding: 12px 12px;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 28px rgba(2,6,23,.10), 0 3px 10px rgba(2,6,23,.06);
}
.collections-filter-inner{ display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:center; }
@media (max-width: 921px){ .collections-filter-inner{ grid-template-columns: 1fr; } }

.collections-search{ position: relative; display:flex; align-items:center; }
.collections-search input{
  width:100%; height:46px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  padding:0 44px 0 14px;
  font-size:15px;
  color:var(--text);
  outline:none;
}
.collections-search input:focus{
  border-color: rgba(10,104,181,.45);
  box-shadow: 0 0 0 4px rgba(10,104,181,.14);
}
.collections-clear{
  position:absolute; right:8px;
  width:32px;height:32px;
  border-radius:999px;
  border:0;
  background: rgba(15,23,42,.06);
  color: rgba(15,23,42,.70);
  cursor:pointer;
  font-size:16px;
  line-height:1;
  display:none;
  align-items:center;
  justify-content:center;
}
.collections-clear:hover{ background: rgba(15,23,42,.10); }

.collections-filter-controls{ display:flex; align-items:center; gap:12px; justify-content:flex-end; flex-wrap:wrap; }
@media (max-width: 921px){ .collections-filter-controls{ justify-content:flex-start; } }

.collections-chips{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
@media (max-width: 921px){
  .collections-chips{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling: touch; scrollbar-width:none; padding-bottom:2px; }
  .collections-chips::-webkit-scrollbar{ display:none; }
}
.collections-chip{
  appearance:none;
  border: 1px solid rgba(15,23,42,.14);
  background:#fff;
  color: var(--izzit-navy);
  height:38px;
  padding:0 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
  white-space:nowrap;
  text-decoration:none !important;
  display:inline-flex;
  align-items:center;
}
.collections-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(2,6,23,.10);
  border-color: rgba(10,104,181,.28);
}
.collections-chip.is-active{
  background: var(--izzit-blue);
  border-color: rgba(10,104,181,.55);
  color:#fff;
  box-shadow: 0 12px 24px rgba(10,104,181,.25);
}
.collections-chip-new{
  margin-left:8px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:1000; letter-spacing:.08em;
  text-transform:uppercase;
  padding:3px 7px;
  border-radius:999px;
  background: rgba(255,204,0,.92);
  color: rgba(15,23,42,.90);
  border: 1px solid rgba(255,204,0,.65);
  line-height:1;
}
	
	
	/* Jump row in hero: label looks like part of the pill system */
.collections-jumpRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-start;
  align-items:center;
}

/* “Jump to” label chip */
.collections-jumpLabel{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:38px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(15,23,42,.78);
  background: rgba(10,104,181,.08);
  border: 1px dashed rgba(15,23,42,.18);
  white-space:nowrap;
}

/* Optional little dot to make it feel “designed” */
.collections-jumpLabel::before{
  content:"";
  width:8px; height:8px;
  border-radius:999px;
  background: var(--izzit-yellow);
  box-shadow: 0 0 0 3px rgba(255,204,0,.18);
}

.collections-results{ font-size:13px; color: rgba(71,85,105,.95); font-weight:700; }
.collections-empty{ display:none; margin: 10px 0 18px; }
.collections-empty-inner{
  padding:14px 16px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 22px rgba(2,6,23,.08);
}
	
/* =========================================================
   STICKY SEARCH / FILTER BAR
   Desktop only
========================================================= */

@media (min-width: 922px) {
  #collections-filterbar {
    position: sticky;
    top: 12px;
    z-index: 9000;
  }
}	

/* =========================================================
   Premium Player module
========================================================= */
.video-main-shell{
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(20,62,105,.06), rgba(255,255,255,0));
  box-shadow: 0 18px 40px rgba(2,6,23,.10), 0 3px 12px rgba(2,6,23,.06);
  overflow: hidden;
}
.player-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.player-strip-left{ display:flex; align-items:center; gap: 10px; min-width:0; }
.player-strip-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(10,104,181,.12);
  color: var(--izzit-navy);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.player-strip-pill::before{
  content:"";
  width:8px;height:8px;border-radius:999px;
  background: var(--izzit-yellow);
  box-shadow: 0 0 0 3px rgba(255,204,0,.18);
  display:inline-block;
}
.player-strip-title{ font-weight: 900; color: var(--izzit-navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-strip-meta{ font-size: 12.5px; color: rgba(71,85,105,.95); font-weight: 700; white-space:nowrap; }

.video-main-wrapper{
  width:100%;
  max-width:1300px;
  margin: 18px auto 18px;
  padding-bottom:0;
  transition: box-shadow .2s ease, border-radius .2s ease, background-color .2s ease;
}
.video-main-wrapper.has-active-video{
  box-shadow: rgba(50,50,93,.25) 0px 13px 27px -5px, rgba(0,0,0,.3) 0px 8px 16px -8px;
  border-radius:25px;
  background:#f9fafb;
}
.video-player-container{width:100%;display:none;opacity:0;}
.video-player-container.is-visible{
  display:block;
  animation: fadeInPlayer .35s ease forwards;
  border-radius: 0;
  overflow:hidden;
}
@keyframes fadeInPlayer{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.video-player-inner{position:relative;width:100%;aspect-ratio:16/9;background:#000;}
.video-player-inner iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-info{
  width:100%;
  display:none;
  text-align:left;
  padding:12px 18px 16px;
  background: rgba(255,255,255,.92);
  border-top:1px solid rgba(15,23,42,.10);
}
.video-info-grid{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:20px; margin-top:4px; }
.video-playing-title{font-size:18px;font-weight:800;color:var(--izzit-navy);margin:4px 0;}
.video-playing-desc{font-size:16px;color:#333;margin:4px 0 0;}

.collections-player-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;}
.close-player-btn{padding:6px 14px !important;border-radius:7px !important;min-width:auto !important;width:auto !important;white-space:nowrap;}
.expand-player-btn{display:none;}
@media (max-width: 921px){
  .video-info-grid{grid-template-columns:1fr;gap:10px;}
  .video-info-button-col{text-align:left;}
}

/* loading overlay */
.video-main-wrapper.is-loading .video-player-inner{position:relative;}
.video-main-wrapper.is-loading .video-player-inner::after{
  content:"";
  position:absolute;inset:0;
  background:rgba(249,250,251,.92);
  backdrop-filter: blur(2px);
  z-index:2;
}
.video-main-wrapper.is-loading .video-player-inner::before{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:8px;height:8px;border-radius:999px;
  background:var(--izzit-blue);
  transform:translate(-50%,-50%);
  z-index:3;
  box-shadow:-16px 0 0 var(--izzit-blue), 16px 0 0 var(--izzit-blue);
  animation: dotPulse 1.05s infinite ease-in-out;
}
@keyframes dotPulse{
  0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(1);}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.15);}
}

.video-main-spacer{height:0;}
@media (min-width: 922px){
  .video-main-wrapper.is-sticky{
    position:fixed; right:18px;bottom:18px;left:auto;top:auto;
    width:360px; max-width:calc(100vw - 36px);
    z-index:9999;
    border-radius:18px;
    overflow:hidden;
    background: rgba(255,255,255,.94);
    border: 0;
    box-shadow: rgba(50,50,93,.25) 0px 13px 27px -5px, rgba(0,0,0,.35) 0px 10px 18px -8px;
  }
  .video-main-wrapper.is-sticky::before{
    content:"";
    position:absolute; inset:-2px;
    border-radius:20px;
    pointer-events:none;
    background: linear-gradient(135deg, rgba(10,104,181,.18), rgba(255,204,0,.18));
    filter: blur(14px);
    opacity:.45;
    z-index:0;
  }
  .video-main-wrapper.is-sticky .video-main-shell{position:relative; z-index:1;}
  .video-main-wrapper.is-sticky .expand-player-btn{display:inline-block;}
  .video-main-wrapper.is-sticky .player-strip{ padding: 9px 12px; }
  .video-main-wrapper.is-sticky .player-strip-title{ font-size: 13.5px; }
  .video-main-wrapper.is-sticky .player-strip-meta{ font-size: 12px; }
  .video-main-wrapper.is-sticky .collections-player-actions{
    flex-direction: column;
    align-items: stretch;
    justify-content:flex-start;
    gap:8px;
  }
  .video-main-wrapper.is-sticky .expand-player-btn,
  .video-main-wrapper.is-sticky .close-player-btn{
    width: 100% !important;
    text-align:center;
    border-radius: 12px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
  }
  .video-main-wrapper.is-sticky .video-playing-title{ font-size:14px; margin:0 0 2px; line-height:1.2; }
  .video-main-wrapper.is-sticky .video-playing-desc{ font-size:12.5px; margin:0; color:rgba(15,23,42,.70); }
}
@media (max-width: 980px){.video-main-wrapper.is-sticky{width:320px;}}

/* =========================================================
   Cards
========================================================= */
.collections-card{
  border:1px solid rgba(15,23,42,.12);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 22px rgba(2,6,23,.10);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
}
.collections-card:hover{ transform:translateY(-2px); box-shadow:0 16px 30px rgba(2,6,23,.14); }
.collections-card.is-playing{
  border-color: rgba(10,104,181,.85);
  box-shadow: 0 18px 34px rgba(10,104,181,.14), 0 18px 34px rgba(2,6,23,.14);
  transform:translateY(-2px);
}
.collections-thumb{ position: relative; display:block; }
.collections-thumb img{width:100%;height:auto;display:block;}

.collections-playpill{
  position:absolute; left: 12px; top: 50px; z-index: 2;
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.78);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.collections-playdot{
  width:8px;height:8px;border-radius:999px;
  background: var(--izzit-yellow);
  box-shadow: 0 0 0 2px rgba(255,204,0,.25);
}
.collections-card:hover .collections-playpill{ opacity: 1; transform: translateY(0); }

.collections-nowpill{
  position:absolute; right: 12px; top: 12px; z-index: 2;
  display:none;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(10,104,181,.92);
  color:#fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.collections-card.is-playing .collections-nowpill{ display:inline-flex; align-items:center; }

.collections-duration{
  position:absolute; left:12px; top:12px; z-index:2;
  background: rgba(15,23,42,.82);
  color:#fff;
  font-size:12px;
  font-weight:900;
  padding:6px 8px;
  border-radius:10px;
  letter-spacing:.02em;
}

.collections-meta{padding:10px 12px;text-align:left;}
.collections-titlelink{
  display:block;
  font-size:16px;
  font-weight:800;
  line-height:1.25;
  color: var(--text);
  text-decoration:none;
}
.collections-desctext{
  margin-top:6px;
  font-size:14.5px;
  color: rgba(71,85,105,.95);
  line-height:1.35;
}

.collections-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:8px;
}
@media (max-width: 992px){.collections-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 640px){.collections-grid{grid-template-columns: 1fr;}}

/* =========================================================
   Group headers (Forbes-style season head)
========================================================= */
.collections-group{ margin-top: 16px; }
.collections-season-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 22px;
}
.collections-season-badges{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.collections-season-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(10,104,181,.10);
  border: 1px solid rgba(15,23,42,.12);
  color: var(--izzit-navy);
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.collections-season-pill::before{
  content:"";
  width:8px;height:8px;border-radius:999px;
  background: var(--izzit-yellow);
  box-shadow: 0 0 0 3px rgba(255,204,0,.18);
}
.collections-season-pill.is-time{
  background: rgba(255,255,255,.92);
  color: rgba(15,23,42,.78);
  text-transform:none;
  letter-spacing:.02em;
}
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  .collections-card, .collections-chip{ transition:none !important; }
}

/* =========================================================
   PAGE-SPECIFIC LAYOUT HELPERS
   Moved out of inline HTML for clean separation
========================================================= */
.collections-row-reset{ margin:0; }
.collections-featured-copy{ text-align:left; padding-left:0; margin-top:10px; }
.collections-featured-title{ font-size:18px; font-weight:800; color:var(--izzit-navy); }
.collections-featured-desc{ font-size:16px; color:rgba(71,85,105,.95); margin-top:4px; }
.collections-side-copy{ text-align:left; padding-left:1em; margin-top:14px; }
.collections-logo-wrap{ padding-top:10px; padding-bottom:15px; }
.collections-intro-copy{ font-size:16px; padding-top:15px; }
.collections-jump-filterbar{ margin:14px 0 0; padding:10px 12px; }
.collections-space-18{ padding-bottom:18px; }
.collections-space-25{ padding-bottom:25px; }
.collections-empty-title{ font-weight:900; color:var(--izzit-navy); font-size:18px; }
.collections-empty-copy{ color:rgba(71,85,105,.95); margin-top:3px; }
.collections-vids-bar-reset{ margin-top:0; }

/* =========================================================
   COLLECTION SECTION TITLES
   Matches homepage section headings
========================================================= */

.vids_bar .izzit_link.collections-group-title,
.vids_bar .izzit_link.collections-group-title:hover,
.vids_bar .izzit_link.collections-group-title:focus,
.vids_bar .izzit_link.collections-group-title:active {
    display: block;

    margin: 0 !important;

    color: #143e69 !important;

    font-size: clamp(2rem, 4vw, 3.2rem) !important;
    font-weight: 900 !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;

    text-decoration: none !important;
    opacity: 1 !important;
    transform: none !important;

    cursor: default;
}

/* =========================================================
   REMOVE DEFAULT CLICK OUTLINE
========================================================= */

.collections-page a:focus,
.collections-page a:active,
.collections-page button:focus,
.collections-page button:active {
    outline: none !important;
}

/* =========================================================
   COLLECTION RESOURCE SECTIONS
   Universal helpers for multi-resource collection pages
========================================================= */

.collections-section{
  margin-top:22px;
}

.collections-eyebrow{
  text-align:left;
  padding-left:12px;
  padding-bottom:4px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#6b7280;
}

.collections-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
  margin-bottom:14px;
}

.collections-section-badges{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.collections-section-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(10,104,181,.10);
  border:1px solid rgba(15,23,42,.12);
  color:var(--izzit-navy);
  font-weight:950;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}

.collections-section-pill::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--izzit-yellow);
  box-shadow:0 0 0 3px rgba(255,204,0,.18);
}

.collections-section-pill.is-time{
  background:rgba(255,255,255,.92);
  color:rgba(15,23,42,.78);
  text-transform:none;
  letter-spacing:.02em;
}

.collections-section-desc{
  text-align:left;
  font-size:16px;
  color:#000;
  padding-left:12px;
  padding-bottom:10px;
}

.collections-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.collections-meta{
  display:flex;
  flex-direction:column;
  flex:1;
}

.collections-card-title{
  margin:0;
  font-size:16px;
  font-weight:900;
  line-height:1.25;
  color:var(--text);
}

.collections-actions{
  margin-top:auto;
  padding-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.collections-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:40px;
  padding:0 14px;
  border-radius:999px;
  font-weight:900;
  text-decoration:none !important;
  border:1px solid rgba(15,23,42,.14);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  white-space:nowrap;
  background:rgba(255,255,255,.94);
  color:var(--izzit-navy);
  box-shadow:0 10px 22px rgba(2,6,23,.08);
}

.collections-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(2,6,23,.12);
  border-color:rgba(10,104,181,.28);
  color:var(--izzit-navy);
  text-decoration:none !important;
}

.collections-btn.primary{
  background:var(--izzit-blue);
  color:#fff !important;
  border-color:rgba(10,104,181,.55);
  box-shadow:0 12px 24px rgba(10,104,181,.22);
}

.collections-btn.primary:hover{
  color:#fff !important;
  box-shadow:0 18px 34px rgba(10,104,181,.26);
}

.collections-chip-primary{
  background:var(--izzit-blue);
  color:#fff !important;
  border-color:rgba(10,104,181,.55);
  box-shadow:0 12px 24px rgba(10,104,181,.25);
}

.collections-chip-primary:hover{
  color:#fff !important;
  box-shadow:0 18px 34px rgba(10,104,181,.28);
}

.collections-chip .ico{
  width:24px;
  height:24px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
}

.collections-chip:not(.collections-chip-primary) .ico{
  background:rgba(10,104,181,.10);
  border:1px solid rgba(10,104,181,.16);
  color:var(--izzit-blue);
}

.collections-durpill{
  position:absolute;
  left:12px;
  top:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.78);
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  opacity:0;
  transform:translateY(3px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}

.collections-duricon{
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.85);
  box-shadow:0 0 0 2px rgba(255,255,255,.15);
}

.collections-card:hover .collections-durpill{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   CARD YELLOW HOVER LINE
========================================================= */

.collections-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;

  background: var(--izzit-yellow);

  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;

  z-index: 5;
  pointer-events: none;
}

.collections-card:hover::after,
.collections-card:focus-within::after {
  transform: scaleX(1);
}


.collections-logo-image{
  border-radius:15px;
}

.collections-hero-video-pad{
  padding-top:10px;
}

/* Keep shared collection section titles consistent everywhere */
.collections-group-title,
.collections-group-title:hover,
.collections-group-title:focus,
.collections-group-title:active{
  display:block;
  margin:0 !important;
  color:#143e69 !important;
  font-size:clamp(2rem,4vw,3.2rem) !important;
  font-weight:900 !important;
  line-height:.98 !important;
  letter-spacing:-.055em !important;
  text-decoration:none !important;
  opacity:1 !important;
  transform:none !important;
}

@media (max-width:767px){
  .collections-side-copy{
    padding-left:0;
  }
}
/* =========================================================
   HERO NAVIGATION BAR
   Jump links + Back to Collections
========================================================= */

.collections-hero-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.collections-hero-nav .collections-jumpRow {
  flex: 1;
  min-width: 0;
}

.collections-back-wrap {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Remove any inherited spacing from the included back button */
.collections-back-wrap > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 921px) {
  .collections-hero-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .collections-back-wrap {
    margin-left: 0;
  }
}
/* =========================================================
   BACK TO COLLECTIONS PILL
========================================================= */

.collections-back-chip {
  background: var(--izzit-blue) !important;
  border-color: var(--izzit-blue) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(10,104,181,.20);
}

.collections-back-chip:hover,
.collections-back-chip:focus,
.collections-back-chip:active {
  background: var(--izzit-blue) !important;
  border-color: var(--izzit-blue) !important;
  color: #fff !important;
  text-decoration: none !important;
}


/* =========================================================
   COLLECTIONS INDEX PAGE
   Styles for the main Collections landing page only
========================================================= */

.collections-index-page{
  min-height:100vh;
}


/* =========================================================
   INDEX HERO
========================================================= */

.collections-index-hero{
  padding:
    clamp(34px, 5vw, 58px)
    clamp(20px, 5vw, 54px);
}

.collections-index-hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:920px;
  margin:0 auto;
}

.collections-index-kicker{
  margin:0 0 10px;
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.collections-index-hero h1{
  margin:0 0 14px;
}

.collections-index-hero p{
  max-width:860px;
}


/* =========================================================
   INDEX SECTION HEADING
========================================================= */

.collections-index-section{
  padding-top:12px;
}

.collections-index-heading-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin:12px 0 22px;
}

.collections-index-heading-row .collections-eyebrow{
  padding-left:0;
}

.collections-index-count{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(10,104,181,.09);
  color:var(--izzit-navy);
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  white-space:nowrap;
}


/* =========================================================
   INDEX GRID
========================================================= */

.collections-index-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
  align-items:stretch;
}


/* =========================================================
   INDEX CARDS
========================================================= */

.collections-index-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
  overflow:hidden;

  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;

  background:#fff;

  box-shadow:
    0 10px 22px rgba(2,6,23,.09);

  transform:translateY(0);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.collections-index-card:hover{
  transform:translateY(-3px);

  border-color:rgba(10,104,181,.18);

  box-shadow:
    0 18px 34px rgba(2,6,23,.14);
}


/* Yellow line matches resource cards */

.collections-index-card::after{
  content:"";

  position:absolute;
  left:0;
  right:0;
  bottom:0;

  height:4px;

  background:var(--izzit-yellow);

  transform:scaleX(0);
  transform-origin:center;

  transition:transform .25s ease;

  z-index:5;
  pointer-events:none;
}

.collections-index-card:hover::after,
.collections-index-card:focus-within::after{
  transform:scaleX(1);
}


/* =========================================================
   INDEX CARD IMAGE
========================================================= */

.collections-index-image-link{
  display:block;
  width:100%;
  text-decoration:none !important;
}

.collections-index-image-wrap{
  position:relative;
  width:100%;

  aspect-ratio:1040 / 620;

  overflow:hidden;
  background:#f1f5f9;
}

.collections-index-image-wrap img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  transform:scale(1);

  transition:transform .28s ease;
}

.collections-index-card:hover .collections-index-image-wrap img{
  transform:scale(1.025);
}


/* =========================================================
   INDEX CARD CONTENT
========================================================= */

.collections-index-content{
  display:flex;
  flex-direction:column;
  flex:1;

  padding:17px 18px 20px;

  text-align:left;
}

.collections-index-card-kicker{
  margin:0 0 7px;

  color:#6b7280;

  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.collections-index-card-title{
  margin:0;

  color:var(--izzit-navy);

  font-size:20px;
  font-weight:900;
  line-height:1.15;
  letter-spacing:-.025em;
}

.collections-index-card-title a,
.collections-index-card-title a:hover,
.collections-index-card-title a:focus,
.collections-index-card-title a:active{
  color:var(--izzit-navy) !important;
  text-decoration:none !important;
  opacity:1 !important;
}

.collections-index-card-desc{
  margin:10px 0 0;

  color:rgba(71,85,105,.98);

  font-size:14.5px;
  line-height:1.5;
}


/* =========================================================
   INDEX CARD BUTTON
========================================================= */

.collections-index-card-actions{
  margin-top:auto;
  padding-top:18px;
}

.collections-index-card-actions .collections-btn{
  width:100%;
}


/* =========================================================
   INDEX RESPONSIVE
========================================================= */

@media (max-width:992px){

  .collections-index-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

}

@media (max-width:640px){

  .collections-index-heading-row{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .collections-index-grid{
    grid-template-columns:1fr;
  }

  .collections-index-card-title{
    font-size:19px;
  }

}


/* =========================================================
   INDEX REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

  .collections-index-card,
  .collections-index-image-wrap img{
    transition:none !important;
  }

}


/* =========================================================
   ACTIVITIES & COLLECTIONS INDEX PAGE
========================================================= */

.activities-index-page{min-height:100vh;}

.activities-index-hero{
  padding:clamp(34px,5vw,58px) clamp(20px,5vw,54px);
}

.activities-index-hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:920px;
  margin:0 auto;
}

.activities-index-hero h1{margin:0 0 14px;}
.activities-index-hero p{max-width:860px;}

.activities-index-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 24px;
  padding:12px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  background:rgba(255,255,255,.74);
  box-shadow:0 10px 24px rgba(2,6,23,.07);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.activities-index-section{margin-top:34px;}
.activities-index-section:first-of-type{margin-top:12px;}

.activities-index-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:10px;
}

.activities-index-section-head .collections-eyebrow{padding-left:0;}

.activities-index-section-desc{
  max-width:900px;
  margin:0 0 18px;
  color:rgba(71,85,105,.98);
  font-size:16px;
  line-height:1.55;
}

.activities-index-view-all{flex:0 0 auto;}

.activities-index-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  align-items:stretch;
}

.activities-index-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 22px rgba(2,6,23,.09);
  transform:translateY(0);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.activities-index-card:hover{
  transform:translateY(-3px);
  border-color:rgba(10,104,181,.18);
  box-shadow:0 18px 34px rgba(2,6,23,.14);
}

.activities-index-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  background:var(--izzit-yellow);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .25s ease;
  z-index:5;
  pointer-events:none;
}

.activities-index-card:hover::after,
.activities-index-card:focus-within::after{transform:scaleX(1);}

.activities-index-image-link{
  display:block;
  width:100%;
  text-decoration:none!important;
}

.activities-index-image-wrap{
  position:relative;
  width:100%;
  aspect-ratio:1040/620;
  overflow:hidden;
  background:#f1f5f9;
}

.activities-index-image-wrap img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1);
  transition:transform .28s ease;
}

.activities-index-card:hover .activities-index-image-wrap img{transform:scale(1.025);}

.activities-index-content{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:17px 18px 20px;
  text-align:left;
}

.activities-index-card-kicker{
  margin:0 0 7px;
  color:#6b7280;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.activities-index-card-title{
  margin:0;
  color:var(--izzit-navy);
  font-size:20px;
  font-weight:900;
  line-height:1.15;
  letter-spacing:-.025em;
}

.activities-index-card-title a,
.activities-index-card-title a:hover,
.activities-index-card-title a:focus,
.activities-index-card-title a:active{
  color:var(--izzit-navy)!important;
  text-decoration:none!important;
  opacity:1!important;
}

.activities-index-card-desc{
  margin:10px 0 0;
  color:rgba(71,85,105,.98);
  font-size:14.5px;
  line-height:1.5;
}

.activities-index-card-actions{
  margin-top:auto;
  padding-top:18px;
}

.activities-index-card-actions .collections-btn{width:100%;}

@media (max-width:992px){
  .activities-index-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:700px){
  .activities-index-section-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .activities-index-view-all{width:100%;}
}

@media (max-width:640px){
  .activities-index-nav{justify-content:flex-start;}
  .activities-index-grid{grid-template-columns:1fr;}
  .activities-index-card-title{font-size:19px;}
}

@media (prefers-reduced-motion:reduce){
  .activities-index-card,
  .activities-index-image-wrap img{
    transition:none!important;
  }
}
