/* ========================================
   Mondrian Style - Chinese Version
   ======================================== */

:root {
   /* Mondrian Colors */
   --mondrian-red: #D32F2F;
   --mondrian-blue: #1565C0;
   --mondrian-yellow: #FFC107;
   --mondrian-black: #212121;
   --mondrian-white: #FEFEFE;
   --mondrian-cream: #FAF9F6;

   /* Border */
   --border-width: 10px;
   --border-color: #212121;
   --page-margin: 100px;

   /* Typography */
   --font-serif: 'Noto Serif SC', serif;
   --font-sans: 'Noto Sans SC', sans-serif;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html,
body {
   height: 100%;
}

body {
   font-family: var(--font-sans);
   background: var(--mondrian-cream);
   color: var(--mondrian-black);
   line-height: 1.8;
   min-height: 100vh;
   padding: var(--page-margin);
}

/* ========================================
   Language Switcher (inside About block)
   ======================================== */
.block-about {
   position: relative;
}

.lang-switch {
   position: absolute;
   top: 16px;
   right: 16px;
   z-index: 10;
   width: 44px;
   height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--mondrian-black);
   color: var(--mondrian-white);
   text-decoration: none;
   font-family: var(--font-sans);
   font-weight: 600;
   font-size: 0.9rem;
   letter-spacing: 1px;
   transition: all 0.3s ease;
}

.lang-switch:hover {
   background: var(--mondrian-yellow);
   color: var(--mondrian-black);
   transform: scale(1.05);
}

/* ========================================
   Mondrian Grid Layout - Asymmetric
   ======================================== */
.mondrian-grid {
   display: grid;
   grid-template-columns: 1.4fr 0.8fr 0.6fr 1.2fr;
   grid-template-rows: minmax(300px, auto) minmax(180px, auto) minmax(180px, auto) minmax(160px, auto);
   gap: var(--border-width);
   background: var(--border-color);
   min-height: calc(100vh - var(--page-margin) * 2 - 40px);
}

/* ========================================
   Block Base Styles
   ======================================== */
.block {
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   padding: 40px;
   position: relative;
}

.block-content {
   width: 100%;
}

.block h1 {
   font-family: var(--font-sans);
   font-size: 2rem;
   font-weight: 400;
   margin-bottom: 12px;
   letter-spacing: 3px;
}

.block h2 {
   font-family: var(--font-sans);
   font-size: 1.4rem;
   font-weight: 500;
   margin-bottom: 20px;
   letter-spacing: 1px;
}

.block p {
   font-family: var(--font-sans);
   font-size: 1rem;
   line-height: 1.9;
   letter-spacing: 0.3px;
}

.block ul {
   font-family: var(--font-sans);
}

/* ========================================
   Color Blocks
   ======================================== */
.block-red {
   background: var(--mondrian-red);
   color: var(--mondrian-white);
}

.block-blue {
   background: var(--mondrian-blue);
   color: var(--mondrian-white);
}

.block-yellow {
   background: var(--mondrian-yellow);
   color: var(--mondrian-black);
}

.block-black {
   background: var(--mondrian-black);
   color: var(--mondrian-white);
}

.block-white,
.block-white-large {
   background: var(--mondrian-white);
   color: var(--mondrian-black);
}

.block-red-small {
   background: var(--mondrian-red);
}

.block-blue-small {
   background: var(--mondrian-blue);
}

.block-yellow-small {
   background: var(--mondrian-yellow);
}

/* ========================================
   Grid Placement - Mondrian Asymmetric Style
   ======================================== */

/* Large red block - spans 2 rows */
.block-hero {
   grid-column: 1 / 2;
   grid-row: 1 / 3;
}

/* Small yellow accent - top */
.block-research {
   grid-column: 2 / 3;
   grid-row: 1 / 2;
}

/* White block - larger area, spans row 1 only */
.block-about {
   grid-column: 3 / 5;
   grid-row: 1 / 2;
}

/* Yellow research - spans 2 rows to merge with deco below */
.block-research {
   grid-column: 2 / 3;
   grid-row: 1 / 3;
}

/* Hide the decorative yellow since research spans 2 rows now */
.block-deco-1 {
   display: none;
}

/* Blue block - below about, spans 2 columns */
.block-education {
   grid-column: 3 / 5;
   grid-row: 2 / 3;
}

/* White publications - spans 2 columns */
.block-publications {
   grid-column: 1 / 3;
   grid-row: 3 / 4;
}

/* Black contact - square shape */
.block-contact {
   grid-column: 3 / 4;
   grid-row: 3 / 4;
   aspect-ratio: 1;
}

/* Yellow awards */
.block-awards {
   grid-column: 4 / 5;
   grid-row: 3 / 5;
}

/* Decorative blue (no text) */
.block-deco-2 {
   display: block;
   grid-column: 1 / 2;
   grid-row: 4 / 5;
}

/* White footer center */
.block-footer-center {
   grid-column: 2 / 4;
   grid-row: 4 / 5;
}

.block-footer-left,
.block-footer-right {
   display: none;
}


/* ========================================
   Hero Block
   ======================================== */
.block-hero .block-content {
   text-align: center;
   padding-top: 150px;
}

.motto {
   font-family: var(--font-sans);
   font-style: italic;
   font-size: 0.9rem;
   line-height: 1.8;
   opacity: 0.85;
   margin-bottom: 120px;
   padding: 0 12px;
   letter-spacing: 1px;
}

.motto-source {
   display: block;
   font-size: 0.8rem;
   opacity: 0.7;
   margin-top: 8px;
}

.avatar {
   width: 180px;
   height: 180px;
   margin: 0 auto 48px;
   border-radius: 50%;
   overflow: hidden;
   border: 5px solid var(--mondrian-white);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

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

.subtitle {
   font-size: 1.2rem;
   opacity: 0.95;
   margin-bottom: 8px;
   letter-spacing: 2px;
}

.affiliation {
   font-size: 1rem;
   opacity: 0.85;
   letter-spacing: 1px;
}

/* ========================================
   Research Block
   ======================================== */
.research-list {
   list-style: none;
}

.research-list li {
   padding: 16px 0;
   font-size: 1.2rem;
   font-weight: 500;
   letter-spacing: 1px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.research-list li:last-child {
   border-bottom: none;
}

.skill-desc {
   display: block;
   font-size: 0.75rem;
   font-weight: 400;
   opacity: 0.7;
   margin-top: 6px;
   line-height: 1.5;
   font-style: italic;
}

/* ========================================
   Education Block
   ======================================== */
.block-education .block-content {
   display: flex;
   gap: 48px;
   flex-wrap: wrap;
}

.edu-item {
   flex: 1;
   min-width: 200px;
   padding: 20px 24px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 4px;
}

.edu-item .year {
   display: block;
   font-size: 0.9rem;
   opacity: 0.75;
   margin-bottom: 8px;
   letter-spacing: 1px;
}

.edu-item .degree {
   display: block;
   font-size: 1.15rem;
   font-weight: 600;
   margin-bottom: 4px;
   letter-spacing: 1px;
}

.edu-item .school {
   display: block;
   font-size: 1rem;
   opacity: 0.9;
}

/* ========================================
   Publications Block
   ======================================== */
.pub-list {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.pub-item {
   padding: 12px;
   background: rgba(0, 0, 0, 0.03);
   border-left: 3px solid var(--mondrian-red);
}

.pub-title {
   display: block;
   font-size: 0.95rem;
   font-weight: 500;
   margin-bottom: 4px;
}

.pub-venue {
   font-size: 0.85rem;
   color: #666;
   font-style: italic;
}

/* ========================================
   Contact Block
   ======================================== */
.contact-links {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
}

.contact-links a {
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--mondrian-white);
   color: var(--mondrian-black);
   font-size: 1.3rem;
   transition: all 0.3s ease;
}

.contact-links a:hover {
   background: var(--mondrian-yellow);
   transform: scale(1.1);
}

.address {
   margin-top: 16px;
   font-size: 0.8rem;
   opacity: 0.8;
   color: var(--mondrian-white);
}

/* ========================================
   Awards Block
   ======================================== */
.block-awards ul {
   list-style: none;
}

.block-awards li {
   padding: 8px 0;
   font-size: 0.95rem;
   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.block-awards li:last-child {
   border-bottom: none;
}

/* ========================================
   Footer
   ======================================== */
.mondrian-footer {
   text-align: center;
   padding: 24px var(--page-margin);
   background: transparent;
   color: var(--mondrian-black);
   font-size: 0.85rem;
   font-family: var(--font-sans);
   opacity: 0.6;
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 1024px) {
   .mondrian-grid {
      grid-template-columns: repeat(6, 1fr);
   }

   .block-hero {
      grid-column: 1 / 4;
      grid-row: 1 / 2;
   }

   .block-research {
      grid-column: 4 / 7;
      grid-row: 1 / 2;
   }

   .block-about {
      grid-column: 1 / 7;
      grid-row: 2 / 3;
   }

   .block-education {
      grid-column: 1 / 4;
      grid-row: 3 / 4;
   }

   .block-publications {
      grid-column: 4 / 7;
      grid-row: 3 / 5;
   }

   .block-contact {
      grid-column: 1 / 4;
      grid-row: 4 / 5;
   }

   .block-awards {
      grid-column: 1 / 4;
      grid-row: 5 / 6;
   }

   .block-deco-1,
   .block-deco-2 {
      display: none;
   }
}

@media (max-width: 768px) {
   :root {
      --border-width: 6px;
      --page-margin: 24px;
   }

   .mondrian-grid {
      grid-template-columns: 1fr 1fr;
   }

   .block {
      padding: 24px;
   }

   .block h1 {
      font-size: 1.8rem;
   }

   .block h2 {
      font-size: 1.2rem;
   }

   .block-hero {
      grid-column: 1 / 3;
      grid-row: 1 / 2;
   }

   .block-research {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
   }

   .block-about {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
   }

   .block-education {
      grid-column: 1 / 3;
      grid-row: 3 / 4;
   }

   .block-publications {
      grid-column: 1 / 3;
      grid-row: 4 / 5;
   }

   .block-contact {
      grid-column: 1 / 2;
      grid-row: 5 / 6;
   }

   .block-awards {
      grid-column: 2 / 3;
      grid-row: 5 / 6;
   }

   .avatar {
      width: 80px;
      height: 80px;
   }
}

@media (max-width: 480px) {
   :root {
      --page-margin: 16px;
   }

   .mondrian-grid {
      grid-template-columns: 1fr;
   }

   .block-hero,
   .block-research,
   .block-about,
   .block-education,
   .block-publications,
   .block-contact,
   .block-awards {
      grid-column: 1;
      grid-row: auto;
   }

   .lang-switch {
      top: calc(var(--page-margin) + 8px);
      right: calc(var(--page-margin) + 8px);
      width: 40px;
      height: 40px;
      font-size: 0.8rem;
   }
}