:root{
  --ac-bg: var(--card-bg, var(--surface, var(--bg, #ffffff)));
  --ac-border: var(--border, rgba(15,23,42,0.12));
  --ac-fg: var(--text, #111827);
  --ac-sub: rgba(15,23,42,0.65);
  --ac-icon-bg: rgba(15,23,42,0.06);
  --ac-media-bg: rgba(15,23,42,0.06); /* 占位底色：与 linkcard/social 一致思路 */
  --ac-shadow: var(--card-shadow, none);
  --ac-shadow-hover: var(--card-shadow-hover, none);
  --ac-illu-shadow: var(--card-shadow, none);
  --ac-caption-bg: rgba(255,255,255,0.92);
  --ac-caption-fg: #111827;
  --ac-caption-link: #065f46; /* 深绿色 */

  /* 无 ratio 时的固定高度兜底（可在页面/容器覆盖） */
  --illust-size-small: 220px;
  --illust-size-medium: 260px;
  --illust-size-large: 300px;
  --imagecard-height: 220px;
}

html[data-theme="dark"]{
  --ac-bg: var(--card-bg, var(--surface, rgba(13,19,33,0.94)));
  --ac-border: rgba(148,163,184,0.2);
  --ac-fg: var(--text, #e5e7eb);
  --ac-sub: rgba(226,232,240,0.72);
  --ac-icon-bg: rgba(148,163,184,0.14);
  --ac-media-bg: rgba(148,163,184,0.14);
  --ac-shadow: var(--card-shadow, none);
  --ac-shadow-hover: var(--card-shadow-hover, none);
  --ac-illu-shadow: var(--card-shadow, none);
  --ac-caption-bg: rgba(15,23,42,0.84);
  --ac-caption-fg: #f9fafb;
  --ac-caption-link: #d4af37; /* 金色 */
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --ac-bg: var(--card-bg, var(--surface, rgba(13,19,33,0.94)));
    --ac-border: rgba(148,163,184,0.2);
    --ac-fg: #e5e7eb;
    --ac-sub: rgba(226,232,240,0.72);
    --ac-icon-bg: rgba(148,163,184,0.14);
    --ac-shadow: var(--card-shadow, none);
    --ac-shadow-hover: var(--card-shadow-hover, none);
    --ac-illu-shadow: var(--card-shadow, none);
    --ac-caption-bg: rgba(15,23,42,0.84);
    --ac-caption-fg: #f9fafb;
    --ac-caption-link: #d4af37; /* 金色 */
  }
}

/* Base card */
.ac-card{border:1px solid var(--ac-border);border-radius:14px;background:var(--ac-bg);color:var(--ac-fg);display:flex;gap:12px;align-items:center;padding:14px;transition:transform .18s ease,border-color .18s ease;box-shadow:var(--ac-shadow)}
.ac-card.is-link:hover{transform:translateY(-2px);border-color:var(--ac-border);box-shadow:var(--ac-shadow-hover)}
.ac-title{font-weight:700;margin:0 0 4px 0;color:inherit}
.ac-desc{line-height:1.6;margin:0;color:var(--ac-sub)}
.ac-icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:var(--ac-icon-bg)}
.ac-icon-img{max-width:28px;max-height:28px;display:block}

/* Icon card sizes */
.ac-card.icon.size-small{padding:10px;border-radius:12px}
.ac-card.icon.size-small .ac-icon{width:22px;height:22px;border-radius:6px}
.ac-card.icon.size-small .ac-icon-img{max-width:22px;max-height:22px}
.ac-card.icon.size-small .ac-title{font-size:.95rem}
.ac-card.icon.size-small .ac-desc{font-size:.86rem}

.ac-card.icon.size-medium{padding:14px}
.ac-card.icon.size-medium .ac-title{font-size:1.05rem}

/* Illustration cards */
.ac-card.illust{align-items:stretch; display:flex; gap:12px}
.ac-card.illust .ac-illu{display:block}
.ac-card.illust .ac-illu img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:var(--ac-illu-shadow)}
.ac-card.illust .icl-fig{position:relative;margin:0;width:100%;aspect-ratio:var(--illust-ratio, auto);border-radius:12px;overflow:hidden;background-color:var(--ac-media-bg)}
.ac-card.illust.has-ratio .icl-fig::before{
  content:"";
  display:block;
  padding-top: var(--illust-percent, 0%);
  position: relative;
  z-index: 0;
}
.ac-card.illust.has-ratio .icl-fig{ aspect-ratio: var(--illust-ratio) !important; }
.ac-card.illust .icl-img{display:block;width:100%;height:auto;object-fit:var(--illust-fit, cover)}
.ac-card.illust.has-ratio .icl-img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--illust-fit, cover);z-index:1}
.ac-card.illust .icl-blur{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(18px);transform:scale(1.08);opacity:0;transition:opacity .2s ease}
.ac-card.illust.has-blur .icl-blur{opacity:.85}
.ac-card.illust .ac-body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px}

/* small: 图在上，标题一行，说明最多两行 */
.ac-card.illust.variant-small{flex-direction:column;align-items:flex-start}
.ac-card.illust.variant-small .ac-illu{width:100%;margin-bottom:10px}
.ac-card.illust.variant-small:not(.has-ratio) .icl-fig{ min-height: var(--illust-size-small); }
.ac-card.illust.variant-small .ac-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-card.illust.variant-small .ac-desc{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}

/* medium: 标题→说明(3行)→图 */
.ac-card.illust.variant-medium{flex-direction:column;align-items:flex-start}
.ac-card.illust.variant-medium .ac-body{order:1}
.ac-card.illust.variant-medium .ac-illu{order:2;width:100%;margin-top:12px}
.ac-card.illust.variant-medium:not(.has-ratio) .icl-fig{ min-height: var(--illust-size-medium); }
.ac-card.illust.variant-medium .ac-desc{-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}

/* large: 桌面 左图右文；移动端改为上下 */
.ac-card.illust.variant-large{flex-direction:row;align-items:stretch}
.ac-card.illust.variant-large .ac-illu{flex:0 0 46%;margin-right:12px}
.ac-card.illust.variant-large .ac-body{flex:1}
.ac-card.illust.variant-large:not(.has-ratio) .icl-fig{ min-height: var(--illust-size-large); }

/* Image cards */
.ac-card.image{
  padding:0;
  overflow:hidden;
  border-radius:18px;
  position:relative;
  display:block;
  width:100%;
}
.ac-card.image .ac-fig{
  position:relative;
  margin:0;
  aspect-ratio: var(--imagecard-ratio, auto);
  width:100%;
  background-color: var(--ac-media-bg);
}
.ac-card.image:not(.has-ratio) .ac-fig{ min-height: var(--imagecard-height); }
.ac-card.image.has-ratio .ac-fig::before{
  content:"";
  display:block;
  padding-top: var(--imagecard-percent, 0%);
  position: relative;
  z-index: 0;
}
.ac-card.image.has-ratio .ac-fig{ aspect-ratio: var(--imagecard-ratio) !important; }
.ac-card.image .ac-fig .ac-image{
  display:block;
  width:100%;
  height:auto; /* 无比例时按原图高度 */
  object-fit:cover;
}
.ac-card.image.has-ratio .ac-fig .ac-image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1 }
.ac-card.image .ac-fig .ac-image.has-shadow{filter:drop-shadow(0 14px 26px rgba(15,23,42,0.18))}
html[data-theme="dark"] .ac-card.image .ac-fig .ac-image.has-shadow{filter:drop-shadow(0 18px 34px rgba(8,14,26,0.55))}
.ac-card.image .ac-caption{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px 16px;
  border-radius:14px;
  background:color-mix(in srgb, var(--ac-caption-bg) 84%, transparent);
  color:var(--ac-caption-fg);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 24px rgba(15,23,42,0.16);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .24s ease,transform .24s ease;
  pointer-events:none;
}
.ac-card.image .ac-caption a{ color: var(--ac-caption-link); text-decoration: underline; text-underline-offset: 2px; }
.ac-card.image .ac-caption a:hover{ text-decoration-thickness: 2px; }
.ac-card.image .ac-caption .ac-title{font-weight:700;font-size:1.02rem;margin:0;color:inherit}
.ac-card.image .ac-caption .ac-desc{font-size:.92rem;line-height:1.55;color:inherit;opacity:.9}
.ac-card.image .ac-caption .ac-desc p{margin:0}
/* 取消默认比例：一切由短码 ratio 控制；未设置 ratio 时随图片原始比例展示 */
.ac-card.image.variant-large .ac-caption{left:24px;right:24px;bottom:24px;padding:18px 20px;border-radius:18px;font-size:1.05rem}
.ac-card.image.variant-large .ac-caption .ac-desc{font-size:.98rem}
.ac-card.image:hover .ac-caption,
.ac-card.image:focus-within .ac-caption{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.ac-card.image.is-link:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(80,135,255,0.35)}
.ac-card.image.variant-medium .ac-caption{font-size:.94rem}
@media (max-width: 640px){
  .ac-card.image .ac-caption{left:12px;right:12px;bottom:12px;padding:12px 14px}
  .ac-card.image.variant-large .ac-caption{left:16px;right:16px;bottom:16px;padding:14px 16px}
}

/* Grid helpers */
.ac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}

/* Image card grid helpers (desktop & tablet): control per-row columns */
.ac-grid.image-small{ grid-template-columns: repeat(3, 1fr); }
.ac-grid.image-medium{ grid-template-columns: repeat(2, 1fr); }
.ac-grid.image-large{ grid-template-columns: 1fr; }

/* Illustration card grid helpers */
.ac-grid.illust-small{ grid-template-columns: repeat(3, 1fr); }
.ac-grid.illust-medium{ grid-template-columns: repeat(2, 1fr); }
.ac-grid.illust-large{ grid-template-columns: 1fr; }

@media (max-width: 640px){
  .ac-grid{grid-template-columns:1fr}
  .ac-card.illust.variant-large{flex-direction:column}
  .ac-card.illust .ac-illu{flex-basis:auto;margin-bottom:10px}
}

/* Links & CTA inside illust body */
.ac-card.illust .ac-desc a{ color: var(--ac-caption-link); text-decoration: underline; text-underline-offset: 2px; }
.ac-card.illust .ac-desc a:hover{ text-decoration-thickness: 2px; }
.ac-card.illust .icl-cta{ display:inline-block; margin-top:8px; color: var(--ac-caption-link); text-decoration: underline; text-underline-offset: 2px; }
.ac-card.illust .icl-cta:hover{ text-decoration-thickness: 2px; }

/* Social row (horizontal icons) */
.social-icons{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;margin:8px 0 2px}
.social-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:12px;text-decoration:none;background:var(--social-icon-btn-bg, var(--social-icon-color, rgba(148,163,184,0.14)));border:none;box-shadow:none;position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.social-icon-btn img{display:block;width:74%;height:74%;object-fit:contain;filter:var(--social-icon-filter,none)!important;mix-blend-mode:normal!important;opacity:1!important}
.social-icon-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(15,23,42,0.16)}
.social-icon-btn--mask{background:var(--social-icon-btn-bg, var(--social-icon-color, rgba(148,163,184,0.14)))}
.social-icon-btn--mask::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:32px;height:32px;background:#fff;-webkit-mask-image:var(--social-icon-mask);mask-image:var(--social-icon-mask);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.social-icon-btn--mask img{display:none}
.social-icon-btn:hover{transform:translateY(-2px)}

/* Icon card with right media */
.ac-card.icon.has-media{align-items:stretch;min-height:120px}
.ac-card.icon.has-media .ac-icon{align-self:flex-start}
.ac-card.icon.has-media .ac-body{flex:1 1 50%;display:flex;flex-direction:column;justify-content:center}
.ac-card.icon.has-media .ac-media-right{flex:1 1 50%;display:flex;align-items:stretch;justify-content:stretch}
.ac-card.icon.has-media .ac-media-right img{width:100%;height:100%;object-fit:cover;border-top-right-radius:14px;border-bottom-right-radius:14px}

/* Row icons: 方形倒圆角 + 原图（可选反白），与 sociallink 思路一致 */
.row-icon{
  --ri-size: 60px;
  --ri-radius: 12px;
  --ri-bg: rgba(148,163,184,0.14);
  --ri-scale: 0.74;
  --ri-filter: none;

  width: var(--ri-size);
  height: var(--ri-size);
  border-radius: var(--ri-radius);
  background: var(--ri-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.row-icon:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15,23,42,0.16); }
.row-icon > img{
  width: calc(var(--ri-size) * var(--ri-scale));
  height: calc(var(--ri-size) * var(--ri-scale));
  object-fit: contain;
  filter: var(--ri-filter);
  display: block;
}

@media (max-width: 640px){
  .ac-card.icon.has-media{min-height:100px}
  .ac-card.icon.has-media .ac-media-right{display:none}
}