/* 走秀 / 街拍 列表页共享样式（从 RunwayLooks.astro / StreetSnaps.astro 抽出）。
   两模块 UI 同构：左封面 + 右标题 + 底部 5 缩略图条带 + 侧栏筛选 + 分页 + 骨架屏。
   类名保留各模块原前缀（.shows* / .snaps*），仅把加载动画 keyframes 统一为 looksProg/looksShim。
   由两个列表组件在前端 frontmatter `import "@/styles/look-grid.css"` 引入，本地 <style> 已删除。 */

@reference "tailwindcss";

[x-cloak] { display: none !important; }

/* ====================== 顶部 / 主体布局 ====================== */
.showsroot,
.snapsroot {
  @apply m-auto max-w-[1600px] pt-7 text-[#0a0a0a];
}

.showshead {
  @apply flex justify-between items-end gap-6 py-5 pb-[26px];
}
.snapshead {
  @apply flex justify-between items-end gap-6 py-5 pb-[22px];
}
.showsh1 {
  @apply text-[clamp(40px,6vw,72px)] leading-[0.9] font-black tracking-[-0.02em] my-0 mb-[10px];
}
.snapsh1 {
  @apply text-[clamp(34px,5.5vw,64px)] leading-[0.95] font-black tracking-[-0.02em] my-0 mb-[8px];
}

/* 已激活筛选 pills */
.showspills { @apply flex flex-wrap gap-2 pt-3.5; }
.snapspills { @apply flex flex-wrap gap-2 mb-4; }
.showspill,
.snapspill {
  @apply inline-flex items-center gap-2 border-[1.5px] border-black p-[6px_10px] text-[10.5px] uppercase tracking-[0.14em] text-black bg-white;
}
.showspill .x,
.snapspill .x {
  @apply inline-flex w-3.5 h-3.5 items-center justify-center border-none bg-black text-white cursor-pointer text-xs leading-none;
}

.showsbody,
.snapsbody {
  @apply flex gap-[36px] items-start max-md:flex-col max-md:gap-[18px];
}

/* ====================== 左 sidebar（REFINE 筛选） ====================== */
.showsaside,
.snapsaside {
  @apply flex-none w-[240px] bg-white sticky top-5 max-h-[calc(100vh-40px)] flex flex-col max-md:static max-md:max-h-none max-md:w-full;
}
.showsaside {
  @apply rounded-none transition-[flex-basis] duration-250 ease-in-out;
}
.showsaside-head,
.snapsaside-head {
  @apply flex items-center justify-between p-[14px_14px_12px] border-b border-black shrink-0;
}
.showsaside-h,
.snapsaside-h {
  @apply text-[11px] tracking-[0.26em] uppercase font-bold m-0 leading-none transition-opacity duration-200;
}
.showsaside-body,
.snapsaside-body {
  @apply p-[14px_14px_18px] overflow-y-auto flex-1 min-h-0 [scrollbar-width:thin] [scrollbar-color:#ccc_#fff];
}

/* 筛选分组 */
.showsg,
.snapsg {
  @apply border-t border-[#e6e6e6] py-[12px] pb-[6px] first-of-type:border-t-0 first-of-type:pt-1;
}
.showsg-h,
.snapsg-h {
  @apply flex justify-between items-center text-[11px] tracking-[0.22em] uppercase font-bold text-black mb-2 cursor-pointer select-none;
}
.showsg-right {
  @apply inline-flex items-center gap-2.5;
}
.showsg-chev,
.snapsg-chev {
  @apply inline-block text-[9px] leading-none text-[#999] transition-transform duration-200 ml-1;
}
.showsg-chev.is-collapsed,
.snapsg-chev.is-collapsed { @apply -rotate-90; }

/* 复选 / 单选列表 */
.showschecks,
.snapschecks {
  @apply list-none mt-[10px] mb-0 p-0 max-h-[280px] overflow-y-auto [scrollbar-width:thin];
}
.showschecks li,
.snapschecks li {
  @apply flex items-center gap-2 py-[5px] text-[11.5px] uppercase tracking-[0.04em] text-black cursor-pointer select-none hover:bg-[#f6f6f6];
}
.showschecks input[type="radio"],
.snapschecks input[type="radio"] {
  @apply appearance-none w-3.5 h-3.5 border-[1.5px] border-black bg-white cursor-pointer shrink-0 rounded-full;
}
/* 选中态由 Alpine 状态驱动（.is-checked），不依赖原生 :checked 伪类：
   @click.prevent 会阻止原生选中，伪类不可靠；实心黑圆一眼可辨 */
.showschecks input[type="radio"].is-checked,
.snapschecks input[type="radio"].is-checked {
  @apply bg-white border-black;
  background-image: radial-gradient(circle, #000 36%, transparent 40%);
}

.showschecks--flat li,
.snapschecks--flat li { @apply py-[4px]; }
.showschecks--flat li label,
.snapschecks--flat li label { @apply inline-flex items-center gap-2 cursor-pointer w-full; }

.showsmore {
  @apply block w-full mt-[12px] text-center text-[11px] uppercase tracking-[0.22em] text-black font-bold cursor-pointer;
}
.showsclear,
.snapsclear {
  @apply mt-[22px] block w-full text-left pt-[16px] border-t border-black/10 text-[11px] uppercase tracking-[0.18em] text-[#666] cursor-pointer hover:text-black transition-colors duration-150;
}

/* ====================== 右 网格 / 卡片 ====================== */
.showsmain,
.snapsmain { @apply flex-1 min-w-0; }
.snapscontent { @apply relative; }

.showsgrid,
.snapsgrid {
  @apply grid grid-cols-2 gap-[22px] relative max-[560px]:grid-cols-1;
}
.showsgrid.is-loading::before,
.snapscontent.is-loading::before {
  content: "";
  @apply absolute -top-1 left-0 h-[2px] w-[38%] bg-black z-10;
  animation: looksProg 1s ease-in-out infinite;
}

.showscard,
.snapscard {
  @apply relative flex gap-[14px] no-underline text-inherit bg-white p-3 transition-colors duration-200 hover:border-black max-[700px]:flex-col max-[700px]:gap-[10px];
}
.showscard:hover .showscard-img img,
.snapscard:hover .snapscard-img img { @apply scale-104; }

.showscard-left,
.snapscard-left {
  @apply flex-none w-[30%] min-w-[110px] max-[700px]:w-full max-[700px]:flex-none;
}
.showscard-img,
.snapscard-img {
  @apply relative w-full aspect-[3/4] bg-[#f1f1f1] overflow-hidden rounded-none;
}
.showscard-img img,
.snapscard-img img {
  @apply w-full h-full object-cover transition-transform duration-600 opacity-0;
}
.showscard-img img.is-loaded,
.snapscard-img img.is-loaded { @apply opacity-100; }

.showsspin,
.snapsspin {
  @apply absolute inset-0 flex items-center justify-center text-[#bdbdbd] opacity-100 transition-opacity duration-300 pointer-events-none z-10;
}
.showscard-img.is-loaded .showsspin,
.snapscard-img.is-loaded .snapsspin,
.showscard-thumb.is-loaded .showsspin,
.snapscard-thumb.is-loaded .snapsspin { @apply opacity-0; }

.showscard-right,
.snapscard-right {
  @apply flex-1 min-w-0 flex flex-col justify-between max-[700px]:w-full;
}
.showscard-info,
.snapscard-info {
  @apply flex-none min-w-0 flex flex-col p-[2px_2px_0];
}
.showscard-title,
.snapscard-title {
  @apply text-[15.5px] font-bold leading-[1.32] my-0 mb-[10px] text-[#111] tracking-[-0.01em] line-clamp-2 h-[41px] overflow-hidden;
}
.showscard-meta,
.snapscard-meta {
  @apply text-[9.5px] text-[#888] my-0 mb-[14px] leading-[1.55] tracking-[0.04em] uppercase line-clamp-2 h-[29px] overflow-hidden;
}

.showscard-strip,
.snapscard-strip {
  @apply grid grid-cols-5 gap-1 mt-[10px];
}
.showscard-thumb,
.snapscard-thumb {
  @apply relative aspect-[3/4] bg-[#f1f1f1] overflow-hidden;
}
.showscard-thumb img,
.snapscard-thumb img {
  @apply w-full h-full object-cover opacity-0 transition-opacity duration-450 ease-in-out;
}
.showscard-thumb img.is-loaded,
.snapscard-thumb img.is-loaded { @apply opacity-100; }
.showscard-thumb.placeholder,
.snapscard-thumb.placeholder { @apply bg-[#f6f6f6]; }
.showscard-thumb-more {
  @apply absolute inset-0 bg-black/55 text-white text-[11px] font-bold tracking-[0.04em] flex items-center justify-center;
}

/* 骨架屏 */
.showscard--skel .showscard-img,
.showscard--skel .showscard-thumb,
.showscard--skel .showsline,
.snapscard--skel .snapscard-img,
.snapscard--skel .snapscard-thumb,
.snapscard--skel .snapsline {
  @apply bg-[#efefef];
  animation: looksShim 1.6s ease infinite;
}

/* ====================== 分页 ====================== */
.showspager,
.snappager { @apply flex flex-wrap items-center justify-center gap-2 mt-[38px]; }
.pg {
  @apply min-w-[40px] h-[40px] px-3 border-[1.5px] border-black bg-white text-black text-[11px] uppercase tracking-[0.12em] font-bold cursor-pointer rounded-none transition-colors duration-200;
}
.pg.is-current { @apply bg-black text-white cursor-default; }
.pg:disabled { @apply opacity-30 cursor-default; }
.pg-ellipsis { @apply px-1 text-[#999] select-none text-[11px]; }
.pg-wrap { @apply inline-flex items-center; }

.showsempty,
.snapsempty {
  @apply col-span-full p-[80px_20px] text-center text-xs tracking-[0.22em] uppercase text-[#999] border border-dashed border-[#ccc];
}

@keyframes looksProg { 0% { left: -38%; } 100% { left: 100%; } }
@keyframes looksShim { 0%, 100% { opacity: .85; } 50% { opacity: .55; } }

/* ====================== 卡片收藏按钮（图片收藏入口） ====================== */
/* 白底细边、已收藏时仅实心黑心，尽量不使用黑底白字组件 */
.showscard-wrap { @apply relative; }
.fav-toggle {
  @apply absolute right-2 top-2 z-20 grid h-9 w-9 place-items-center rounded-full border border-black/15 bg-white/85 text-black backdrop-blur-sm transition-transform duration-200 hover:scale-110 active:scale-95;
}
.fav-toggle svg { @apply h-[18px] w-[18px]; fill: none; stroke: currentColor; stroke-width: 1.6; }
.fav-toggle.is-on svg { fill: #000; stroke: #000; }