/* ═══════════════════════════════════════════════════════════════
   Section 7 - Pet Journal / Blog (深蓝背景 + 小·大·小 三卡)
   自适应高度与宽度
   ═══════════════════════════════════════════════════════════════ */

.section-journal {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  background: #192a44;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 7vw, 100px) 20px;
}

.jwrap {
  max-width: var(--content-max, 1280px);
  width: 100%;
  margin: 0 auto;
}

/* ───────── 头部 ───────── */
.jhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.jtag {
  margin: 0;
  color: #bc994b;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 4px;
}

.jtitle {
  margin: 14px 0 0;
  color: #fff;
  font-family: 'Merriweather', serif;
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.26;
}

/* VIEW ALL —— 金色描边 + 轻微毛玻璃，圆角 8px */
.jviewall {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 146px;
  height: 48px;
  box-sizing: border-box;
  padding: 0 22px;
  border-radius: 8px;
  border: 1px solid #bc994b;
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #d9b878;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  letter-spacing: 2px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.jviewall:hover {
  background: #bc994b;
  color: #fff;
  transform: translateY(-2px);
}
.jviewall__arrow { font-size: 15px; line-height: 1; }

/* ───────── 轮播容器 ───────── */
.jcarousel {
  margin-top: clamp(32px, 4vw, 56px);
  overflow: hidden;
}
.jtrack {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .jtrack { transition: none; }
}

/* 每个 slide 占满宽度，内部是「小·大·小」三卡 */
.jslide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 1.8vw, 28px);
}

/* 三卡网格（保留 class 兼容；轮播下由 .jslide 承担布局） */
.jgrid {
  margin-top: clamp(32px, 4vw, 56px);
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 1.8vw, 28px);
}

.jcard {
  flex: 1 1 0;
  min-width: 0;
  background: #f7f1e8;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
}
.jcard--featured { flex: 2.07 1 0; }

.jcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.3);
}

/* 封面图 */
.jcard__media {
  position: relative;
  display: block;
  aspect-ratio: 1.5 / 1;
  overflow: hidden;
}
.jcard--featured .jcard__media { aspect-ratio: 2.1 / 1; }

.jcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.jcard:hover .jcard__media img { transform: scale(1.05); }

.jcard__badge {
  position: absolute;
  left: 0;
  bottom: 14px;
  background: #c5972f;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1;
  padding: 7px 14px;
}

/* 卡片内容 */
.jcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(18px, 1.6vw, 24px) clamp(18px, 1.6vw, 26px) clamp(20px, 1.8vw, 28px);
}

.jcard__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: rgba(25, 42, 68, 0.6);
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  line-height: 1;
}
.jcard__sep { opacity: 0.6; }

.jcard__title {
  margin: 14px 0 0;
  font-family: 'Merriweather', serif;
  font-weight: 700;
  line-height: 1.32;
}
.jcard__title a { color: #192a44; text-decoration: none; }
.jcard__title a:hover { color: #bc994b; }
.jcard--featured .jcard__title { font-size: clamp(20px, 1.7vw, 24px); }
.jcard:not(.jcard--featured) .jcard__title { font-size: clamp(18px, 1.4vw, 21px); }

.jcard__excerpt {
  margin: 14px 0 0;
  color: rgba(25, 42, 68, 0.62);
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

.jcard__more {
  margin-top: auto;
  padding-top: 18px;
  color: #bc994b;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
}
.jcard__more span { margin-left: 4px; }
.jcard__more:hover { color: #a07f2f; }

/* ───────── 分页圆点（可点击切 slide） ───────── */
.jdots {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: clamp(20px, 2.4vw, 32px);
}
.jdot {
  width: 18px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.jdot:hover { background: rgba(255, 255, 255, 0.45); }
.jdot:focus-visible {
  outline: 2px solid #bc994b;
  outline-offset: 3px;
}
.jdot.is-active {
  width: 34px;
  background: #bc994b;
}

/* ═══════════════════════════════════════════════════════════════
   入场动效
   ═══════════════════════════════════════════════════════════════ */
.js .section-journal [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
}
.section-journal [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.section-journal .jhead { transition-delay: 0.05s; }
.section-journal .jslide .jcard:nth-child(1),
.section-journal .jgrid .jcard:nth-child(1) { transition-delay: 0.15s; }
.section-journal .jslide .jcard:nth-child(2),
.section-journal .jgrid .jcard:nth-child(2) { transition-delay: 0.25s; }
.section-journal .jslide .jcard:nth-child(3),
.section-journal .jgrid .jcard:nth-child(3) { transition-delay: 0.35s; }
.section-journal .jcard:hover { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .section-journal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   响应式
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .jgrid,
  .jslide { flex-wrap: wrap; }
  .jcard { flex: 1 1 calc(50% - 14px); }
  .jcard--featured {
    flex-basis: 100%;
    order: -1;
  }
  .jcard--featured .jcard__media { aspect-ratio: 2.4 / 1; }
}

@media (max-width: 680px) {
  .jcard,
  .jcard--featured {
    flex-basis: 100%;
    order: 0;
  }
  .jcard__media,
  .jcard--featured .jcard__media { aspect-ratio: 1.6 / 1; }

  .jhead { gap: 16px; }
  .jviewall { align-self: flex-start; }
  .jdots { justify-content: center; }
}