/* Explore page section styling. Edit this file to change the Explore layout only. */
.kai-explore-page{
  display:flex;
  flex-direction:column;
  gap:34px;
}
.kai-explore-topbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}
.kai-explore-topbar h1{
  margin:0;
  font-size:18px;
  letter-spacing:-.04em;
}
.kai-explore-topbar p{
  margin:8px 0 0;
  color:var(--kai-muted);
  font-size:13px;
}
.kai-explore-search{min-width:200px;max-width:240px}
.kai-explore-topline{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:22px;
}
.kai-explore-topline-item{
  background:none;
  border:none;
  color:inherit;
  text-align:left;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  cursor:pointer;
}
.kai-explore-topline-item strong{font-size:16px;line-height:1.2}
.kai-explore-topline-item > span{font-size:13px;color:var(--kai-muted)}
.kai-explore-meta-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kai-explore-meta-row small{font-size:12px;color:var(--kai-muted)}
.kai-explore-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(255,77,141,.14);
  color:#ff4d8d;
  font-size:11px;
  font-style:normal;
  border:1px solid rgba(255,77,141,.24);
}
.kai-explore-section{display:flex;flex-direction:column;gap:16px}
.kai-explore-rail-wrap{position:relative}
.kai-explore-rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:max-content;
  gap:22px;
  overflow-x:auto;
  padding-bottom:8px;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.kai-explore-rail::-webkit-scrollbar{display:none}
.kai-explore-rail-arrow{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(20,22,30,.9);
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:36px;
  line-height:1;
  pointer-events:none;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.kai-explore-best-card,
.kai-explore-song-card,
.kai-explore-creator-card,
.kai-explore-studio-card{
  scroll-snap-align:start;
}
.kai-explore-best-card{width:300px;display:flex;flex-direction:column;gap:12px}
.kai-explore-best-art-wrap{position:relative}
.kai-explore-best-art{
  position:relative;
  display:block;
  width:300px;
  aspect-ratio:1/1;
  border-radius:30px;
  overflow:hidden;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.16);
}
.kai-explore-best-art::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.04));
}
.kai-explore-best-title{
  position:absolute;
  left:28px;
  top:28px;
  font-size:30px;
  line-height:1.02;
  letter-spacing:-.05em;
  color:#fff;
  z-index:1;
}
.kai-explore-best-copy strong,
.kai-explore-song-copy strong,
.kai-explore-contest-copy h3,
.kai-explore-creator-card strong{
  font-size:17px;
  line-height:1.25;
  letter-spacing:-.04em;
}
.kai-explore-best-copy,
.kai-explore-song-copy,
.kai-explore-creator-card .kai-explore-song-copy{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.kai-explore-best-copy span,
.kai-explore-song-copy span,
.kai-explore-creator-card span{
  color:var(--kai-muted);
  font-size:13px;
}
.kai-explore-play-fab{
  position:absolute;
  right:18px;
  bottom:18px;
  width:64px;
  height:64px;
  border-radius:50%;
  border:none;
  background:rgba(91,28,25,.78);
  color:#fff;
  font-size:22px;
  cursor:pointer;
  z-index:2;
  backdrop-filter:blur(12px);
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.kai-explore-song-card{
  width:300px;
  border:none;
  background:none;
  color:inherit;
  text-align:left;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  cursor:pointer;
}
.kai-explore-song-card.is-tall{width:300px}
.kai-explore-song-art,
.kai-explore-studio-art,
.kai-explore-creator-art{
  display:block;
  width:300px;
  aspect-ratio:1/1;
  border-radius:28px;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.kai-explore-song-card.is-tall .kai-explore-song-art{aspect-ratio:0.86/1}
.kai-explore-inline-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kai-explore-stats{font-size:12px;color:var(--kai-muted)}
.kai-explore-contest-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
.kai-explore-contest-card{
  border-radius:32px;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.kai-explore-contest-badge{
  align-self:flex-start;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  font-size:12px;
  font-weight:700;
  color:#f4f4f6;
}
.kai-explore-contest-body{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center}
.kai-explore-contest-art{
  width:100%;
  aspect-ratio:1/1;
  border:none;
  border-radius:26px;
  cursor:pointer;
  color:#fff;
  font-size:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.kai-explore-contest-copy{display:flex;flex-direction:column;gap:12px}
.kai-explore-contest-copy h3{margin:0}
.kai-explore-contest-copy p{margin:0;color:var(--kai-muted);font-size:13px;line-height:1.55}
.kai-explore-contest-actions{display:flex;gap:12px;flex-wrap:wrap}
.kai-explore-contest-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 24px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  color:#f6f6f8;
  font-weight:600;
  background:rgba(255,255,255,.02);
}
.kai-explore-contest-btn.is-solid{background:#f7f3ee;color:#18181d;border-color:transparent}
.kai-explore-studio-card{
  position:relative;
  width:300px;
  border:none;
  background:none;
  padding:0;
  cursor:pointer;
}
.kai-explore-studio-art{height:300px}
.kai-explore-studio-overlay{position:absolute;inset:0;border-radius:28px;background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.26));pointer-events:none}
.kai-explore-creator-card{
  width:260px;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.kai-explore-creator-art{width:260px;height:260px}
@media (max-width: 1280px){
  .kai-explore-topline{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 980px){
  .kai-explore-topbar{flex-direction:column;align-items:flex-start}
  .kai-explore-search{width:100%;max-width:none}
  .kai-explore-topline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kai-explore-contest-grid{grid-template-columns:1fr}
}
@media (max-width: 700px){
  .kai-explore-page{gap:28px}
  .kai-explore-topline{grid-template-columns:1fr}
  .kai-explore-best-card,
  .kai-explore-song-card,
  .kai-explore-studio-card{width:240px}
  .kai-explore-best-art,
  .kai-explore-song-art,
  .kai-explore-studio-art{width:240px}
  .kai-explore-creator-card{width:220px}
  .kai-explore-creator-art{width:220px;height:220px}
  .kai-explore-best-title{font-size:26px;left:22px;top:22px}
  .kai-explore-contest-body{grid-template-columns:1fr}
  .kai-explore-rail-arrow{display:none}
}