.lu-fun{
  --lu-fun-accent: var(--lu-forest, #4A7C5C);
  --lu-fun-ink:    var(--lu-forest-deep, #2F5D4E);
  --lu-fun-tint:   var(--lu-accent-soft, #DFF3CF);
  --lu-fun-empty:  color-mix(in srgb, var(--lu-forest-deep, #2F5D4E) 9%, #fff);

  margin-bottom: 28px;
}
.lu-fun, .lu-fun *{ box-sizing: border-box; }

.lu-tiles--square .lu-tile__media{ padding-top: 100%; }

.lu-tile__media--empty{
  background: #E9F0EC;
  background: var(--lu-fun-empty);
}

.lu-fun__link,
.text-content .lu-fun__link{
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer;
  outline: none;
}
.lu-fun__link:focus,
.lu-fun__link:focus-visible{ outline: none; }

@media (hover: hover){
  .lu-fun__link{ transition: transform .2s ease, box-shadow .2s ease; }
  .lu-fun__link:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
  }
}

.lu-fun__tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.lu-fun__tab{
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  color: rgba(17,17,17,.72);
  background: #fff;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 14px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.lu-fun__tab:hover{ border-color: var(--lu-fun-accent); }
.lu-fun__tab:focus,
.lu-fun__tab:focus-visible{ outline: none; box-shadow: none; }
.lu-fun__tab.is-active{
  background: var(--lu-fun-tint);
  border-color: var(--lu-fun-accent);
  color: var(--lu-fun-ink);
}

.lu-fun__panel[hidden]{ display: none; }

.lu-fun__pill{
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
  white-space: nowrap;
  background: var(--lu-pill-bg, var(--lu-accent-soft, #DFF3CF));
  color: var(--lu-pill-fg, var(--lu-forest-deep, #2F5D4E));
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.lu-fun__pills{
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.lu-fun__pills .lu-fun__pill{ position: static; top: auto; left: auto; }

.lu-fun__pill--green { --lu-pill-bg: var(--lu-accent-soft,#DFF3CF); --lu-pill-fg: var(--lu-forest-deep,#2F5D4E); }
.lu-fun__pill--sage  { --lu-pill-bg: var(--lu-sage-light,#B8D4A8);  --lu-pill-fg: var(--lu-forest-deep,#2F5D4E); }
.lu-fun__pill--blue  { --lu-pill-bg: var(--lu-sky-mist,#D6EEF9);    --lu-pill-fg: var(--lu-midnight,#1A3A4A); }
.lu-fun__pill--sky   { --lu-pill-bg: var(--lu-sky,#9DD9F5);         --lu-pill-fg: var(--lu-midnight,#1A3A4A); }
.lu-fun__pill--lake  { --lu-pill-bg: var(--lu-lake,#4A8AA5);        --lu-pill-fg: var(--lu-paper,#FAF7F0); }
.lu-fun__pill--ink   { --lu-pill-bg: var(--lu-accent-ink,#355F73);  --lu-pill-fg: var(--lu-paper,#FAF7F0); }
.lu-fun__pill--gray  { --lu-pill-bg: #E6EDF1;                       --lu-pill-fg: var(--lu-midnight,#1A3A4A); }

.lu-fun__panel:not(.is-expanded) .lu-tiles > [class*="col-"]:nth-child(n+9){ display: none; }

.lu-fun__more{ margin-top: 48px; text-align: center; }
.lu-fun__more[hidden]{ display: none; }
.lu-fun__more-btn{
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--lu-fun-ink);
  padding: 9px 20px;
  background: #fff;
  border: 1px solid var(--lu-fun-accent);
  border-radius: 999px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: background .15s ease, color .15s ease;
}
.lu-fun__more-btn:hover{ background: var(--lu-fun-tint); }
.lu-fun__more-btn:focus,
.lu-fun__more-btn:focus-visible{ outline: none; box-shadow: none; }

.lu-fun__empty,
.text-content .lu-fun__empty{
  margin: 0 !important;
  padding: 28px 16px;
  text-align: center;
  font-size: 14px !important;
  color: var(--lu-bark, #6B5D4F) !important;
}

@media (min-width: 768px){
  .lu-fun .lu-tiles{
    margin-left: -15px;
    margin-right: -15px;
  }
}

@media (min-width: 500px) and (max-width: 767px){
  .lu-fun .lu-tiles > [class*="col-"]{ width: 33.3333%; }
}

@media (max-width: 767px){
  .lu-fun{ margin-bottom: 24px; }
  .lu-fun__tab{
    padding: 9px 14px;
    font-size: 14px;
  }
  .lu-fun__pill{
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    font-size: 11px;
  }
  .lu-fun__pills{ top: 6px; left: 6px; }
}

@media (prefers-reduced-motion: reduce){
  .lu-fun__tab,
  .lu-fun__more-btn,
  .lu-fun__link{ transition: none; }
}