/* wildworld.css */

.page-header { padding: 46px var(--pad) 0; }
.page-header__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px,5vw,50px); letter-spacing:-.01em; margin: 8px 0 0; }
.page-header__desc { color: var(--text-mid); font-size: 18px; margin: 10px 0 0; font-weight: 500; max-width: 580px; }

/* Featured */
.ww-featured { padding: 28px var(--pad) 0; }
.ww-featured__card {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  background: -webkit-linear-gradient(135deg, #1F8074, #2FB6AA);
  background: linear-gradient(135deg, #1F8074, #2FB6AA);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 24px 54px rgba(31,128,116,.28);
}
.ww-featured__content { padding: 44px 42px; align-self: center; color: #fff; }
.ww-featured__badge { display: inline-block; background: var(--yellow); color: #5A4634; font-weight: 800; font-size: 12px; padding: 5px 13px; border-radius: var(--radius-pill); }
.ww-featured__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px,3vw,34px); line-height: 1.12; margin: 16px 0 0; }
.ww-featured__desc { color: #DDF4EF; font-size: 16px; line-height: 1.6; margin: 14px 0 0; font-weight: 500; max-width: 420px; }
.ww-featured__link { display: inline-block; margin-top: 22px; background: #fff; color: #1F8074; font-weight: 800; font-size: 15px; padding: 12px 24px; border-radius: var(--radius-pill); -webkit-transition: background .18s; transition: background .18s; }
.ww-featured__link:hover { background: var(--teal-light); }
.ww-featured__img { background: rgba(255,255,255,.14); background-image: repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 14px,transparent 14px 28px); display: -webkit-flex; display: flex; align-items: flex-end; padding: 16px; min-height: 280px; }
.ww-featured__img-label { font-family: var(--font-mono); font-size: 11px; color: #fff; background: rgba(0,0,0,.18); padding: 4px 9px; border-radius: 7px; }

/* Filter */
.ww-filter { padding: 34px var(--pad) 0; }
.filter-chips { display: -webkit-flex; display: flex; gap: 8px; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.chip { padding: 9px 17px; border-radius: var(--radius-pill); font-weight: 700; font-size: 14px; background: var(--bg-white); color: var(--text-mid); border: 1px solid var(--border-mid); cursor: pointer; -webkit-transition: all .18s; transition: all .18s; }
.chip:hover { background: var(--teal-light); color: var(--teal); border-color: var(--teal-light); }
.chip--active { background: var(--teal-mid); color: #fff; border-color: var(--teal-mid); }

/* Grid */
.ww-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 22px; }

.ww-card { background: var(--bg-white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); -webkit-transition: -webkit-transform .2s; transition: transform .2s; }
.ww-card:hover { -webkit-transform: translateY(-4px); transform: translateY(-4px); }

.ww-card__img { aspect-ratio: 16/10; background-image: repeating-linear-gradient(45deg,rgba(255,255,255,.55) 0 12px,transparent 12px 24px); }
.ww-card__img--teal   { background-color: var(--teal-light); }
.ww-card__img--yellow { background-color: var(--cream-light); }
.ww-card__img--orange { background-color: var(--orange-light); }
.ww-card__img--pink   { background-color: var(--pink-light); }

.ww-card__body { padding: 20px 22px 24px; }

.ww-tag { display: inline-block; font-weight: 800; font-size: 11px; padding: 4px 11px; border-radius: var(--radius-pill); }
.ww-tag--teal   { background: var(--teal-mid); color: #fff; }
.ww-tag--yellow { background: var(--yellow); color: #5A4634; }
.ww-tag--orange { background: var(--orange); color: #fff; }

.ww-card__title { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 12px 0 0; line-height: 1.25; }
.ww-card__desc  { color: var(--text-mid); font-size: 15px; line-height: 1.55; margin: 8px 0 0; font-weight: 500; }

@media (max-width: 880px) {
  .ww-featured__card { grid-template-columns: 1fr !important; }
  .ww-featured__img { min-height: 200px !important; }
}