/* ==========================================================================
   CASEME / 壳壳研究所 —— 灵感案例页（gallery.html）
   1. 页面头部统计   2. 筛选条（吸顶）   3. 瀑布流卡片
   4. 加载更多 / 空状态   5. 底部行动区   6. 动效
   只有本页专属的类；颜色、按钮、卡片一律复用 style.css 的变量与组件。
   ========================================================================== */

/* ------------------------------------------------------------ 1. 页面头部 */
.ghead{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:var(--sp-6); align-items:end;
}
.ghead__lead{ margin-top:var(--sp-4); max-width:36ch; }

/* 右侧总数统计：宋体大字 + 一枚纸胶带 */
.gstats{
  justify-self:end; display:flex; flex-direction:column; align-items:flex-end;
  gap:10px; text-align:right; padding-bottom:6px;
}
.gstats__num{ display:flex; align-items:baseline; gap:8px; font-family:var(--font-display); }
.gstats__num .num{ font-family:var(--font-display); font-size:clamp(2.1rem,4.4vw,3rem); font-weight:700; line-height:1; }
.gstats__unit{ font-size:.95rem; color:var(--ink-2); }
@media (max-width:820px){
  .ghead{ grid-template-columns:1fr; gap:var(--sp-5); align-items:start; }
  .gstats{ justify-self:start; align-items:flex-start; text-align:left; }
}

/* --------------------------------------------------- 2. 筛选条（吸顶） */
.gfilter{
  position:sticky; top:var(--nav-h); z-index:40;
  padding-block:12px;
  background:rgba(251,247,241,.9);
  backdrop-filter:blur(12px) saturate(1.15);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.gfilter__bar{ display:flex; align-items:center; gap:var(--sp-3); }
.gfilter__tape{ flex:none; }
.gfilter__chips{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px;
  overflow-x:auto; padding:4px 2px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.gfilter__chips::-webkit-scrollbar{ display:none; }
.gfilter__chips .chip{ flex:none; }
.gfilter__search{ flex:0 0 auto; width:250px; }
.gfilter__search .input{ min-height:44px; }
@media (max-width:760px){
  .gfilter__bar{ flex-wrap:wrap; }
  .gfilter__tape{ display:none; }
  .gfilter__search{ order:-1; width:100%; }
  .gfilter__chips{ width:100%; }
}

/* -------------------------------------------------------- 3. 瀑布流卡片 */
.gwall{ padding-top:var(--sp-5); }
.gwall__head{ margin-bottom:var(--sp-5); }

.waterfall{ columns:1; column-gap:var(--sp-4); }
@media (min-width:560px){ .waterfall{ columns:2; } }
@media (min-width:900px){ .waterfall{ columns:3; } }
@media (min-width:1200px){ .waterfall{ columns:4; column-gap:var(--sp-5); } }

/* 卡片：白纸相框 + 10px 留白，高度由 --ar 决定，错落不齐 */
.gcard{
  display:block; margin:0 0 var(--sp-4); padding:10px;
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
}
@media (min-width:1200px){ .gcard{ margin-bottom:var(--sp-5); } }

/* 预览区：底色取图案自己的配色，像一张张彩色相纸 */
.gcard__photo{ aspect-ratio:var(--ar,.55); background:var(--plate,var(--paper-2)); }

.gcard__body{ display:flex; flex-direction:column; gap:7px; padding:12px 4px 4px; }
.gcard__title{ font-size:1.05rem; line-height:1.4; letter-spacing:0; }
.gcard__author{ margin-top:-3px; }
.gcard__quote{
  font-size:.82rem; line-height:1.7; color:var(--ink-2);
  padding-left:12px; border-left:2px solid var(--rose-soft);
}
.gcard__meta{ display:flex; flex-wrap:wrap; gap:6px; }
.gcard__foot{
  display:flex; align-items:center; gap:8px;
  margin-top:2px; padding-top:10px; border-top:1px solid var(--line-soft);
}
.gcard__foot .btn{ margin-left:auto; }

/* 点赞：小胶囊，收藏后变雾粉实心 */
.gcard__like{
  display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 11px;
  border-radius:var(--r-pill); border:1px solid var(--line); background:var(--white);
  color:var(--ink-3); font-size:.78rem;
  transition:color var(--dur) var(--ease), background-color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gcard__like svg{ width:15px; height:15px; }
.gcard__like:hover{ color:var(--rose-ink); border-color:var(--rose-soft); transform:translateY(-1px); }
.gcard__like[aria-pressed="true"]{ color:var(--rose-ink); background:var(--rose-soft); border-color:var(--rose-soft); }
.gcard__like[aria-pressed="true"] svg{ fill:currentColor; }

/* ---------------------------------------------- 4. 加载更多 / 空状态 */
.gmore{ display:flex; justify-content:center; margin-top:var(--sp-6); }
.gmore .spinner{ margin-right:2px; }
.gempty__acts{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:var(--sp-5); }

/* hidden 要压过 .between / .gmore 的 display */
.gwall__head[hidden],.gmore[hidden],.empty[hidden]{ display:none; }

/* ------------------------------------------------------ 5. 底部行动区 */
.gcta{ padding-block:calc(var(--section)*.8); }
.gcta__box{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); text-align:center;
  padding:clamp(32px,6vw,64px) var(--sp-5);
  background:var(--paper-2); border:1px dashed var(--line); border-radius:var(--r-xl);
}
.gcta__box .lead{ max-width:34ch; }
.gcta__box .btn{ margin-top:var(--sp-3); }

/* ------------------------------------------------------------ 6. 动效 */
/* 只用于「筛选切换」：新卡片淡入，轻微错落 */
@keyframes gcard-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.gcard--in{ animation:gcard-in .5s var(--ease) both; }
.gcard--in:nth-child(1){ animation-delay:.02s; }
.gcard--in:nth-child(2){ animation-delay:.05s; }
.gcard--in:nth-child(3){ animation-delay:.08s; }
.gcard--in:nth-child(4){ animation-delay:.11s; }
.gcard--in:nth-child(5){ animation-delay:.14s; }
.gcard--in:nth-child(6){ animation-delay:.17s; }
.gcard--in:nth-child(7){ animation-delay:.2s; }
.gcard--in:nth-child(8){ animation-delay:.23s; }
.gcard--in:nth-child(9){ animation-delay:.26s; }
.gcard--in:nth-child(10){ animation-delay:.29s; }
.gcard--in:nth-child(11){ animation-delay:.32s; }
.gcard--in:nth-child(12){ animation-delay:.35s; }
.gcard--in:nth-child(n+13){ animation-delay:.38s; }