/* 首页骨架（research-design.md 6.10 + research-competitors-ia.md 2.3）：主要区块各用一种版式，只放页面级布局，不重复组件。
   [横幅轮播] [快速查找条 压在横幅下沿] [近期展会 白底 3 卡] [五类服务 灰带 1 大 + 4 小]
   [对接四步 7+5 + 隐私一句] [平台事实条] [服务商入驻 6+6 灰带] [费用一句 + 订阅邮件 两栏] [行动带] */
@layer pages {
  /* 快速查找条压在横幅下沿 40px；轮播控件相应上移，横幅文字区底部留出空间 */
  .hero-carousel {
    --hero-controls-bottom: var(--space-20);
  }

  .hero-slide {
    padding-bottom: var(--space-32);
  }

  .home-find {
    position: relative;
    z-index: 2;
  }

  .home-events {
    padding-top: var(--space-16);
  }

  /* 近期展会：区块头右侧文字链 + 3 张展会卡 */
  .home-events__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--card-gap);
  }

  /* 五类服务：左 1 张大卡（占 2 列 2 行）+ 右 4 张小卡 2×2，共 5 格对应 5 项 */
  .home-services__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--card-gap);
  }

  .home-services__grid > .service-card--large {
    grid-column: span 2;
    grid-row: span 2;
  }

  /* 对接流程：左 7 栏步骤 + 隐私一句，右 5 栏配图 */
  .home-process__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-16);
    align-items: center;
  }

  .home-process__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .home-process__copy .section-head,
  .home-supplier__copy .section-head {
    margin-bottom: 0;
  }

  /* 平台事实条：白底区块里的一条 dl，四项等分 */
  .home-facts .facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6) var(--space-8);
  }

  .home-facts .facts__item dd {
    font-size: 1.0625rem;
    line-height: 1.5;
    font-weight: var(--weight-regular);
  }

  .home-facts .facts__item dt {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
  }

  /* 服务商入驻：左 6 栏配图，右 6 栏文案 + 要点 + 主按钮 */
  .home-supplier__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
    align-items: center;
  }

  .home-supplier__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }

  /* 费用一句 + 订阅邮件：两栏并列，各自一张平卡 */
  .home-aside__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--card-gap);
  }

  .home-aside__grid .card {
    gap: var(--space-4);
  }

  /* 收尾行动带所在区块 */
  .home-cta {
    padding-top: 0;
  }

  @media (max-width: 1023.98px) {
    .home-events {
      padding-top: var(--space-12);
    }

    .home-events__grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .home-services__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-services__grid > .service-card--large {
      grid-row: auto;
    }

    .home-process__grid,
    .home-supplier__grid,
    .home-aside__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-8);
    }

    .home-facts .facts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-supplier__grid .art {
      order: -1;
    }
  }

  @media (max-width: 639.98px) {
    .home-services__grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .home-services__grid > .service-card--large {
      grid-column: auto;
    }

    .home-facts .facts {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* ---- 以下自 components.css 移入（P8，只有本页用到） ---- */
  /* ------------------------------------------------------------------------
     16. 横幅轮播
     <section class="hero-carousel" aria-roledescription="carousel" aria-label="首页横幅">
       <div class="hero-carousel__track">
         <div class="hero-slide is-active" role="group" aria-roledescription="slide" aria-label="第 1 张，共 3 张">
           <picture class="hero-slide__media">…<img …></picture>
           <div class="container hero-slide__content"><h1 class="hero-slide__title">…</h1><p class="hero-slide__lead">…</p><a class="btn btn-on-image btn-lg">…</a></div>
         </div>…
       </div>
       <div class="container hero-carousel__controls">
         <button class="carousel-btn" aria-label="上一张">…</button>
         <div class="carousel-dots"><button class="carousel-dot is-active" aria-label="第 1 张" aria-current="true"></button>…</div>
         <button class="carousel-btn" aria-label="下一张">…</button>
         <button class="carousel-btn carousel-toggle" data-state="playing" aria-label="暂停轮播">…</button>
       </div>
     </section>
     ------------------------------------------------------------------------ */
  .hero-carousel {
    position: relative;
    height: clamp(420px, 56vh, 640px);
    overflow: hidden;
    background: var(--navy-950);
    color: var(--color-text-on-dark);
  }

  .hero-carousel__track {
    display: grid;
    height: 100%;
  }

  .hero-slide {
    position: relative;
    grid-area: 1 / 1;
    display: grid;
    align-content: center;
    padding-block: var(--space-32) var(--space-24);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--dur-slide) var(--ease-standard),
      visibility 0s linear var(--dur-slide);
  }

  .hero-slide.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition:
      opacity var(--dur-slide) var(--ease-standard),
      visibility 0s;
  }

  .hero-slide__media {
    position: absolute;
    inset: 0;
  }

  .hero-slide__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero-slide::before,
  .hero-slide::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }

  .hero-slide::before {
    inset: 0;
    background: var(--hero-shade-side);
  }

  .hero-slide::after {
    inset: auto 0 0 0;
    height: 96px;
    background: var(--hero-shade-bottom);
  }

  .hero-slide__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    opacity: 0;
    translate: 0 var(--motion-y-8);
    transition:
      opacity var(--dur-slow) var(--ease-out) 240ms,
      translate var(--dur-slow) var(--ease-out) 240ms;
  }

  .hero-slide.is-active .hero-slide__content {
    opacity: 1;
    translate: 0 0;
  }

  .hero-slide__title {
    max-width: 18em;
    font-size: var(--text-display);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    font-weight: var(--weight-heading);
    color: var(--color-text-on-dark);
    text-wrap: balance;
  }

  :lang(zh) .hero-slide__title {
    text-wrap: pretty;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .hero-slide__lead {
    max-width: 34em;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--white-a86);
  }

  .hero-carousel__controls {
    position: absolute;
    inset: auto 0 var(--hero-controls-bottom, var(--space-6)) 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    pointer-events: none;
  }

  .hero-carousel__controls > * {
    pointer-events: auto;
  }

  .carousel-btn {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--white-a22);
    border-radius: var(--radius-pill);
    background: var(--white-a10);
    color: var(--white-a90);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background-color var(--dur-fast) var(--ease-standard);
  }

  .carousel-btn:hover {
    background: var(--white-a18);
  }

  .carousel-btn:focus-visible {
    outline-color: var(--color-text-on-dark);
  }

  .carousel-btn .icon {
    width: 16px;
    height: 16px;
  }

  .carousel-toggle[data-state="playing"] .icon--play,
  .carousel-toggle[data-state="paused"] .icon--pause {
    display: none;
  }

  .carousel-dots {
    display: flex;
    align-items: center;
    padding: 0 var(--space-1);
  }

  .carousel-dot {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .carousel-dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--white-a32);
    transition: background-color var(--dur-fast) var(--ease-standard);
  }

  .carousel-dot:hover::before {
    background: var(--white-a90);
  }

  .carousel-dot.is-active,
  .carousel-dot[aria-current="true"] {
    width: 40px;
  }

  .carousel-dot.is-active::before,
  .carousel-dot[aria-current="true"]::before {
    width: 24px;
    background: var(--color-text-on-dark);
  }

  .carousel-dot:focus-visible {
    outline-color: var(--color-text-on-dark);
    border-radius: var(--radius-pill);
  }

  @media (max-width: 767.98px) {
    .hero-carousel {
      height: clamp(440px, 56vh, 640px);
    }

    .hero-slide {
      padding-block: var(--space-16) var(--space-24);
    }

    .hero-slide__content {
      gap: var(--space-4);
    }

    .hero-carousel__controls {
      justify-content: center;
    }
  }


  /* ------------------------------------------------------------------------
     29. 展会快速查找条：白卡压在横幅下沿，三个原生 select + 主按钮；移动端竖排
     <form class="quick-find" action="/exhibitions-zh.html" method="get" aria-label="展会快速查找">
       <div class="field"><label class="field__label" for="qf-country">国家</label><div class="select-wrap"><select id="qf-country" name="country">…</select></div></div>…
       <button class="btn btn-primary" type="submit">查找展会</button>
     </form>
     ------------------------------------------------------------------------ */
  .quick-find {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: var(--space-4);
    align-items: end;
    margin-top: calc(-1 * var(--space-10));
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-ring), var(--shadow-lg);
  }

  .quick-find .btn {
    min-height: 44px;
  }

  @media (max-width: 1023.98px) {
    .quick-find {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-top: calc(-1 * var(--space-6));
      padding: var(--space-4);
    }

    .quick-find .btn {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 479.98px) {
    .quick-find {
      grid-template-columns: minmax(0, 1fr);
    }
  }



  /* ---- 以下自 components.css 移入（P8） ---- */
  /* ------------------------------------------------------------------------
     18. 事实条：<dl class="facts"><div class="facts__item"><dt>精选届数</dt><dd>120</dd></div>…</dl>
     ------------------------------------------------------------------------ */
  .facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-10);
    margin: 0;
    padding: var(--space-5) 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
  }

  .facts__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
  }

  .facts__item dt {
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--color-text-secondary);
  }

  .facts__item dd {
    font-size: 1.25rem;
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
  }

}