/* =========================================================
   7yuewx - Modern Refresh Layer (v2)
   目标：清新、现代、偏摄影/写真站气质

   重点：
   - 顶部 Header：#2cc1f7 纯色 + 白色内容
   - 滚动后 / 抽屉打开：蓝调玻璃拟态（高斯模糊、低透明感、可读性强）
   - Drawer：与 Header 一体的玻璃面板 + 强化遮罩避免干扰
   - 列表卡片：更画廊化（比例/圆角/阴影/字体层级）
   - 按钮 / 分页：从“黑块”升级为品牌化轻盈系统
   - Gutenberg「图库」区块：仅针对 Gallery，优先级更高，避免影响其它图片
   ========================================================= */

:root{
  /* Brand */
  --brand: #2cc1f7;
  --brand-ink: #ffffff;

  /* Inks */
  --ink: #0b2233;         /* 深蓝黑：更贴近摄影/时尚氛围 */
  --ink-2: #143246;
  --muted-ink: #5d7282;

  /* Surface */
  --paper: #ffffff;
  --canvas: #f2fbff;      /* 轻蓝白：用于块状背景 */
  --line: rgba(11,34,51,.08);

  /* Radius */
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 18px;

  /* Shadow */
  --shadow-s: 0 10px 24px rgba(11,34,51,.08);
  --shadow-m: 0 18px 46px rgba(11,34,51,.14);

  /* Glass (蓝调磨砂玻璃：不“透明片”，更接近雾面亚克力) */
  --glass-bg: rgba(241,252,255,.92);
  --glass-bg-strong: rgba(241,252,255,.96);
  --glass-border: rgba(44,193,247,.20);
  --glass-blur: 22px;
  --glass-sat: 170%;

  /* Map to theme vars */
  --bg: #fff;
  --text: var(--ink);
  --muted: var(--muted-ink);
  --divider: var(--line);
  --dark: #081823;
}

/* ============== Base ============== */
body{
  background: var(--bg);
  color: var(--ink);
}

a:hover{
  color: var(--brand);
}

a:focus-visible,
button:focus-visible{
  outline: 2px solid rgba(44,193,247,.55);
  outline-offset: 3px;
}

/* ============== Header ============== */
.site-header{
  background: var(--brand);
  color: var(--brand-ink);
  border-bottom: 0;
  transition:
    background-color .22s ease,
    color .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    backdrop-filter .22s ease;
}

/* 强制让 header 上的线条/图标跟随 currentColor（修复“蓝底黑汉堡”） */
.site-header .hamburger{ color: currentColor; }
.site-header .hamburger > span{ background: currentColor !important; }
.site-header .primary-nav a,
.site-header .logo a{ color: currentColor; }

/* 顶部纯色时：焦点描边用白色更可见 */
.site-header .hamburger:focus-visible{
  outline: 2px solid rgba(255,255,255,.85);
  outline-offset: 4px;
}

/* 滚动后 / Drawer 打开：玻璃态（蓝调） */
.site-header.is-scrolled,
html.is-drawer-open .site-header{
  background: var(--glass-bg-strong);
  color: var(--ink);
  border-bottom: 1px solid rgba(11,34,51,.08);
  box-shadow: var(--shadow-s);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/* 没有 backdrop-filter 的环境：回退为更实的雾面底（依旧不透明、对比强） */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .site-header.is-scrolled,
  html.is-drawer-open .site-header{
    background: rgba(241,252,255,.985);
  }
}

/* 玻璃态下：焦点描边用品牌色 */
.site-header.is-scrolled .hamburger:focus-visible,
html.is-drawer-open .site-header .hamburger:focus-visible{
  outline: 2px solid rgba(44,193,247,.55);
}

/* Header-right：容纳 nav + 登录入口 */
.header-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 12px;
}

/* ============== Header login ============== */
.header-login{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 3px;
  padding: 6px 8px;
  border-radius: 12px;
  color: currentColor;
  text-decoration:none;
  line-height: 1;
  user-select:none;
}
.header-login svg{ width: 18px; height: 18px; display:block; }
.header-login__label{
  font-size: 10px;
  letter-spacing: .22em;
  opacity: .92;
}
@media (hover:hover){
  .header-login:hover{ background: rgba(255,255,255,.16); }
  .site-header.is-scrolled .header-login:hover,
  html.is-drawer-open .site-header .header-login:hover{
    background: rgba(11,34,51,.06);
  }
}

/* ============== Drawer & overlay ============== */
/* 目的：让底下内容“退后”，避免透明叠字干扰 */
.drawer-overlay{
  background: rgba(8, 20, 28, .28);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}

/* 抽屉改为“左侧面板”更像现代站（不再整屏白板） */
.drawer{
  right: auto;
  width: min(420px, 86vw);
  background: var(--glass-bg-strong);
  color: var(--ink);
  border-right: 1px solid var(--glass-border);
  box-shadow: 0 24px 60px rgba(11,34,51,.20);
  backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(var(--glass-sat));
}
.drawer-inner{
  max-width: none;
  width: 100%;
  padding: 22px 20px;
}

.drawer .widget{ margin: 0 0 18px; }
.drawer .widget-title{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(11,34,51,.60);
  margin: 0 0 10px;
}
.drawer a{ color: var(--ink); }
.drawer a:hover{ color: var(--ink-2); text-decoration: underline; }

/* ============== Section backgrounds ============== */
/* 让“块与块”之间更有设计感：用 canvas 做轻蓝底，不靠全局改色 */
.recent,
.news{
  background: var(--canvas);
}

.recent{
  padding: 64px 0 76px;
  margin: 80px 0 96px;
}
@media (max-width: 767px){
  .recent{
    padding: 52px 0 62px;
    margin: 56px 0 72px;
  }
}

.news{
  padding: 54px 0 64px;
  margin-top: 72px;
  margin-bottom: 84px;
}
@media (max-width: 767px){
  .news{
    padding: 44px 0 54px;
    margin-top: 54px;
    margin-bottom: 64px;
  }
}

/* 标题下划线换成品牌色 */
.news__heading::after,
.recent__heading::after{
  background: var(--brand);
}

/* news 内层原本有额外 padding-bottom（60px），在块状背景下会显得过空；
   交给 section 自己的 padding 来控制节奏 */
.news__inner{ padding-bottom: 0; }

/* ============== Buttons ============== */
.c-button--primary{
  background: var(--brand);
  border: 1px solid var(--brand);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 18px 40px rgba(44,193,247,.24);
  letter-spacing: .22em;
  transform: translateZ(0);
}
.c-button--primary::before{ background: #fff; }

@media (min-width:768px){
  .c-button--primary:not(.is-disabled):hover{
    color: var(--brand);
    transform: translateY(-2px);
    box-shadow: 0 24px 52px rgba(44,193,247,.28);
  }
}

/* ============== Back-to-top ============== */
.back-to-top{
  background: var(--brand);
  box-shadow: 0 18px 40px rgba(44,193,247,.26);
}
.back-to-top img{ filter: brightness(0) invert(1); }

/* ============== Footer ============== */
.site-footer{
  background: var(--brand);
  color: #fff;
}
.site-footer .meta a{ color:#fff; }

/* ============== Accent remap ============== */
.hero__inner::after{ background: var(--brand); }

.c-tag--all{
  color: var(--brand);
  border-color: var(--brand);
}
.c-tag--all::before,
.c-tag--all::after,
.c-tag--all span::before{ background: var(--brand); }

/* 单篇里也把 primary 换成品牌色（原本 #26B5EA） */
.single-article{ --primary: var(--brand); }

/* ============== Gallery-like cards (NEW POST / archive cards) ============== */
/* Grid 间距更“呼吸” */
.c-posts--3column .c-posts__list{
  column-gap: 36px;
  row-gap: 36px;
}
@media (max-width: 767px){
  .c-posts--3column .c-posts__list{ row-gap: 22px; }
}

/* 让整张卡片成为“画廊卡片”，而不是只有图片圆角 */
.c-card{
  background: var(--paper);
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid rgba(11,34,51,.06);
  box-shadow: 0 14px 34px rgba(11,34,51,.09);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* 缩略图比例更偏摄影：不再是极宽横幅 */
.c-card__thumbnail{
  margin: 0;
  border-radius: 0;
  aspect-ratio: 4 / 3;
  background: #e9f5fb;
}
@media (max-width: 767px){
  .c-card__thumbnail{ aspect-ratio: 16 / 10; }
}

.c-card__thumbnail img{
  transition: transform .55s cubic-bezier(.20,.80,.20,1), opacity .25s ease;
  transform: scale(1);
}

.c-card__contents{
  padding: 16px 18px 18px;
}

.c-card__heading{
  font-size: 15px;
  font-weight: 650;
  line-height: 1.55;
  letter-spacing: .2px;
  margin: 0 0 8px;
  color: var(--ink);
}

.c-card__text{
  color: var(--muted-ink);
  font-size: 12.5px;
  line-height: 1.72;
  margin: 0 0 12px;
}

.c-card__date{ color: rgba(11,34,51,.55); }

@media (hover:hover){
  .c-card:hover{
    transform: translateY(-4px);
    border-color: rgba(44,193,247,.25);
    box-shadow: 0 22px 54px rgba(11,34,51,.16);
  }
  .c-card:hover .c-card__thumbnail img{
    transform: scale(1.045);
    opacity: .96;
  }
}

/* 去掉每项的分割线（改为卡片层级） */
.c-posts--3column .c-posts__item{ padding-top: 0; padding-bottom: 0; }
.c-posts--3column .c-posts__item::after{ display:none !important; }

/* ============== Pagination ============== */
.pager__square{
  background: var(--brand);
  border-color: var(--brand);
  border-radius: var(--r-m);
  box-shadow: 0 16px 34px rgba(44,193,247,.20);
}
.pager__square i::before{ border-color:#fff; }

@media (hover:hover){
  .pager__square:not(.is-disabled):hover{
    background: #fff;
  }
  .pager__square:not(.is-disabled):hover i::before{
    border-color: var(--brand);
  }
}

.pager__label{ color: rgba(11,34,51,.70); }

.pager__num{
  border-radius: 999px;
  border-color: rgba(11,34,51,.10);
  color: rgba(11,34,51,.52);
  background: rgba(255,255,255,.70);
}
.pager__num:hover{ border-color: rgba(44,193,247,.35); color: var(--ink); }
.pager__num.is-current{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 14px 30px rgba(44,193,247,.18);
}

/* ============== Gutenberg Gallery block (ONLY) ============== */
/* 仅作用于区块编辑器「图库」块：我们只优化“多图排版的间距”，不改变单张图风格，不加阴影/背景 */
.entry-content .wp-block-gallery,
.entry-content .wp-block-gallery .blocks-gallery-grid{
  gap: 14px !important;
}

/* 旧版结构某些主题会对 item 设 margin，这里统一成 gap 逻辑 */
.entry-content .wp-block-gallery .blocks-gallery-item,
.entry-content .wp-block-gallery figure.wp-block-image{
  margin: 0 !important;
}

/* ============== PICKUP arrows (brand) ============== */
.pickup__arrow{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(44,193,247,.22);
}
.pickup__arrow::after{
  border-right-color:#fff !important;
  border-top-color:#fff !important;
}
@media (hover:hover){
  .pickup__arrow:hover{
    transform: translateY(-50%) translateY(-1px);
    box-shadow: 0 22px 44px rgba(44,193,247,.26);
  }
}

/* 同步滑块切换速度（CSS 兜底，JS 也会设置） */
.pickup__list{
  transition-duration: 520ms !important;
}

/* ============== PICKUP bubbles (subtle) ============== */
.pickup{
  position: relative;
  overflow: hidden;
}
.pickup::before,
.pickup::after{
  content:"";
  position:absolute;
  inset:-80px -60px -80px -60px;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 18% 28%, rgba(44,193,247,.18) 0 22px, transparent 23px),
    radial-gradient(circle at 76% 22%, rgba(255,120,180,.14) 0 26px, transparent 27px),
    radial-gradient(circle at 86% 72%, rgba(120,240,210,.14) 0 30px, transparent 31px),
    radial-gradient(circle at 36% 78%, rgba(255,220,120,.14) 0 18px, transparent 19px),
    radial-gradient(circle at 52% 46%, rgba(44,193,247,.10) 0 34px, transparent 35px);
  opacity: .9;
  filter: blur(.2px);
  transform: translate3d(0,0,0);
}
.pickup::before{ animation: pickupBubblesA 14s linear infinite; }
.pickup::after{
  opacity: .55;
  background:
    radial-gradient(circle at 22% 60%, rgba(255,120,180,.12) 0 16px, transparent 17px),
    radial-gradient(circle at 64% 66%, rgba(44,193,247,.12) 0 26px, transparent 27px),
    radial-gradient(circle at 80% 40%, rgba(120,240,210,.12) 0 20px, transparent 21px),
    radial-gradient(circle at 42% 18%, rgba(255,220,120,.12) 0 24px, transparent 25px);
  animation: pickupBubblesB 18s linear infinite;
}
@keyframes pickupBubblesA{
  0%   { transform: translate3d(-2%, 8%, 0) scale(1); }
  50%  { transform: translate3d(2%, -6%, 0) scale(1.02); }
  100% { transform: translate3d(-2%, 8%, 0) scale(1); }
}
@keyframes pickupBubblesB{
  0%   { transform: translate3d(3%, -6%, 0) scale(1); }
  50%  { transform: translate3d(-2%, 10%, 0) scale(1.03); }
  100% { transform: translate3d(3%, -6%, 0) scale(1); }
}

/* 确保内容在泡泡之上 */
.pickup > *{ position: relative; z-index: 1; }

/* ============== Buttons: active/focus visibility fix ============== */
.c-button--primary{
  -webkit-tap-highlight-color: transparent;
}
.c-button--primary:active,
.c-button--primary:focus{
  color:#fff !important;
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}
.c-button--primary:active::before,
.c-button--primary:focus::before{
  /* 触摸设备点击时避免“停留在反相态导致看不清”的情况 */
  -webkit-transform: translate3d(-101%,0,0) !important;
  transform: translate3d(-101%,0,0) !important;
}

/* Header login: active 状态也保持可见 */
.header-login{
  -webkit-tap-highlight-color: transparent;
}
.site-header:not(.is-scrolled) .header-login:active{
  background: rgba(255,255,255,.22);
  color:#fff;
}
.site-header.is-scrolled .header-login:active,
html.is-drawer-open .site-header .header-login:active{
  background: rgba(11,34,51,.08);
  color: var(--ink);
}

/* ============== Search empty state ============== */
.c-posts__item--empty{
  grid-column: 1 / -1;
  padding: 0;
}
.search-empty{
  max-width: 760px;
  margin: 8px auto 0;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(11,34,51,.08);
  border-radius: var(--r-l);
  box-shadow: 0 18px 46px rgba(11,34,51,.10);
  padding: 20px 18px 18px;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.search-empty__title{
  font-size: 14px;
  letter-spacing: .14em;
  color: rgba(11,34,51,.72);
  margin: 0 0 10px;
}
.search-empty__text{
  margin: 0 0 14px;
  color: var(--ink);
  line-height: 1.7;
}
.search-empty form{ margin-top: 8px; }

/* ============== Pager layout refinement (labels under arrows) ============== */
.pager{
  align-items: start;
  grid-template-columns: minmax(78px, 96px) 1fr minmax(78px, 96px);
}
.pager__side{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 8px;
  min-width: 78px;
}
.pager__caption{
  font-size: 11px;
  letter-spacing: .22em;
  color: rgba(11,34,51,.64);
  line-height: 1;
}
.pager__square.is-disabled + .pager__caption{ opacity: .35; }
.pager__center{
  flex: 1;
  min-width: 0;
}
.pager__nums{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
  flex-wrap: nowrap;
}
@media (max-width: 767px){
  .pager{ grid-template-columns: minmax(66px, 78px) 1fr minmax(66px, 78px); }
  .pager__side{ min-width: 66px; }
  .pager__nums{ gap: 8px; }
}




/* ============== Single: Related 8 posts (tags -> categories) ============== */
.related8{
  background: var(--canvas);
  padding: 56px 0 72px;
  margin: 74px 0 0;
}
@media (max-width: 767px){
  .related8{
    padding: 46px 0 62px;
    margin-top: 56px;
  }
}

.related8__head{
  text-align: left;
  margin-bottom: 18px;
}
.related8__heading{
  font-size: 16px;
  letter-spacing: .22em;
  margin: 0 0 6px;
  color: var(--ink);
}
.related8__sub{
  margin: 0;
  font-size: 12px;
  color: rgba(11,34,51,.60);
  letter-spacing: .06em;
}

.related8__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1023px){
  .related8__grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px){
  .related8__grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* 与 c-card 不同：Related 用“图片+玻璃标题贴片” */
.r-card{
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: #e9f5fb;
  border: 1px solid rgba(11,34,51,.06);
  box-shadow: 0 14px 34px rgba(11,34,51,.10);
  color: inherit;
  text-decoration: none;
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.r-card__thumb{
  aspect-ratio: 3 / 4; /* 更偏写真/模特 */
}
.r-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s cubic-bezier(.20,.80,.20,1), opacity .25s ease;
}

.r-card__overlay{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 10px 10px 9px;
  border-radius: 14px;
  background: rgba(241,252,255,.92);
  border: 1px solid rgba(11,34,51,.08);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.r-card__kicker{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  letter-spacing: .18em;
  color: rgba(11,34,51,.64);
  line-height: 1;
}
.r-card__kicker .r-card__tag{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}
.r-card__title{
  margin: 7px 0 0;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.45;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (hover:hover){
  .r-card:hover{
    transform: translateY(-4px);
    border-color: rgba(44,193,247,.25);
    box-shadow: 0 22px 54px rgba(11,34,51,.16);
  }
  .r-card:hover .r-card__thumb img{
    transform: scale(1.05);
    opacity: .96;
  }
}

@media (prefers-reduced-motion: reduce){
  .site-header,
  .c-card,
  .c-button--primary{ transition: none; }

  .pickup::before,
  .pickup::after{ animation: none !important; }
  .pickup__list{ transition: none !important; }
}