/* ==========================================================================
   Apple 官网原型 — 首页
   布局：6 列网格 + 12px 间隙，磁贴按 span 组合出「整幅 / 半幅 / 三分之一」
   设备图全部用 CSS 绘制，不依赖任何外部图片资源
   ========================================================================== */

/* --------------------------------------------------------------------------
   网格容器
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gutter);
  padding: var(--gutter);
}

.tile {
  position: relative;
  grid-column: span 3;
  min-height: 580px;
  padding: 52px 40px 0;
  border-radius: var(--r-tile);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--c-gray);
  color: var(--c-ink);
}

.tile--full {
  grid-column: span 6;
  min-height: clamp(560px, 66vw, 740px);
}

.tile--wide {
  grid-column: span 4;
}

.tile--narrow {
  grid-column: span 2;
  min-height: 500px;
}

.tile--third {
  grid-column: span 2;
  min-height: 500px;
}

.tile--dark {
  background: var(--c-black);
  color: var(--c-white);
}

.tile--light {
  background: var(--c-gray);
  color: var(--c-ink);
}

.tile__copy {
  position: relative;
  z-index: 3;
  max-width: 660px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.tile__copy .actions {
  margin-top: 16px;
}

.tile__visual {
  flex: 1;
  width: 100%;
  min-height: 0;
  margin-top: 38px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   设备：iPhone
   -------------------------------------------------------------------------- */

.iphone {
  position: relative;
  width: clamp(210px, 27vw, 330px);
  aspect-ratio: 330 / 680;
  /* 高度由外层容器决定，宽度按比例推导，避免在整幅磁贴里溢出 */
  height: auto;
  /* 供屏幕用 cqw 计算等宽边框：容器查询单位取的是本元素自身宽度，
     用百分比内边距会误按父容器宽度解析，边框会随磁贴宽度变粗 */
  container-type: inline-size;
  border-radius: 13.6% / 6.6%;
  background: linear-gradient(
    148deg,
    #c2c2c9 0%,
    #7c7c85 22%,
    #45454b 55%,
    #232327 100%
  );
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 60px 90px -34px rgba(0, 0, 0, 0.75);
}

.iphone__screen {
  position: absolute;
  inset: 6px;
  border-radius: 12.1% / 5.9%;
  overflow: hidden;
  background: #000;
}

@supports (container-type: inline-size) {
  .iphone__screen {
    inset: 1.9cqw;
  }
}

.island {
  position: absolute;
  top: 2.6%;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 3.7%;
  border-radius: 999px;
  background: #07070a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07) inset;
}

/* 锁屏时间：让屏幕不显得空 */
.iphone__clock {
  position: absolute;
  top: 12%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

.iphone__hint {
  position: absolute;
  bottom: 5.5%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(11px, 1.2vw, 14px);
  color: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   设备：MacBook
   -------------------------------------------------------------------------- */

.macbook__lid {
  padding: 1.1%;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, #43434a 0%, #232327 60%, #17171a 100%);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.14) inset;
}

.macbook__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 7px 7px 0 0;
  overflow: hidden;
  background: #000;
}

.macbook__base {
  position: relative;
  height: 12px;
  border-radius: 0 0 11px 11px;
  background: linear-gradient(180deg, #dcdce1 0%, #b2b2b9 55%, #8e8e95 100%);
}

.macbook__base::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 13%;
  height: 5px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #8a8a91 0%, #c4c4cb 100%);
}

/* --------------------------------------------------------------------------
   设备：Apple Watch
   -------------------------------------------------------------------------- */

.watch {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.watch__band {
  width: 33%;
  height: clamp(44px, 6vw, 72px);
  background: linear-gradient(180deg, #ececf0 0%, #cfcfd7 100%);
}

.watch__band--top {
  border-radius: 20px 20px 4px 4px;
}

.watch__band--bottom {
  border-radius: 4px 4px 20px 20px;
  background: linear-gradient(180deg, #cfcfd7 0%, #e6e6ea 100%);
}

.watch__case {
  position: relative;
  width: clamp(122px, 14vw, 168px);
  aspect-ratio: 1 / 1.19;
  padding: 4.5%;
  border-radius: 26% / 22%;
  background: linear-gradient(
    150deg,
    #f0f0f4 0%,
    #b6b6bf 40%,
    #7b7b84 75%,
    #5e5e67 100%
  );
  box-shadow: 0 26px 44px -20px rgba(0, 0, 0, 0.5);
}

.watch__screen {
  width: 100%;
  height: 100%;
  border-radius: 22% / 19%;
  overflow: hidden;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6%;
  padding: 12% 10%;
}

.watch__ring {
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    #fa2d48 0% 62%,
    #a8ff60 62% 80%,
    #5ac8fa 80% 92%,
    rgba(255, 255, 255, 0.14) 92% 100%
  );
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
}

.watch__bpm {
  font-size: clamp(12px, 1.3vw, 16px);
  font-weight: 600;
  color: #fa2d48;
}

/* --------------------------------------------------------------------------
   设备：AirPods
   -------------------------------------------------------------------------- */

.airpods {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 3vw, 44px);
}

.bud {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(38px, 4.6vw, 58px);
}

.bud--left {
  transform: rotate(-7deg) translateY(6px);
}

.bud--right {
  transform: rotate(7deg) translateY(6px);
}

.bud__head {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(150deg, #ffffff 0%, #e6e6ec 52%, #c2c2cb 100%);
  box-shadow: 0 16px 26px -14px rgba(0, 0, 0, 0.35);
}

.bud__stem {
  width: 36%;
  height: clamp(52px, 7.6vw, 92px);
  border-radius: 0 0 44% 44%;
  background: linear-gradient(180deg, #f4f4f7 0%, #d3d3da 100%);
}

/* --------------------------------------------------------------------------
   设备：iPad
   -------------------------------------------------------------------------- */

.ipad {
  width: clamp(250px, 34vw, 460px);
}

.ipad__body {
  padding: 1.5%;
  border-radius: 22px;
  background: linear-gradient(150deg, #55555e 0%, #2c2c32 50%, #1a1a1e 100%);
  box-shadow: 0 46px 76px -34px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.ipad__screen {
  position: relative;
  aspect-ratio: 1.43 / 1;
  border-radius: 15px;
  overflow: hidden;
  background: #000;
}

/* --------------------------------------------------------------------------
   设备：AirTag
   -------------------------------------------------------------------------- */

.airtag {
  width: clamp(128px, 15vw, 176px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 34% 26%,
    #ffffff 0%,
    #ececf0 38%,
    #c8c8d0 74%,
    #a6a6af 100%
  );
  box-shadow: 0 34px 54px -26px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.04) inset;
  position: relative;
}

.airtag::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 21%;
  transform: translateX(-50%);
  width: 34%;
  height: 3px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------------
   屏幕壁纸
   -------------------------------------------------------------------------- */

.wall--pro {
  background: radial-gradient(
      72% 46% at 50% 4%,
      rgba(255, 138, 58, 0.62) 0%,
      rgba(255, 138, 58, 0) 62%
    ),
    radial-gradient(
      88% 58% at 84% 100%,
      rgba(48, 116, 255, 0.5) 0%,
      rgba(48, 116, 255, 0) 60%
    ),
    linear-gradient(180deg, #3b2f28 0%, #1a1a1e 46%, #08080a 100%);
}

.wall--air {
  background: radial-gradient(
      80% 50% at 50% 0%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0) 60%
    ),
    linear-gradient(165deg, #f6f8fb 0%, #dbe3ee 46%, #aeb9c9 100%);
}

.wall--air .iphone__clock,
.wall--air .iphone__hint {
  color: rgba(20, 24, 32, 0.78);
  text-shadow: none;
}

.wall--ipad {
  background: radial-gradient(
      90% 60% at 50% 0%,
      rgba(255, 88, 148, 0.55) 0%,
      rgba(255, 88, 148, 0) 62%
    ),
    radial-gradient(
      90% 60% at 14% 100%,
      rgba(88, 200, 255, 0.5) 0%,
      rgba(88, 200, 255, 0) 60%
    ),
    linear-gradient(180deg, #2a2130 0%, #14141a 60%, #060608 100%);
}

.wall--mac {
  background: conic-gradient(
      from 210deg at 22% 78%,
      #ff6b3d 0%,
      #ff2d78 22%,
      #8a3dff 44%,
      #2d7cff 68%,
      #23d5c8 88%,
      #ff6b3d 100%
    ),
    #000;
}

.wall--mac::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 90% at 50% 42%,
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

/* iPad 屏幕上叠一个悬浮窗口，避免大面积纯色 */
.ipad__ui {
  position: absolute;
  left: 7%;
  bottom: 9%;
  width: 44%;
  padding: 4% 4.5%;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ipad__ui span {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
}

.ipad__ui span:nth-child(1) {
  width: 62%;
}

.ipad__ui span:nth-child(2) {
  width: 88%;
  background: rgba(255, 255, 255, 0.32);
}

.ipad__ui span:nth-child(3) {
  width: 44%;
  background: rgba(255, 255, 255, 0.32);
}

/* --------------------------------------------------------------------------
   服务磁贴：用官方品牌色做圆角方块图标
   -------------------------------------------------------------------------- */

.svc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-bottom: 52px;
}

.svc__icon {
  width: clamp(64px, 6.4vw, 84px);
  aspect-ratio: 1;
  border-radius: 24%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(26px, 2.6vw, 34px);
  color: #fff;
  box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.4);
}

.svc__icon--music {
  background: linear-gradient(140deg, #fa233b 0%, #fb5c74 100%);
}

.svc__icon--icloud {
  background: linear-gradient(140deg, #3693f8 0%, #7ec4ff 100%);
}

.svc__icon--pay {
  background: linear-gradient(140deg, #1d1d1f 0%, #4a4a4f 100%);
}

.svc__icon--arcade {
  background: linear-gradient(140deg, #ff9f0a 0%, #ff375f 100%);
}

.svc__icon--podcasts {
  background: linear-gradient(140deg, #a05cf7 0%, #6c3ce0 100%);
}

.svc__icon--tv {
  background: linear-gradient(140deg, #2c2c31 0%, #000000 100%);
}

.svc__icon--fitness {
  background: linear-gradient(140deg, #a8ff60 0%, #2fd35b 100%);
}

.svc__icon--books {
  background: linear-gradient(140deg, #ff8a3d 0%, #e8542e 100%);
}

.svc__icon svg {
  display: block;
}

.svc h2 {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0;
}

.svc p {
  margin: 0;
  max-width: 22ch;
  font-size: 15px;
  line-height: 1.4;
  color: var(--c-muted);
}

/* 磁贴里的 slogan 一行放不下时收窄 */
.tile .t-sub {
  max-width: 30ch;
}

.tile--full .t-sub {
  max-width: 40ch;
}

/* 整幅磁贴里手机改成「由高度决定宽度」，保证完整落在画面内
   332/680 ≈ 0.4853，显式写出宽度，不依赖设备是否支持 aspect-ratio 推导 */
.tile--full .iphone {
  width: calc(clamp(290px, 46vh, 480px) * 0.4853);
  height: clamp(290px, 46vh, 480px);
}

/* 需要居中的视觉（AirTag 这类圆形物件不贴底更好看） */
.tile__visual--center {
  align-items: center;
}

/* 半幅磁贴里的笔记本宽度 */
.macbook {
  width: clamp(280px, 38vw, 500px);
}

/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */

@media (max-width: 1068px) {
  .tile {
    padding: 44px 30px 0;
  }
}

@media (max-width: 833px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
  }

  .tile,
  .tile--full,
  .tile--wide,
  .tile--narrow,
  .tile--third {
    grid-column: span 1;
    min-height: 480px;
    padding: 40px 24px 0;
    border-radius: 20px;
  }

  .tile--full {
    min-height: 560px;
  }

  .tile__visual {
    margin-top: 28px;
  }

  .iphone {
    width: 190px;
  }

  .macbook {
    width: 280px;
  }

  .ipad {
    width: 240px;
  }

  .tile .t-sub,
  .tile--full .t-sub {
    max-width: 26ch;
  }
}

/* --------------------------------------------------------------------------
   大号设备（用于分类页首屏，让产品撑满一屏）
   -------------------------------------------------------------------------- */

.macbook--lg {
  width: clamp(320px, 52vw, 640px);
}

.ipad--lg {
  width: clamp(300px, 46vw, 620px);
}

.airpods--lg .bud {
  width: clamp(56px, 6.4vw, 88px);
}

.airpods--lg .bud__stem {
  height: clamp(80px, 11vw, 132px);
}

.watch--lg .watch__case {
  width: clamp(150px, 18vw, 220px);
}

.watch--lg .watch__band {
  height: clamp(58px, 8vw, 96px);
}

/* --------------------------------------------------------------------------
   设备：Apple TV
   -------------------------------------------------------------------------- */

.tv {
  width: clamp(280px, 46vw, 600px);
}

.tv__screen {
  padding: 0.9%;
  border-radius: 12px;
  background: linear-gradient(180deg, #33333a 0%, #131316 100%);
  box-shadow: 0 44px 74px -34px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.09) inset;
}

.tv__panel {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
}

.tv__stand {
  width: 20%;
  height: 9px;
  margin: 0 auto;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #b6b6be 0%, #8b8b93 100%);
}

.tv__base {
  width: 38%;
  height: 5px;
  margin: 0 auto;
  border-radius: 999px;
  background: linear-gradient(180deg, #cbcbd2 0%, #9b9ba3 100%);
}

/* --------------------------------------------------------------------------
   设备：HomePod（圆柱网面）
   -------------------------------------------------------------------------- */

.homepod {
  position: relative;
  width: clamp(84px, 10vw, 130px);
  aspect-ratio: 1 / 1.62;
  border-radius: 24% / 15%;
  overflow: hidden;
  background: linear-gradient(150deg, #43434a 0%, #26262b 48%, #141417 100%);
  box-shadow: 0 34px 54px -26px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.09) inset;
}

.homepod::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4.5%;
  transform: translateX(-50%);
  width: 42%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #5a5a63 0%, #2c2c31 100%);
}

.homepod::after {
  content: "";
  position: absolute;
  inset: 5% 9% 12%;
  border-radius: 20% / 12%;
  background: repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.07) 0 1px,
      transparent 1px 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 0 1px,
      transparent 1px 4px
    );
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* --------------------------------------------------------------------------
   设备：充电圆盘 / MagSafe
   -------------------------------------------------------------------------- */

.puck {
  position: relative;
  width: clamp(104px, 12vw, 152px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 28%,
    #ffffff 0%,
    #ececf0 44%,
    #d4d4dc 78%,
    #bcbcc5 100%
  );
  box-shadow: 0 28px 46px -24px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(0, 0, 0, 0.04) inset;
}

.puck::after {
  content: "";
  position: absolute;
  inset: 21%;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.07);
}

/* --------------------------------------------------------------------------
   追加壁纸
   -------------------------------------------------------------------------- */

.wall--tv {
  background: radial-gradient(
      70% 60% at 24% 30%,
      rgba(255, 88, 148, 0.5) 0%,
      rgba(255, 88, 148, 0) 62%
    ),
    radial-gradient(
      70% 60% at 78% 74%,
      rgba(64, 140, 255, 0.5) 0%,
      rgba(64, 140, 255, 0) 62%
    ),
    linear-gradient(160deg, #1b1b21 0%, #08080a 100%);
}

.wall--home {
  background: radial-gradient(
      60% 50% at 50% 42%,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0) 70%
    ),
    linear-gradient(170deg, #2c2c33 0%, #0f0f12 100%);
}

/* --------------------------------------------------------------------------
   服务磁贴网格（娱乐页用）
   -------------------------------------------------------------------------- */

.svc-grid {
  max-width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}

.svc-grid .tile {
  grid-column: auto;
  min-height: 330px;
  border-radius: var(--r-card);
  padding-bottom: 44px;
}

@media (max-width: 833px) {
  .svc-grid {
    grid-template-columns: 1fr;
  }

  .svc-grid .tile {
    min-height: 260px;
  }
}