/* You can put this into the custom styles box if you like.
Edit as needed, for instance, to set the approximate height to reserve for injected content.
*/

.academy-content-wrapper.waitingForInjectedContent {
  padding-top: 400px;
}
#WRCustom_InjectedContent {
  margin-top: -55px;
}
[data-downloads-image] {
  cursor: pointer;
}


/* TAB BAR */
.AL_Custom_TabBar {
  background: transparent !important;
  display: flex !important;
  position: relative !important;
  border: 0px;
  padding: 10px !important;
  width: 100% !important;
  z-index: 100 !important;
  margin: auto !important;
  margin-top: -64px !important;
  justify-content: space-between;
  align-items: center !important;
  max-width: max-content !important;
  text-align: center !important;
}
.AL_Custom_TabBarTab {
  border: 1px solid #000 !important;
  border-radius: 40px !important;
  padding: 10px 15px !important; 
  margin: 10px 15px !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  background: #000 !important;
  color: #fff !important;
}
a:hover.AL_Custom_TabBarTab, a.active.AL_Custom_TabBarTab {
  background: #999999 !important;
  color: #000 !important;
  border-color: #999999 !important;
}


/* YELLOW TOP BANNER */
/* === Snap-black test banner at the absolute top of every page === */
html::before {
  content: "Please excuse our appearance. Data is still syncing from our previous platform and may take up to 2 weeks. Thank you for your patience and contact focus@snapchat.com with questions!";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 32px;                     /* banner height */
  background: #000000;               /* Snap black */
  color: #ffffff;                    /* white text */
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  border-bottom: 1px solid #e5e7eb;
}

/* Push the rest of the page down so the banner doesn’t overlap */
.AL_Custom_BreadcrumbBar,
.AL_Custom_Header,
.AL_Custom_CardContainer {
  margin-top: 32px;  /* match the banner height */
}


/* === Breadcrumb font size bump ("Home > Catalog") === */
.AL_Custom_BreadcrumbBar {
  /* modest increase across devices */
  font-size: clamp(24px, 1.1vw, 29px) !important;
  line-height: 1.4 !important; /* keeps the chevrons centered vertically */
}

/* Ensure inner elements don’t shrink it back via utility classes */
.AL_Custom_BreadcrumbBar a,
.AL_Custom_BreadcrumbBar span,
.AL_Custom_BreadcrumbBar li,
.AL_Custom_BreadcrumbBar ol {
  font-size: inherit !important;
}

/* Optional: add a touch of spacing around the separators */
.AL_Custom_BreadcrumbBar li + li::before {  /* common breadcrumb pattern */
  margin: 0 6px !important;
}
.AL_Custom_BreadcrumbBar .separator {        /* if your markup uses a .separator node */
  margin: 0 6px !important;
}


/* =========================
   SNAP-STYLED CAROUSEL (CSS-only) — no arrows
   ========================= */

.AL_Custom_CardContainer {
  position: relative;
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 1rem !important;

  touch-action: pan-x;

  /* Frame */
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(16,24,40,0.06);
  padding: 16px 64px; /* space for fades / progress */

  /* Edge fades (left/right) + progress (Snap yellow) */
  background-image:
    linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0)), /* left fade */
    linear-gradient(to left,  rgba(255,255,255,1), rgba(255,255,255,0)), /* right fade */
    linear-gradient(#FFFC00, #FFFC00), /* progress FILL (Snap yellow) */
    linear-gradient(#e5e7eb, #e5e7eb); /* progress TRACK (light gray) */
  background-repeat: no-repeat;
  background-size:
    64px 100%, 64px 100%, 0% 3px, 100% 3px;
  background-position:
    left center, right center, left bottom, left bottom;
}

/* Slides / cards — NOW SMALLER by default */
.AL_Custom_CardContainer > *,
.AL_Custom_CardContainer > a.AL_Custom_SingleCard,
.AL_Custom_CardContainer > .AL_Custom_SingleCard {
  flex: 0 0 auto !important;
  width: clamp(220px, 24vw, 340px) !important; /* was: 260px, 28vw, 420px */
}

/* Card media tidy */
.AL_Custom_CardImage,
.AL_Custom_CardImage img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 8px;
}

/* Hover feedback */
.AL_Custom_CardContainer > *:hover {
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Prominent hint badge (Snap yellow text on black) */
.AL_Custom_CardContainer > *:first-child { position: relative; }
.AL_Custom_CardContainer > *:first-child::after {
  content: "⇠ Scroll ⇢";
  position: absolute;
  top: -14px;
  right: 16px;
  background: #111111;
  color: #FFFC00;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.20);
  z-index: 20;
  pointer-events: none;
  opacity: 0.95;
  animation: al-pulsefade 2s ease-in-out infinite;
}
.AL_Custom_CardContainer:hover > *:first-child::after,
.AL_Custom_CardContainer:focus-within > *:first-child::after {
  opacity: 0; transition: opacity .3s ease; animation: none;
}
@keyframes al-pulsefade {
  0%, 100% { opacity: 0.95; transform: translateY(0) scale(1); }
  50%      { opacity: 1;    transform: translateY(-1px) scale(1.05); }
}

/* Scrollbar (optional) */
.AL_Custom_CardContainer::-webkit-scrollbar { height: 8px; }
.AL_Custom_CardContainer::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.22);
  border-radius: 4px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .AL_Custom_CardContainer > *:hover { transform: none; box-shadow: none; }
  .AL_Custom_CardContainer > *:first-child::after { animation: none; }
}

/* ---- Scroll-linked progress (Snap yellow fill) — supported in modern Chromium ---- */
@supports (animation-timeline: auto) {
  .AL_Custom_CardContainer {
    animation: al-progress-fill linear both;
    animation-timeline: --cards;
    animation-range: 0% 100%;
  }
  @keyframes al-progress-fill { from { } to { } }
  .AL_Custom_CardContainer {
    background-size:
      64px 100%, 64px 100%,
      var(--p) 3px,           /* Snap yellow fill */
      100% 3px;               /* track */
  }
}

/* =========================
   SIZE TUNING BY BREAKPOINT
   ========================= */

/* Mobile ≤ 640px: slightly smaller cards & tighter spacing */
@media (max-width: 640px) {
  .AL_Custom_CardContainer { gap: 0.75rem !important; } /* was 1rem */
  .AL_Custom_CardContainer > *,
  .AL_Custom_CardContainer > a.AL_Custom_SingleCard,
  .AL_Custom_CardContainer > .AL_Custom_SingleCard {
    width: clamp(200px, 68vw, 240px) !important; /* smaller than previous min 260px */
  }
}

/* Desktop ≥ 1024px: reduce ideal/max so more cards fit per row */
@media (min-width: 1024px) {
  .AL_Custom_CardContainer > *,
  .AL_Custom_CardContainer > a.AL_Custom_SingleCard,
  .AL_Custom_CardContainer > .AL_Custom_SingleCard {
    width: clamp(220px, 20vw, 320px) !important;
  }
}

/* Large desktop ≥ 1440px: keep them from getting too wide */
@media (min-width: 1440px) {
  .AL_Custom_CardContainer > *,
  .AL_Custom_CardContainer > a.AL_Custom_SingleCard,
  .AL_Custom_CardContainer > .AL_Custom_SingleCard {
    width: clamp(220px, 18vw, 320px) !important;
  }
}