/* ============================================
   人物介绍 profile.css（仅首页）
   内容：书法家廖祖杰先生简介（人像 + "人物介绍 PROFILE"标题 + 两段正文）
   来源：老站 G:\1\index.html「人物介绍」板块（.Profile，固定 1380×280，水墨横幅底板）
   写法：手机优先 ——
        · <768px：人像靠左浮动，标题与正文绕图排列（省纵向空间）
        · ≥768px：人像在左、文字在右，左右两栏
        · ≥1200px：还原老站整块"水墨横幅"底板（背景图 back1.jpg
          1380×280），底板内的照片/文字/字号全部换算成 cqw，
          随底板宽度等比缩放（与 services.css 同一套缩放思路）；
         底板宽度跟随版心（70%，≥1400px），与上方板块左右严格对齐 ——
         老站"超宽锁死 1380"在新版心体系里会让底板两侧比版心窄一截、
         空白对不齐，2026-10-20 按用户要求取消锁宽；
         内部 cqw 尺寸随底板等比放大，字号 min(cqw, 老站rem) 封顶，
         ≥2560px 巨幕变焦段随根字号同步放大，与老站比例始终一致
   尺寸基准：老站为固定 1380px 布局，字号/间距一律以老站 px 为准；
            封顶用 rem（老站 px ÷ 16），于是 <2560px 与改动前完全一致，
            ≥2560px 随根字号变焦、整体等比放大
   注意：容器的 cqw 陷阱 —— 写在"声明为容器的元素自身"的 padding/gap
        上的 cqw 无法按容器宽计算，会退回视口宽基准（大屏时虚高、挤爆
        底板），故本文件把底板的上/左内距与横向间距改由子元素 margin
        承担（.profile-photo 的 margin / .profile-intro 的 margin-left）
   断点全站统一：768 / 992 / 1200 / 1400
   最后更新：2026-10-20（新增横幅广告条；底板取消锁宽、改为跟随版心对齐；封顶 px→rem；修正容器自身 cqw 失效导致的巨幕溢出）
   ============================================ */


/* ============================================
   0. 横幅广告条（老站 #Home-bannerA：1380×140 通栏广告图，整条可点击）
   位置：挂进版心 .container → 宽度永远与上下板块左右对齐
   图片自适应屏宽就靠两条（现代通栏广告图的标准做法）：
     · width: 100%  —— 图随版心伸缩（版心 = 70% 百分比 + 112rem 封顶，
       ≥2560px 变焦段随根字号放大），广告条全程自动跟随，无需任何断点
     · height: auto —— 高度按原图 1380:140 比例自动计算，
       任何屏宽都不变形、不裁切、不留白边
   显隐：老站为纯桌面板块，<1200px 隐藏，≥1200px 显示
   ============================================ */
.home-banner {
  display: none;                           /* <1200px：手机/平板不显示 */
}

@media (min-width: 1200px) {
  .home-banner { display: block; }         /* ≥1200px：电脑端显示 */
  .home-banner img {
    display: block;                        /* 消除 img 底部基线间隙 */
    width: 100%;                           /* 随版心伸缩，与上下板块严格对齐 */
    height: auto;                          /* 高度按原图比例自动，不变形不裁切 */
  }
}


/* ============================================
   1. 板块外层
   ============================================ */
.profile-section {
  margin-top: 0.625rem;                    /* 与上一板块的纵向间距（老站 10px ÷ 16，变焦段同步放大） */
}


/* ============================================
   2. 移动端基础（<768px）：人像靠左浮动 + 标题/正文绕图排列
      一张竖照片单独占一行太浪费纵向空间，改为经典"左上图标"式：
      人像 float 靠左，"人物介绍 PROFILE"标题行与正文两段都绕在照片右侧，
      文字超出照片底部后自然通栏，整块高度大约只有原来的一半
   ============================================ */
.profile-panel {
  display: block;
  padding: 12px 0;
}

/* 清除浮动：让板块高度包住浮动的人像 */
.profile-panel::after {
  content: "";
  display: block;
  clear: both;
}

/* ----- 2.1 人像照片（左浮动，标题与正文绕它排） ----- */
.profile-photo {
  float: left;
  width: 108px;                            /* 手机端取小尺寸，给文字留足行宽 */
  margin: 2px 12px 6px 0;                  /* 顶部微对齐首行文字，右/下留间距 */
}

.profile-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* ----- 2.2 标题行：左"人物介绍"、右"PROFILE" -----
   flex 容器自身是 BFC，会整体待在浮动照片右侧（不与照片重叠） */
.profile-head {
  display: flex;
  align-items: baseline;                   /* 两段文字基线对齐 */
  justify-content: space-between;          /* 中文标题靠左、英文小标题靠右 */
  margin-bottom: 4px;
}

.profile-title {
  font-size: 24px;                         /* 手机端字号（老站 32px，小屏按比例收一档） */
  font-weight: normal;
  color: #3c3c3c;                          /* 老站 .titlea h2 颜色 */
}

.profile-title strong {
  font-weight: bold;                       /* 老站 .titleb-a：加粗 */
  color: var(--color-primary);             /* "介绍"二字红色（老站 #c00，取全站主色） */
}

.profile-en {
  font-size: 14px;
  color: #ccc;                             /* 老站 .profileb 英文小标题灰 #CCC */
  text-transform: uppercase;               /* 统一大写显示 */
}

/* ----- 2.3 正文两段 ----- */
.profile-text {
  font-size: var(--font-size-body);        /* 全站统一正文字号（见 base.css 令牌），
                                              与公司简介 .intro、文章正文完全一致，
                                              拖屏时同步缩放、超大屏变焦段同步放大 */
  line-height: 1.8;                        /* 手机端行距收一档，读起来更紧凑 */
  color: #333;
}

.profile-text p {
  text-indent: 2em;                        /* 首行缩进两字（老站 text-indent:2em） */
}


/* ============================================
   3. ≥768px：人像在左、文字在右（左右两栏）
      取消手机端的浮动绕图，改回 flex 两栏
   ============================================ */
@media (min-width: 768px) {
  .profile-panel {
    display: flex;
    flex-direction: row;                   /* 改为横向排列 */
    align-items: flex-start;               /* 顶部对齐 */
    gap: 24px;
    padding: 16px 0;
  }

  .profile-panel::after {
    display: none;                         /* flex 布局不需要清除浮动，
                                              否则伪元素会变成 flex 项、多吃一个 gap */
  }

  .profile-photo {
    float: none;                           /* 取消手机端浮动 */
    width: 146px;                          /* 老站人像原始宽度 146px */
    margin: 0;                             /* 取消绕图间距 */
    flex: 0 0 auto;
  }

  .profile-intro {
    flex: 1;                               /* 文字栏占满剩余宽度 */
    min-width: 0;
  }

  /* ≥768px 起正文沿用全站统一令牌 var(--font-size-body)，
     不再单独覆盖 —— 手机/平板/桌面同一套流式字号 */
}


/* ============================================
   4. ≥1200px：还原老站"水墨横幅"底板（等比缩放体系）
      底板 = 老站 .Profile：1380×280、背景 back1.jpg；
      内部全部尺寸 = 老站 px ÷ 1380 × 100（单位 cqw），
      随底板宽度线性缩放，在任意宽度下都与老站等比一致
   ============================================ */
@media (min-width: 1200px) {
  .profile-panel {
    container-type: inline-size;           /* 声明为宽度容器，供内部 cqw 使用 */
    position: relative;
    display: flex;
    align-items: flex-start;
    width: 100%;
    /* 底板不锁宽（2026-10-20 按用户要求取消 86.25rem=1380px 上限）：
       width:100% 直接占满版心，与上方板块左右严格对齐；
       内部 cqw 尺寸随底板变宽等比放大，
       字号仍由 min(cqw, 老站rem) 封顶（≥2560px 变焦段随根字号同步放大） */
    margin: 0.625rem auto 0;               /* 老站 10px ÷ 16；居中（老站 margin-right/left auto） */
    aspect-ratio: 1380 / 280;              /* 老站整块底板比例，高度随之锁定 */
    padding: 0;                            /* 必须显式清零，覆盖 ≥768px 的 padding:16px 0。
                                              原因：容器自身的 cqw 无法按"底板宽"计算，会退回
                                              "视口宽"基准（实测 3840px 下上内距被算成 167px，
                                              而底板高只有 280px）——于是大屏时内容被挤出底板。
                                              故上/左内距改由子元素 margin 承担（见 4.1 / 4.2） */
    gap: 0;                                /* 同理：容器自身的 gap 也不能用 cqw，
                                              横向间距改由 .profile-intro 的 margin-left 承担 */
    background: url(../images/profile/back1.jpg) no-repeat top center;
    background-size: 100% 100%;            /* 背景图随底板铺满：比例与底板一致（4.9286:1），不变形 */
    overflow: hidden;
  }

  /* 4.1 人像：老站 146×193，宽 146÷1380×100=10.5797cqw */
  .profile-photo {
    flex: 0 0 auto;
    width: 10.5797cqw;
    margin: 4.3478cqw 0 0 2.8986cqw;      /* 老站 .photo 的 margin-top 60px / margin-left 40px；
                                            原写在容器 padding 上（容器自身 cqw 无效），改为子元素 margin */
  }

  /* 4.2 文字栏：比人像顶部再低 6px（老站 .introduce-a top 66 vs 人像 top 60） */
  .profile-intro {
    flex: 1;
    min-width: 0;
    margin-top: 4.7826cqw;                 /* 老站 60px（人像顶）+ 6px（老站 .introduce-a top 66）= 66px */
    margin-left: 4.6377cqw;                /* 人像与文字栏的横向间距 64px
                                            （原为容器 gap；容器自身 cqw 无效，改为子元素 margin-left） */
    padding-right: 1.4493cqw;              /* 老站 .titleb padding-right:20px */
  }

  /* 标题行：老站 .titlea margin-top:10px */
  .profile-head {
    margin-top: 0.7246cqw;                 /* 10px */
  }

  /* 字号一律 min(cqw, 老站rem)：底板 <1380px 时等比缩小，达到老站尺寸后锁死不再放大；
     px 封顶→rem 封顶，根字号放大时 rem 同步变焦，大标题不会被硬卡死 */
  .profile-title {
    font-size: min(2.3188cqw, 2rem);       /* 老站 32px ÷ 16 = 2rem */
  }

  .profile-en {
    font-size: min(1.3043cqw, 1.125rem);   /* 老站 18px ÷ 16 = 1.125rem */
  }

  /* 正文：老站 .titleb（margin-top 10px、line-height 36px=2.25 倍）
     字号改用全站统一令牌 var(--font-size-body)：
     此前用 min(1.1594cqw, 1rem)，因 cqw 相对底板宽（=版心宽，比视口窄），
     增长慢于 body 的 vw 流式字号，导致 1200–2560px 区间人物介绍字比别处小；
     现统一后与公司简介、文章正文完全一致，超大屏变焦段也同步放大 */
  .profile-text {
    margin-top: 0.7246cqw;                 /* 10px */
    font-size: var(--font-size-body);      /* 全站统一正文字号（见 base.css 令牌） */
    line-height: 2.25;                     /* 老站 36px ÷ 16px */
  }
}