/* ==========================================================================
   Dr. Quest — PbootCMS 动态栏目定位补充样式
   原站 index.html 中四个系列卡片用的是硬编码内联 left/top，
   改为 CMS 循环后无法逐项写死，故在此用 scode 对应的 class 补回定位。
   ========================================================================== */

/* ---- 桌面端：四个系列卡片位置（对应 scode 5/6/7/8） ---- */
.collections-desktop .collection-item.collection-pos-5 { left: 17%; top: 55%; }
.collections-desktop .collection-item.collection-pos-6 { left: 38%; top: 72%; width: 280px; }
.collections-desktop .collection-item.collection-pos-7 { left: 62%; top: 30%; }
.collections-desktop .collection-item.collection-pos-8 { left: 82%; top: 44%; }

/* 卡片入场动画延迟 */
.collections-desktop .collection-item.collection-pos-5 { transition-delay: 0.1s; }
.collections-desktop .collection-item.collection-pos-6 { transition-delay: 0.2s; }
.collections-desktop .collection-item.collection-pos-7 { transition-delay: 0.3s; }
.collections-desktop .collection-item.collection-pos-8 { transition-delay: 0.4s; }

@media (max-width: 1200px) {
  .collections-desktop .collection-item.collection-pos-7 { top: 22% !important; }
  .collections-desktop .collection-item.collection-pos-8 { top: 38% !important; }
}

/* ---- 移动端：四个系列标签位置 ---- */
.collections-mobile .collections-mobile-tag:nth-of-type(1) { left: 55%; top: 12%; }
.collections-mobile .collections-mobile-tag:nth-of-type(2) { left: 30%; top: 34%; }
.collections-mobile .collections-mobile-tag:nth-of-type(3) { left: 60%; top: 55%; }
.collections-mobile .collections-mobile-tag:nth-of-type(4) { left: 40%; top: 76%; }

/* ---- 技能卡片文案：content 字段里的换行渲染为多行 ---- */
.skills-section .skill-desc { white-space: pre-line; }

/* ===== Partnership 页面样式（原内联，迁移至此） ===== */
    /* === Desktop styles (shared) === */
    .partnership-main {
      position: relative;
      width: 100%;
      overflow: hidden;
    }
    .partnership-main > img {
      width: 100%;
      height: auto;
      display: block;
    }
    .partnership-hotspot {
      position: absolute;
      cursor: pointer;
      z-index: 2;
    }
    .hotspot-1 { left: 4%; top: 0; width: 30%; height: 100%; }
    .hotspot-2 { left: 35%; top: 0; width: 30%; height: 100%; }
    .hotspot-3 { left: 66%; top: 0; width: 30%; height: 100%; }
    .partnership-hotspot::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 60%);
      transform: translateX(-100%);
      transition: transform 0.6s ease;
      pointer-events: none;
      z-index: 1;
    }
    .partnership-hotspot:hover::after {
      transform: translateX(100%);
    }
    .partnership-text-block {
      position: absolute;
      left: 50%;
      top: 74%;
      transform: translateX(-50%);
      width: 90%;
      text-align: center;
      box-sizing: border-box;
      z-index: 3;
    }
    .partnership-text-block h3 {
      font-size: 18px;
      font-weight: 800;
      color: #3d3229;
      margin: 0;
      line-height: 1.05;
      position: relative;
      z-index: 2;
      transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1), color 0.3s ease;
      word-break: break-word;
      overflow-wrap: break-word;
    }
    .partnership-hotspot:hover .partnership-text-block h3 {
      transform: translateY(-10px);
      color: var(--brand-blue-dark);
    }
    .partnership-text-block p {
      display: block;
      font-size: 15px;
      color: #5a4a38;
      line-height: 1.01;
      margin: 0;
      word-break: break-word;
      overflow-wrap: break-word;
      padding-top: 5px;
    }

    /* Desktop popup */
    .partnership-popup-overlay {
      position: fixed;
      inset: 0;
      background: rgba(255,255,255,0.96);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 99999;
      padding: 24px;
      box-sizing: border-box;
    }
    .partnership-popup-overlay.show { display: flex; }
    .partnership-popup-content {
      max-width: 400px;
      width: 100%;
      text-align: center;
    }
    .partnership-popup-content h3 {
      font-size: 20px;
      font-weight: 800;
      color: var(--brand-blue-dark);
      margin: 0 0 16px 0;
      line-height: 1.3;
    }
    .partnership-popup-content p {
      font-size: 15px;
      line-height: 1.7;
      color: #3d3229;
      margin: 0;
    }
    .partnership-popup-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid rgba(0,0,0,0.1);
      font-size: 24px;
      font-weight: 700;
      color: #3d3229;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
      line-height: 1;
      padding: 0;
    }

    /* Form inputs */
    .form-input {
      width: 100%;
      border: 1.5px solid #e0d8cc;
      border-radius: 0.75rem;
      padding: 0.75rem 1rem;
      font-size: 0.95rem;
      font-family: inherit;
      color: #3d3229;
      background: #fff;
      transition: border-color 0.25s, box-shadow 0.25s, transform 0.15s;
      outline: none;
    }
    .form-input:focus {
      border-color: var(--brand-blue);
      box-shadow: 0 0 0 3px rgba(74, 143, 214, 0.15);
    }
    .form-input::placeholder { color: #b5a89a; }

    /* ===== Mobile-only image assets ===== */
    /* 注意：.pm-cards 是 .partnership-main 的直接子元素，
       必须用更高特异度覆盖 .partnership-main > img { display:block }，
       否则桌面端会误显示手机端成品图并把桌面内容挤下去 */
    .pm-sub-art,
    .partnership-main > img.pm-sub-art {
      display: none;
      width: 100%;
      height: auto;
    }

    /* ===== Mobile (<=768px): use design assets ===== */
    @media (max-width: 768px) {
      /* Hide desktop hero, show mobile hero image */
      body[data-page="partnership"] .desktop-hero {
        display: none !important;
      }
      body[data-page="partnership"] .pm-hero {
        display: block;
        width: 100%;
        height: auto;
      }

      /* Hide desktop cards hotspot structure, show mobile cards image */
      body[data-page="partnership"] .partnership-hotspot,
      body[data-page="partnership"] .partnership-text-block,
      body[data-page="partnership"] .desktop-cards-img {
        display: none !important;
      }
      body[data-page="partnership"] .pm-cards,
      body[data-page="partnership"] .partnership-main > img.pm-cards {
        display: block;
        width: 100%;
        height: auto;
      }

      /* Form: hide desktop form, show mobile form image */
      body[data-page="partnership"] .desktop-form {
        display: none !important;
      }
      body[data-page="partnership"] .pm-form-bg {
        display: block;
        width: 100%;
        height: auto;
      }
    }

    /* === Mobile (<=640px): fine-tune === */
    @media (max-width: 640px) {
      .partnership-text-block h3 {
        font-size: 12px !important;
        line-height: 1.2;
      }
      form[style*="padding"] {
        padding: 20px 16px !important;
      }
      form[style*="padding"] .grid {
        gap: 16px !important;
      }
      .form-input {
        font-size: 16px !important;
        padding: 10px 14px !important;
      }
      label {
        font-size: 13px !important;
      }
    }

    /* Desktop text popup */
    @media (max-width: 1200px) {
      .partnership-text-block h3 { font-size: 14px; }
      .partnership-text-block p {
        position: absolute;
        width: 280px;
        max-width: 90vw;
        padding: 10px 14px;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        white-space: normal;
        z-index: 10;
        left: 50%;
        bottom: calc(100% + 20px);
        transform: translateX(-50%) translateY(6px);
      }
      @media (hover: hover) {
        .partnership-hotspot:hover .partnership-text-block p {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
          background: rgba(255,255,255,0.96);
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
          padding: 12px 16px;
          border-radius: 10px;
          box-shadow: 0 6px 20px rgba(0,0,0,0.18);
          color: #3d3229;
          font-size: 12px;
          line-height: 1.6;
        }
      }
    }