/* ============================================================
   LoveCNU
   Horizontal Expand Cards
   ============================================================ */

:root {
  --bg: #f1efeb;

  --card: rgba(255, 255, 255, 0.68);
  --card-hover: rgba(255, 255, 255, 0.96);

  --accent: #a34848;
  --accent-soft: rgba(163, 72, 72, 0.075);

  --text: #292724;
  --text-secondary: #77736d;
  --text-muted: #a7a29a;

  --line: rgba(43, 40, 36, 0.11);

  --serif:
    "Noto Serif SC",
    "Songti SC",
    "STSong",
    serif;

  --sans:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* ============================================================
   Reset
   ============================================================ */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);

  font-family: var(--sans);

  -webkit-font-smoothing: antialiased;
}


/* ============================================================
   Background
   ============================================================ */

body::before {
  content: "";

  position: fixed;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(241, 239, 235, 0.74),
      rgba(241, 239, 235, 0.90)
    ),
    url("bg.png") center / cover no-repeat;

  z-index: -1;

  pointer-events: none;
}


/* ============================================================
   Page
   ============================================================ */

.page {
  width: min(
    calc(100% - 64px),
    1160px
  );

  min-height: 100vh;

  margin: 0 auto;
}


/* ============================================================
   Header
   ============================================================ */

.nav {
  height: 96px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom:
    1px solid
    rgba(43, 40, 36, 0.065);
}

.nav-brand {
  display: flex;
  align-items: center;

  text-decoration: none;
}

.nav-logo {
  display: block;

  width: 155px;
  height: auto;
}

.nav-tag {
  font-size: 10px;
  font-weight: 500;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--text-muted);
}


/* ============================================================
   Hero
   ============================================================ */

.hero {
  padding:
    82px 0
    72px;

  text-align: center;
}

.hero-title {
  margin: 0;

  font-family: var(--serif);

  font-size:
    clamp(
      50px,
      6.5vw,
      74px
    );

  font-weight: 600;

  line-height: 1.08;

  letter-spacing: -0.065em;
}

.hero-title span {
  color: var(--accent);
}

.hero-sub {
  margin:
    25px 0
    0;

  font-family: var(--serif);

  font-size: 15px;

  line-height: 1.9;

  letter-spacing: 0.04em;

  color: var(--text-secondary);
}

.mobile-break {
  display: none;
}


/* ============================================================
   Navigation
   ============================================================ */

.navigation {
  padding-bottom: 78px;
}

.section-label {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 15px;

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 0.2em;

  color: var(--text-muted);
}

.section-label i {
  flex: 1;

  height: 1px;

  background: var(--line);
}


/* ============================================================
   Expand Area
   ============================================================ */

.grid {
  display: flex;

  width: 100%;

  gap: 10px;

  /*
   * 关键：
   * 所有卡片默认等宽
   */
  align-items: stretch;
}


/* ============================================================
   Card
   ============================================================ */

.card {
  position: relative;

  /*
   * 默认宽度
   */
  flex: 1 1 0;

  height: 310px;

  min-width: 0;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding:
    25px
    23px;

  overflow: hidden;

  text-decoration: none;

  color: var(--text);

  background:
    var(--card);

  border:
    1px solid var(--line);

  border-radius: 20px;

  box-shadow:
    0 7px 25px
    rgba(32, 29, 25, 0.035);

  backdrop-filter:
    blur(12px);

  /*
   * 左右展开的核心动画
   */
  transition:
    flex-grow 0.6s
      cubic-bezier(0.22, 1, 0.36, 1),

    background 0.4s ease,

    border-color 0.4s ease,

    box-shadow 0.45s ease,

    transform 0.45s
      cubic-bezier(0.22, 1, 0.36, 1);
}


/* ============================================================
   Hover Expansion
   ============================================================ */

/*
 * 当前卡片变宽
 */
.card:hover {
  flex-grow: 2.15;

  background:
    var(--card-hover);

  border-color:
    rgba(163, 72, 72, 0.22);

  box-shadow:
    0 22px 48px
    rgba(32, 29, 25, 0.10);

  transform:
    translateY(-4px);
}


/*
 * 其他卡片稍微缩小
 */
.grid:has(.card:hover) .card:not(:hover) {
  flex-grow: 0.72;

  opacity: 0.72;

  transform:
    scale(0.985);
}


/* ============================================================
   Card Head
   ============================================================ */

.card-head {
  position: relative;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: space-between;
}

.card-number {
  font-size: 10px;

  font-weight: 600;

  letter-spacing: 0.14em;

  color: var(--text-muted);

  transition:
    color 0.35s ease;
}

.card:hover .card-number {
  color: var(--accent);
}


/* ============================================================
   Arrow
   ============================================================ */

.card-arrow {
  position: absolute;

  top: 0;
  right: 0;

  font-size: 20px;

  line-height: 1;

  color: var(--text-muted);

  transition:
    transform 0.45s
      cubic-bezier(0.22, 1, 0.36, 1),

    color 0.3s ease;
}

.card:hover .card-arrow {
  color: var(--accent);

  transform:
    translate(
      4px,
      -4px
    );
}


/* ============================================================
   Card Content
   ============================================================ */

.card-content {
  position: relative;

  z-index: 2;

  padding-top: 30px;

  /*
   * 默认内容保持紧凑
   */
  transform:
    translateX(0);

  transition:
    transform 0.5s
      cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover .card-content {
  transform:
    translateX(2px);
}


/* ============================================================
   Category
   ============================================================ */

.card-category {
  display: block;

  margin-bottom: 15px;

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 0.11em;

  white-space: nowrap;

  color: var(--accent);

  opacity: 0;

  transform:
    translateX(-12px);

  transition:
    opacity 0.35s ease 0.10s,

    transform 0.45s
      cubic-bezier(0.22, 1, 0.36, 1)
      0.10s;
}

.card:hover .card-category {
  opacity: 1;

  transform:
    translateX(0);
}


/* ============================================================
   Title
   ============================================================ */

.card-title {
  margin: 0;

  font-family: var(--serif);

  font-size: 34px;

  font-weight: 600;

  line-height: 1.2;

  letter-spacing: -0.065em;

  white-space: nowrap;

  transition:
    transform 0.4s
      cubic-bezier(0.22, 1, 0.36, 1);
}


/* ============================================================
   Description
   ============================================================ */

.card-desc {
  max-width: 220px;

  margin:
    15px 0
    0;

  font-family: var(--serif);

  font-size: 13px;

  line-height: 1.9;

  color: var(--text-secondary);

  /*
   * 默认隐藏
   */
  opacity: 0;

  transform:
    translateX(-15px);

  transition:
    opacity 0.4s ease 0.16s,

    transform 0.5s
      cubic-bezier(0.22, 1, 0.36, 1)
      0.16s;
}

.card:hover .card-desc {
  opacity: 1;

  transform:
    translateX(0);
}


/* ============================================================
   Project
   ============================================================ */

.card-project {
  display: inline-block;

  margin-top: 18px;

  padding:
    4px
    9px;

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 0.08em;

  color: var(--accent);

  background:
    var(--accent-soft);

  border-radius: 3px;

  opacity: 0;

  transform:
    translateX(-12px);

  transition:
    opacity 0.4s ease 0.22s,

    transform 0.45s
      cubic-bezier(0.22, 1, 0.36, 1)
      0.22s;
}

.card:hover .card-project {
  opacity: 1;

  transform:
    translateX(0);
}


/* ============================================================
   Bottom Line
   ============================================================ */

.card::before {
  content: "";

  position: absolute;

  left: 23px;
  right: 23px;

  bottom: 22px;

  height: 1px;

  background:
    var(--line);

  transition:
    background 0.35s ease;
}

.card:hover::before {
  background:
    rgba(163, 72, 72, 0.17);
}


/* ============================================================
   Decorative Circle
   ============================================================ */

.card::after {
  content: "";

  position: absolute;

  width: 150px;
  height: 150px;

  right: -65px;
  bottom: -65px;

  border:
    1px solid
    rgba(163, 72, 72, 0.10);

  border-radius: 50%;

  opacity: 0;

  transform:
    scale(0.65);

  transition:
    opacity 0.45s ease,

    transform 0.7s
      cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover::after {
  opacity: 1;

  transform:
    scale(1);
}


/* ============================================================
   Featured
   ============================================================ */

.card-featured {
  background:
    rgba(255, 249, 248, 0.72);

  border-color:
    rgba(163, 72, 72, 0.14);
}

.card-featured:hover {
  background:
    rgba(255, 249, 248, 0.97);
}


/* ============================================================
   Footer
   ============================================================ */

.footer {
  padding:
    26px 0
    38px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  font-size: 9px;

  font-weight: 500;

  letter-spacing: 0.15em;

  color: var(--text-muted);
}

.footer-dot {
  color: var(--accent);
}


/* ============================================================
   Tablet
   ============================================================ */

@media (max-width: 900px) and (min-width: 769px) {

  .page {
    width:
      calc(100% - 48px);
  }

  .hero {
    padding:
      70px 0
      60px;
  }

  .grid {
    display: grid;

    grid-template-columns:
      repeat(2, 1fr);

    gap: 12px;
  }

  .card {
    height: 270px;

    flex: none;
  }

  .card:hover {
    transform:
      translateY(-4px);
  }

  .grid:has(.card:hover) .card:not(:hover) {
    flex-grow: initial;

    opacity: 1;

    transform: none;
  }

}


/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 768px) {

  .page {
    width:
      calc(100% - 32px);
  }


  /* Header */

  .nav {
    height: 78px;
  }

  .nav-logo {
    width: 130px;
  }

  .nav-tag {
    display: none;
  }


  /* Hero */

  .hero {
    padding:
      55px 0
      50px;
  }

  .hero-title {
    font-size:
      clamp(
        42px,
        12vw,
        54px
      );
  }

  .hero-sub {
    margin-top: 20px;

    font-size: 14px;
  }

  .mobile-break {
    display: block;
  }


  /* Navigation */

  .navigation {
    padding-bottom: 45px;
  }


  /* Grid */

  .grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 10px;
  }


  /* Cards */

  .card,
  .card:hover {
    height: 210px;

    flex: none;

    width: 100%;

    padding:
      22px
      20px;

    transform: none;

    opacity: 1;

    background:
      var(--card);

    box-shadow:
      0 5px 20px
      rgba(32, 29, 25, 0.035);
  }


  .grid:has(.card:hover) .card:not(:hover) {
    flex-grow: initial;

    opacity: 1;

    transform: none;
  }


  /*
   * 手机端直接展示内容
   */

  .card-content {
    transform: none;
  }

  .card-category {
    opacity: 1;

    transform: none;
  }

  .card-desc {
    opacity: 1;

    transform: none;
  }

  .card-project {
    opacity: 1;

    transform: none;
  }


  .card::after {
    opacity: 1;

    transform:
      scale(0.8);
  }


  .card-title {
    font-size: 30px;
  }

  .card-desc {
    max-width: 270px;

    font-size: 13px;
  }


  /* Footer */

  .footer {
    padding-bottom: 30px;
  }
}


/* ============================================================
   Small Mobile
   ============================================================ */

@media (max-width: 480px) {

  .hero-title {
    font-size: 40px;
  }

  .hero-sub {
    font-size: 13px;
  }

  .card,
  .card:hover {
    height: 205px;
  }

  .card-title {
    font-size: 29px;
  }
}